|
JavaScript - Toggle Button Problem(s)
Delete.
Similar TutorialsHi, 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();
I have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example... http://www.codekraken.com/dashpad/testing/test2.html How can I get the toggle button to slide with it, but not disappear? 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"> I'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page? HTML <in Code: <input type="button" value="change layout" onclick="toggle()" /> JavaScript Code: var flag = 0; function toggle(){
if(flag==0){
document.getElementById("container").style.backgroundImage="blah.jpg";
flag=1; } else if(flag==1){
document.getElementById("container").style.backgroundImage="blah2.jpg";
flag=0; } }
plzz help!!!! i am struck wit one of my task.... in html/jscripts .. i have to design a page which dynamically generates a table and inserts the values submited.... in which i have 3 radio buttons ... which should toggle the visibility of the table.. Requirement: -design a page to keep the track of payments -select box which holds two types (payments /adjustments) -data when submitted to be saved in the table -by default "all" radio box to be checked if payment radion button is checked the fields of nly payments to be displayed if adjustments radion button is checked the fields of nly adjustments to be displayed - this the code i developed soo far [CODE] <html> <head> <title> Payments/Adjustments </title> <script> var num1=0; function Output(srcHolder) { alert("haiiii"); //var srcTable = document.createElement("resultTable"); srcTable = document.getElementById("resultTable"); srcTable.deleteRow(srcTable.rows.length-1); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.type.value+"-"+f.name.value; tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.amount.value; num1=f.amount.value; var total=add(); tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = "amount"; tmpCell = tmpRow.insertCell(); tmpCell.innerText = total; srcHolder.appendChild(srcTable); if(flag==1) { tmpRow = srcTable.insertRow(); tmpCell = tmpRow.insertCell(); tmpCell.innerText = f.date.value; } } var sum=0; function add() { num1=parseInt(num1); sum=sum+num1; return sum; } </script> </head> <body> <form name="f"> <table align="center"> <tr> <td> DATE:<input type="name" id="date" title="enter date in mm/dd/yyyy format" size="20" maxlength="10"/> </td> <td> For:<input type="name" id="name" title="Entername" size="40" /> </td> <td> Amount:<input type="name" id="amount" title="amount" size="10" /> </td> </tr> <tr> <td colspan="3"> Type:<select name="type"> <option value="">--Select--</option> <option value="adjust" >adjustments</option> <option value="payments">payments</option> </select> <td> </tr> </table> <br><center> <input type="button" name="Save" value="Save" onclick="Output(srcHolder)"/> <input type="reset" name="Cancel" value="Cancel"/> </center> <hr> <center> <label for="type">Type</label> <input type="radio" name="type1" value="pa"/>payments <input type="radio" name="type1" value="ad"/>adjustments <input type="radio" name="type1" value="all" />all <table border="3" id="resultTable"> <thead> <th>Date </th> <th>For </th> <th>Amount </th> </thead> <tbody> <tr> </tr> <tr> </tr> <th> </tr> </tbody> </table> <div id="srcHolder" > </div> </form> </body> </html> [CODE] 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!!!! I am a beginner with coding and have no idea what I'm doing. Hopefully I'm posting this on the right forum. I have just registered a domain for my business and am maintaining my webpage through tumblr. I have stumbled around into finding a code that will allow me to hide/collapse certain content. The problem is that I want it to become an icon that changes from a "plus" to a "minus" sign, or any one character to another, as opposed to having it be the title that gets clicked on in order to be expanded. One major issue I'm having revolves around content expanding where a link is displayed. I am coding this on the "links" section of my page, which is links to other businesses and webpages I support. So, for example, I'll have a link to a business, and the hidden content will be something I have to say about it, that the person viewing can chose to read by clicking to expand content. I want it hidden by default to take up less space. This is the code I put into my head section: <!-- COLLAPSIBLE TEXT --> <!-- This goes into the HEAD of the html file --> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2005, Sandeep Gangadharan --> <!-- For more free scripts go to http://www.sivamdesign.com/scripts/ --> <!-- if (document.getElementById) { document.writeln('<style type="text/css"><!--') document.writeln('.texter {display:none} @media print {.texter {display:block;}}') document.writeln('//--></style>') } function openClose(theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" } else { document.getElementById(theID).style.display = "block" } } // --> </script> And this is what the html looks like, which I've placed within a table (the list of businesses/pages I support or recommend): <td width=[]> <h2><u>[list name]</u></h2> <p> <a href="http://[link to business].com">[name]</a> <br> <div onClick="openClose('a3')" style="cursor:hand; cursorointer">∇</div> <div id="a1" class="texter"><font style="font-size:90%" color="maroon"> [hidden content]</font></p></div> Is is possible for me to place some kind of code where I have the ∇ that will switch between two icons when shown/hidden? Do I have to use a completely different script? Also, is it possible to keep both a link and a toggle icon on the same line without a break, yet have them lead to different places? Maybe this is more difficult than I think it should be, but I really cant find a good script on the internet for this. Any help would be appreciated. Thanks. Hello guys, first post so please be kind. Usually try and find a solution and edit to work for me but this time its a little trickier. I need a script and code that can toggle the contents of a div, while changing the button appearance but !! the button images and content have to be external to the script as the content and images will be loaded from a database on the page and duplicated on page. ideally what I want is say 3 buttons. button1img button2img button3img <// that when clicked control <div id=target><this target content is now set to 2></div> //and toggle between options and only one at a time can be on. The button images and content have to be set outside of the initial script (reason it will be duplicated several times on page) and it cant be a call page 'content1.html' either as it needs to be created from a db on the page. if anyone can help it will be MUCH appreciated, as im pulling my hair out trying to combine 3 different scripts that are all written differently. i understand this is a little trickier, im hoping it is possible. cheers steve 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! 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'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. Hi all, I'm using a classic toggleLayer function to display content in a div adjacent to one full of links. The code is Code: function toggleLayer( work )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( work );
else if( document.all ) // this is the way old msie versions work
elem = document.all[work];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[work];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
and the links take on the format of: Code: <a href="javascript:toggleLayer('work');...........
My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content. Any ideas? Sorry if i'm phrasing all this very badly, i'm pretty new to it all. I have an idea that AJAX could be the solution but I can barely get my head around a little bit of copied and pasted JS Thanks for any help, Pat apparently I am not going to get any help from sharethis.com - I have implemented hsare this button on all my pages (upper right corner) of countyfairgrounds.net - I do not javascrip - I only do html5 and css3 - which believe me is hard enough. Okay that being said can somehelp me first get the words share this in the button - cause blye me - they are not there and I do not know why. NOR does this thingy validate in the validator.
Hey i have a map (belgium) with markers on it, when i press a marker an alert has to appear with some text but it just doesnt appear I dont want to use javascript in my html this is what i got atm, html: Code: <div class="mapdiv">
<img class="map" src="images/Map.gif"/>
<img type="image" id="markerJoly" src="images/dot.png"/>
<img type="image" id="markerDielis" src="images/dot.png"/>
<img type="image" id="markerRietje" src="images/dot.png"/>
<img type="image" id="markerClissen" src="images/dot.png"/>
</div>
javascript: Code: addEventListener("load", Map, false);
function Map(event) {
var knop1 = document.getElementById("markerJoly");
if (knop1.onclick){
AlertBox1();
}
function AlertBox1() {
alert("1.")
}
function AlertBox2() {
alert("2.")
}
function AlertBox3() {
alert("3")
}
function AlertBox4() {
alert("4")
}
}
Alert doesnt show up, pls help 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> </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 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'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 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 have a simple js script which toggles between 2 tabs using a simple switch function to display: block or none. In each tab I have a form which returns data from a db using php mysql. The problem is that when I click the submit button the page is reloaded and so the page reverts to showing the 1st tab. The data is returned correctly but the users has to click the 2nd tab to view it. I have tried adding on onclick event to the submit button but this doesn't work. Is it possible to force the 2nd tab to show if the submit button in the 2nd tab is clicked. Many thanks! Hello, i am doing a test right now. What i have done is 1. A Counter/Timer That Counts until Zero 2. A Button that appears when the counter is Zero When I Click the Button it executes this code in the address bar (Navigates): javascript:gonow(); The id of the Timer: count What i want? When the Button appears, it will be clicked automatically... i started doing a different code, when the timer = 0 to navigate at javascript:gonow(); but it didnt worked.... See my code he Code: function AutoClick(){
var timer = document.getElementById(count);
if(timer.value=0)
unsafewindow.gonow();
}
Tried to explain as more as i could, now im waiting for an answe, dont dissapoint me please. |
|||||||