By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,717 Members | 1,276 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,717 IT Pros & Developers. It's quick & easy.

noscript, onload or something else?

P: 9
Hi,
I'm a novice... just trying figure out something simple, I'm sure.

I've got a script within my <head> tags to show/hide divs on click:

Expand|Select|Wrap|Line Numbers
  1. function showHide(divID, imgID){
  2.     if (document.getElementById(divID).style.display == "none") {
  3.         document.getElementById(divID).style.display = "block";
  4.         document.getElementById(imgID).src = "http://bytes.com/images/collapse.gif";
  5.     } else {
  6.         document.getElementById(divID).style.display = "none";
  7.         document.getElementById(imgID).src = "http://bytes.com/images/expand.gif";
  8.     }
  9. }
Using it as follows:

Expand|Select|Wrap|Line Numbers
  1. <div class="areacode"><img id="416image" src="http://bytes.com/images/expand.gif" onclick="showHide('416',this.id)"/> AREA CODE 416</div>
  2.  
  3. <div id="416" style="display:none">
etc.

I was going to use <noscript> to expand all of the divs by default if the user had javascript disabled, but I've read that's the wrong way to go, so then I was going to reverse the layout to have the divs expanded by default (i.e. display:block) and then use script to collapse them on page load.

But I can't figure out if I can use this with onload="showHide()" or something else. I want to be able to collapse all of the divs when the page loads, but my script is designed to expand/collapse an individual div on click. I've tried a few things but I'm terrible with syntax and I keep getting errors.

Suggestions?
Aug 11 '09 #1
Share this Question
Share on Google+
15 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you can get all divs by a common class name and apply the function to it. needs some minor change in the code to reflect the use of this.

(out of time…)
Aug 11 '09 #2

P: 9
Thanks, Dormilich.

I was able to search out some examples using className and I got it to work.
Aug 12 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
keep in mind that document.getElementsByClassName() is not fully supported in every version of IE.
Aug 12 '09 #4

P: 9
I ended up using the code below, calling HideDiv and ToggleDivImage onload, but only hiding the divs on load (function toggledisplay) is working. The function toggleimage isn't, though the alerts I put in place verify that the variable "image" ends up getting changed from collapse.gif to expand.gif. Yet the result isn't reflected on the page (i.e. collapse.gif still shows).

What am I doing wrong?


Expand|Select|Wrap|Line Numbers
  1. function toggledisplay(elem) {
  2. visibility = elem.style;
  3. if(visibility.display=='block')
  4. visibility.display = 'none';
  5. }
  6.  
  7. function toggleimage(elem) {
  8. image = elem.src;
  9. if(image=='collapse.gif')
  10. alert("Should replace image");
  11. image = 'expand.gif';
  12. alert(image);
  13. }
  14.  
  15. function HideDiv() {
  16. var boxes = document.getElementsByTagName("div");
  17. for(var i=0;i<boxes.length;i++) 
  18. if(boxes[i].className.match("hidediv")) toggledisplay(boxes[i]);
  19. }
  20.  
  21. function ToggleDivImage() {
  22. var boxes = document.getElementsByTagName("img");
  23. for(var i=0;i<boxes.length;i++) 
  24. if(boxes[i].className.match("changeimage")) toggleimage(boxes[i]);
  25. }
Aug 12 '09 #5

P: 9
Anyone have any ideas on what I need to do to get the image swapped from collapse to expand during body onload?
Aug 18 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
@UberGirl
I don’t recommend meddling with the rendering during page load. wait until it’s done and you can be sure that everything is in place (meaning, you can’t do something with images that haven’t been loaded yet).—but that’s probably picking on words…

could you explain to me what the javascript is supposed to do (there is no event related code shown) (what function to call when)?
Aug 18 '09 #7

P: 9
okay - I think I understand. so I need to try to swap them after they load - which would mean calling a script after that point in the body or at the end of the body? sorry - I really am new at this.
Aug 18 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
@UberGirl
you can either call that script at the end of the body or use the body’s onload event, the latter having the advantage that you can place it in an external file.

you can even call it after the point in the body though I don’t recommend that, because you may want to access html elements later in the body (which will obviously not yet exists). if you immediately need to show the result (aka during load) you should think of appropriate default values for the html elements.
Aug 18 '09 #9

