|
JavaScript - Button Colors Flipfloping
I'm trying to make buttons that change from one color to another when you click them and change back when you click them a third time. I wrote this page but it only works on Firefox(Not IE or Chome, untested on safari or Opera). I'm using javascript to change the button colors. Is there another way to do this that works universal or another tool such as CSS?
Code: function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
if (btn.style.background.substring(0,3)=="Red")
{
btn.style.background = "white";
btn.style.color = "black";
return;
}
else
{
btn.style.background = "Red";
btn.style.color = "black";
return;
}
}
Similar Tutorialshey there, I have a problem when trying to set a different color for each button on my 4 blocks, matching the proper color. Here is my page http://holidays.area-italia.com I ve copy/paste the default art-button in the template.css file adding a " -red" suffix. I also made a new image with the red colors to match the active/hovered/pressed. Here is the code: Code: /* begin Button-red */
.art-button-wrapper-red a.art-button-red,
.art-button-wrapper-red a.art-button-red:link,
.art-button-wrapper-red input.art-button-red,
.art-button-wrapper-red button.art-button-red
{
text-decoration: none;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
position:relative;
top:0;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #FFFFFF !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 37px;
height: 37px;
margin: 0 !important;
padding: 0 26px !important;
overflow: visible;
cursor: pointer;
}
.art-button-red img, .art-button-wrapper-red img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper-red
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 37px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2-red .art-button-wrapper-red
{
display: block;
float: left;
}
input, select, textarea
{
vertical-align: middle;
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
}
.art-block-red select
{
width:96%;
}
.art-button-wrapper-red.hover .art-button-red, .art-button-wrapper-red.hover a.art-button-red:link, .art-button-red:hover
{
color: #FFFFFF !important;
text-decoration: none !important;
}
.art-button-wrapper-red.active .art-button-red, .art-button-wrapper-red.active a.art-button-red:link
{
color: #FCFCFD !important;
}
.art-button-wrapper-red .art-button-l-red, .art-button-wrapper-red .art-button-r-red
{
display: block;
position: absolute;
height: 121px;
margin: 0;
padding: 0;
background-image: url('images/buttonr.png'); (I made a new image with the red colors)
}
.art-button-wrapper-red .art-button-l-red
{
left: 0;
right: 14px;
}
.art-button-wrapper-red .art-button-r-red
{
width: 417px;
right: 0;
clip: rect(auto, auto, auto, 403px);
}
.art-button-wrapper-red.hover .art-button-l-red, .art-button-wrapper-red.hover .art-button-r-red
{
top: -42px;
}
.art-button-wrapper-red.active .art-button-l-red, .art-button-wrapper-red.active .art-button-r-red
{
top: -84px;
}
.art-button-wrapper-red input
{
float: none !important;
}
/* end Button-red */
Then I copy/paste the default code button in the index.php adding the "-red" suffix, into my red block: Code: <center>
<span class="art-button-wrapper-red">
<span class="art-button-l-red"> </span>
<span class="art-button-r-red"> </span>
<a class="readon art-button-red" href="javascript:void(0)">More</a>
</span>
</center>
Doing all the mentioned above doesnt work, it always shows the default button. I know there is a javascript which rules it but i dont know how to edit/add the function. Here is my part of the script.js related to the button: Code: /* begin Button */
function artButtonSetup(className) {
jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function(i, val) {
var b = jQuery(val);
if (!b.parent().hasClass('art-button-wrapper')) {
if (!b.hasClass('art-button')) b.addClass('art-button');
jQuery("<span class='art-button-wrapper'><span class='art-button-l'> </span><span class='art-button-r'> </span></span>").insertBefore(b).append(b);
if (b.hasClass('active')) b.parent().addClass('active');
}
b.mouseover(function() { jQuery(this).parent().addClass("hover"); });
b.mouseout(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
b.mousedown(function() { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
b.mouseup(function() { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
});
}
jQuery(function() { artButtonSetup("art-button"); });
/* end Button */
Anyone who can help out please? Many thanks. I dont get why that doesn't work... it has me baffled 0.o Code: <html>
<div id="divId">Button clicked 0 times</div>
<input type="button" value="click me" onclick="divClick()" />
<script type="text/javascript">
var i = 0;
function divClick() {
var colorNum1 = Math.floor(Math.random()*255);
var colorNum2 = Math.floor(Math.random()*255);
var colorNum3 = Math.floor(Math.random()*255);
var color = "rbg(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")";
i++;
var divId = document.getElementById("divId");
divId.style.backgroundColor = color;
divId.innerHTML = "Button clicked " + i + " times";
}
</script>
</html>
figured it out finally i had rbg instead of rgb >< I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none. I do not know if this is possible, but if anyone can point me to a tutorial, I would be appreciative. I just am having a hard time searching the proper terms. Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to. the assignment says nothing about naming the buttons the hex numbers for the color therefo I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+() and the text shown on the button would be the same as the hex number generated. feed back please I got 3 sections on the site, at the bottom of each are 5 bars which are used to change the text color. I'm trying to minimize the code, so I created an array which contains all the colors, but I'm not sure where to put the call to the array. If I put it in the for loop, the selected color will always be green no matter which color you click. The bars should also go up to 40px when clicked and when the next bar is clicked the current bar at 40px should go back to it's originals size(20px) Any ideas? this is the JS Code: var colors = new Array(4);
colors[0] = "#ed1c24";
colors[1] = "#736257";
colors[2] = "#620460";
colors[3] = "#e87e01";
colors[4] = "#00a650";
function changeColor(numerSekcji, numerKoloru)
{
document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.paddingTop = 20 + "px";
document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop = 0 + "px";
for (i = numerKoloru; i <= 4; i++) {
document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.padding = 0 + "px";
document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop = 20 + "px";
document.getElementById('section' + numerSekcji + 'Text').style.color = colors[i];
}
}
}
this is the html for the color boxes Code: <a class="color1" id="section1Color1" href="javascript:changeColor(1, 1)"> </a>
<a class="color2" id="section1Color2" href="javascript:changeColor(1, 2)"> </a>
<a class="color3" id="section1Color3" href="javascript:changeColor(1, 3)"> </a>
<a class="color4" id="section1Color4" href="javascript:changeColor(1, 4)"> </a>
<a class="color5" id="section1Color5" href="javascript:changeColor(1, 5)"> </a>
edit: edited the js... edit2: all the colors are going through the loop, the 1st one is missed :S changing the html to start with ...changeColor(1, 0) does not help. Clicking on the 1st bar doesn't run the loop. How do I format a string in different colors with canvas:fillText(...); I want the following result: str = "This is blue", where "This is" is black color and "blue" is blue color. 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>
Have been trying to make a button to close a web page but every time i try to get it validated "strict" it fails. I have used the following code. Code: <form action=""> <input type="button" value="Close Window" onclick="window.close()"> </form> Would really appreciate any help. Thanks 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 an timed button. When you come to site, you must wait in that site ?? seconds and then button comes pressable.
hye every1, can someone checkout my code because it is not working.at first the form is working until i add reset button then i suddenly not working anymore.thank you for your help. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radio Group Calculation</title>
<script type="text/javascript">
var brand=0;
function calc()
{
var form = document.forms.Calculator;
var bdpr = Number( getSelectedValue(form.elements.a) );
var bdft = Number( getSelectedValue(form.elements.b) );
var bdbs = Number( getSelectedValue(form.elements.c) );
var prft = Number( getSelectedValue(form.elements.d) );
var prbs = Number( getSelectedValue(form.elements.e) );
var ftbs = Number( getSelectedValue(form.elements.f) );
if ( isNaN(bdpr)||isNaN(bdft)||isNaN(bdbs)||isNaN(prft)||isNaN(prbs)||isNaN(ftbs) ){
alert("Please answer the question."); }
else{
brand=1+bdpr+bdft+bdbs;
price=1+1/bdpr+prft+prbs;
feature=1+1/bdft+1/prft+ftbs;
basic=1+1/bdbs+1/prbs+1/ftbs;
if(brand>price && brand>feature && brand>basic)
window.open('syg.html');
elseif(price>feature&&price>basic)
window.open('syg.html');
else(feature>basic)
window.open('syg.html');
}
}
function getSelectedValue(flds) {
var i = 0;
var len = flds.length;
while (i < len) {
if (flds[i].checked) {
return flds[i].value;
}
i++;
}
return "";
}
document.forms.Calculator.reset();
</script>
</head>
<body>
<br/><b>Please rank the functionality based on your preferences</b><br/><br />
<form name="Calculator" action="">
<label>Is brand important that price of a phone?</label><br />
<input name="a" type="radio" id="a_1" value="1">Not important<br />
<input name="a" type="radio" id="a_2" value="2">A little of important<br />
<input name="a" type="radio" id="a_3" value="3">Moderate important<br />
<input name="a" type="radio" id="a_4" value="4">Important<br />
<input name="a" type="radio" id="a_5" value="5">Very important<br />
<label >Is brand important than features of a phone?</label><br />
<input name="b" type="radio" id="b_1" value="1">Not important<br />
<input name="b" type="radio" id="b_2" value="2">A little of important<br />
<input name="b" type="radio" id="b_3" value="3">Moderate important<br />
<input name="b" type="radio" id="b_4" value="4">Important<br />
<input name="b" type="radio" id="b_5" value="5">Very important<br/>
<label >Is brand important than basic functions of a phone?</label><br />
<input name="c" type="radio" id="c_1" value="1">Not important<br />
<input name="c" type="radio" id="c_2" value="2">A little of important<br />
<input name="c" type="radio" id="c_3" value="3">Moderate important<br />
<input name="c" type="radio" id="c_4" value="4">Important<br />
<input name="c" type="radio" id="c_5" value="5">Very important<br />
<label >Is price important than features of a phone?</label><br />
<input name="d" type="radio" id="d_1" value="1">Not important<br />
<input name="d" type="radio" id="d_2" value="2">A little of important<br />
<input name="d" type="radio" id="d_3" value="3">Moderate important<br />
<input name="d" type="radio" id="d_4" value="4">Important<br />
<input name="d" type="radio" id="d_5" value="5">Very important<br />
<label >Is price important than basic function of a phone?</label><br />
<input name="e" type="radio" id="e_1" value="1">Not important<br />
<input name="e" type="radio" id="e_2" value="2">A little of important<br />
<input name="e" type="radio" id="e_3" value="3">Moderate important<br />
<input name="e" type="radio" id="e_4" value="4">Important<br />
<input name="e" type="radio" id="e_5" value="5">Very important<br />
<label >Is features important than basic func. of a phone?</label><br /></td>
<input name="f" type="radio" id="f_1" value="1"> Not important<br />
<input name="f" type="radio" id="f_2" value="2">A little of important<br />
<input name="f" type="radio" id="f_3" value="3">Moderate important<br />
<input name="f" type="radio" id="f_4" value="4">Important<br />
<input name="f" type="radio" id="f_5" value="5">Very important<br />
</form>
<input type="button" onclick="calc()" value="Next" />
<input type="reset" value="Clear">
</body>
</html>
Hi, I was trying to add some simple javascript (toggle visibility function of a div) to the FB 'like' button and 'Google +1' button. This to simply create some more visitor interactivity by showing a thank you message for doing so. I've tried by just adding 'onclick=' to the element that actually shows the button, with a <a href="#" onlcick="..."> --element--</a> manner, and with a <span> and a <div> element around it. Neither of them work. The toggle script is 100% correct (using it actively with <a href="javascript:void(0);" onclick="javascript:toggleVisibility('feedbackform')">feedback</a> ) Of course I made sure the div id had correct name and it is unique for the toggle function. Anybody got any ideas on how to go with this? JS: Code: function toggleVisibility(controlId) {
if (document.getElementById) { // DOM3 = IE5, NS6
var control = document.getElementById(controlId);
if(control.style.display == "")
control.style.display = "none";
else
control.style.display = "";
}
else {
if (document.layers) { // Netscape 4
if(document.controlId.display == "")
document.controlId.display = "none";
else
document.controlId.display = "";
}
else { // IE 4
if(document.all.controlId.style.display == "")
document.all.controlId.style.display = "none";
else
document.all.controlId.style.display = "";
}
}
}
All, I have the following code: Code: <form action="" name="myform" method="post">
<input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
<p>
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
<?php
if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
</label>
<br />
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
<?php
if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
</label>
<br />
<input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/>
</p>
</form>
When I submit this, it goes to this function: Code: function voteupdate(obj) {
var poststr = "picimage=" + document.getElementById("picimage").value +
"&bigger_id=" + encodeURI( document.getElementById("bigger_id").value );
alert(poststr);
makePOSTRequest('voteresults.php', poststr);
}
However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong? Thanks. Hello. I have created a Bold button - when i click the button it applies it into my textarea. The Problem is if i want to apply the bold style only to a single line and the rest of the written text will be normal and not bold it doesn't work. How can I add to the function that when i select a certain line and click on the button to make it bold only the selected line will be bold?? This is the script : PHP Code: <script type="text/javascript"> function bold(id) { var element = document.getElementById(id); element.style.fontWeight = ( element.style.fontWeight == "bold" ) ? "normal" : "bold"; } </script> And this is the button : PHP Code: <img src="Bold.bmp"width="42" height="39" title="Bold Font" onclick="bold('bodytext')" style="cursor:pointer;" /> |
|||||||