JavaScript - Password Masking Check Toggle

On this webpage
http://www.corkdiscos.com/testimonials.html

i have a like button.
when a user clicks like a comment box appears.
when i unlike the button the comment box disappears

this is ok but when a user has already liked the facebook page and comes to my webpage
the comment box does not show.

so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box.

please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far.

any help would be greatly appreciated

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

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!

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>

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

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

Im using the toggle script demonstrated he
http://www.sohtanaka.com/web-design/examples/toggle/

It works perfectly, but im wondering if it is possible to have a button to expand all and contract all.

Ive been reading through this page: http://api.jquery.com/toggle/

Im having a hard time understanding it, because this is one of the first things I have worked on with jquery. Can anyone help explain how I can do this?

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

Hello. I'm really new to java script and could really use some help.


What I'm trying to do is have 3 buttons on the header of my site fromm left to right. When one button is pressed a table or div drops down moving the site <body> and showing the content. Then if the same button is pressed it will close. Also when one of the other buttons are pressed the same drop down will happen and will close the others.

Here is what I'm working with. This is one of the links/buttons.


<div class="menu">
<ul>
<li><a class="drop" href="#">Drop down</a></li>
</ul>
</div>



This is what drops down

<div id="dropdown" style="display:none;">
<div class="categories"><br/>


<td>Content of drop here (100% with)</td>

</div>
</div>



HEre is the java script

$(document).ready(function(){$('a.drop').click(function(){$('#drop').toggle(200);return false;});$('a.refine').click(function(){


So this open and close (drop down drop up) fine but if I want three with the others closing when another is opened how would I do that?

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'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online.

What I want to do is to toggle a number on a webpage when a user clicks a link.

So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400).


Would someone be kind enough to help me with this?


Thanks

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

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>