|
JavaScript - One Last Button Toggling Question
Hi,
I have two excellent pieces of code (thanks Old Pedant and jmrker) that I am trying to get to talk to each other. Basically I want to achieve the same button effect as here but with a group of buttons that get produced from xml via innerhtml. here's the code I'm using to create the buttons: Code: sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="label">' + label + '</div><div id="bus"><button onclick="startCar(this,' + poly_num + ')" style="height:24px; width:30px"> <img id=this,"pauseBtn" src="play2.png" ></button></div><br>'; and here's the code that attempts to toggle them between the play and pause symbol: Code: function startCar(btn,pnum,poly_num){
if (this.wasRun)
{
btnAction();
} else {
if( !this.wasRun )
toggleRun(btn, pnum);
btnAction();
this.wasRun = true;
}
}
function toggleRun(btn, pnum){
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i ) {
var inp = inps[i];
if ( inp.value = "play2.png" ) inp.value = "pause2.png";
}
startAnimation(pnum);
}
function btnAction() {
var currentBtn = document.getElementById('pauseBtn').src;
var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);
if (paused == true){
paused=false;
if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
}
}
The page I'm working on is here Everything works as it should except for the toggling between images. Similar TutorialsHi, I have this button: Code: <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/> which changes from the play image to the pause image when clicked, using this function: Code: function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').src="pause.png";
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').src="play.png";
}
}
but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image secondly, the button reverts to the pause image regardless of if it is in play or pause state. I'm kind of lost - can someone throw me a line? the page I'm working on is here if you want to have a look Hi, I have a good toggle script that does what I want for the most part. I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows. However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy. I am attaching the code and a link to the page. Code: <!-- Hide/Show -->
<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('a');
var i=aObj.length;
while(i--) {
aObj[i].count = i;
aObj[i].onclick=function() {return showHide(this);};
showHide(aObj[i]);
}
};
function showHide(obj) {
var aDiv=document.getElementById('wrapper').getElementsByTagName('div');
if (typeof showHide.counter == 'undefined' ) {
showHide.counter = 0;
}
aDiv[showHide.counter].style.display = 'none';
aDiv[obj.count].style.display = 'block';
showHide.counter = obj.count;
return false;
}
</script>
http://www.michelleswann.com/test/index.html Thanks so much for any help! I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? Putting some javascript into a pdf file and can't get this to work out right. Basic setup: Field X = checkbox; Field Y = numeric input field; Here's what should happen (increment is toggled): Y has a value. When X is checked, Y is increased by 5. When X is unchecked, Y goes back to its original, unmodified value. Here's what really happens (increment is subtracted): Y has a value. When X is checked, Y is reduced by 5. When X is unchecked, Y is reduced by 5 again. Anytime X is clicked on, Y is reduced by 5 yet again. Here's the code: Code: function check_box(X, Y){
if(X.checked == true){
Y.value += 5;
} else {
Y.value -= 5;
}
Any help or advice is greatly appreciated. Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave Hi guys, I'm trying to add a php string to some javascript: document.getElementById("button").value = mygetrequest.responseText; basically there are a load of buttons on one page. So i need to add a value at the end of button. Basically the ID of each row so button<? echo $row['ID']; ?> but i'm not too sure how i would do this in javascript. Any help Thanks in advance So i have this algorithm and im not sure how to translate it into javascript if (the Round Trip button is checked) double the fare my fare calculated works correctly based on the distance traveled, but how do i make it so that when round button is checked the fare gets doubled, im not quite sure how to make that a code I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" />
how can i transform "button" to image button (gif) I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery i am trying to make a button which is a .gif that will change when a mouse over occurs and a animation will occur when click then will relocate to a new page but i am getting multiple images at the same time pleas help. Code: <html>
<body>
<img src="Jepordy/Fla files/Button set 1.gif" >
<img name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0" alt="javascript button">
<SCRIPT language="JavaScript">
var myimgobj = document.images["jsbutton"];
</SCRIPT>
<A href="#" onMouseOver="return changeImage()" ><img
name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0"
alt="javascript button"></A>
<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button mouse over.gif";
return true;
}
</SCRIPT>
<A href="#" onMouseOver="return changeImage()" onMouseOutwidth="550" height="400" border="0" alt="javascript button"= "return changeImageBack()"
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0"
alt="javascript button"></A>
<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function handleMDown()
{
document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif";
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</SCRIPT>
<A href="QUESTION LOCATION FOR THIS BUTTON GOES HERE!"
onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()">
<A href="http://www.javascript-coder.com/"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0"
alt="javascript button"></A>
</body>
</html>
hi, I'm trying to modify this function: Code: function togglePoly(poly_num) {
if (document.getElementById(poly_num)) {
if (document.getElementById(poly_num).checked) {
gpolys[poly_num].show();
} else {
gpolys[poly_num].hide();
}
}
}
which works for a checkbox to one that works for a button. I guess I'm stuck on what to replace "checked" with there in the 3rd line. is there some one word answer, or do I need to I rewrite the function to be more button-friendly? thanks in advance I'm tryingto make a button where, when you click the button, a variable will increase and refresh (reload the number displayed, but one number higher. Here is what I have: Code: <html> <head> </head> <body> <script type="text/javascript"> x=1 document.write(x) </script> <input type="button" value="Up" onclick="document.write (++ x) "> <input type="button" value="Down" onclick="document.write (-- x)"> <input type="button" value="Reload" onclick="history.go(0)"> </body> </html> The problem with this is: When you hit the "up" button, everything on the page dissapears and it just outputs "2". All the buttons and stuff dissapear? There must be a better way to do it. And would I need to use a database. Any help? I need to use javascript in a way in which it will keep clicking a button. The source code for that button is below: Code: <script type="text/javascript">
function set_opacity(id, opacity) {
element = document.getElementById(id)
if (/MSIE/i.test(navigator.userAgent)) { element.style.filter='alpha(opacity='+opacity+')'; }
else { element.style.opacity = opacity/100; }
}
</script>
<div class="recruiter_enabled">
<table cellspacing="0" style="width: 100%">
<tr>
<td>
<p>
<script type="text/javascript">
//<![CDATA[
recruiter_clicks = 1
//]]>
</script><a href="/recruiter/recruit/3p5tjd4pdnbg0" id="recruit_link" onclick="return(submit_link_as_post_with_opacity(this, 'recruit_image'))"><img alt="" class="start_recruiting" id="recruit_image" src="/A.gif?1221518016" /></a><script type="text/javascript">
//<![CDATA[
link = document.getElementById('recruit_link');
link_href = link.href;
link.href = "#";
set_opacity('recruit_image', 50);
setTimeout("link = document.getElementById('recruit_link'); link.href = '" + link_href + "'; recruiter_clicks = 0; set_opacity('recruit_image', 100)", 2000);
//]]>
</script>
Therefore, I need javascript to keep clicking the button until it has clicked it 375 times. How would I be able to do this? All: I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added. What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great. Thanks, Stephen Code: <script type="text/javascript">
function showHide(el){
obj = document.getElementById(el).style;
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Mediun
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Low
</label>
<p id="group1" style="display: none;">
<label>
<b>friend1  </b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label>
<br />
<label>
<b>friend2  </b><input type="text" name="textGroup1" value="@gmail.com" />
</label>
</p>
</form>
I have this line of code: <input type='text' id='fCode' style="width:875px; height:22px;"/><br /><br /> Does anyone know how to add a copy button to so when you click it it copies everything in the box to your clipboard? Thanks -Wardman |
|||||||