logo
Apache Lounge
Webmasters

 


About

Forum Index Downloads Search Register Log in  RSS Apache Lounge
 



Keep Server Online

If you find the Apache Lounge, the downloads and overall help useful, please express your satisfaction with a donation.

or

Bitcoin

A donation makes a contribution towards the costs, the time and effort that's going in this site and building.

Thank You! Steffen

Apache Lounge is not sponsored.

Your donations will help to keep this site alive and well, and continuing building binaries.



JavaScript -> change multiple DIV ID styles

 
Post new topic   Reply to topic    Apache Forum Index -> Coding & Scripting Corner



View previous topic :: View next topic  
Author Message
Brian



Joined: 21 Oct 2005
Posts: 209
Location: Puyallup, WA USA

PostPosted: Tue 29 Sep '09 23:02    Post subject: JavaScript -> change multiple DIV ID styles Reply with quote

I am not much of a JavaScript Coder so I could use some help.

On a web page there is a list of links. When the user clicks a link it expands that DIV ID, that is easy. but I want it to automatically collapse the other expanded DIV's.

I use CSS and create a DIV ID such as:
Code:
#sampleDiv1 { display:none; width:100px; height:100px; padding:8px; border:1px dotted #366;}


There is an example of the CSS.

I wrote this JavaScript routine that is based loosely on another routine that was written by a different author and served a different purpose:
Code:
function collapseLayers( exceptLayer ) {
   var layersArray;
   layersArray = [ 'trainingCourse1', 'trainingCourse2', 'trainingCourse3', 'trainingCourse4', 'trainingCourse5', 'trainingCourse6', 'trainingCourseOn1', 'trainingCourseOn2', 'trainingCourseOn3', 'trainingCourseOn4', 'trainingCourseOn5', 'trainingCourseOn6' ];
   for (var i=0; i<layersArray.length; i++) {
      var whichLayer = layersArray[i];
      if (exceptLayer != whichLayer) {
         if( document.getElementById )
            elem = document.getElementById( whichLayer );
         else if( document.all )
            elem = document.all[whichLayer];
         else if( document.layers )
            elem = document.layers[whichLayer];
         vis = elem.style;
         vis.display = 'none';
      }
   }
}


As you can see I created an array in my JS that contains all of the potential DIV ID's.

For some reason if the loop in this array hits a DIV ID that does not exist, the element ID does not exist, then this JS function stops functioning.

How can I re-write this to look at all the potential ID's that simple start with trainingCourse and have it change the style of that ID as in ...

trainingCourse1.style > display=none
trainingCourse2.style > display=none
trainingCourse3.style > display=none
...
...
...
trainingCourseOn4.style > display=none
trainingCourseOn5.style > display=none
trainingCourseOn6.style > display=none

In some cases there may not be an element with one or more of these ID's, that is to say the page may have:

trainingCourse1, 2, 3, 4, 6 but not 6 instead it has trainingCourseOn6

I hope this makes sense...
Back to top
James Blond
Moderator


Joined: 19 Jan 2006
Posts: 6255
Location: Germany, Next to Hamburg

PostPosted: Wed 30 Sep '09 9:20    Post subject: Reply with quote

For those things I use query. You don't have to mess around with a lot of code.

Code:

<script src="http://code.jquery.com/jquery-latest.js"></script>


Code:

<a href="javascript:void();" id="mycloser">Link to close all</a>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
   $("#mycloser").click(function () {
      $('#trainingCourse1').css('display','none');
      $('#trainingCourse2').css('display','none');
      $('#trainingCourse3').css('display','none');
      //...   
      $('#trainingCourseOn4').css('display','none');
      $('#trainingCourseOn5').css('display','none');
      $('#trainingCourseOn6').css('display','none');
   });
});
//]]>
</script>


I guess this example is easy enough so you can modify it for your needs.
Back to top


Post new topic   Reply to topic    Apache Forum Index -> Coding & Scripting Corner
Page 1 of 1