JavaScript - Javascript Toggle Question

I've written this very small and simple javascript toggle to make a div appear and disappear upon click.

Code:

function dropDown(id){
    var object = document.getElementById(id).style;
    
    if (object.display == "none") {object.display = "block"}
    else {object.display = "none"}
    }

And the html:
Code:

<div id="webBox" class="service">
<ul class="servNav">
    <li class="button" onclick="dropDown('webDrop')">View Details</li>
</ul>
</div>
<div class="dropInfo" id="webDrop">

Now this code DOES work, but only after clicking the button twice. I assume there is some argument problem, but I can't seem to pinpoint it. I've got jquery scripts and plugins on the page, but it does the same thing when I take those off.

Is there anything I can do to make the toggle immediate rather than after a couple tries of clicking?

The URL is http://mattboldt.com/2.0

The "view details" buttons are what I'm having trouble with. As of now it's only on one, the first div.

Thanks.

I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled.
Here is my code so far.

<form name="form1" method="post" action="">

Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')">

Beef
<INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br>

</FORM>


<form>
<p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;">
Shoulder: <br />

Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br />
Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or
Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br />
Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br />
Specific Cuts wanted:<br />
<textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea>
</div>
</form><br />
<div id="divt2" style="visibility:visible; position:absolute; top ">
Type 2 Input:
<input name="t2" type="text" value="">
</div>
<BR>
</p>
<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s') document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>

Is it possible for JavaSscript to toggle a submit button?

I will be using it in this code:
Code:

<SCRIPT type="text/javascript">
	if (document.forms["form"]["quantitys"].value > '.$row['quantity'].') {
		alert ("The quantity you wanted for product '.$row['id'].' is no longer available and will be changed to the highest available quantity.");
		document.forms["form"]["quantity"].value = '.$row['quantity'].';
		// JAVASCRIPT TOGGLE SUBMIT
	}
</SCRIPT>

The submit button:
<INPUT name="submit" type="submit" value="UPDATE QUANTITY">

Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.

My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.

I have my checkbox created as well as all the effects working for it.

Here is a piece of the main code as well as a link to the ambilight.js file
Code:

            <label name="ambilightToggle">
			<input type="checkbox" name="toggle"/>
			<div class="toggle-switch">
				<div class="handle"></div>
				<div class="track">
					<span>OFF</span><span>ON</span>
				</div>
			</div>
			</label>
        
    	</div>
	</div>
    
    
	<div id="main" class="clearfix">
    
        <div id="video-edge">
                <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
                <div id="video-wrap" class="video-js-box moo-css">
                    <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
                      <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                      <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
                      <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
                    </video>
                </div>
         </div>
         
         		<script type="text/javascript">
                    ambiLight.create(document.getElementById('example'))
                </script>

Portfolio Page

http://www.eschulist.com/test/js/ambilight.js



I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn.
Code:

<script type="text/javascript">
   $(document).ready(function(){
   $(this).click(function(){
       $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
   });
   });
</script>

Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe?

I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;
Code:

function toggle_visibility(o,id) {
 var obj = document.getElementById(id);
 obj.style.display=(obj.style.display == 'block')?'none':'block';
 if (obj.style.display!='none') {
 obj.style.left=zxcPos(o)[0]+20+'px';
 obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

Here is a sample of my a to z table;
Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
        
</tr></table>

And here is an example of the Brand name div ;
Code:

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give

Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded.


The first toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>



The second toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>

Here is the referenced page:

http://sprintexperts.info/phones/#

Thanks in advance!

Hi all, looking for some help. I found this script that does almost everything i need.
I have a form that has a small section of two radio buttons
when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box.
also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled.

here is what i have so far.
placed in head
Code:

<SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
    var visSetting = (chkbox.checked) ? "visible" : "hidden"
    document.getElementById(group).style.visibility = visSetting
}</script>

part of the form having issues with
Code:

<span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>

  <span class="style30">Send to me to give to the recipant:</span>
  <input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
 </center>
  <input type="hidden" name="price3" value=".00" />
    <input type="hidden" name="qty3" value="1" />
  <input type="hidden" name="noqty3" value="3" />

 
  <div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173"  style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
  <td>&nbsp;</td>
  </tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
    <input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>

please anyone with help will be great

I'm not sure if this is a JS or CSS problem, but I figure I would start here.

What is wrong with the "onload" function that makes it so that I can not initialize the class name?

I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests.

What I expect to happen is that the <blockquote id=...> class names be initialized to hide
if and only if JS is available for the toggleClass function to work.

Here is what I am doing...
Code:

<!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
  var sel = document.getElementById(IDS);  //  alert(IDS+' : '+sel.className);
  if (sel.className != 'hide') { sel.className = 'hide'; }
                          else { sel.className = 'show'; }
}
window.onload = function() {
  var sel = document.getElementsByTagName('*');
  for (var i=0; i<sel[i].length; ++i) {
    if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
  }
}
//]]>
</script>
<style type="text/css">
 .show { display: block; }
 .hide { display: none; }
 li { list-style-type: none; }
 #Schedule { margin:0px; padding:5px; }
 #Projects { margin:0px; padding:5px; }
