|
JavaScript - Controlling Css Padding Values Using Javascript
I have the following code ...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. Similar TutorialsHello, I need your help. I have 2 checkboxes. How would I control one from the other? Eg. [ ] Option A [ ] Option B - If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked. - If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked. How would that be written in Javascript, I am totally confused. Any help with this is much and foremost greatly appreciated. Cheers, J I am trying to use JavaScript to manipulate the appearance of a web browser. (1) Initially I need to identify and save the current browser settings (e.g. position, height, width, caption on or off, menubar on or off, border on or off). (2) Then I need to change the appearance of the browser to full screen, no border, no caption, no status bar, no menubar). (3) Finally, I need to return the browser to the initial settings using the settings saved at the beginning. I am a novice at JavaScript and am having a difficult time locating details of the language that permit me to accomplish my objectives. John Chapman jchapman@onlinecbt.com I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit? <input type="hidden" name="weight" value=".5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="1.5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="10 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="20 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="50 <input type="hidden" name="weight_unit" value="lbs"> The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction: <html> <body> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="test@test.com"> <input type="hidden" name="currency_code" value="USD"> <input type='hidden'text' name='amt' id='amt' value="0.00"/> <table> <tr> <td> <input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr> <tr><td> <select name="os0" onChange="getamt()"> <option value="select">Please Select</option> <option value="1/2 lb.">1/2 lb. $3.99 USD</option> <option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option> <option value="10 lbs.">10 lbs. $25.80 USD</option> <option value="20 lbs.">20 lbs. $42.75 USD</option> <option value="50 lbs.">50 lbs. $86.20 USD</option> </select></td></tr> </table> <script type="text/javascript"> function getamt() { var sh=0; var choice = document.getElementById("os0").selectedIndex; if (choice == 0) { sh=0; } if (choice == 1) { sh=.5; } if (choice == 2) { sh=1.5; } if (choice == 3) { sh=10; } if (choice == 4) { sh=20 } if (choice == 5) { sh=50.00; } document.getElementById("on0").value=sh; } </script> <input type="image" src="https://images.paypal.com/images/sc-but-03.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </body> </html> Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please? Code: <td> <input type="checkbox" name="weddingitem1" value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br /> <input type="checkbox" name="weddingitem2" value="Champers" id="Champers"/><label for="Champers" >Champers<br /> </td> Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning. The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden. I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so. Any help would be greatly appreciated thanks so much i am making a mock website where the user make their own computer by selecting items from drop down menus. then a value of the item comes up below. this works but i am having trouble adding the numbers up for the total cost. here is my code <html><head><title>build</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"> </style></head> <body> <script type="text/javascript"> var motherboard = new Array( '74', '50', '73', '106', '269', '64', '55', '135', '47', '79', '118', '163'); var cpu = new Array( '88', '104', '168', '352'); function changeMotherboard(Mid) { var ind = document.getElementById(Mid).selectedIndex; document.getElementById("motherboardDisplay").innerHTML=motherboard[ind]; } function changeCpu(Cid) { var ind = document.getElementById(Cid).selectedIndex; document.getElementById("cpuDisplay").innerHTML=cpu[ind]; } </script> </head><body> <form> Motherboard <select id="motherboard" onChange="changeMotherboard('motherboard');"> <option value="0">Asus P5G41C-M-LX G41 DDR2+DDR3</option> <option value="1">MSI G41M-P33 </option> <option value="2">Asus P5P41T-LE </option> <option>G-B H55M-S2H</option> <option>Asus P7P55D-E-Deluxe</option> <option>Asus M2N68-AM Plus </option> <option>ASRock N68S3-UCC </option> <option>Asus M4A88TD-M-EVO-USB3</option> </select><br> </form> <div id="motherboardDisplay">Select from the list to see price</div> <form> CPU <select name="cpu" id="cpu" onChange="changeCpu('cpu');"> <option value="0">E6500</option> <option value="1">Core G6950</option> <option value="2">i3-550</option> <option>Core i7-930</option> </select> <br> </form> <div id="cpuDisplay" type = text>Select from the list to see price</div> <p> </p> <p> </body> </html> hi everybody; i'm using this code to trigger functions with left and right arrow keys.. but they work even if the arrow keys pressed in input boxes.. is there any way to prevent this code to work when user presses the arrow keys in input boxes? Code: document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
geri();
gostergeyaz();
break;
case 39:
ileri();
gostergeyaz();
break;
}
};
Hello I'm trying to compare two values and return with an answer, 2 if Value 1 is greater than Value 2, 0 if Value 2 is greater than value 1 and 1 if the two values are equal. I have a script which does this when the Compare Button is selected, however I would like to remove the button so the answer is generated when the Values ae entered The script is [CODE] <html> <head> <script type="text/javascript"> <!-- function resultH1() { var str1 = document.getElementById("TotalH1").value; var str2 = document.getElementById("TotalA1").value; if(str1 != str2) { if(str1 < str2) { document.getElementById("ans").value= "2"; } else { document.getElementById("ans").value= "0"; } } else { document.getElementById("ans").value= "1"; } } // --> </script> </head> <body> <form name = "clock" action = ""> <table border = "1"> <caption>Compare</caption> <tr><td>Value 1</td> <td><input name = "TotalH1" type = "text" /> </td></tr> <tr><td>Value 2</td> <td><input name = "TotalA1" type = "text" /> </td></tr> <tr><td>Answer</td> <td><input type=text name="ans" size="3" readonly="readonly" style="background:silver"> </td></tr> <tr><td><input type = "button" value = "Compare" onclick = "resultH1()" /></td></tr> </table> </form> </body> </html> [ICODE] Can anyone advise what I need to do to remove the button Thanks hi, (JAVASCRIT) the actual program reads and prints values from a checkbox tree and this piece of code does it. Code: dhtmlXTreeObject.prototype.getAllChecked=function(){
return this._getAllChecked("","",1);
}
dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
return this._getAllChecked("","",0);
}
dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
if(!htmlNode)htmlNode=this.htmlNode;
if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
var j=htmlNode.childsCount;
for(var i=0;i<j;i++)
{
list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
if(list)return list;else return "";
};
the values are returned to alertbox. Code: <a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br> kindly help me with reading the returned values in to an array or list (but bot in alertbox) ...so that i can pass them to next JSP page. waiting for ur answer, BeanBoy ! I wasnt sure where to put this one, since its mainly javascript I thought I would put it here. I am trying to pull a value being stored in a php function (it works fine) which is echoed into an html element, and use it in a javascript function. my HTML: Code: <img id="menu_image" src="<?php echo get_php_value(); ?>" width="356" /> my javascript: Code: function get_large_image(){
var image = document.getElementById('menu_image').src;
alert(image);
}
right now the alert is giving me flie path to the current page, I need a file path to the image. When I had javascript pull a value from an input tag using the id to reference and stored the php function in the value attribute, I got this: "object HtmlElement" The final purpose of all this is to modify dynamically and HTML <a>'s href and class attribute based on a certain condition being true. apprecaite the help Problem I have an index.html that sets up 3 Frames. They are called FrameTop, FrameA and FrameB. See pic below. In FrameTop the user can type in a url into a textbox with id="urlINPUT". When user clicks LOADA it loads that url into FrameA. User can then browse web in FrameA, clicking links etc and going to new pages. The second button LOADB is designed to determine the current location/url of the page displayed in FrameA and load that into FrameB. So far when I write the javascript in FrameTop LOADA works but LOADB loads the FrameTop into FrameB! [error!] If someone can please help me with this problem it would be much appreciated. This work is going towards a free website idea. I suspect my error lies in use of parent/self in the parent.frame.location. Here is my page layout. -----------------Index.html------------------------------------- <frameset rows="5%,*"> <frame name="FrameTop" src="frame_top.html" /> <frameset cols="50%,50%"> <frame name="FrameA" id="FrameA" src="frame_a.html" /> <frame name="FrameB" id="FrameB" src="frame_b.html" /> <noframes> </noframes> </frameset> --------------------frame_top.html------------------------------- <SCRIPT language="JavaScript"> function loadURLintoA() /*gets the url typed in by user and loads it into Frame A. This works fine*/ { var urlrequest= "http://"+document.getElementById('urlINPUT').value; parent.FrameA.location.href = urlrequest; /*sets FrameA location to url that user enters in frametop input*/ } </SCRIPT> <SCRIPT language="JavaScript"> function loadAintoB() /*I WANT this to get the url of the website loaded in frame A and load it into frame B*/ { var urlofA = parent.FrameA.location; parent.FrameB.location = urlofA; /*this is supposed to get the url of FrameA and load it into FrameB*/ } </SCRIPT> </HEAD> <body bgcolor="#848484"> http://<input type="text" name="urlINPUT" value="" id="urlINPUT" size="10"> <input type="button" name="loadAbutton" id="loadAbutton" value="LOAD A" onclick="loadURLintoA()"> <input type="button" name="loadBbutton" id="loadBbutton" value="LOAD B" onclick="loadAintoB()"> ---------------------------------------------- What happens when I run index.html index.html loads the index correctly and displays FrameTop, FrameA and FrameB. The load A button also works correctly BUT when I click LoadB it loads FrameTop into FrameB! This happens when no page is loaded into FrameA AND when an external page in loaded in. Please help, I would be very greatfull if you could point out my mistake. Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. I like to store into database with PHP values from Javascript. How to do this as I like to test local values from visitor. PHP Code: <script type="text/javascript"> document.write("Browser CodeName: " + navigator.appCodeName); document.write("<br /><br />"); document.write("Browser Name: " + navigator.appName); document.write("<br /><br />"); document.write("Browser Version: " + navigator.appVersion); document.write("<br /><br />"); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write("<br /><br />"); document.write("Platform: " + navigator.platform); document.write("<br /><br />"); document.write("User-agent header: " + navigator.userAgent); </script> Hello folks: I've got an html table populated by a php foreach routine. One field in this table is an Input type=checkbox. The goal is to run a javascript function when the user checks the checkbox. But, since the checkbox is in a table populated by a foreach routine, I'm having some problems. Below is the applicable code for my table: <?php foreach($results as $row) { $bk_owner = $row['BookOwner']; $addrss_owner = $row['AddressOwner']; $f_name = $row['FName']; $l_name = $row['LName']; $email = $row['EmailAddress']; $d_phone = $row['DeskPhone']; $ext = $row['Ext']; $cell = $row['CellPhone']; $title = $row['Title']; echo "<tr>"; echo "<td class='a'>".$l_name ."</td>"; echo "<td class ='a'>".$f_name ."</td>"; echo "<td class ='c'>".$email ."</td>"; echo "<td class ='a'>".$d_phone ."</td>"; echo "<td class='b'>".$ext."</td>"; echo "<td class='a'>".$cell."</td>"; echo "<td class='c'>".$title."</td>"; echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; echo "</tr>"; } echo"</tbody>"; ?> Specifically, note this line: echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; the value is set to $address_owner. This value is a primary key value and will allow me to run routines related to the record chosen when the checkbox is checked. Following is the javascript code for selectFunction(): function selectFunction(){ var check = document.getElementById("chk_Bx").checked; var val = document.getElementById("chk_Bx").value; alert(val); } At this point the javascript is very simple. All I'm trying to do is pick up applicable values for the record selected. But - I believe because the table is populated through a foreach loop, the javascript alert is returning the same primary key value for every record checked (or unchecked). Also, if I alert out check, it continually returns false, even if I've checked the box and it should read true. I am assuming this is also related to the foreach table presentation. How do I grab ONLY the primary key value, or checked true/false for the applicable record? Thanks in advance: Pavilion Hi there, I am trying to build an interface to upload files and change some of the form (hidden) values depending on the file uploaded, here is where I got so far: Code: $('#buttonUpload').click(function (){
$.ajaxFileUpload({
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'txt',
success: function (data, status){
alert("File is uploaded,");
if(typeof(data.error) != 'undefined'){
if(data.error !=''){ alert(data.error); }
else{ alert(data.msg); }
}
document.getElementById('buttonUpload').style.color="green";
document.getElementById('isfileuploaded').value="green";
},
error: function (data, status, e){ alert(e); }
});
return false;
});
My problem is that I want doajaxfileupload.php to return a variable to javascript/change some html form value. The code works as it is for the file upload, I just need to add something for the output, any suggestion? Edit: I just noticed that some previous part of the code is still the the part that changes the color of the button depending if the file is uploaded or not. Now I want those values to change depending on what file is uploaded. Hi all! I am trying to write code that does the following: 1) creates an array with 6 objects in it. 2) each object has a respective image. 3) from the 6, one object is selected as the "target" 4) all the 6 images are displayed on the screen with a hint as to which of the 6 is the target this time. 5) the user selects one of the 6 he/she thinks is the right object. 6) if the selection is right, his/her score increases by 1, and the whole process loops. The issue is I want the whole process to loop, but I want to store the users score somewhere otherwise it will get reset to 0 everytime the process loops.I've been told I could use cookies for this, but I've been reading a lot that cookies are outdated. Is there an easy way to do this without cookies? The required code is below: Code: <head>
<script language="text/javascript">
var redScore = 0;
....
targets = new Array(); // creating a new array with all the possible elements
....
fisherYates(targets); //randomizing the array
...
var theTarget = targets[0]; // selecting the element at index 0 to be the target
...
...
lots of code that is not relevant
...
...
function redClick( buttonLocation ) {
if(buttonLocation == redLocation){
redScore = redScore +1;
I need something here that will save the score and reload the page
}
}
...
...
</script>
</head>
<body>
<table>
<tr>
<td><img id="red0" onclick="redClick(0)" /></td>
<td><img id="red1" onclick="redClick(1)" /></td>
<td><img id="red2" onclick="redClick(2)" /></td>
...
...
...
</tr>
</table>
</body>
I know this is quite complicated, so any help or direction would be much appreciated. Thank you! Hi, I've a Javascript function where i'm sending an return value. How do i capture this return value from HTML. My javascript func is as below: Code:
function check()
{
var frm=document.forms.stream_selection
sel_num = new Array();
Parr = new Array();
for(j=1;j<1000;j++)
{
if(frm[j] != null)
{
if(!frm[j].checked)
{
frm[0].checked=false
}
else
{
Parr.push(j);
ParrStr=Parr.join(',');
alert(Parr);
}
}
}
return(ParrStr);
}
My HTML call function is as below: Code: echo "<td><center><input name=\"sstreamname\" type=\"checkbox\" onclick=\"check():return true;\"></center></td></tr></font></center></tr></font></center>"; How do i get the value of ParrStr and transfer this to next form. I'm using PHP . Thanks, Ramki. I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working? --- Code: var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]
links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
--- Any help would be greatly appreciated! Good day/evening. I am trying to reload the contents of a div asynchronously using jquery. It works fine if the link/button to do so is outside of the div I am reloading, but I need the button to be inside the div I am reloading and it does not work if I do it from there. I have thought about overlaying divs but I need the buttons to be very exactly positioned as its a graphical representation of a map and recoding the way the buttons are placed would not only annoy me but be very difficult. You see its an isometric view of a square, and the buttons need to be placed right along the edges of the 'diamond' therefore always coming inside or on top of the div that contains the map view. So, is what I am trying to do impossible or might I just be going about it the wrong way ? If it is the latter then I will post some code. Thanks in advance. EDIT: sorry, I didn't see the frameworks forum for Jquery stuff, if a mod could please move this thread in there then that would be just fab. |
|||||||