hiding php created divs during onload with javascript

Question

I am running the javascript function shoh() below on page load to hide div's. This works fine on html hard coded divs but appears not to be working on divs that are created via php. Am I correct in assuming that the javascript runs first before the php creates the divs and that is why they aren't being hidden? If so, is there any other way to hide these divs after they are created? They need to be shown by default in case javascript is disabled?

code which runs with onload:

<script type="text/javascript">
function closeAllDivs() {
  shoh('g1');
  shoh('g2');
  shoh('g3');
  shoh('g4');
    }   
</script>
<BODY onLoad="closeAllDivs();">

javascript to hide divs:

function shoh(id) { 

if (document.getElementById) { // DOM3 = IE5, NS6
    if (document.getElementById(id).style.display == "none"){
        document.getElementById(id).style.display = 'block';
        filter(("img"+id),'imgin');         
    } else {
        filter(("img"+id),'imgout');
        document.getElementById(id).style.display = 'none';         
    }   
} else { 
    if (document.layers) {  
        if (document.id.display == "none"){
            document.id.display = 'block';
            filter(("img"+id),'imgin');
        } else {
            filter(("img"+id),'imgout');    
            document.id.display = 'none';
        }
    } else {
        if (document.all.id.style.visibility == "none"){
            document.all.id.style.display = 'block';
        } else {
            filter(("img"+id),'imgout');
            document.all.id.style.display = 'none';
        }
    }
  }
}

php code which creates divs:

for ($i=0; $i < count($this->items); $i++){
  <div style="display: block;" id="g<? echo $i ?>">
  ... code that displays items
  </div>
}

$i is starting at 0, not 1. so the first call should be shoh('g0'); — user2095686
– user2095686, Commented Apr 2, 2013 at 20:32
You should get rid of that document.layers and document.all stuff. Or do you really want to support ancient browsers like Netscape and IE5? — bfavaretto
– bfavaretto, Commented Apr 2, 2013 at 20:36
good catch with $i starting at 0 but fixing this does not change the problem. I've also fixed the post to "in case javascript is disabled." I am glad to hear I can get rid of document.layers and document.all - I am fairly new to using javascript and obvioiusly picked this code up from another source. Still, no one seems to have addressed the original issue... — mseifert
– mseifert, Commented Apr 2, 2013 at 20:44
The php block seems to be incomplete. There are some ?> and <?php missing in there to separate html and php. — Tomás
– Tomás, Commented Apr 2, 2013 at 20:51
Thanks Tomás, you are correct. It is the problem with simplifying code for explanation purposes. — mseifert
– mseifert, Commented Apr 2, 2013 at 21:08

Wolfman Joe · Accepted Answer · 2013-04-02 20:45:10Z

1

It shouldn't really matter so much whether the php made the divs or whether they're hardcoded - by the time the HTML hits the browser, it's already the same thing. The server processes the PHP - by the time it leaves the server and heads to the browser, there is no PHP anymore.

I'd recommend using window.onload instead of a <body onload="">

window.onload = function() {
    closeAllDivs();
};

answered Apr 2, 2013 at 20:45

Wolfman Joe

7991 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mseifert · Accepted Answer · 2013-04-02 21:06:52Z

0

Thanks to Wolfman Joe for letting me know the problem was likely not with the order of things. This told me the shoh() function was likely failing and therefore interrupting execution... so the code to close the divs was never executed. The solution was to build a check into the shoh() function to first make sure the div existed before attempting to change its property. As it turns out, not all divs $i were being created.

function shoh(id) { 
  if (document.getElementById) { // DOM3 = IE5, NS6
    if (document.getElementById(id)){
        if (document.getElementById(id).style.display == "none"){
            document.getElementById(id).style.display = 'block';
            filter(("img"+id),'imgin');         
        } else {
            filter(("img"+id),'imgout');
            document.getElementById(id).style.display = 'none';         
        }   
    }   
  }
}

answered Apr 2, 2013 at 21:06

mseifert

5,7009 gold badges45 silver badges105 bronze badges

3 Comments

Wolfman Joe Over a year ago

If you're using Firefox, I'd recommend installing Firebug - it has a wonderful javascript console that will tell you exactly where javascript code is failing. If you're using Chrome, the javascript console is an integral part of Chrome. If you're using IE - go use one of those other two for debugging. I'm unfamiliar with Safari or other browsers except for opening them up to make sure it works in them, too.

mseifert Over a year ago

Thanks for the tip. I actually have Firebug installed, but haven't realized what it can do. I will check it out.

Wolfman Joe Over a year ago

Glad I could help. The normal way, on Stack Overflow, to mark someone's comment or answer as useful is to up-rate it, by the way.

Collectives™ on Stack Overflow

hiding php created divs during onload with javascript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related