Cycle through all divs with id, and hide them?

[brady123]

I'm trying to figure out how to cycle through all divs on a page with an id of "loader", and hide them. If I just list the first hide element on my JS below, it only hides the first div with that id. How can I cycle through all divs and hide all of them that have that id? Currently I just list them separately and name them separately...

 

function doneload() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("loader2").style.display = "none";
  document.getElementById("loader3").style.display = "none";
  document.getElementById("loader4").style.display = "none";
}

[tomfmason]

I'm trying to figure out how to cycle through all divs on a page with an id of "loader", and hide them. If I just list the first hide element on my JS below, it only hides the first div with that id. How can I cycle through all divs and hide all of them that have that id? Currently I just list them separately and name them separately...

 

function doneload() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("loader2").style.display = "none";
  document.getElementById("loader3").style.display = "none";
  document.getElementById("loader4").style.display = "none";
}

 

All elements should have unique IDs. It seems like you are confusing ids with classes. Mulitpule elements can have the same class but not the same id. This is why the first, or last depending on the browser, element is being hidden. I would recommend adding a class like "loaders", "hideme", etc. I rarely write raw javascript anymore because most frameworks make this extremely easy. For example you could do the following with jquery

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#hideLoaders").click(function(){
        $(".loaders").hide();
    });
    
    $("#showLoaders").click(function(){
        $(".loaders").show();
    });
});
</script>
<a href="#" id="hideLoaders">Hide Loaders</a> <a href="#" id="showLoaders">Show Loaders</a>
<div class="loaders">Loader 1</div>
<div class="loaders">Loader 2</div>
<div class="loaders">Loader 3</div>
<div class="loaders">Loader 4</div>
<div class="loaders">Loader 5</div>
<div class="loaders">Loader 6</div>

 

 

From this example all the div's have the class name "loaders" and can hidden simply by $(".loaders").hide();

[brady123]

Hmm, I can't seem to get it to run on its own. I'm trying to make it hide them all when the page is done loading. This is what I have using your code, but can't get it working:

 

window.onload=doneload; 

function doneload() {
         $(".loaders").hide();
}

 

<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>

[tomfmason]

That is because you need to add the jquery script tag like in my example. Also if you are using jquery use something like this

 

$(document).ready(function(){
    $(".loaders").hide();
});

[brady123]

Sorry, I'm not at all familiar with jQuery - here's the entire code that I can't get working...thanks for your help!

 

<script language='javascript'>
window.onload=hider; 

function hider() {
$(document).ready(function(){
    $(".loaders").hide();
});
}
</script>

 

<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>
<div class='loaders'>Hide me when page is done loading.</div>

[tomfmason]

try the following exactly as I have it here:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".loaders").hide();
});
</script>

[brady123]

Works perfect! Does the .ready part make it run when the page is fully loaded? By the way, your personal site is very nice! Did you write it all from scratch, or are you using some CMS?

 

try the following exactly as I have it here:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".loaders").hide();
});
</script>

[tomfmason]

Works perfect! Does the .ready part make it run when the page is fully loaded?

$(document).ready(); waits until the entire page has finished loading. You can read more here

 

By the way, your personal site is very nice! Did you write it all from scratch, or are you using some CMS?

 

Thanks . I am using a python CMS using a framework called Django that I helped develop called Mezzanine. Although mine is a highly customized version with a lot more than is in the default package.