</style>

</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
 <li>Monday:</li>
 <li>Tuesday:</li>
 <li>Wednesday:</li>
 <li>Thursday:</li>
 <li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
 <li>Current</li>
 <li>Past</li>
 <li>Future</li>
 <li>On-going</li>
</blockquote>

</body>
</html>

I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears.

Here is the code that I have ended up with so far.

Code:

$(function() {
	$("#textbox1").hide();
	$("#wrap").click(function() {
				$("#button-top").animate({right: "860px"}, 2000);
				$('#textbox1').animate({height: "toggle"}, 2000);
	});
});

Hi all,

I have a number of images placed on a map (the images are dots indicating a location)

When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain:

http://www.garethhardy.com/Shine/?page_id=6

What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack.

Hope that makes sense!

Thanks in advance

Dan

Hi,

I'm using the following code to toggle checkbox checked and disabled attributes.

Code:

var f = false;
function tick(group) {
if (!f) {
   for (var i=0, len = group.length; i < len; i++) {
      group[i].disabled = true;
	  group[i].checked = true;
	  }
   }
else {
   for (var i=0, len = group.length; i < len; i++) {
      group[i].disabled = false;
	  group[i].checked = false;
	  }
   }
f == true? f=false:f=true;
}

The checkbox doing the js call uses onclick="tick(country)"

and the checkboxes that I want to toggle all have the same id e.g.

Code:

<label><input type='checkbox' name='uk[]' id='country' value='England' />England</label><br />
<label><input type='checkbox' name='uk[]' id='country' value='Scotland' />Scotland</label><br />

This all works correctly but does not validate.
I need to use unique id's for each name.
The easiest way (as each checkbox html is generated by php) is to append the value to the id i.e.

Code:

<label><input type='checkbox' name='uk[]' id='countryEngland' value='England' />England</label><br />
<label><input type='checkbox' name='uk[]' id='countryScotland' value='Scotland' />Scotland</label><br />

How can I modify the javascript function factor this in i.e. toggle where id contains country?

I forgot how to do this. I did this a long time ago but have deleted the example.

I want to absolute position 11 scrolling div tags of the same dimensions with the same top and left positions. In other words, on top of each other. This is easy.

What I can't remember how to do is trigger them so one shows up and the others are hidden.

Code:

<style>
.one {
position:absolute;
top:200px;
left:0px;
background:skyblue;
width:250px;
height:250px;
}
.two {
position:absolute;
top:200px;
left:0px;
background:aqua;
width:250px;
height:250px;
}
</style>
<input type="button" onClick="" value="one">
<input type="button" onClick="" value="two">
<div class="one">one</div>

<div class="two">two</div>

Hi,


Hit a snag creating code for toggling with radio buttons, alert debugs
return undefined for the radio button values. Would someone assist?


HTML
Code:

    <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
      <label for="is_new0" class="artist_radio_label">Yes</label>
      <input type="radio" name="artist"  onclick="toggleForm(this.value)" value="new" />
      <label for="is_new1" class="artist_radio_label">No</label>

From Document Head
Code:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Add a Print</title>
<link rel="stylesheet" href="../c/forms.css" type="text/css" />
<script type="text/javascript" src="../j/global.js"></script>
<script type="text/javascript" src="../j/add_print.js"></script>

 
</script>
</head>

add_print.js
Code:

function toggleForm(artist) 

	{
	if (!document.getElementById) return false;
	var existing = document.getElementById("existing_artist");
	var newArtist = document.getElementById("new_artist");
	existing.style.display = "none";
	newArtist.style.display = "none";
	
	 if(this.value == existing){

               existing.style.display = "block";
       }else{


             newArtist.style.display = "block";

   		 }
 }


addLoadEvent(toggleForm);

global.js - Add Load Event
Code:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}



addLoadEvent();

Hi. I am looking for a way to have a button that toggles the background colour of my website.

So for instance, I will have one button called 'switch to light', when its clicked it switches the colour of the background to a light colour, and another button replaces this that says 'switch to dark', and so on.

The main problem is I have no idea how to store this information when the user is on the site so when the page is refreshed the colour is remembered. I am a complete newbie to Javascript, so any help will be greatly appreciated!

Thanks

Hi there! I would REALLY appreciate any help!

I've got a script that toggles the visibility of a div on "dashboard.html":

Code:

$(document).ready(function(){

        $("#add_networks_wrapper, .remove_box").hide();
	$(".toggle_add_networks").show();
	
	$('.toggle_add_networks').click(function(){
	$("#add_networks_wrapper, .remove_box").slideToggle();
	});

});

On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.

What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.

Any help would be very appreciated!