JavaScript - Help With Drop Down Toggle With 2 Plus Buttons.

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, 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

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!

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

Delete.

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 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!

I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this.
how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.

thanks

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?

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

I created an FAQ toggle for my site.

I have the toggle working great. The problem is everytime I click one of the toggle links I am brought to the top of the page.


Here it is.

Any help is appreciated.

Hey, while your there if you want to like my site on facebook, I won't complain.

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();

Hey there, I'm using the "toggle" method to show/hide a piece of a form. I am trying to update a hidden input field to set a flag whether or not that area should be validated. The element toggle works fine, but I can't get the form value to update the way I would like...

Here's what I have, the initial change (from 0 to 1) works, but it doesn't ever change back to 0 when clicked again...

Code:

$(document).ready(function() {
	$("#change-pwd-button").click(function(event) {
		event.preventDefault();
		$("#password-table").toggle("slow");
		if ($("#changePassFlag").val("0")) {
			$("#changePassFlag").val("1");
		} else {
			$("#changePassFlag").val("0");
		}
	});
});

Any help would be appreciated.
Thanks,
TE

Following are my script to toggle b/w two different links,

<html lang="en-US">
<head>
<title>toggle b/w 2 different links</title>
<script type="text/javascript"><!--
display=1;
function displayvalue()
{
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
}
function ShowHide()
{
if (display==1) {
document.getElementById("sv1").style.display = "none";
document.getElementById("dw1").style.display = "block";
//document.getElementById('javaFun') calling java func from javascript
display=2;
}
else {
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
//document.getElementById('javaFun1') calling java func from javascript
display=1;
}
}
function Func1Delay()
{
document.getElementById("sv1").style.display = "none";
document.getElementById("loadimage").innerHTML="<input type='image' src='Loading.gif'>";
setTimeout("LoadImage()", 300);
}


function LoadImage()
{
document.getElementById("loadimage").innerHTML="";
ShowHide();
}


--></script>
</head>
<body background="GsNJNwuI-UM.gif"onload="displayvalue()">




<div id="sv1" >
<a onclick ="Func1Delay()" href="javascript:;">click me</a>
</div>
<div id="loadimage"></div>
<div id="dw1" >
<a onclick ="ShowHide()" href="javascript:;">Download me</a>
</div>
</body>
</html>

whenever we call a java method , (consider this line:- document.getElementById('javaFun');)after the completion of java call the page is reloading, how control this reloading after the server completing the request....?

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>