|
JavaScript - Rotating 2 Sets Of Pictures On The Same Page
please help, it's driving me crazy.
I have been trying to get the rotating pictures to work. I am using dreamweaver 8. If I put one rotator on the page it works fine but when I add the second they both don't work. here is my page code [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- DW6 --> <head><meta name="google-site-verification" content="Ygobmtk4ksdYJZlIYpBAGC8rxkufPW--Lzmia27qUsc" /> <!-- Copyright 2005 Macromedia, Inc. All rights reserved. --> <title>The Beach House Hotel</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="mm_2.css" type="text/css" /> <style type="text/css"> <!-- .style8 {color: #FFFFFF} .style9 {font-size: 24px} .style10 { font-size: 24px; font-weight: bold; } .style11 {color: #000000} .style12 {font-size: 14px} .style13 {font-size: 12px} --> </style> <meta http-equiv="" content="the beach house hotel,pak nam pran,paknampran,pranburi,hua hin" /> </head> <body bgcolor="#0066cc" onload="imgOne();"> <table width="73%" height="514" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="#99ccff"> <td height="60" colspan="4" nowrap="nowrap"><div align="center"><img src="images/hotelheader.jpg" alt="header" width="900" height="125" /></div></td> </tr> <tr bgcolor="#003399"> <td height="36" colspan="4" bgcolor="#0066CC"><div align="center"><a href="javascript:;"></a><span class="style13"><a href="index.html" class="style8">HOME </a> <a href="location.html" class="style8">LOCATION</a> <a href="menu.html" class="style8">MENU </a> <a href="reviews.html" class="style8">REVIEWS</a> <a href="specialevents.html" class="style8">SPECIAL EVENTS</a> <a href="roomrate.html" class="style8">ROOM RATES</a> <a href="kiteboarding.html" class="style8">KITEBORDING</a> <strong> <strong><a href="toursandrentals.html" class="style8">TOURS AND RENTALS</a></strong> </strong> <a href="contacts.html" class="style8"> CONTACT US</a></span></div></td> </tr> <tr bgcolor="#ffffff"> <td colspan="2" valign="top"> <body onload="imgOne();"> <table width="200" height="166"> <tr> <td><span class="style9"><img src="http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg" name="myimg" width="168" height="187" align="left" /></span></td> </tr> </table> <h1> </h1> </td> <td width="701" valign="top"><div align="center"><br /> <table border="0" cellspacing="0" cellpadding="2" width="440"> <tr> <td class="pageName"><p align="center" class="style10"><em>Welcome to</em></p> <p align="center" class="style10"> The Beach House Hotel</p> <p align="center" class="style10">KITEBOARDING PARADISE </p></td> </tr> <tr> <td class="bodyText"> <p align="center"><span class="style10">The Beach House</span><span class="style12"> <span class="style11">is located 25 Klms south of Hua Hin on the beach at Pak nam pran, on the beautiful West Coast of the Gulf of Siam. The hotel has a bamboo beach bar on the beach. The bars name is the Downwind Bar, many kiteboardes down wind to have a relaxing drink after a good days kiting. There</span></span> <span class="style12">are constant thermal winds</span>, <span class="style12">the strong wind begins November and carries on through to May, we get 2 types of wind here in Pranburi, the winds run from January to around end of February blowing between 12 – 25 knots then the Thermal wind kicks in March onward generating afternoon sea breeze winds between 12 – 20 knots. Most common wind sites such as windfinder and windguru do not forecast or show thermal winds. The forecast for the area would show 1 – 2 knots yet the thermal will be generating 18 knots in the afternoon. </span></p> <p align="center"><br /> </p></td> </tr> </table> <br /> <br /> </div></td> <td width="156" valign="top"><span class="style9"> <meta http-equiv="Content-Type" content="text/html; charset=" /> </span> <table width="200" height="186"> <tr> <td height="180"></script><script language="javascript" type="text/javascript">img2 = new Image() seconds = "2"; function imgOne() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_1.jpg'; //needed to be added setTimeout("imgTwo()", seconds * 2000); } function imgTwo() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_2.jpg'; setTimeout("imgThree()", seconds * 2000); } function imgThree() { document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_3.jpg'; setTimeout("imgFour()", seconds * 2000); } function imgFour() { document.myimg.src = 'http://thebeachhouse-hotel.com/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_4.jpg'; setTimeout("imgFive()", seconds * 2000); } function imgFive() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_5.jpg'; setTimeout("imgSix()", seconds * 2000); } function imgSix() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_6.jpg'; setTimeout("imgSeven()", seconds * 2000); } function imgSeven() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_7.jpg'; setTimeout("imgEight()", seconds * 2000); } function imgEight() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_9.jpg'; setTimeout("imgNine()", seconds * 2000); } function imgNine() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_10.jpg'; setTimeout("imgTen()", seconds * 2000); } function imgTen() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/kiteboarding/kiteboarding_paknampran_hua_hin_pranburi_11.jpg'; setTimeout("imgOne()", seconds * 2000); } </script> <img src="http://thebeachhouse-hotel.com/images/sea_view_room.jpg" name="myimg" width="171" height="193" align="right" /></td> </tr> </table> </script> <script language="javascript" type="text/javascript">img2 = new Image() seconds = "2"; function imgOne() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_left.jpg'; //needed to be added setTimeout("imgTwo()", seconds * 2000); } function imgTwo() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/beach_right.jpg'; setTimeout("imgThree()", seconds * 2000); } function imgThree() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/bed.jpg'; setTimeout("imgFour()", seconds * 2000); } function imgFour() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/fountians.jpg'; setTimeout("imgFive()", seconds * 2000); } function imgFive() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/full_beach_left.jpg'; setTimeout("imgSix()", seconds * 2000); } function imgSix() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/garden_view_rooms.jpg'; setTimeout("imgSeven()", seconds * 2000); } function imgSeven() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/hotel-at-night.jpg'; setTimeout("imgEight()", seconds * 2000); } function imgEight() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/main_bedroom8.jpg'; setTimeout("imgNine()", seconds * 2000); } function imgNine() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/pool_elephants.jpg'; setTimeout("imgTen()", seconds * 2000); } function imgTen() { document.myimg.src = 'http://thebeachhouse-hotel.com/images/sea_view_room.jpg'; setTimeout("imgOne()", seconds * 2000); } </script></td> </tr> <tr> <td width="20" height="22"> </td> <td width="161"> </td> <td width="701"><div align="center"></div></td> <td> </td> </tr> </table> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-6798030-3"); pageTracker._trackPageview(); } catch(err) {}</script></body> </html>] Thanks for any help. regards Martin Similar TutorialsIm trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh. i found this code that refreshes the pictures: Code: <script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>
and to come up with the tables i made this code: Code: <table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>
but if you see the home page he http://celulardepot.squarespace.com you can see that something is DEFINITLY wrong lol please help me! =D Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
Hello, glad to be here!! So I am curious about a simple script to play a main video, with thumbnails below. What I am wanting is when you click on a thumb, it plays in the main video spot. Hope this isn't much, but donations are allowed if it is. Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help. ***Index.htm Code: 01.<html> 02.<head> 03.<!-- 04. New Perspectives on JavaScript 05. Tutorial 4 06. Review Assignment 07. 08. Avalon Books 09. Author: Rexdreamer 10. Date: 08/12/09 11. 12. Filename: index.htm 13. Supporting files: ab.gif, ablogo.gif, avalon2.htm 14.--> 15.<title>Avalon Books</title> 16.<script type="text/javascript" > //insert embedded script that uses an if statement to test for W3C DOM 17. if (document.getElementById) location.href="avalon2.htm" //if supported browser load avalon2.htm using the href prop of the location obj 18.</script> 19. 20.</head> 21. 22.<body style="background-color: black"> 23.<p style="text-align: center"> 24.<img src="ablogo.jpg" alt="Avalon Books" /><br /> 25.<img src="ab.gif" alt="" /> 26.</p> 27.</body> 28.</html> ***Avalon.htm Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Author: Chris Veal
Date: 08/12/09
Filename: avalon2.htm
Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript">
function placeObjects() { //insert function named placeObj
var w = winWidth/2; //declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100); //place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3) //use setZ functionto set zindex for kids object to 3
setZ("fiction",z2) //use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1) //use setZ functionto set zindex for nfiction object to 1
moveAvalon(); //call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
}
}
function swapImages() { //insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>
<body onload="placeObjects()">
<div id="kids">
<img src="kids.jpg" alt="" /><br />
Sale this month on children's books
</div>
<div id="fiction">
<img src="fiction.jpg" alt="" /><br />
Fiction selection of the month
</div>
<div id="nfiction">
<img src="nfiction.jpg" alt="" /><br />
Non-fiction selection of the month
</div>
<div id="avalon">
Avalon <span id="books">Books</span>
</div>
</body>
</html>
***script.js Code: /*
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Name: Chris Veal
Date: 08/12/09
Function List:
xCoord(id)
Returns the x-coordinate of the object with id with the value id
placeIt(id, x, y)
Places the id object at the coordinates (x,y)
shiftIt(id, dx, dy)
Moves the id object dx pixels to the right and dy pixels down
showIt(id)
Hides the id object by setting its visibility style to "visible"
winWidth()
Returns the width of the interior browser window in pixels
winHeight()
Returns the height of the interior browser window in pixels
setZ(id, z)
Sets the z-index value of the id object
swapIt(id1, id2, id3)
Swaps the z-index values of id1, id2, id3
*/
function setZ(id, z) { // create new function called setZ with 2 parameters
object=document.getElementById(id); // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z; // set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) { // create new function called swapIt with 3 parameters
var object1=document.getElementById(id1); //getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);
var object3=document.getElementById(id3);
var z1=object1.style.zIndex; //create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;
object1.style.zIndex=z3; //change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1; //change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2; //change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}
function placeIt(id, x, y) {
var object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function shiftIt(id, dx, dy) {
var object=document.getElementById(id);
object.style.left=parseInt(object.style.left)+dx+"px";
object.style.top=parseInt(object.style.top)+dy+"px";
}
function xCoord(id) {
object=document.getElementById(id);
xc=parseInt(object.style.left);
return xc;
}
function showIt(id) {
var object=document.getElementById(id);
object.style.visibility="visible";
}
function winWidth() {
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement) return document.documentElement.offsetWidth;
else if (document.body.clientWidth) return document.body.clientWidth;
}
function winHeight() {
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement) return document.documentElement.offsetHeight;
else if (document.body.clientHeight) return document.body.clientHeight;
}
Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
shiftPix(pixArray[j], counter, j);
}
setTimeout("display()",3000);
}
// -->
</script>
</head>
<body onload="display();">
<div id="Picture1" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" width="90" height="120" />
</div>
<div id="Picture2" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" width="90" height="120" />
</div>
<div id="Picture3" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" width="90" height="120" />
</div>
<div id="Picture4" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" width="90" height="120" />
</div>
<div id="Picture5" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" width="90" height="120" />
</div>
<div id="Picture6" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("Picture1");
pixArray[1] = document.getElementById("Picture2");
pixArray[2] = document.getElementById("Picture3");
pixArray[3] = document.getElementById("Picture4");
pixArray[4] = document.getElementById("Picture5");
pixArray[5] = document.getElementById("Picture6");
display();
// -->
</script>
</body>
</html>
Thanks in advance!! hello, can anyone suggest a solution to get the following: there are 3 folders each containing own set of images. clicking on the button you get a random combination of 3 images, each coming from different folder. that wont be a problem to find a javascript using xml list of images. but if I'm going to add some images later, php will be the better solution, if i don't want to update xml each time. there are plenty of examples using pure php to get and random images as well. but i need php solely to check all three folders on page load, grab them in three arrays an pass these 3 arrays to javascript, so it can random them on demand. i wonder if there is a simple solution for that, that would be understandable for a beginner in js and php? thanx, hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code:
<html>
<head>
<script type="text/javascript">
var Images = new Array
('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
//my second group of images...
//('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
var thisPic = 0;
function initLinks() {
document.getElementById("nextLink").onclick = processNext;
document.getElementById("backlink").onclick = processBack;
document.getElementById("fplaylink").onclick = processfplay;
document.getElementById("bplaylink").onclick = processbplay;
document.getElementById("stoplink").onclick = processstop;
}
function processNext() {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processBack() {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
var stop = 0
function processfplay() {
if (stop == 1) {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
setTimeout("processfplay()", 200);
}
else {
stop = 1 ;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processbplay() {
if (stop == 2) {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
setTimeout("processbplay()", 200);
}
else {
stop = 2;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processstop (){
(stop = 0)
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
</script>
</head>
<body onload=initLinks() >
<h2 align= center>Images used in the slideshow below</h2>
<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td>
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>
<div align="center">
<h2>The Slidshow</h2>
<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
<h2>
<a href="any_old.html" id="nextLink">Next >></a><br/>
<a href="any_old.html" id="backlink">Back <<</a><br/>
<a href="any_old.html" id="fplaylink">Forward Play <<</a><br/>
<a href="any_old.html" id="bplaylink">backward Play <<</a><br/>
<a href="any_old.html" id="stoplink">Stop <<</a><br/>
</h2>
</div>
</body>
</html>
thanx in advance I am trying to create a function that could fill an area with 4 sets of images. So you could click a button (one of 4) and that would fill the area underneath with images. Then when you click the next button (which is side by side with the first and the other buttons) it toggles the first set of images off and toggles on the second set. I'm new to js and don't know the names of statements or how to have images in an array that i can toggle. I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>
<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">
<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>
<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>
<tr>
<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>
</table>
Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{
document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{
case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
break;
case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
break;
}
return true;
}
</script>
Thanks Daniel I have been searching for a way to display facebook api friends.getAppUsers in set of 5. I am able to do this if i hard code it but I cant seem to find and comprehend a method to do this dynamically. What i want to achieve is, if i have 43 friends using the application, the code should allow users to view this result in set of 5. -prevBtn- friend1 friend2 friend3 friend4 friend5 -nextBtn- upon clicking on the nextBtn, -prevBtn- friend6 friend7 friend8 friend9 friend10 -nextBtn- etc i am actually relatively new to Javascript and Facebook Codings.. so any help would really be great! Thanks! here are my codes: Code: <div id="fb-root"></div>
<table width="750px" height="185px" background="Image/friends.jpg">
<tr>
<td align="right">
<a href="#"onClick="prev();return false"><img src="Image/prevFriend.jpg" width="36" height="154"></a>
</td>
<td width="89%">
<div id="profile_pics" align="left"></div>
</td>
<td>
<a href="#" onClick="next();return false">Image/nextFriend.jpg" width="36" height="154"></a>
</td>
</tr>
</table>
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
var profilePicsDiv = document.getElementById('profile_pics');
var NameDiv = document.getElementById('name');
var containDiv = document.getElementById('container');
FB.init({ appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
window.location.reload();
} else {
window.location.reload();
}
});
FB.getLoginStatus(function(response) {
if (!response.session) {
profilePicsDiv.innerHTML = '<em></em>';
containDiv.innerHTML = '<em>You are not connected </em> ';
return;
}
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(5,result.length) : 1;
if (numFriends > 0)
{
for (var i=0; i<numFriends; i++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
});
function next(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(10,result.length):1;
if (numFriends > 5)
{
for (var j=5; j<numFriends; j++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
else{
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic> '
);
}
}
};
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
}
function prev(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(5,result.length):1;
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{
markup +=
(
<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
}
Dear all, Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance. <script type="text/javascript"> /* Triple Combo Script Credit By Philip M: http://www.codingforums.com/member.php?u=186 Visit http://javascriptkit.com for this and over 400+ other scripts */ var categories = []; categories["startList"] = ["Wearing Apparel","Books"] categories["Wearing Apparel"] = ["Men","Women","Children"]; categories["Books"] = ["Biography","Fiction","Nonfiction"]; categories["Men"] = ["Shirts","Ties","Belts","Hats"]; categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"]; categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"]; categories["Biography"] = ["Contemporay","Historical","Other"]; categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"]; categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"]; var nLists = 3; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['tripleplay']['List'+i].length = 1; document.forms['tripleplay']['List'+i].selectedIndex = 0; } var nCat = categories[currCat]; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function getValue(L3, L2, L1) { alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); } function init() { fillSelect('startList',document.forms['tripleplay']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <form name="tripleplay" action=""> <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Make a selection</option> </select> <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Make a selection</option> </select> <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Make a selection</option> </select> </form> </body> </html> Hi I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc Code: <script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";
var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;
//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}
</script>
I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! Hi, I am trying to have an array of pictures rotating among them every 300 milliseconds. I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place. I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position. There is my code: Code: <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hexagonal array</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
// left: x coordinate, top: y coordinate
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
setTimeout("shiftPix(" + x + ", " + y + ")", 300);
counter++;
shiftPix(pixArray[j], counter, j);
}
}
// -->
</script>
</head>
<body>
<h3>Hexagonal Array </h3>
<div id="John" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" alt="John Santore" width="90" height="120" />
</div>
<div id="Seikyung" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
</div>
<div id="Glenn" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
</div>
<div id="Lee" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
</div>
<div id="Abdul" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
</div>
<div id="Toby" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("John");
pixArray[1] = document.getElementById("Seikyung");
pixArray[2] = document.getElementById("Glenn");
pixArray[3] = document.getElementById("Lee");
pixArray[4] = document.getElementById("Abdul");
pixArray[5] = document.getElementById("Toby");
display();
// -->
</script>
</body>
</html>
Hello, I'm looking for an option for a rotating banner on a website. I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed. Is this possible? Hi All! I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page: http://www.constantcontact.com/index.jsp If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality: 1) Have the ability to hover over each number to change the main photo 2) Have the script advance the main photo on its own 3) Be able to click the main photo when it is selected Any questions, let me know! Thanks, Eric I'm pretty new to Javascript and found this menu, which I want for my website. I came up with the idea of making the links in the back of the circle (i've got a total of 10 links), invisible and put a globe in the middle (as background) - making it look like the links in the back go behind the globe and comes back from behind it again. I've tried to do this myself with .this.style.invisibility="hidden"; but... i lack skill to do it the right way i guess :P Does anyone know the solution? Here's the code of the menu: Code: eye={
p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,
isVertical:0,a1:0,a2:0,a3:0,
color:'#FFFFFF',
colorover:'#FFFFFF',
backgroundcolor:'#000000',
backgroundcolorover:'#000000',
bordercolor:'#000000',
fontsize:12,
fontfamily:'Arial',
pas:0,
spinmenu:function(){this.p=this.r/this.s;
this.a1=this.a2=this.isVertical?0:Math.PI/2},
spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";
document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},
muta:function(){a8=document.getElementById("controale");
for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");
a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));
a10=(this.p+xi)/(2*this.p);
a11=this.fontsize*(this.p+xi)/(2*this.p)+2;
a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));
yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;
a10=(this.p+yi)/(2*this.p);
a11=this.fontsize*(this.p+yi)/(2*this.p)+2;
a12=parseInt(100*(this.p+yi)/(2*this.p))};
a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;
a9s.top=(yi+this.y-a14/2)+"px";
a9s.left=(xi+this.x-a13/2)+"px";
a9s.width=a13+"px";a9s.fontSize=a11+"px";
a9s.zIndex=a12};
a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;
a8.style.left=this.x-a8.offsetWidth/2;
if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);
if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;
setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;
document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');eye.muta()}};
function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}
return totaloffset;
}
Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar? http://www.studioscentral.com/ Thanks in advance Hi, I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links? Any help would be much appreciated. Thanks! |
|||||||