|
JavaScript - Toggle Visibility After A Link Is Followed
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! Similar TutorialsI 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 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 I have that image at the top of my website. What I want to do is have it be a link that toggles a div somewhere else on the board. I have been using this code: Code: <input type="checkbox" name="thebox" onclick="javascript:toggleDiv('block');">Toggle Block
<div id="searchbock">*search form here, obviously*</div>
<script language="javascript">
function toggleDiv(id)
{
var div = document.getElementById(id);
var current = div.style.display;
if (current == 'none')
div.style.display = 'block';
else
div.style.display = 'none';
}
</script>
But the checkbox is rather ugly and I would much rather use my custom image. Thoughts? i have a little function that uses a checkbox to turn off or on a map layer Code: function toggleGeoXML(id, checked) {
if (checked) {
var geoXml = new GGeoXml(layers[id].url);
layers[id].geoXml = geoXml;
if (layers[id].zoom) {
map.setZoom(layers[id].zoom);
} else {
map.setZoom(1);
}
if (layers[id].lat && layers[id].lng) {
map.setCenter(new GLatLng(layers[id].lat, layers[id].lng));
} else {
map.setCenter(new GLatLng(39.909736,-35.859375));
}
map.addOverlay(geoXml);
} else if (layers[id].geoXml) {
map.removeOverlay(layers[id].geoXml);
}
}
i'm trying to use an image instead of a checkbox (can be a styled button or a link) the problem is trying to get rid of the "checked" part of the function and integrate it with a normal link but still toggle it off and on this check box input works Code: <input type="checkbox" value="" id="name id of layer" onClick="toggleGeoXML(this.id,this.checked)" /> ive seen loads of ways of showing and hiding layers but nothing that seems relevant to this instance ive tried loads of different things like Code: <a id="name id of layer" href="#" onClick="toggleGeoXML(this.id,this.checked);return false;">on/off</a> also removing the checked part in the function - the link turns layer on but then wont turn it off ie: Code: <a id="name id of layer" href="#" onClick="toggleGeoXML(this.id);return false;">on/off</a> i'm sure its something stupid but ive been looking at this all afternoon and just keep going round in circles thx Hi, I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes. Code: <head>
<script language="JavaScript" type="text/JavaScript">
<!-- toggle off and on, currently unused -->
function checkAll(checkname, exby)
{
for (i = 0; i < checkname.length; i++)
checkname[i].checked = exby.checked? true:false
}
<!-- changes text on click, currently used -->
function exp(obj)
{
if(obj.oldText)
{
obj.innerHTML = obj.oldText;
obj.oldText = null;
}
else
{
obj.oldText = obj.innerHTML;
obj.innerHTML = 'Check All';
}
}
</script>
</head>
<body>
<div id="checkboxes">
<table bgcolor="#DCDCDC" cellpadding="10">
<tr><th colspan="11" align="left">
<a href="#" onclick="javascript:exp(this);">Clear All</a><br/>
</th></tr>
<tr align="center">
<td>Check1
<br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td>
<td>Check2
<br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td>
<td>Check3
<br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td>
</tr>
</table>
</div>
</body>
Thanks for reading! Kevin Hi, here is what I am trying to do, mind if I sound simple this is my first major javascript attempt. You click the checkbox and it changes a link. You click the checkbox again and it changes it back. So you have a page with a link : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a> and a checkbox : <a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p> Clicking the checkbox runs the javascript function ChangeTarget(). Here is what I want the javascript to do: Code: 1. Write current pay value to variable 2. Compare variable to paypal link -3. change to clickbank link -else change to paypal link. Here is the code I have tried that doesnt work: Code: <script type="text/javascript">
var link = document.getElementById('pay');
function changeTarget()
if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN")
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
else
document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN";
</script>
Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it. I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time. Code: //WORKING CODE
<script type="text/javascript">
function changeTarget()
{
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
}
</script>
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 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> 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'; } } 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 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'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! 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. 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 Every year or two, I want to do something SIMPLE via JS, and each time it's like i've never been there before I simply want a button to show/hide something on click, and I THINK I'm close, but it's not quite working. Here's what I'm toying with. Code: <html>
<head>
<script type="text/javascript">
function showHide("idName") {
if(document.getElementById("idName").style.visibility=="hidden") {
document.getElementById("idName").style.visibility=="visible";
}
else {
document.getElementById("idName").style.visibility=="hidden";
}
}
</script>
</head>
<body>
<button type="button" onclick="showHide(1)">Click Me!</button>
<div id="1" "style=visibility:hidden;"><p>this is the stuff.</p></div>
</body>
</html>
How do I get the button to make that div (in)visible?? ~Mo I checked the code for hours and I can't figure out why the form doesn't work. Please, I need help, I need to finish this page. Inside the input form there is a div using visibility:hidden. The div works perfectly when it is selected (show or hide), not problem. The problem is when press the send button the form doesn't send anything, not respond, do nothing!. Any help? 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);
});
});
|
|||||||