noscript, onload or something else?

8,658

Expert Mod 8TB

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

Thanks, Dormilich.

I was able to search out some examples using className and I got it to work.

Aug 12 '09 #3

8,658

Expert Mod 8TB

keep in mind that document.getElementsByClassName() is not fully supported in every version of IE.

Aug 12 '09 #4

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

 function toggledisplay(elem) {

visibility = elem.style;

if(visibility.display=='block')

visibility.display = 'none';

}
 
function toggleimage(elem) {

image = elem.src;

if(image=='collapse.gif')

alert("Should replace image");

image = 'expand.gif';

alert(image);

}
 
function HideDiv() {

var boxes = document.getElementsByTagName("div");

for(var i=0;i<boxes.length;i++) 

if(boxes[i].className.match("hidediv")) toggledisplay(boxes[i]);

}
 
function ToggleDivImage() {

var boxes = document.getElementsByTagName("img");

for(var i=0;i<boxes.length;i++) 

if(boxes[i].className.match("changeimage")) toggleimage(boxes[i]);

}

Aug 12 '09 #5

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

8,658

Expert Mod 8TB

@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

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

8,658

Expert Mod 8TB

@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

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

8,658

Expert Mod 8TB

@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

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

This function is being called onload:

Expand|Select|Wrap|Line Numbers

 function ToggleDivImage() { 

var boxes = document.getElementsByTagName("img"); 

for(var i=0;i<boxes.length;i++)  

if(boxes[i].className.match("ti")) toggleimage(boxes[i]); 

}

Which calls this one:

Expand|Select|Wrap|Line Numbers

 function toggleimage(elem) { 

image = elem.src; 

if(image=='collapse.gif') 

alert("Should replace image"); 

image = 'expand.gif'; 

alert(image); 

}

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

<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

8,658

Expert Mod 8TB

@UberGirl
simply by redefining the src attribute.

Expand|Select|Wrap|Line Numbers

 function toggleimage(elem) 

{

// this way you cannot mix up = and == 

    if ('collapse.gif' == elem.src) 

        var image = 'expand.gif'; 

// to make it toggle

    else if ('expand.gif' == elem.src)

        var image = 'collapse.gif':

// change the image

    elem.src = image;

}

from here it’s not far from using the this keyword…

NOTE:

Expand|Select|Wrap|Line Numbers

 
function toggleimage(elem) { 

image = elem.src; 

if(image=='collapse.gif') 

alert("Should replace image"); // end of if ()

image = 'expand.gif'; // <--- this is executed regardless of the if condition

alert(image); 

}

Aug 19 '09 #13

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

8,658

Expert Mod 8TB

@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

var boxes = document.getElementsByClassName("ti");

Aug 19 '09 #15

@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

 <script language="javascript">
 
<!-- The following 5 functions all are in place to collapse the divs when a user has javascript enabled.  -->
 
<!-- This function is called onload and calls toggledisplay for all divs with class 'ac' -->

function HideDiv1() {

var boxes = document.getElementsByTagName("div");

for(var i=0;i<boxes.length;i++) 

if(boxes[i].className.match("ac")) toggledisplay(boxes[i]);

}
 
<!-- 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.  -->

function HideDiv2() {

var boxes = document.getElementsByTagName("div");

for(var i=0;i<boxes.length;i++) 

if(boxes[i].className.match("tn")) toggledisplay(boxes[i]);

}
 
<!-- This function is called onload and calls toggleimage for all images with class 'ti'. -->

function ChangeImage() {

var boxes = document.getElementsByTagName("img");

for(var i=0;i<boxes.length;i++) 

if(boxes[i].className.match("ti")) toggleimage(boxes[i]);

}
 
<!-- This function hides the divs found in HideDiv1 and HideDiv2. -->

function toggledisplay(elem) {

visibility = elem.style;

if(visibility.display=='block')

visibility.display = 'none';

}
 
<!-- This function changes the image from minus sign (collapse.gif) to plus sign (expand.gif) for all images found in ChangeImage. -->

function toggleimage(elem) { 

    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.

        var image = 'http://www.yourdomainhere.com/images/expand.gif';  

    elem.src = image; 

} 
 
<!-- 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). -->

function showHide(divID, imgID){

        var JUMPDIV = new String("#_" + divID);

    if (document.getElementById(divID).style.display == "none") {

        document.getElementById(divID).style.display = "block";

        document.getElementById(imgID).src = "images/collapse.gif";

         window.location.hash = JUMPDIV;

    } else {

        document.getElementById(divID).style.display = "none";

        document.getElementById(imgID).src = "images/expand.gif";

    }

}
 
</script>

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

Expand|Select|Wrap|Line Numbers

 <body onload="HideDiv1(); HideDiv2(); ChangeImage();">
 
<a name="_div1"></a>

<div class="class1"><img id="image1" class="ti" src="images/collapse.gif" onclick="showHide('div1',this.id);" /> DIV ONE</div>
 
<div id="div1" class="ac" style="display:block">

<ul>

<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

 <div class="tn" id="subdiv1" style="display:block"> SUB DIV ONE INFO </div>

</li>

</ul>

</div>

Hope this helps someone.

UberGirl

Aug 19 '09 #16

by: Gustav Medler | last post by:

Hello, there is a known problem with Opera and the execution of content shown in <NOSCRIPT> tag. Everythings works fine, if there is only one simple script like:...

Alternative to <Noscript>

by: llaxman | last post by:

Hello everyone, I was wondering if anyone can help me? I am having some problems wit the <noscript> tag. I actually use it to block banner advertisements from being displaye in my website. I...

<NOSCRIPT> does not pass w3c validator

by: Burton Figg | last post by:

My homepage, www.jimpix.co.uk uses transitional XHTML. The whole thing validates except one line: <noscript><img height="1" width="1" alt=""...

HTML / CSS

by: Paul | last post by:

Hello: I read the FAQ about embedding HTML code in a Javascript. I have used the "<\/tag>" format to get around validator problems. Now the <NOSCRIPT> block is failing with error #65: 1. ...

HTML / CSS

Any alternative to onload?

by: nntp | last post by:

Is there anyway to do something exactly like onload, but without the word onload? I am trying to write inline js without onload, so I don't know how to trigger/start the script.

Using noscript overlaps "normal"

by: Andrew Poulos | last post by:

If I have a page with a bunch of content and some javascript in the head how do I notify the javascript disabled users that enabling javascript would enhance their experience. At the moment I'm...

adding to a BODY-onload function from within the page

by: laredotornado | last post by:

Hello, I am looking for a cross-browser way (Firefox 1+, IE 5.5+) to have my Javascript function execute from the BODY's "onload" method, but if there is already an onload method defined, I would...

Adding a onload event to the body section.

by: UJ | last post by:

I have some javascript code that I need to run based on a value I know at the server when I load a page. How can I do an onload event call with a condition value from the server. (The reason is...

ASP.NET

Body onLoad 2 Function issue

by: WGW | last post by:

Hello all, I need another set of eyes cause it just isn't working, no matter how identical I make it. The initRotator function works when called by itself, but when adding another function, only the...

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...