JavaScript - Toggle Div Visibility Via Linked Image

Hi,

Im using a toggle script on my site. Im trying to add functionality. Currently, when you click on a toggle, that particular toggle expands and changes the toggle image.

Ive made it so when you click the text on the top left, all the toggles open or close. However, the toggle image doesnt change (+ / -)

Here is my code:
Code:

$(document).ready(function(){
	
	$(".toggle_container").hide();
 
	$("h2.trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});


	$("h2.trigger2").toggle(function(){
		$(".toggle_container").slideDown(); 
		}, function () {
		$(".toggle_container").slideUp();
	});

});

Here is my site: http://www.zombiemod.com/sm/test6.html

Just to explain it better. When you click on the center toggles, the background image changes. When you click on "Web Design and Development" on the left, the background images dont change. Im trying to get it so it changes as well.

Can anyone help with this?

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.

Hi there!

Okay, here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

Highly appreciate any help/answers/feedback!

Hi

Complete novice with Java so need some help please!

I want to put a button on a website that when clicked changes the background. The button needs to be an image.

For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off")

I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click.

I guess it needs an if/else statement but not sure.

Thanks for any help!!!!

what it is essentially is a button on a larger image map that, upon pressing it, should toggle another image map as visible. the toggled image itself, has an x in the bottom corner, for dismissing it, but of course, needs to have the toggle invisible event attached to its image map coordinates. if that makes sense.

that means one button on a totally different image map needs to toggle visible another image map. and the image map that was toggled visible needs to have its own toggle to make it invisible again

oh and i should mention, the original image map is a background image. lol
but the toggled visible image map doesn't have to be. i have the code for the background image map already, and the coords for the first button that is supposed to toggle the other image map as visible.

here's a couple snippets of the code
first the styling

Code:

<style type="text/css">
html, body {
	margin: 0;
	background: #000;
}
#container {
	width: 1024px;
	margin: 0px auto;
	background: #000;
	overflow: no;
}
.box1 {
	position: relative;
	margin: 0;
	padding: 0;
	width: 1024px;
	height: 220px;
	background: url(footershipnav.jpg) no-repeat;
}
#box-link {
	position: absolute;
	top: 40px;
	left: 260px;
	width: 25px;
	height: 25px;
	background: url();
	border: 0px solid yellow;
}
#box-link2 {
	position: absolute;
	top: 40px;
	left: 290px;
	width: 25px;
	height: 25px;
	background: url();
	border: 0px solid yellow;}

#box-link3 {
	position: absolute;
	top: 40px;
	left: 320px;
	width: 25px;
	height: 25px;
	background:  url();
	border: 0px solid yellow;}

then the image map liniks for the original image map. one of these links would be the toggle visible button.

Code:

<a id="box-link" href="shipnav.html" target="content"></a>
<a id="box-link2" href="canvas3d2.html" target="content"></a>
<a id="box-link3" href="canvas3d2c.html" target="content"></a>

there's actually many more links on the image map than that but thought it might be helpful in
setting up the first toggle to show the set up.

hi this is my code:

<HTML>
<HEAD>
<script language="JavaScript">
function show(){
if (document.getElementById("menu2").style.visibility = "hidden")
{
document.getElementById("menu2").style.visibility = "visible";
}
}

function hide(){
document.getElementById("menu2").style.visibility = "hidden";
}
</script>
<style type="text/css">
#menu {position:absolute; left:0;top:0; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:visible}
#menu2 {position:absolute; left:0;top:27; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:hidden}
</style>
</HEAD>
<BODY>
<div ID="menu" onmouseover="show()">
<table border="1" bgcolor="#FFCC00"><tr><td>File</td></tr></table>
</div>
<div ID="menu2" onmouseout="hide()">
<table border="1" bgcolor="#FFCC00"><tr><td>New</td></tr></table>
</div>
</BODY>
</HTML>

Now i want the second layer to appear when i hover over the first, which it does. however i want it so that when i move my cursor away from the second layer it dissapears but the problem is it doesn't seem to work.

any help apreciated.

thanks

I'm not sure why this code executes the first if condition. What should I be doing instead?

<!DOCTYPE html>
<head>

<style>
#test { visibility:hidden; }
</style>

<script type="text/javascript">

function read(ID)
{
if(document.getElementById(ID).style.visibility == '') alert("why does this pop up?");
else if(document.getElementById(ID).style.visibility == 'hidden') alert("this is what I would expect");
else alert("never reached");
}
</script>


</head>
<body>
<form><input type="button" value="test" onclick="read('test');"">
<p id='test'> testing visibility</p>
</body>
</html>

