Keep Server Online
If you find the Apache Lounge, the downloads and overall help useful, please express your satisfaction with a donation.
or
A donation makes a contribution towards the costs, the time and effort that's going in this site and building.
Thank You! Steffen
Your donations will help to keep this site alive and well, and continuing building binaries. Apache Lounge is not sponsored.
| |
|
 Topic: JavaScript -> change multiple DIV ID styles |
|
| Author |
|
Brian
Joined: 21 Oct 2005
Posts: 209
Location: Puyallup, WA USA
|
 Posted: Tue 29 Sep '09 23:02 Post subject: JavaScript -> change multiple DIV ID styles |
 |
|
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: 7371
Location: Germany, Next to Hamburg
|
| Posted: Wed 30 Sep '09 9:20 Post subject: |
|
|
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 |
|
|
|
|
|
|