P: 9
But my problem is that the default values (i.e. if the user has scripts disabled) needs to be the collapse image, which matches the default value of the expanded divs.

I thought you said I shouldn't do it onload because the page hasn't loaded yet?? I've tried the onload, and, like I said, the variable gets swapped appropriately but it doesn't show up on the page correctly. I figured there was just something I was missing to apply the new variable to the actual image url.

Thanks for trying to help. Don't spend your time on it. I'll figure it out (I think).
Aug 18 '09 #10

Dormilich
Expert Mod 5K+
P: 8,639
@UberGirl
“during page load” (the code executed by the parser) and “onload” (the event taking place immediately after the html parser has finished) are two very different things, though they seem to be similar. when only describing something, great care is to be taken because the other one (meaning me) has only this bit of information. (e.g. I have no idea, what the rest of your code is, so I have to guess from your desciption)

@UberGirl
a common mistake to do…

@UberGirl
I can’t approve of that attitude. I’m proceeding!
Aug 18 '09 #11

P: 9
Okay - well thanks! So, here's what's not working...


This function is being called onload:

Expand|Select|Wrap|Line Numbers
  1. function ToggleDivImage() { 
  2. var boxes = document.getElementsByTagName("img"); 
  3. for(var i=0;i<boxes.length;i++)  
  4. if(boxes[i].className.match("ti")) toggleimage(boxes[i]); 

Which calls this one:

Expand|Select|Wrap|Line Numbers
  1. function toggleimage(elem) { 
  2. image = elem.src; 
  3. if(image=='collapse.gif') 
  4. alert("Should replace image"); 
  5. image = 'expand.gif'; 
  6. alert(image); 
  7. }
As a result, I'm getting alerts telling me that it found collapse.gif and changed the variable "image" to expand.gif.


So now how do I get that new variable applied to my images in this html code?

Expand|Select|Wrap|Line Numbers
  1. <img class="ti" src="images/collapse.gif" />

I'm guessing I need something to apply the new value of the variable to the src, but I don't know exactly how to do that.
Aug 18 '09 #12

Dormilich
Expert Mod 5K+
P: 8,639
@UberGirl
simply by redefining the src attribute.

Expand|Select|Wrap|Line Numbers
  1. function toggleimage(elem) 
  2. {
  3. // this way you cannot mix up = and == 
  4.     if ('collapse.gif' == elem.src) 
  5.         var image = 'expand.gif'; 
  6. // to make it toggle
  7.     else if ('expand.gif' == elem.src)
  8.         var image = 'collapse.gif':
  9. // change the image
  10.     elem.src = image;
  11. }
from here it’s not far from using the this keyword…

NOTE:
Expand|Select|Wrap|Line Numbers
  1. function toggleimage(elem) { 
  2. image = elem.src; 
  3. if(image=='collapse.gif') 
  4. alert("Should replace image"); // end of if ()
  5. image = 'expand.gif'; // <--- this is executed regardless of the if condition
  6. alert(image); 
  7. }
Aug 19 '09 #13

P: 9
Dormilich, you rock!

Thanks a lot - it's working great now. The page is working with or without scripts enabled. I knew it was something simple that I wasn't doing (or doing wrong). I didn't use the else if toggle, as it wasn't needed.

Your help is MUCH appreciated!

Thanks again!
UberGirl
Aug 19 '09 #14

Dormilich
Expert Mod 5K+
P: 8,639
@UberGirl
then you should rename it, because it does not toggle the image (the next one reading your code may get confused by this)

@UberGirl
why not using
Expand|Select|Wrap|Line Numbers
  1. var boxes = document.getElementsByClassName("ti");
?
Aug 19 '09 #15

P: 9
@Dormilich
Well, it's checking the default image (collapse.gif) to see if it's there (which it will be when the page is first loaded). So, if the user has scripts enabled, it changes to the image to expand.gif and collapses all of the divs - so that the expandable tree is in a fully collapsed state to start. But if the user is does not have scripts enabled, nothing happens and the collapse.gif remains with the fully expanded tree.

I have a separate function that does the following on click (not on load):
1) toggles the image from expand.gif to collapse.gif (and vice versa),
2) expands/collapses the div, and
3) jumps to the div.

