Question on how to hide/show divs onClick

[mslfire]

Hi, Im trying to learn how to hide one div and show another div onClick

 

I know the following code is wrong but I think you will get what I would like to do

 

pic2 is one div id

pic is another div id

www.leism eister.com/hidediv.htm -remove space

[administrator]

Hi,

 

First, I moved this to the Javascript forum because this is all about Javascript. But it is also a little about Dreamweaver because you are using Dreamweaver generated Javascript code.

 

-

 

You have to call both functions in the same event-handler. An example of an even-handler is:

 

onClick. 

 

An example of a function is:

 

MM_showHideLayers('pic2','','show')

 

So in your case, you would have:

 

onClick="MM_showHideLayers('pic2','','show'); MM_showHideLayers('pic','','hide')"

 

Now, did you notice the semicolon between the function names?

 

;

 

That is like a period between sentences. You need to add that if you are calling/using multiple functions with a single event. In this case, the event was: onClick.

 

I hope that helps,

 

Stefan

[mslfire]

Sorry about posting in wrong area. Did not know that this is Javascript. Is Javascript the same as Action Script? I have a Action Script book kicking around that I could use to help me understand behaviors.

 

Yes this did help should get me going..Thanks

[JBall]

Javascript and Actionscript are two different beasts.

[mslfire]

Javascript and Actionscript are two different beasts

Ok tks

FYI-I learned that you can include the 'function?' of different divs together in the brackets()

pic2

 

Does anyone know how to get the div to stay visible onClick when you are using onmouseout and onmouseover commands

I want to be able to click the link and the div stays visible...

 

dog

 

Also is there a good website tutorial on JavaScript/dreamweaver on showhide layers?

[administrator]

Is Javascript the same as Action Script? I have a Action Script book kicking around that I could use to help me understand behaviors.

Hi,

 

As was said before, Actionscript is different, but they are both based on the same language, so learning Actionscript will help you with Javascript and vice versa.

 

You can learn basic Actionscript 2 here: www.killeractionscript.com

 

And you can learn the basics of Javascript here: Javascript Tutorial

 

Stefan

[administrator]

Also is there a good website tutorial on JavaScript/dreamweaver on showhide layers?

 

I cover Dreamweaver behaviors in my video tutorial on Dreamweaver CS3

 

Stefan

[lwsimon]

Here's a rough, untested version of how I would do this, using only raw Javascript.

 

HTML fragment:

Div 1 content
Div 2 content

 

Javascript

function initPage()
{
  document.getElementById('div1').style.display = 'block';
  document.getElementById('div2').style.display = 'none';
}
window.onload = initPage;

function toggleDivs()
{
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  if( div1.style.display == 'block' )
  {
     div1.style.display = 'none';
     div2.style.display = 'block';
  }
  else 
  {
     div1.style.display = 'block';
     div2.style.display = 'none';
  }
}

 

..and here's the same functionality using the jQuery framework:

 

 

$(function() {
  $('div#div1').click(toggleDivs).show();
  $('div#div2').click(toggleDivs).hide();
});

function toggleDivs()
{
  $('div#div1').toggle();
  $('div#div2').toggle();
}

[mslfire]

lwsimon the code does not seem to work right but that's okay

 

Is the use of hide/show layers a good way to provide navigation for a website? (I dont like when a website has to load another page when people click a link seems redundant when most of the content does not change)

 

I did read the 'Javascript Tutorial'. Now if I understand it correctly Dreamweaver creates the code (function) for the Javascript (MM_showHideLayers).

 

Are functions created individually (by programmer or program) or are there also master type functions (like in php) that control different things/actions? If there are is there a list of them?

 

The tutorial spoke of something called DOM and object orientated programing but did not cover these two terms.

[lwsimon]

lwsimon the code does not seem to work right but that's okay

 

Is the use of hide/show layers a good way to provide navigation for a website? (I dont like when a website has to load another page when people click a link seems redundant when most of the content does not change) [1]

 

I did read the 'Javascript Tutorial'. Now if I understand it correctly Dreamweaver creates the code (function) for the Javascript (MM_showHideLayers). [2]

 

Are functions created individually (by programmer or program) or are there also master type functions (like in php) that control different things/actions? If there are is there a list of them?[3]

 

The tutorial spoke of something called DOM and object orientated programing but did not cover these two terms.[4]

 

[1]

I revised the code so that it *should* work, but haven't tested it in a page.

 

[2]

showing and hiding layers can work, but it is better to change the page. The reason? Well, there are a few. First, search engines visit your site, and see only one page. Second, if a user goes to you contacts page, and bookmarks it, when they go back, they'll get the homepage again. Third, what happens when the user has javascript turned off? Or views the page from a mobile phone? How about a blind user using a screenreader? Or a user who has difficulty using a mouse, and uses the tab key on their keyboard to move from field to field?

 

