JavaScript - Rotating Videos On Main Page
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. Similar TutorialsOk 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> 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 I have a web site application written in VB.net and asp. The main page uses JavaScript to load a popup page that performs multiple tasks. The main page accepts a variety of incoming messages, only SOME of which need to be passed to this popup page for processing. I found an ugly way to pass the message to the popup by placing it in a Session variable. Now I need to cause it to be handled. I see two possibilities, and I do not have a clue how to implement either. Either one would be great: 1. In the main page, trigger a subroutine in the popup, using JavaScript. OR 2. In the popup, establish a trigger any time that Session variable changes. hi i have a html page that has a link "OPEN POP UP" when this link is clicked a new pop up window is opened. and this pop has two LINKS first is ONE and second is TWO. what i want to do is. when any of these LINKS is clicked on the popup the should close and the my main html page from where the popup came should execute a javascript function. please help Folks I'm using the code below to create a pop-up search box that finds text strings on a contents page. The contents page contains a list of hyperlinks each of which opens a PDF document in the same window. The search box does exactly what it's intended to do, but the problem is this: if the user clicks on "Find next" or "Find previous" once the PDF document is open, an error occurs; the same error occurs if the user then navigates back to the contents page and clicks on "Find next" or "Find previous". I'm thinking the solution must be to get the search box to close as soon as the PDF document opens, but how do I achieve this? Thanks Remster Code: <html> <head> <title>Search this page</title> <script language=JavaScript> var rng = dialogArguments.document.body.createTextRange(); rng.collapse(); function findnext(){ if (document.all.strSearch.value.length < 1) { alert("Please enter text to find."); document.frmSearch.strSearch.focus(); } else { var searchval = document.all.strSearch.value; rng.collapse(false); if (rng.findText(searchval, 1000000000)) { rng.select(); } else { alert("Finished searching page."); rng.select(false); document.frmSearch.strSearch.focus(); } } } function findprevious(){ if (document.all.strSearch.value.length < 1) { alert("Please enter text to find."); document.frmSearch.strSearch.focus(); } else { var searchval = document.all.strSearch.value; rng.collapse(true); if (rng.findText(searchval, 1000000000, 1)) { rng.select(); } else { alert("Finished searching page."); rng.select(false); document.frmSearch.strSearch.focus(); } } } </script> </head> <body bgColor=buttonface> <form name=frmSearch onsubmit="findnext();return false;" onsubmit="findprevious();return false;" action="" method=post> <table cellSpacing=0 cellPadding=0 border=0> <tr> <td style="font-size: 12px; font-family: Arial" vAlign=top noWrap align=left> <input id=strSearch style="margin-left: 15px; margin-top: 14px; width: 249;" name=strSearch><br> <button style="margin-left: 15px; margin-top: 12px; width: 120px; height: 25px;" accessKey=f onclick=findnext(); name=btnFindNext>Find next</button> <button style="margin-left: 9px; margin-top: 12px; width: 120px; height: 25px;" accessKey=f onclick=findprevious(); name=btnFindPrevious>Find previous</button></br> </td> </tr> </table> </form> </body> </html> First, I will state that I am totally inexperienced in JavaScript. I have a web site application written in VB.net and asp. The main page uses JavaScript to load a popup page that performs multiple tasks. The main page accepts a variety of incoming messages, only SOME of which need to be passed to this popup page for processing. I found an ugly way to pass the message to the popup by placing it in a Session variable. Now I need to cause it to be handled. I see two possibilities, and I do not have a clue how to implement either. Either one would be great: 1. In the main page, trigger a subroutine in the popup, using JavaScript. OR 2. In the popup, establish a trigger any time that Session variable changes. Thanks in advance for any help on this. Hello, I had a php page, which contains links when I click on a link it will issue a new page, I want to make the main page to be refreshed once the new page being closed. Any suggestions? thanks how i can refresh my main history page without page refresh alert message? i am using the following code on the submitpage.asp <%response.write ("<script>window.location.reload(history.go(-2));</script>")%> i got the attached message when it refreshes the main page. is there is a way to refresh directly without this message? We are building an opera extension in which we are trying to use the document object property (document.body.innerHTML) in order to obtain the source of the main page of a site. In most cases it provides us with the correct page source but for certain sites (ones that have multiple document layers), it doesn't return the top most document. For instance, for the site (https://www.pcisecuritystandards.org/) we would like to source for the main page that is displayed but once the entire page is loaded, the document property would display the source for another layer (https://s7.addthis.com/static/r07/sh...rev=86981&xd=1) This perhaps has to do with how opera loads the document layers in a page. We did not face any issue with any other browser How can we obtain the source of the main page (https://www.pcisecuritystandards.org/) using the document object in Opera ? Hey All, I replied in another thread asking about this, but I figured it would be best to have a separate thread for it. I'm trying to use lightbox (Video Lightbox) to not just open a video when clicking on a thumbnail image, but a mock "page" of several videos, where the main video plays, but there are surrounding thumbnail images that can then also be selected to play in the main player. Has anyone ever done anything like this? I've seen it done elsewhere, but wasn't sure how to actually implement it. Any suggestions would be appreciated. Thanks. Hi. I have a question about java script code. I'm creating a website with frames. Within the main page frame, there are tables in the main content page. When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want) So I wanted to know what code I put in my files and where to put it? Also, what pages does it need to be in? the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized? I need the main page to be resized to fit the browser as well as the pages in the frames to fit. Can you help? Thanks please i want to know how to Upload video file of any extention and it converts to .flv like U-Tube?
Hi, I would like to embed 2 or 3 videos in sequence in my orkut profile using the tags <embed>. It is possible? Code: 1<embed src="http://www.youtube-nocookie.com/v/iuczE8vIujc&autoplay=1"loop="true"type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>1 2<embed src="http://www.youtube-nocookie.com/v/UqqZm-D6WPo&autoplay=2" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>2 For playing automatically? Regards FG I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hello everyone. I just came across a customer that wants me to place 1 video and 1 swf image player in the same place on there website. I tried this with a div layer where i put the video over the swf image but with a different monitor it would move. I did have a time out process of 2.1 mins. Does anyone know of any code that i could put in that would show the video for the time and when it finished it would show the swf images? If so can you tell me how to do this or help me with the code? If you need to see the current code it is simple just straight html done by a different coder. I would of done it with a css but he didn't want to. If you know of a way let me know. Hi Java is becoming big. Can I ask what is the best resources to learn java besides lynda.com? Thanks. R Hello, I am trying to search some information about how to do a concept website like this: http://unfold.no/ Exactly what I want is something similar with vertical scroll but instead of images or the map I want that when you are going down the page you find a background video for example in the first area with an autoplay and if you are continue going down the video stops automatically. Not sure if there is any type of "control" when you can say: "When Video is on your screen auto-play and when dissapear from you screen stop. I am not sure if this is posible to do with Javascript or maybe with Flash. I have not found any example similar than this so not really sure if is a imposible fact. Thank you for your time I want to be able to display an embedded video on a web page but i want the URL to be different based on the source IP visting the web page. Can this be done in javascript? Example: If someone from inside our network (one IP address on the outside) visits our external web page (hosted externally) visits a web page with one of the embedded videos the URL and code will serve up a locally hosted video. (WMV format) If someone outside our network (any other IP) visits our web site, they'll see embedded videos hosted on YouTube. hello Devs, i have a website that has lots of videos on it, the other day i saw a mouse over that showed a snippet of the youtube video, it had microsoft across the front it's since been deleted so i cannot show you an example, does anyone know where i can obtain this script please?
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> |