|
JavaScript - Changing Margin Top
Hey all,
for some reason, I can't get the margin-top property to change using Code: jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);
also tried
jQ(this.centerPiece).attr('margin-top', this.imgSrcs[ this.srcs[5] ].top);
any help would be great townsendwebdd.com is the site Code: /**Scroller*/
function Scroller(){
//grab the img elements
//this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#img4', '#centerImg', '#img5', '#img6', '#img7', '#img8', '#img9' );
this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#centerImg', '#img6', '#img7', '#img8', '#img9' );
this.centerPiece = '#centerImg';
this.centerPieceLink = '#centerA';
//set the image locations
this.imgSrcs = new Array();
this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedChess.png', 'gx/tiltedChessRight.png', 'gx/chess.jpg', 'http://townsendwebdd.com/chess', 200 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedFiveInARow.png', 'gx/tiltedFiveInARowRight.png', 'gx/fiveInARow.jpg', 'http://fiveinarow.townsendwebdd.com', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedGaelsong.png', 'gx/tiltedGaelsongRight.png', 'gx/gaelsong.jpg', 'http://gaelsong.townsendwebdd.com', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedGreenBay.png', 'gx/tiltedGreenBayRight.png', 'gx/greenBay.jpg', 'http://townsendwebdd.com/gx/GreenBaySite.jpg', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedMillarSmith.png', 'gx/tiltedMillarSmithRight.png', 'gx/millarSmith.jpg', 'http://townsendwebdd.com/gx/millarSmith.jpg', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedAlegro.png', 'gx/tiltedAlegroRight.png', 'gx/alegro.jpg', 'http://townsendwebdd.com/gx/alegro2.jpg', 300 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedApnm.png', 'gx/tiltedApnmRight.png', 'gx/apnm.jpg', 'http://townsendwebdd.com/gx/apnm.jpg', 0 ) );
//this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg') );
//this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com') );
//which srcs are currently in use
this.srcs = new Array();
for(var i = 0; i < this.imgSrcs.length; i++){ this.srcs.push(i); }
}
/** reset the current images*/
Scroller.prototype.populate = function(){
//populate imgs
for(var i = 0; i < 4; i++){
jQ( this.imgs[i] ).attr('src', this.imgSrcs[ this.srcs[i] ].left );
jQ( this.imgs[i + 5] ).attr('src', this.imgSrcs[ this.srcs[i + 5] ].right);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[i] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[i] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[i] ].top);
}
/** move everything to the Left*/
Scroller.prototype.moveLeft = function(){
//increment srcs
this.incrementSrcsUp();
//animate
for(var i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
animate(this.imgs[i], -30);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
//move back
for(i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
move( this.imgs[i], 30);
}
//repopulate
this.populate();
}
/** move everything to the right*/
Scroller.prototype.moveRight = function(){
//increment srcs
this.incrementSrcsDown();
//animate
for(var i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
animate(this.imgs[i], 30);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
//move back
for(i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
move( this.imgs[i], -30);
}
//repopulate
this.populate();
}
Scroller.prototype.incrementSrcsUp = function(){
for(var i = 0; i < this.srcs.length; i++){
this.srcs[i] += 1;
if(this.srcs[i] >= this.srcs.length)
this.srcs[i] = 0;
}
}
Scroller.prototype.incrementSrcsDown = function(){
for(var i = 0; i < this.srcs.length; i++){
this.srcs[i] -= 1;
if(this.srcs[i] < 0)
this.srcs[i] = this.imgSrcs.length - 1;
}
}
Scroller.prototype.preload = function(){
try{
for(var i = 0; i < this.imgSrcs.length; i++){
jQ('#container').append("<img src='" + this.imgSrcs[i].center + "' style='display:none;'/>");
}
}catch(err){alert(err.message);}
}
/**the sources of the piece*/
function imgSrc(leftSrc, rightSrc, centerImg, location, topped){
this.left = leftSrc;
this.right = rightSrc;
this.center = centerImg;
this.href = location;
this.top = topped;
}
function animate(imgId, offsetX){
var x = jQ( imgId ).offset().left;
var y = jQ( imgId ).offset().top;
jQ( imgId ).offset({left: x + offsetX, top: y});
}
/**
function animate(imgId, offsetX){
var startLeft;
var timer = setInterval(function() {
imgId.style.left = ( imgId.style.left + offsetX / 10 ) + "px";
if ( imgId.style.left == startLeft + offsetX ) {
clearInterval( timer );
}
}, 1000);
}*/
function move(imgId, offsetX){
var x = jQ( imgId ).offset().left;
var y = jQ( imgId ).offset().top;
jQ( imgId ).offset({left: x + offsetX, top: y});
}
Similar TutorialsI need to set a divs margin-left value into a var, ive tried a few different ways and i always get undefined, anyone able to help me? Ideally id like it without the px too but thats not essential.
When I click on the image I want to get the "margin-left" value of its block. In the code below the margin-left is set at 100px. But when I click on the image the "margin-left" value shows in the "alert" as undefined. What code changes do I need to get the correct margin-left value? (Please, no guessing!) [CODE] <script type="text/javascript" > window.onload = function(){ document.getElementById("holder").onclick = showit; } function showit( ) { var marval = document.getElementById("holder").style.marginLeft; alert(" margin-left= " + marval + " typeof= " + typeof marval); } </script> <style type="text/css"> #holder{ padding: 0px; margin-left: 100px; } </style> </head> <body> <img id="holder" src="anyimage.gif" width="300px" height="200px" /> </body> [CODE] If anyone can help me with this problem I'd be very grateful. I'm trying to set a margin onLoad based on window size. http://jimbolgs.agilityhoster.com/handmade/test.html Thanks. Code: <script>
function myfunction(){
document.getElementById('myDIV').style.marginLeft++;
}
</script>
<body>
<div id="myDIV">
This is a DIV...
</div>
<p>
<a href="javascript:myfunction()">Do it!!</a>
So, what this code is supposed to do is, every time the user click on 'Do it!!', the 'myDIV' div goes to the right. The problem is, it works only one time, why? I'm using a script for a drop down panel and it works fine, however I need to add a bit of a margin for the inner content but the script seems to be stripping it out in firefox, it works fine in ie and chrome. I've tried every trick in the book outside of editing the actual js file. I currently have a transparent image as a spacer at the top and it even ignores that. It seems that firefox just wont display anything above the first form field for some reason. Could someone take a look at this script quick and give me an idea on what to change to I can add like a 5px margin to the top of the content? Code: //** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Oct 21st, 08'- Script created
//** March 23rd, 09' v1.01- Arrow images now preloaded
function ddpanel(setting){
setting.dir="up" //initial state of panel (up="contracted")
if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down"){
setting.dir="down"
}
if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
document.write('<style type="text/css">\n')
document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}\n')
document.write('</style>\n')
}
setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
this.setting=setting
if (setting.pointerimage.enabled){ //preload images
var img1=new Image(), img2=new Image()
img1.src=setting.pointerimage.src[0]
img2.src=setting.pointerimage.src[1]
}
var thispanel=this
if (window.addEventListener) //if non IE browsers, initialize panel window.onload
ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
else //else if IE, add 100 millisec after window.onload before initializing
ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(setting)}, 100)}, "load")
ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")
}
ddpanel.events_array=[] //object array to contain events created by script
ddpanel.addEvent=function(target, functionref, tasktype){
var evtmodel=target.addEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
var i=this.events_array.push({ //store event info in ddpanel.events_array[] and return current event's index within array
target: target,
tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
listener: evtmodel=="ie"? function(){return functionref.call(target, window.event)} : functionref
})-1
target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel=="w3c"? false : null)
}
ddpanel.removeEvent=function(target, functionref, tasktype){
var evtmodel=target.removeEventListener? "w3c" : "ie"
var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)
}
ddpanel.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
ddpanel.setCookie=function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
ddpanel.addpointer=function(target, className, imagesrc){
var pointer=document.createElement("img")
pointer.src=imagesrc
pointer.className=className
pointer.style.borderWidth=0
target.appendChild(pointer)
return pointer
}
ddpanel.prototype={
togglepanel:function(dir){ //public function that toggles the panel's state. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
var pcontent=setting.pcontent, dir=setting.dir
pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.stateconfig.initial
pcontent.style.height=pcontent._currentheight+"px"
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"
}
ddpanel.setCookie(setting.ids[0], setting.dir)
},
togglepanelplus:function(dir){ //public function that toggles the panel's state w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
var setting=this.setting
setting.dir=dir || ((setting.dir=="up")? "down" : "up")
if (setting.pointerimage.enabled)
setting.arrow.style.visibility="hidden"
clearTimeout(setting.revealtimer)
this.revealcontent()
},
revealcontent:function(){
var setting=this.setting
var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actualheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=setting.dir
if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
pcontent.style.height=newH+"px"
pcontent._currentheight=newH
}
else{
if (setting.pointerimage.enabled){
setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
setting.arrow.style.visibility="visible"
}
return
}
var thispanel=this
setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)
},
initpanel:function(){
var setting=this.setting
var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
pcontent.style.overflow="scroll"
pcontent._actualheight=pcontent.scrollHeight
setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
pcontent.style.overflow="hidden"
pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.stateconfig.initial
var thispanel=this
ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab is clicked on
if (setting.animate.enabled)
thispanel.togglepanelplus()
else
thispanel.togglepanel()
if (e.preventDefault) e.preventDefault()
return false
}, "click")
if (setting.pointerimage.enabled){
var pointer1=new Image(), pointer2=new Image()
pointer1.src=setting.pointerimage.src[0]
pointer2.src=setting.pointerimage.src[1]
setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir=="down"? 1:0])
}
if (setting.closepanelonclick.enabled){ //assign click behavior when panel content is clicked on (links within panel or elements with class "closepanel"
ddpanel.addEvent(pcontent, function(e){
var rel="nofollow" target=e.srcElement || e.target
if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName=="A" || (target.parentNode && target.parentNode.tagName=="A")){
thispanel.togglepanel("up")
}
}, "click")
}
},
uninit:function(){
var setting=this.setting
if (setting.stateconfig.persiststate){
ddpanel.setCookie(setting.ids[0], setting.dir)
}
for (prop in setting){
setting[prop]=null
}
}
} //end of ddpanel object
//initialize instance of DD Drop Down Panel:
var defaultpanel=new ddpanel({
ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
stateconfig: {initial: "0px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})
My code works great except that the margin and padding CSS isn't doing anything. Which doesn't make sense to me because the font size, style, and alignment is affected by the CSS. Does anyone know why this is?? Code: <h2 class="sidebar-heading">Testimonial:</h2>
<html>
<head>
<title>Testimonies</title>
<style type="text/css">
#quote {
margin: 0 20px;
padding-top: 20px;
font-size: 1.1em;
font-style: italic;
text-align: left;
}
</style>
<script type="text/javascript" language="javascript">
var testimony = new Array()
testimony[1]= "<i>Testimonial 1</i>";
testimony[2]= "<i>Testimonial 2</i>";
testimony[3]= "<i>Testimonial 3</i>";
function firstTestimony()
{ document.getElementById('div_display').innerHTML=testimony[1];
setTimeout("secondTestimony()",2000); }
function secondTestimony()
{ document.getElementById('div_display').innerHTML=testimony[2];
setTimeout("thirdTestimony()",2000); }
function thirdTestimony()
{ document.getElementById('div_display').innerHTML=testimony[3];
setTimeout("firstTestimony()",2000); }
</script>
</head>
<body>
<span id="quote">
<div id="div_display"><script type="text/javascript" language="javascript">firstTestimony();</script></div>
</span>
</body>
</html>
Thanks!! Code: <img src = "/images/boats/large/my-red-pepper---8019812411a.jpg" width = "690" height = "350" id = "main_image" /> <div id = "gallery_thumbs">
<img src = "/images/nav_left.png" alt = "Back" id = "nav_back" /> <div id = "inner_thumbs">
<div style="width:10000px" id="sliding_thumbs">
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019812411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019712411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019412411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019312411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019212411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019512411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019612411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/big_my-red-pepper---12411-main.jpg" /></a>
</div>
</div>
Why isn't this working? document.getElementById('main_image').src=this.href;return false; I originally had this: Code: $('#sliding_thumbs a').click(function()
{
$('#main_image').attr('src',this.href);
return false;
})
but that didn't work so I put the onclick inline and it still isn't working but I can't fathom why. I have confirmed that the #main_image is being detected correctly (by alerting the src) and that the this.href part contains the url of an image but nothing happens. There is no error and the large image doesn't load in the same window (so the return false part is working!) I have this script where people can pick a price and pick quataty. i want it to be only one price and let the person input quatity them selves, how can this be done? Thanks in advance Code: <script type="text/javascript">
function calculate_amount() {
var subtotal = 0;
var hamburger_subtotal = 0;
var hamburger = document.myform.hamburger.value;
var hamburger_qty = document.myform.hamburger_qty.value;
var cheeseburger_subtotal = 0;
var cheeseburger = document.myform.cheeseburger.value;
var cheeseburger_qty = document.myform.cheeseburger_qty.value;
var pst = 0;
var gst = 0;
var total = 0;
//etc...
//var chicken_burger;
//var fries;
//var gravy;
//var chili;
if (hamburger > 0) {
hamburger_subtotal = hamburger * hamburger_qty;
}
subtotal = hamburger_subtotal;
// myform -- depends on the name of your actual form, if it does not have one give it one.
document.myform.display_hamburger_subtotal.value = hamburger_subtotal;
if (cheeseburger > 0) {
cheeseburger_subtotal = cheeseburger * cheeseburger_qty;
}
// myform -- depends on the name of your actual form, if it does not have one give it one.
document.myform.display_cheeseburger_subtotal.value = cheeseburger_subtotal;
subtotal = subtotal + cheeseburger_subtotal;
pst = .07 * subtotal;
gst = .05 * subtotal;
// you cannot add the values after you call toFixed, so do the total now!
total = subtotal + pst + gst;
total = total.toFixed(2);
subtotal = subtotal.toFixed(2);
pst = pst.toFixed(2);
gst = gst.toFixed(2);
// this is wrong var tax = foo * 1.07;
document.myform.display_subtotal.value = subtotal;
document.myform.display_pst.value = pst;
document.myform.display_gst.value = gst;
//total = subtotal += pst += gst;
document.myform.display_total.value = total;
}
</script>
// first off this all needs to be wrapped in form tags if you are going to post the values to something.
// you need to look up how to name your items, you should have an input type=x with name=y and id=y
<form name="myform">
<table width="325">
<tbody>
<tr>
<th width="144">item</th>
<th width="75">price</th>
<th width="92">quantity</th>
<th width="101">sub-total</th>
</tr>
<tr align="middle">
<td align="left">Hamberger</td>
<td><select id="hamburger" name="hamburger" onchange="calculate_amount()">
<OPTION VALUE='2.99'>2.99</OPTION>
<OPTION VALUE='3.99'>$.99</OPTION>
<OPTION VALUE='4.99'>4.99</OPTION>
</select>
</td>
<td><select id="hamburger_qty" name="hamburger_qty" onchange="calculate_amount()">
<OPTION VALUE='0'>0</OPTION>
<OPTION VALUE='1'>1</OPTION>
<OPTION VALUE='2'>2</OPTION>
<OPTION VALUE='3'>3</OPTION>
<OPTION VALUE='4'>4</OPTION>
<OPTION VALUE='5'>5</OPTION>
<OPTION VALUE='6'>6</OPTION>
<OPTION VALUE='7'>7</OPTION>
<OPTION VALUE='8'>8</OPTION>
<OPTION VALUE='9'>9</OPTION>
</select>
</td>
<td><input type="text" id="display_hamburger_subtotal" name="display_hamburger_subtotal" size="10" disabled="disabled" /></td>
</tr>
<td align="left">Cheeseberger</td>
<td><select id="cheeseburger" name="cheeseburger" onchange="calculate_amount()">
<OPTION VALUE='3.99'>3.99</OPTION>
<OPTION VALUE='4.99'>4.99</OPTION>
<OPTION VALUE='5.99'>5.99</OPTION>
</select>
</td>
<td><select id="cheeseburger_qty" name="cheeseburger_qty" onchange="calculate_amount()">
<OPTION VALUE='0'>0</OPTION>
<OPTION VALUE='1'>1</OPTION>
<OPTION VALUE='2'>2</OPTION>
<OPTION VALUE='3'>3</OPTION>
<OPTION VALUE='4'>4</OPTION>
<OPTION VALUE='5'>5</OPTION>
<OPTION VALUE='6'>6</OPTION>
<OPTION VALUE='7'>7</OPTION>
<OPTION VALUE='8'>8</OPTION>
<OPTION VALUE='9'>9</OPTION>
</select>
</td>
<td><input type="text" id="display_cheeseburger_subtotal" name="display_cheeseburger_subtotal" size="10" disabled="disabled" /></td>
</tr>
<tr align="middle">
<td align="left">Chicken Burger</td>
<td><input size="7" value="$4.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
</tbody>
</table>
<table width="324">
<tbody>
<tr>
<th width="124">item</th>
<th width="42">price</th>
<th width="72">quantity</th>
<th width="74">sub-total</th>
</tr>
<tr align="middle">
<td align="left">French Fries</td>
<td><input size="7" value="$2.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
gravy</td>
<td><input size="7" value="$0.50" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
chilli</td>
<td><input size="7" value="$1.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
</tbody>
</table>
<table align="right">
<tbody>
<tr>
<td>subtotal</td>
<td><input type="text" id="display_subtotal" name="display_subtotal" size="10" disabled="disabled" /></td>
</tr>
<tr>
<td>pst 7%</td>
<td><input type="text" id="display_pst" name="display_pst" size="10" disabled="disabled" /></td>
</tr>
<tr>
<td>gst 5%</td>
<td><input type="text" id="display_gst" name="display_gst" size="10" disabled="disabled" /></td>
</tr>
<tr>
<td>total</td>
<td><input type="text" id="display_total" name="display_total" size="10" disabled="disabled" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="total up order" />
</td>
</tr>
</tbody>
</table>
</form>
ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}
this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed I've got this script that spins an image for me but it dont stop spinning, in other words when i press startspinning with onclick it dont change it to stopspinning function it just keeps spinning, it works fine with href but not onclick. Code: function StartSpinning() {
int = setInterval( 'SpinChange()', 100 );
$( 'SpinButton' ).innerHTML = "Spinning (Click to Stop)";
$( 'SpinButton' ).onclick = "StopSpinning();";
Effect.Fade( 'turns', {duration: 0.3} );
}
function StopSpinning() {
clearInterval( int );
$( 'SpinButton' ).innerHTML = "Spin it";
$( 'SpinButton' ).onclick = "StartSpinning();";
UpdateFigure();
Effect.Appear( 'turns', {duration: 0.3} );
}
Can anyone help thanks. Hi I am opening a child window with the following href. If it is a completly new window, it is opened and the focus shifts to it, ... but ... if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child How can I make the focus shift ? here is my href: PHP Code: echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars'); return false\" > I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be. If you can help - many thanks If you wanted to change an ids onclick would int you just do this document.getElementById("").onclick = ""; Is there a way to do it? Ok so i'm trying to write a Greasemonkey script to change all the hrefs on a single page. The href by default looks like this: Code: <a href="javascript:get('246154895')" class="postid">ID</a>
What i'm trying to do is make the number from get() appear in stead of "ID". How should i get this done? I started up with this: Code: var posts = document.getElementsByClassname('postid');
for (i=0; i<posts.length; i++) {
//Replacing
}
But i doubt it will work, since there are other items with the class "postid" that aren't related to these tags i'm trying to change. P.S. I'm new to JS so yeah :P I go to a page and have this in the URL http://beta.pigskinempire.com/boxscore.asp?w=6&s=5&yr= I want to create a link on that page that when you click it it changes the URL to http://beta.pigskinempire.com/game.asp?gnum=6&gslot=5 as you can see the numbers 6 and 5 are about the only things that are similar in the substring. I will have this on multiple pages so it will be taking different numbers from the same spots of the URL and plugging them into the new URL into the correct location. Thank you very much if you can help me, I am thinking regEx will be needed but I am not very comfortable with it. Thanks again. hi all, when key pressed, in IE i can use this code: event.keyCode=somenumber; and it works. Is this possible in Netscape - Firefox - ..... ? I need to controll the input, I want to allow users to use only keys I want them to use. Thanks Can DIV located in the MasterPage be resized depending on the screen resolution? <tr style="vertical-align: top;"><td> <div id="mainArea"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" /> </div></td></tr> I've tried unsuccessfully - var height = screen.height; var area1 = document.getElementById('ctl00_mainArea'); if (height == 1024) { area1.setAttribute("height", "700px"); } else if (height == 864) { area1.setAttribute("height", "540px"); } Also tried area1.style.height = 700 + "px"; (no luck as well) I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this: Photo / Text about Photo and have both switch after a little while, to the next photo and text. Hope this makes sense. Thanks in advance! How can i edit the following html/javascript so that when a user submits the form the element with id #container is updated with the value from #name <form action="" method="post" name="form_name" id="form_name" onsubmit="return update_name(this)"> <fieldset> <label for="your_name">Enter Your Name</label> <input type="text" name="your_name" id="your_name" /> <input type="submit" /> </fieldset> </form> I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers. I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name. And now i'm trying to learn how mask the various url/links in the menus. As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain. Hope that all made some sense Hello I'm rather new to javascript and I'm trying to accomplish something that's a bit over my head, to say the least. Basic idea of page is to have three divs loaded with content. I want to be able to change the content of those three divs with one link. Below is the code I've managed to piece together so far. It works with one instance of the function, but when I try to duplicate it to multiple functions, it breaks. I'm sure there's a way to simplify it. JS: Code: <script type="text/javascript">
function show(diva) {
var a, i = 1;
while(a = document.getElementById('diva'+(i++))) {
a.style.display="none";
}
var al = document.getElementById(diva);
al.style.display ="block";
al.onclick = function() {this.style.display="none"}
}
function show(divb) {
var b, j = 1;
while(b = document.getElementById('divb'+(j++))) {
b.style.display="none";
}
var bl = document.getElementById(divb);
bl.style.display ="block";
bl.onclick = function() {this.style.display="none"}
}
function show(divc) {
var c, k = 1;
while(c = document.getElementById('divc'+(k++))) {
c.style.display="none";
}
var cl = document.getElementById(divc);
cl.style.display ="block";
cl.onclick = function() {this.style.display="none"}
}
</script>
html: Code: <style type="text/css">
.myclass {display:none;position:absolute;background:#fff;}
.header {position:absolute;height:100px width:600px;}
.overview {position:absolute;height:100px width:600px;top:100px;}
.professor {position:absolute;height:100px width:600px;top:200px;}
</style>
<a href="javascript:show('diva1'),show('divb1'),show('divc1')"> link 1 </a> |
<a href="javascript:show('diva2'),show('divb2'),show('divc2')"> link 2 </a> |
<a href="javascript:show('diva3'),show('divb3'),show('divc3')"> link 3 </a><br><br>
<div class="header">
<div class="myclass" id="diva1" style="display:block;">header1</div>
<div class="myclass" id="diva2" >header2</div>
<div class="myclass" id="diva3" >header3</div>
</div>
<div class="overview">
<div class="myclass" id="divb1" style="display:block;" >overview1</div>
<div class="myclass" id="divb2" >overview2</div>
<div class="myclass" id="divb3" >overview3</div>
</div>
<div class="professor">
<div class="myclass" id="divc1" style="display:block;" >professor1</div>
<div class="myclass" id="divc2" >professor2</div>
<div class="myclass" id="divc3" >professor3</div>
</div>
Any help would be greatly appreciated. |
|||||||