|
JavaScript - 5 Colors Help With Function To Change All
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. Similar Tutorialsi have an image with an onclick function and parameters 0,1 i want to change the parameters of the onclick function through the same function? Code: <img id="down0" onclick=swap(0,1) />
<javascript>
function swap(a,b){
var imgda=document.getElementById('down'+a);
imgda.onclick = swap(b,b+1);
}
</javascript>
normally it should change the onclick to swap(1,2) but it remains 0,1 whats happening?? p.s. plz dont tell me about the javascript tag, its just for quick explaining... not sure if I"m doing this correctly so seeing who can see or tell me if I'm doing this wrong. Say you chose an option from select box it would go into the events table and see that there's not been another event with that id so it'll return 1 and put it inside the text field called Label and when the user fills out the rest of the form it'll put 1 for the label field in the database table when the form is submitted then say the next week rolls around and the user clicks on that same option again and it goes to the events table and sees that there's an occurance of that show via the matching eventids and grabs all the labels with that matching eventid which at this point is only 1 so it would add 1 to that number and return 2 to the Label form text field. form page Code: $('#eventid').change(function() {
var eventid = $("select#eventid").val();
var dataString = 'eventid='+ eventid;
$.ajax({
type: "POST",
url: "processes/booking.php",
data: eventid,
success: function(data) {
$('#label').append(data);
}
});
});
<div class="field required">
<label for="eventid">Select Event</label>
<select class="dropdown" name="eventid" id="eventid" title="Select Event">
<option value="0">- Select -</option>
<option value="0">** Recurring Events **</option>
<?php
$query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Recurring"';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
}
?>
<option value="0">** Singular Events **</option>
<?php
$query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Singular"';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
}
?>
<option value="0">** Pay Per View Events **</option>
<?php
$query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Pay Per View"';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="label">Event Label</label>
<input type="text" class="text" name="label" id="label" title="Label" readonly="readonly" />
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
processes/booking.php PHP Code: $eventid = (int)$_GET['eventid']; $result = mysqli_query("SELECT * FROM `events` WHERE `event_id` = '$eventid'"); $list = mysqli_num_rows($result); $label = $list + 1; I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
onclick="CB(document.getElementById('output').value); return false;"
</form name="I5" width="38" height="38">
The below script keeps a running total dollar tab. It uses the "name" of the elements but I would like it to use the "ID" instead. Can somebody pretty please adjust the function to look at the id. I've changed the first 2 form elements to id. Tracy Code:
<script language="JavaScript" type="text/javascript">
<!--
function CalculateTotal(frm) {
var order_total = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_name = form_field.name
// Is it a "product" field?
if (form_name.substring(0,4) == "PROD") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
frm.TOTAL.value = round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
//-->
</script>
<FORM>
<TABLE BORDER =3>
<TR><TD ALIGN="CENTER"><B>Please <BR>
enter <BR>
quantity:</FONT></TD>
<TD ALIGN="CENTER"><B>Description</TD><TD ALIGN="CENTER"><B>Price<BR>
(each)</B></TD></TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SP_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SPMG_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Multi-Grain Bread* 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SPCR_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Cinnamon-Raisin Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SW_3.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt White Bread* 18 oz</TD><TD ALIGN="RIGHT">$3.99</TD>
</TR>
<TD>TOTAL</TD>
<TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD>
</TABLE>
<P>
</FORM>
I have some javascript code that hides and unhides a menu when a link is clicked, and that is working just fine. What I also need the function to do is switch the CSS class of change_this in the code below to change_that when the link is clicked, and then switch it back to change_this when the link is clicked again. Can someone assist me? I have tried integrating/modifying other scripts I found with this one, but nothing has worked for me. It seems so simple, but I just cant get this thing working. Thanks to anyone who replies with help! Code: <script type="text/javascript">
function HideandUNhideObj(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
</script>
Code: <li class="change_this"><a id="nav" href="javascript: void();" onclick="HideandUNhideObj('display');"></a>
<ul id="display" style="display: none;">
<div id="container_div">stuff</div>
Would this work? or do I got the wrong function commands? How would I alter this to make it work, been staring at the screen for 8 hours..... var myInDesign = app var myDocument = app.activeDocument var myDocName = myDocument.name app.findParagraphStyle.caseSensitive = false; app.findParagraphStyle.wholeWord = false; app.findCharacterStyle.wholeWord = false; app.findCharacterStyle.caseSensitive = false; app.findParagraphStyle.findWhat = "SN.outabout.DAY-Gray"; app.changeParagraphStyle.changeTo = "SN.Holiday-Day_of_the_week"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.outabout.DATE"; app.changeParagraphStyle.changeTo = "SN.Holiday-Month_and_Day"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.listingsLT"; app.changeParagraphStyle.changeTo = "SN.Holiday-Paragraph"; app.documents.item(0).changeParagraphStyle(); app.findCharacterStyle.findWhat = "SN.listingsBOLD"; app.changeCharacterStyle.changeTo = "SN.Holiday-Title_Paragraph"; app.documents.item(0).changeCharacterStyle(); //myInCopy = CreateObject("InCopy.Application.CS3") //Not sure if this would work, just crafting idea's. //var myDocument = myInCopy.ActiveDocument //var mySelection = myInCopy.Selection.Item(1) //var myStory = MySelection.ParentStory //var myText = myStory.Paragraphs.Item(1) //myStory.CheckOut //myText.ApplyParagraphStyle myDocument.ParagraphStyles.Item("zAPPROVED"), True //myStory.CheckIn Can I just do this with like a Nested If, then Statement? Hello im trying to make a drop down for my store, so that onchange the price of the option is displayed and my paypal buttons variables are changed. I cant get the "total" function to call when the selection of the drop down is changed. please help iv'e been looking around for a week and still havent fixed it. My event handler sets on load <body onload="x.onchange=function(){total();}"> heres my script Code: <script type="text-JavaScript">
"use strict";
/*document.getelementbyid("ddm").onchange = total;*/
var price;
var title;
var x = document.getelementbyid("ddm");
var size_prices= new Array();
size_prices["cards"]=18;
size_prices["5x7sm"]=20;
size_prices["5x7dm"]=25;
size_prices["8x10sm"]=30;
size_prices["8x10dm"]=35;
size_prices["16x20sm"]=45;
size_prices["16x20dm"]=50;
function total() {
y = size_prices[x.value];
document.getelementbyid("total").innerhtml = "$" + y + ".00";
title = "image title" + (x.value);
document.getelementbyid("title").setAttribute("value", title);
document.getelementbyid("price").setAttribute("value", y);
}
function verify() {
}
</script>
here is the code for the select and the paypal button Code: <form action=""> <select name="sizes" id="ddm"> <option value="_">Please chose a size</option> <option value="cards">cards</option> <option value="5x7sm">5x7 single mat</option> <option value="5x7dm">5x7 double mat</option> </select> </form> Code: <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="verify()"> <input type="hidden" name="business" value="kin@kinskards.tcom" /> <input type="hidden" name="cmd" value="_cart" /> <input type="hidden" name="add" value="1" /> <input type="hidden" id="title" name="item_name" value="Candle" /> <input type="hidden" id="price" name="amount" value="3.95" /> <input type="hidden" name="currency_code" value="USD" /> <input type="image" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="paypal" /> <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" /> </form> I'm trying to call a javascript function from within my swf and I'm having a couple of problems which are confussing me somewhat. I'm using this to call the function from flash: Code: ExternalInterface.call("pgcover");
I know that this is calling the function as I have set it trigger an alert action and this comes up properly. But I don't want the function to trigger an alert, this is just for testing purposes. I instead want it to change the styling on a div. I have set up a test page where I have asigned the function to a button and this works, the div display changes from block to none. When I get the swf to call the function setup to do the same thing, nothing happens. Code: function pgcover()
{
document.getElementById("unlayout").style.display= "none";
}
My swf is embedded in the html page that the javascript is on, I have checked all code and have rulled out spelling mistakes etc. Any help with this would be amazing as it is driving me crazy. I'm still a relative noob and i'm wondering if anyone can help. items use a structured form, so any item in that category will display on the same form when selected i want to have the save button run its normal save on all items except 1 specific item - on the 1 item i want to have it function as a save as copy (while still having "save" as its visible text), the current code set in a drop down list is $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))); can anyone offer any suggestions? really stuck on this one For the sample code: Code: <form name=form>
<ul>
<li><input type="text" onkeyUp="calc1();" name=x ></li>
<li><input type="text" onkeyUp="calc2();" name=y ></li>
</ul>
</form>
<script>
function calc1() {
document.form.y.value = (10 * document.form.x.value).toPrecision(5);
}
function calc2() {
document.form.x.value = (0.1 * document.form.y.value).toPrecision(5);
}
</script>
How can I use a checkbox to : (1) Upon check, change the current values to toExponential(5) format (2) Use a different script and/or function that would then calculate with toExponential(5) [as opposed to the hard coded toPrecision(5) in the current functions. (3) Upon unchecking, the result should should go back to Precision and change the function and/or script back to the original. Basically I want to have a different background image for every time of the day. The function by itself works okay with onclick or onload placed in body. Code: function changesky()
{
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
What I want to do is have my background change in addition to a message. So instead of just "Good Morning" text I also want the background to change. Code: if (time>=4 && time<12)
{
document.write ("<p>Good Morning!</p>");
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
Tried this, but it didn't work so what's the format for calling a function inside of an if statement? Or what other method should I use to do this? Quote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! 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 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. hey 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. 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'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;
}
}
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 >< |
|||||||