|
JavaScript - Changing A Link
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. Similar TutorialsFirst time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
function changeText()
{
document.getElementById('link').innerHTML = 'View Smaller Image';
return false;
}
function changeImage()
{
var newImage = new Image();
newImage.src = "images/cottage_large.jpg";
document.getElementById('thumbnail').src = newImage.src;
return false;
}
/**/
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body>
<h3>Real Estate</h3>
<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
</body>
</html>
I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour. My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to. I've only ever done a small amount of JS coding but from the research I've done it should go something like this, Code: document.style.alinkColor = "COLOR" I got to that via discovering that Code: document.style.backgroundColor = "COLOR" will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case. Anyone able to point me in the right direction? Hi, i have a "customer login" link in my header for customers to login(obviously), when they login i want the link to change to "logout", any ideas on how to do this as i don't have a clue. not good at javascript at all. the link to my website is www.nandahosting.co.uk test login info if required: user: test@nandahosting.co.uk password: password thanks Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! Is it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue";
This is my CSS: Code: A:link {
color:#ffffff;
font-size:14pt;
font-weight:bold;}
A:visited {
color:#ffff00;
font-size:14pt;
font-weight:bold;}
A:hover {
color:#6698ff;
font-size:14pt;
font-weight:bold;}
A:active {
color:#c0c0c0;
font-size:14pt;
font-weight:bold;}
I'm working on a technical document that has a glossary section. When I use a technical term, I link to its definition in the glossary then provide a return link to return the user to whence they came. But if I use that same term again, and if I want to link it to the glossary, I need to duplicate the glossary entry in order to provide a return link that returns them to the right place. Is there some way I could link them to the glossary and embed a unique return link in the link to the glossary?
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!) I've been using this slidehsow but each time I click on a link (Newsflash) it goes to yahoo.com, even though each link goes to a different website, it looks like the last link of the last slidehsow is the one which controls all the slidehsow links link of slidshow as you can see from the code each link for each slidehsow should go to a diffrent website. Code:
<div class="lof-main-outer">
<ul class="lof-main-wapper">
<li>
<img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">
<div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 2" href="http://www.google.com">Newsflash 2</a></h3>
<p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
</div>
</li>
<li>
<img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 1" href="http://www.gmx.com">Newsflash 1</a></h3>
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>
</div>
</li>
<li>
<img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 3" href="www.godaddy.com">Newsflash 3</a></h3>
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.flickr.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.intel.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.yahoo.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
</ul>
</div>
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 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> 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 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) 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 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 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! 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});
}
|
|||||||