How can i change div visibility if for example index.php?site=news&show=angels http://mmwebstudio.eu/prace/2/ i have tryed to use:
Quote:
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
but i cannot use position absolute for my news( height of main div wont be spread) pls help

I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

it's so "Are you married?" "Yes" "No" (no is default checked)
when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
any help much appreciated.

Thanks!

hi all,

i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:

Code:

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
 }
 
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>

in my body is:
Code:

<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet"> 
(latest tweet generating code)
</div>

this creates a little bird, which displays latest tweet when rolled-over.

you can see a working example of this he
http://nang-nang.net/tumblr/blog/try.html

my question a
(1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

also
(2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

an answer to (1) at least would be very much appreciated!

hi all,

i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks!

code for the combo box: PHP Code:
select name="country" size="1" id="country" 
style="position:absolute; left:451px; top:260px; width:176px; 
color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; 
z-index:13" onChange="PhoneMask();">
<option value="1">United States</option>
<option value="2">Australia</option>
<option value="3">China</option>
<option value="4">Mexico</option>
<option value="5">United Kingdom</option>
</select> 


code for the different labels i want to display: PHP Code:
/*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/

<div id="phoneLabelUS" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
*Telephone Number </b></font><font style="font-size:12px" 
face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span>
</b></font></div>

<div id="phoneLabelAU" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" 
align="left"><font style="font-size:12px" color="#FF0000" 
face="Arial"><b>*Telephone Number </b></font><font 
style="font-size:12px" face="Arial"><b><span class="style9">
(xx-xxxx-xxxx)</span></b></font></div>

<div id="phoneLabelOTHER" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
Telephone Number</b></font></div>

/*------------------------------------------------------------------------------------*/ 


here is my PhoneMask() function: PHP Code:
function PhoneMask() {

    if (document.getElementById("country").value == "1") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 51;
        document.getElementById("phoneLabelUS").style.visibility = 'visible'; }
    elseif (document.getElementById("country").value == "2") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 51;
        document.getElementById("phoneLabelAU").style.visibility = 'visible';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
    else { 
        document.getElementById("phoneLabelOTHER").style.zIndex = 51;
        document.getElementById("phoneLabelOTHER").style.visibility = 'visible';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
        
} 

I have a question: how can you use a drop down box to show another drop down box? Here is my code below.
Code:

<html>
	<head>
<script type="text/javascript">
"use strict";
	function showlist()
	{
		var list=document.getElementById("id1");
		var newlist=list.options[list.selectedIndex].value;
		if (newlist==="Opt1")
		{
			document.getElementById("one").style.visibility="visible";
			document.getElementById("two").style.visibility="hidden";
		}
		if (newlist==="Opt2")
		{
			document.getElementById("two").style.visibility="visible";
			document.getElementById("one").style.visibility="hidden";
		}
	}
</script>
<style type="text/css">
	select.a{visibility:hidden;}
</style>
	</head>
	<body>
<select id="chooseboxtoshow">
	<option value="Opt1">Option 1</option>
	<option value="Opt2">Option 2</option>
</select><br />
<select display="none" id="one" class="a">
	<option value="1a">Option 1a</option>
	<option value="1b">Option 2a</option>
</select><br />
<select display="none" id="two" class="a">
	<option value="2a">Option 1b</option>
	<option value="2b">Option 2b</option>
</select><br />
<input type="button" value="Show new list" onclick="showlist()">
	</body>
</html>

Does anyone have ideas on how I can do it? Thanks!

I am making a framework to easily set up javascript tabs that toggle content. For example, the button "homeButton" toggles the "home" section. This is a fragment of my code and I am having two problems with it:
Code:

  for (var i = 0 in tabs) {
    document.getElementById(tabs[i] + "Button").onclick = function() {
      hideAll(tabs);
      document.getElementById(tabs[i]).style.visibility = 'visible';
    }
  }

Problem number 1: Regardless of which button I click, it always registers as the last button.

Problem number 2: The hideAll(tabs), another function in the program works, but Code:

document.getElementById(tabs[i]).style.visibility = 'visible';

doesn't. I get left with a blank page.

Any help is greatly appreciated. BTW when I use something like Code:

document.getElementById(tabs[0]).style.visibility = 'visible';

outside of the for loop, it works fine. I'm quite stumped.

Julian

Hey everyone,

I am normally very good at debugging these kinds of things but I've had a long day and am obviously overlooking something very, very simple.

If anyone can spot it that would be fantastic.

JavaScript
Code:

<script type="text/javascript">
function toggle (id) {
	if (document.getElementById('sub_' + id).style.display == 'none') {
		document.getElementById('sub_' + id).style.display = '';
		document.getElementById('icon_' + id).src = 'images/collapse.gif';
	} else {
		document.getElementById('sub_' + id).style.display = 'none';
		document.getElementById('icon_' + id).src = 'images/expand.gif';
	}
}
</script>

HTML
Code:

<div id="sub_0"><div style="padding-left: 0px;"><img src="images/point.gif"> Biology</div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=4">Chemistry</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=5">Earth/Space</a></div>

<div style="padding-left: 0px;"><img src="images/expand.gif" id="icon_6" onclick="javascript:toggle('6');" title="Click to Expand/Collapse"> <a href="products.php?cid=6">Physics</a></div>
<div id="sub_6" style="display: none;"><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=10">Kinimatics</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_12" onclick="javascript:toggle('12');" title="Click to Expand/Collapse"> <a href="products.php?cid=12">Dynamics</a></div>
<div id="sub_12" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=11">Newton's Laws</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=13">Special Forces</a></div>
<div style="padding-left: 20px;"><img src="images/expand.gif" id="icon_14" onclick="javascript:toggle('14');" title="Click to Expand/Collapse"> <a href="products.php?cid=14">Momentum</a></div>

<div id="sub_14" style="display: none;"><div style="padding-left: 30px;"><img src="images/point.gif"> <a href="products.php?cid=15">Impulse</a></div>
</div></div><div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_16" onclick="javascript:toggle('16');" title="Click to Expand/Collapse"> <a href="products.php?cid=16">Energy</a></div>
<div id="sub_16" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=17">Collisions</a></div>
</div><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=21">Waves</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_18" onclick="javascript:toggle('18');" title="Click to Expand/Collapse"> <a href="products.php?cid=18">Optics</a></div>
<div id="sub_18" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=19">Mirrors</a></div>

<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=20">Lenses</a></div>
</div></div><div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=2">Mathematics</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=7">Fine Arts</a></div>
</div>    </div>

Expected Result: The icon changes to expand or collapse based on the visibility of the following <div>.

Actual Result: Shows content and changes icon to collapse but when clicking on the collapse icon the <div> does not disappear and the icon just disappears in IE. In firefox clicking on the expand icon simply causes the icon to disappear.

You can view what is happening he

http://www.onacd.ca/products.php

It is the navigation on the left.

I'm going to continue to try and figure it out - but any suggestions would be great.

I'm dying here. Perhaps I need a nap.

Luke

So, I have a list of items that need to have a new preset list item appear based on what day it is. I have the date script working (to test, change the first case to some random date and change the third case to todays date - 10192010 - It will fire that document.write). What I need the cases to do though, is set the visibility of certain list items.

This is just an example, there will be around 20 list items in the final project. As you can see in the first two cases, I've tried a couple different routes to no avail. Any help would be fantastic.

The Code (class references are irrelevant to this example, they belong to the final project):

Code:

<html>
<head>

<script type="text/javascript" language="JavaScript">
/*
Count up from any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/


function getToday(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900

var todaym=today.getMonth()
var todayd=today.getDate()
var simpledate=todaym+""+todayd+""+todayy


var firstItem=document.getElementById("listOne");
var secondItem=document.getElementById("listTwo");
var thirdItem=document.getElementById("listThree");


switch(simpledate){
	case "10192010":
		firstItem.style.visibility="visible";
		secondItem.style.visibility="hidden";
		thirdItem.style.visibility="hidden";
		break;
	case "10202010":
		document.getElementById("listOne").style.visibility="visible";
		document.getElementById("listTwo").style.visibility="visible";
		document.getElementById("listThree").style.visibility="hidden";
		break;
	case '10212010':
		document.write("This code works...why can't I change an elements style within this case block also?")
		break;
	default:
		document.write("Something is wrong")
}
}
//enter the count up date using the format year/month/day
getToday(2010,07,26)

</script>

</head>
<body>
	<div id="theList">
            <ul class="rounded">
                <li id="listOne" style="display:block;" class="arrow"><a href="#kliwComic-MvPDualBoot"><font size="1px">11/17/10 - </font>MvP: Dual Boot</a></li>
                <li id="listTwo" style="display:block;" class="arrow"><a href="#kliwComic-MvPTouchScreen"><font size="1px">11/18/10 - </font>MvP: Touch Screen</a></li>
                <li id="listThree" style="display:block;" class="arrow"><a href="#kliwComic-MvPVista"><font size="1px">11/19/10 - </font>MvP: Vista</a></li>
			</ul>
    </div>
            
            </body>
</html>

I'm a bit of a hack at this. Any input is greatly appreciated. Thanks again.