@Dormilich
Um... I got the classname.match method from an example somewhere. I think I used it because I needed the function to check for all existing instances of the image and cycle through them. Your way looks simpler if it does the same thing, but I had tried various methods and the one I used worked so I left well enough alone. :) Plus I remember reading something about IE 7 having issues with getElementsByClassName, though I suppose it may have the same issues with mine. <shrug> I have no idea.


HERE'S ALL OF THE CODE WITH COMMENTS IN CASE ANYONE HAS USE OF IT. SORRY IF IT'S NOT THE MOST EFFICIENT CODE, BUT IT WORKED FOR ME:

This is in my head tags:

Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. <!-- The following 5 functions all are in place to collapse the divs when a user has javascript enabled.  -->
  4.  
  5. <!-- This function is called onload and calls toggledisplay for all divs with class 'ac' -->
  6. function HideDiv1() {
  7. var boxes = document.getElementsByTagName("div");
  8. for(var i=0;i<boxes.length;i++) 
  9. if(boxes[i].className.match("ac")) toggledisplay(boxes[i]);
  10. }
  11.  
  12. <!-- This function is called onload and calls toggledisplay for all divs with class 'tn'.  I didn't know how to do both classes in the same function because I'm a newbie.  Probably easy with a comma somewhere.  But the second class (tn) is indented more than the first.  -->
  13. function HideDiv2() {
  14. var boxes = document.getElementsByTagName("div");
  15. for(var i=0;i<boxes.length;i++) 
  16. if(boxes[i].className.match("tn")) toggledisplay(boxes[i]);
  17. }
  18.  
  19. <!-- This function is called onload and calls toggleimage for all images with class 'ti'. -->
  20. function ChangeImage() {
  21. var boxes = document.getElementsByTagName("img");
  22. for(var i=0;i<boxes.length;i++) 
  23. if(boxes[i].className.match("ti")) toggleimage(boxes[i]);
  24. }
  25.  
  26. <!-- This function hides the divs found in HideDiv1 and HideDiv2. -->
  27. function toggledisplay(elem) {
  28. visibility = elem.style;
  29. if(visibility.display=='block')
  30. visibility.display = 'none';
  31. }
  32.  
  33. <!-- This function changes the image from minus sign (collapse.gif) to plus sign (expand.gif) for all images found in ChangeImage. -->
  34. function toggleimage(elem) { 
  35.     if ('http://www.yourdomainhere.com/images/collapse.gif' == elem.src)  // Note: I had to include the entire URL of the image, including the domain, to get this to work.
  36.         var image = 'http://www.yourdomainhere.com/images/expand.gif';  
  37.     elem.src = image; 
  38.  
  39. <!-- This function is not called onload. It's called onclick. It does three things: 1) Hides/shows the div, 2) toggles the plus/minus image, and 3) jumps to the div when showing it (expanding). -->
  40. function showHide(divID, imgID){
  41.         var JUMPDIV = new String("#_" + divID);
  42.     if (document.getElementById(divID).style.display == "none") {
  43.         document.getElementById(divID).style.display = "block";
  44.         document.getElementById(imgID).src = "images/collapse.gif";
  45.          window.location.hash = JUMPDIV;
  46.     } else {
  47.         document.getElementById(divID).style.display = "none";
  48.         document.getElementById(imgID).src = "images/expand.gif";
  49.     }
  50. }
  51.  
  52. </script>


This is how I used it in various places in the page:

Expand|Select|Wrap|Line Numbers
  1. <body onload="HideDiv1(); HideDiv2(); ChangeImage();">
  2.  
  3. <a name="_div1"></a>
  4. <div class="class1"><img id="image1" class="ti" src="images/collapse.gif" onclick="showHide('div1',this.id);" /> DIV ONE</div>
  5.  
  6. <div id="div1" class="ac" style="display:block">
  7. <ul>
  8. <li><a name="_subdiv1"></a><img id="subimage1"  class="ti" src="images/collapse.gif" onclick="showHide('subdiv1',this.id);" align="absmiddle" width="14" height="14" /> SUB DIV ONE
  9.  <div class="tn" id="subdiv1" style="display:block"> SUB DIV ONE INFO </div>
  10. </li>
  11. </ul>
  12. </div>

Hope this helps someone.

UberGirl
Aug 19 '09 #16

Post your reply

Sign in to post your reply or Sign up for a free account.