|
JavaScript - Help With Changing Content In Divs.
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. Similar TutorialsHi! I'm no JavaScript expert so wonder if you could help? I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript? I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction? Any help will be really welcome! Thank you! hey there. im currently working on a page that has three links in the left element that all bring up different content in the right. its a two column page. ive looked into achieving this and while innerHTML is mentioned extensively, its only cited for simple changes (a name, a date, etc) and not necessarily for more involved ones. ive actually tried just plugging in the markup in its entirety in the innerHTML property, but the script seems to quit working after the markup becomes too comprehensive. for instance. Code: function ourReach() {
document.getElementById('rightpane').innerHTML = '<img src="ourreach.gif"'>
}
while Code: function ourReach() {
document.getElementById('rightpane').innerHTML = '
<div id="rightpane">
<ul style="position:absolute; top:-15px; left:-30px">
<li class="header" style="margin-top:-10px; margin-bottom:20px">AS A COMPANY</li>
<li class="header" style="margin-bottom:5px">What we do</li>
<li style="width:500px" class="font1">View Scan Labs is a company founded under the singular belief that the quality of its product
not come at the cost of its integrity.
</li>
<li class="header" style="margin-bottom:5px; margin-top:15px">Who we are</li>
<li class="font1" style="width:400px; color:grey">
Content
</li>
<li style="margin-left:0px; margin-top:30px;color:grey;" class="header" onclick="environment()"><a href="#">Environmental Goals</a></li>
<li style="margin-left:0px;margin-top:2px; color:grey " class="header"><a href="#">Our Reach</a></li>
</ul>
<div style="position:absolute; top:340px; left:30px; width:600px;">
<p class="header" style="position:absolute; left:-20px; top:-75px" >Mailing Address:</span></p>
<ul style="margin-left:-59px;margin-top:-40px">
<li class="font1">Bleh Bleh Bleh</li>
<li class="font1">309 Bleecker St.</li>
<li class="font1">Brooklyn, New York 11231</li>
<li class="font1">USA, +1 1339 6525</li>
</ul> </div>'
}
does not. is there a better way to handle this than the innerHTML property. can i put the markup in a separate script and just have that script called up in innerHTML, if anything just so it looks more succinct. thanks. I'm trying to get this to work. I'm making an multiple uploadscript which shows an loader animation while uploading and after upload the image which has been uploaded. When a file is submitted an <li></li> is added with the loadergif. After uploading I want to change the animation gif with the uploaded image. Here is what I got. Code: $('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');
onComplete: function(file, response){
//Add the file to a list
if(response==="success"){
$('<li></li>').appendTo('#loadstatus').html('<img src="./uploads/'+file+'"/><br />').addClass('success');
} else{
$('<li></li>').appendTo('#loadstatus').text(file).addClass('error');
}
}
This just adds another <li></li> instead of changing the content of the current <li></li>. What do I do wrong? Please help. Thansk in advance :-) I need help with my divs and dynamic content. I would like my "menu" div (which includes a menu.html and menu.css file) to link to my "middle" div. Here is what I would like to accomplish: Screenshot And this is what I've got: My website I'm using this code to implement my pages into the "middle" div. Is there a way to target my "middle" div from an external menu.html page? Or is there a better way to do this? Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar. I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! 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>
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!) If you wanted to change an ids onclick would int you just do this document.getElementById("").onclick = ""; Is there a way to do it? 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 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 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. 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});
}
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 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 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> 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) |
|||||||