The bottom line is this - if your page is lightweight and properly built, there should be very little delay between pageloads, as most of the information will be cached on the client's machine between requests. This is one thing to do the traditional way, with links between pages.

 

 

[3]

I'm not quite sure what you mean by this, but I'll explain what I can and see if it helps.

 

A function is nothing more than a block of code that is executed at a certain point. There are functions built into the objects inherent in javascript. A function that is a part of an object is called a method. An example of a method in javascript is .length(), which is a member of the Array object. You can take an array and find its length like this:

 

lengthOfArray = arrayVar.length

 

This segues into one of our next topics, object-oriented programming.

 

[4] Two topics on this one. The first is object-oriented programming. This is really an extensive topic, and you should probably do quite a bit of reading on the subject to get a good grasp on it. I recommend "Code Complete" by Steve McConnell for a good introduction to OOP concepts and good programming practices in general. Essentially, an object is a collection of functions (called methods) and variables.

 

The DOM (Document Object Model) is a collection of objects that represent a document. It starts with the document node, which (in the case of a web page) has an HTML node under it, which has a

node and a node under that. This goes all the way down to the individual tags on the page, and the text they contain. For a visual representation of this, download Firebug for Firefox. It has a DOM browser, which gives you a good feel for what's really going on on the page.

 

 

And with that, I'm off to bed If I've not answered something, feel free to post back and I'll have another whack at it later tonight or tomorrow.

[PicnicTutorials]

This should get you up and running. http://www.visibilityinherit.com/code/swap-panels.php

[mslfire]

Thanks for your help all. Still looking at the info...Just a quick note -Eric- your site is a great help. I bookmark it as a reference for myself!

Edited December 23, 2008 by mslfire

[PicnicTutorials]

Thanks for your help all. Still looking at the info...Just a quick note -Eric- your site is a great help. I bookmark it as a reference for myself!

 

Thanks bro!

[squeezedjuicybits]

Click Me (div one (yellow))
Click Me (div two (blue))
Google.co.uk

---

Toggle All On
Toggle All Off
Invert Toggle

[lwsimon]

squeezedjuicybits:

 

Your jQuery attaches the event handler to every link in the document, then parses the whole document to look to the attributes of each of those elements have when the link is clicked. This is inefficient, and could delay further script execution on some pages.

 

Also, you've used the

$('#box_' + ... )

syntax a bit, and that is generally considered poor form. Be as selective as possible with those selectors, so jQuery has fewer comparisons on the back end. Instead of selecting using

$('#someID')

it is better practice (and faster) to do

$('div#someID')

 

I posted a short bit of jQuery above that should do what the OP is trying to do, in less than 10 lines of code.

 

ETA: Your discussion of graceful degradation is spot on. I tend to be in the "progressive enhancement" crowd, but it is realyl two ways of saying the same thing. Also, I've not seen you around - welcome to KS!

[squeezedjuicybits]

>> Your jQuery attaches the event handler to every link in the document

 

The second method does so yes. The first method of attaching click event handlers to hyperlinks does not. I was attempting to show different methods for achieving a similar effect. However I understand where you are coming from on this and agree it is very inefficient.

 

>> Also, you've used the

$('#box_' + ... )

 

I agree it is fairly poor, however I didn't see the harm for this example.

 

>>it is better practice (and faster) to do

$('div#someID')

 

I didn't realise there was a performance benefit to that. I've seen official examples that include and exclude that step. I do so love conformity. Cheers for the heads up though.

 

>> I posted a short bit of jQuery above that should do what the OP is trying to do, in less than 10 lines of code.

True, I did notice your .toggle() event. There is always more than one way to skin a cat though.

 

>> Your discussion of graceful degradation is spot on. I tend to be in the "progressive enhancement" crowd, but it is realyl two ways of saying the same thing.

 

Haha, yeah. I'm becoming more and more of a fan of safe degradation. Come across a fair number of sites that don't degrade nicely and render the majority of the site useless.

 

>> Also, I've not seen you around - welcome to KS!

 

Thanks.

[lwsimon]

I read over my post, and as usual, I was a bit short I get that way posting from work, but I mean well.

 

As for efficient selection, here's a quote from John Resig's blog:

 

There doesn't seem to be a correlation between performance and selector use. For example, ".class" is far more popular than "tag.class" even though the second one is much more performant.

 

He goes on to say its not really a big deal. I'm just like that --- when something is demonstrably better, even if only but a small margin, I do it. If I cut ~25ms of a selector, at the end of my 500-line script, I've saved some significant time. I hate refactoring, so this is a good thing

[squeezedjuicybits]

>> I read over my post, and as usual, I was a bit short I get that way posting from work, but I mean well.

 

I assumed it was constructive criticism, so that is how it was interpreted.

 

>> even if only but a small margin, I do it

 

Agreed. It's the small performance increases that cause the major performance increase.