JavaScript - How To Print Multiple Nested Divs

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

Hello there !!

I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript......

I want to show multiple divs on select of a <option> box.
So lets say there are 3 options

Code:

<select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>

And a javascript function to show the div`s

Code:

function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
 
                var selectedvalue = chooser.options[chooser.selectedIndex].value;
			

	        if(selectedvalue == "a")
                {
                        displayDivs(prefix,"a");
			displayDivs(prefix,"c");
			displayDivs(prefix,"d");
                }
               if(selectedvalue == "b")
                {
                        displayDivs(prefix,"b");
						displayDivs(prefix,"c");
                }
               if(selectedvalue == "c")
                {
                        displayDivs(prefix,"d");
                }
		
 
}
 
function displayDivs(prefix,suffix) {
 
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}

And some divs to show

Code:

<div id="diva" style="display:none;">blabla</div>
<div id="divb" style="display:none;">blabla</div>
<div id="divc" style="display:none;">blabla</div>
<div id="divd" style="display:none;">blabla</div>

All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good..

Then I choose option 'c' I get only one div. Thats good..

But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'..

Does anybody understand why??

Thanx allot !!!

I have a PHP script that automatically increases a div id number by one. An example would be:

Code:

<div id="globalEventX">

where X is a number from 1 to 1000.

I created a couple of javascript functions to show/hide these divs and it looks like this:

Code:

function hideGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='none';
    }
  }
  
function showGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='block';
    }
  }

I then created a pair of radio buttons to call the show or hide functions. The code looks like this:

Code:

<input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input>&nbsp;&nbsp;

<input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input>&nbsp;&nbsp;

But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong?

Thanks in advance!

Hello Guys,

Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java.

What i need to be able to do is..

When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs.

#contentwindow
#three

I already have jquery running on the page and all css is embeded for now if that is helpful.

http://www.bushcottages.co.uk/new.htm

Thanks your help is supremely appreciated
Peter

Hi, I am new to javascript so any help would be much appreciated.

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

Thanks, James

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.

I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle:

Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one!

Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something?


Please help if you can - I couldn't find anything related to this at all. Thanks

I am using the following code to show / hide form elements within a div based upon the drop down choice.

Does anyone know how this code can be amended to use multiple drop downs within one form?

Code:

<html>
<head>
<title>Show and Hide</title>

<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = ""; //display div
}

//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
	//Loop through the seclect menu values and hide all
	var selectMenu = document.getElementById("selectMenu");
	for (var i=0; i<=selectMenu.options.length -1; i++)
	{
		hideDiv(selectMenu.options[i].value);
	}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
	hideAllDivs(); // Hide all
	showDiv(showID); // Show the one we asked for

}


</script>
</head>
<body onload="hideAllDivs();">

<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>

</select>

<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>

<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>

<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>

<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>


</body>
</html>

Thanks in advance!

So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10.

My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link.

This is my js for the div swap functionality:
Code:

<script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}

function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
	document.getElementById(tid).style.display = "none";
	}
	
else {
	document.getElementById(tid).style.display = "";
	}
}

//-->
</script>

These are the html links:
Code:

 <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0);  " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
    
     <div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4');  InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
      
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
     
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>

And these are the divs that are being removed and added:
Code:

<div id="view1" style="display: "  > 
<a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> 
</div>
<div id="view2" style="display:none"  > 
<a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a>
</div>
<div id="view3" style="display:none" > 
<a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a>   
</div>
<div id="view4" style="display:none" > 
<a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> 
</div>

Any help would be greatly appreciated. Thank you in advance!

Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help!

Here's the html:

Code:

<li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
     <div id="slidedisplay_2" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		<span></span>
		</p>
</div>
     </div></li>
				
					<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
     <div id="slidedisplay_3" style="display:none;">
          <div id="thumbs7">
	<div class="thumbs">
		<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
		<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
		<p id="thumbs_handles7">
		<span></span>
		<span></span>
		</p>
</div>
     </div>

The javascript:

Code:

$(document).ready(function () {

	$('a.slidecontrol').click(function(){
		var $this = $(this);
		var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
		var $div = $('#'+divID);
		if ($div.is(':visible')) {
			$div.slideUp(500);
		} else {
			$div.slideDown(500);
		}
		return false;
	});
	
});

The CSS:

Code:

 #thumbs7{
	position:relative;
	width:200px;
	clear:both;
	height:41px;
	overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url(../images2/thumbs_mask.gif) no-repeat center top;
}

Hi,

I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html.

I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress.

Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page.

Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover.

There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer.

Is this possible?

Hey Guys,

I'm currently a seasoned programmer who is in a programming class at my school. We're currently learning advanced JavaScript, and we're on the topic of nested loops.

After teaching us about for and while loops, my teacher gave us a little puzzle to solve. It's kind of difficult to explain, but I'll give you guys my current code and what it outputs.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Word Reversal</title>

<script type="text/javascript">

var ask = prompt("How many words do you want?","");

while (ask < "1")

{

	alert("You have to have at least one word!");

	var ask = prompt("How many words do you want?","");

}

var num = parseInt(ask) + 1;

var final = "";

for (var i=1; i < num; i++)

{

	var word = prompt("What's word " + i + "?");

	final = final + "Word " + i +": " + word + "<br/>";

}

</script>

</head>

<body>

<script type="text/javascript">

document.writeln(final);

</script>

</body>

</html>

The current output, when the user wants two words, and word 1 is one and word 2 is two, comes out to be:
Code:

Word 1: one
Word 2: two

Which is great, but the only problem is, this is what the output's supposed to be:
Code:

Word 2: two
Word 1: one

I'm stumped. I've had numerous programming challenges in my life which I've solved, but I'm not sure where to go next on this one. The script is supposed to use a nested loop, but what goes in what loop to reverse the order of the user's input?

I asked my teacher for help, but he told me "Ask someone else." I asked another seasoned programmer in my class, who was just about as stumped as I was, so I went back to my teacher. "Well, ask another person" he replied. And can you believe this guy has a Master's Degree of Computer Science? So I'm asking you guys: the community. I hope someone will be able to help me.

On top of that, I have to help and tutor two special education students in my class on this kind of stuff during class, and they can't get the project done until I get it done, as they learn from analyzing and copying my work (which my teacher told me to do). They get upset when they have nothing to code, and they end up goofing off the entire period, or using it as a study hall. I need to get them back on track, so we can move on to the next project.

Please help me with this code - it would be greatly appreciated.

Thank you!