JavaScript - Need Rotation To Be Added To My Javascript Code
Hi All!
I'm new to the forums but discovered this site while looking for a solution to my javascript problem. I was able to find/manipulate the following code for changing a banner when a person mouse-overs a button. It is almost exactly what I want it to do, except that I'd like the following functionality to be added to it: 1) When a person hovers over a button, the image that appears should be clickable and open a webpage. 2) I would like to have the banners cycle/rotate by default until a person hovers over a button. When they hover, it should stop the cycle/rotation. Here is an example of what the code produces prior to my desired tweaks above: http://javascript.internet.com/image...e-gallery.html Here is the code I currently have: Code: <html> <head> <script language="JavaScript"> function update(url,index,isSuper) { document['PhotoBig'].src=url; } </script> </head> <body> <div style="margin-left: 30%;"> <table cellpadding="0" cellspacing="0" border="0" width="234"> <tr> <td colspan="8"><img src="images/hipaa-logo.png" name="PhotoBig"></td> </tr> <tr> <td colspan="8"><img src="images/w_spacer.gif" width="1" height="5"></td> </tr> <tr> <td width="120"> </td> <td width="24"><a onMouseOver="update('images/alz-logo.png', 0, false); return false;"><img src="images/button1.png"></a></td> <td width="21"><a onMouseOver="update('images/ecomm-logo.png', 1, true); return false;"><img src="images/button2.png"></a></td> <td width="21"><a onMouseOver="update('images/facebook-logo.png', 2, true); return false;"><img src="images/button3.png"></a></td> <td width="21"><a onMouseOver="update('images/hipaa-logo.png', 3, true); return false;"><img src="images/button4.png"></a></td> <td width="27"><a onMouseOver="update('images/swain-logo.png', 4, true); return false;"><img src="images/button5.png"></a></td> </tr> </table> </div> </body> </html> Any suggestions would be GREATLY appreciated! Thanks! jstwondrng Similar TutorialsI do not know much at all about java but the below is the code I have now. I was told I need to use java script to get what I am looking for PLEASE HELP Code: <?php $connect = mysql_connect("host.address.com", "username", "password") or die ("Hey loser, check your server connection."); mysql_select_db("daobrien21"); ?> <?php // Write out our query to get the list of bar names from our DB. $query = "SELECT Bar FROM Test"; // Execute it, or return the error message if there's a problem. $result = mysql_query($query) or die(mysql_error()); $dropdown = "<select name='Bar'>"; //fetch_assoc will get the rows from the $result and put them into an array // the while loop then loops through the array wrapping the html code around the results // thus generating the dropdown with a list of your bar names while($row = mysql_fetch_assoc($result)) { $dropdown .= "\r\n<option value='{$row['Bar']}'>{$row['Bar']}</option>"; } $dropdown .= "\r\n</select>"; echo $dropdown; ?> <?php $query="select * from Test"; $result = mysql_query("SELECT * FROM Test where City='Murfreesboro'"); ?> <table border=1 style="background-color:#F0F8FF;" > <caption><EM>Murfreesboro Bars</EM></caption> <tr> <th>Bar Name</th> <th>City</th> <th>Address</th> <th>Phone</th> </tr> <?php while($row=mysql_fetch_array($result)){ echo "</td><td>"; echo $row['Bar']; echo "</td><td>"; echo $row['City']; echo "</td><td>"; echo $row['Address']; echo "</td><td>"; echo $row['Phone']; echo "</td></tr>"; } echo "</table>"; ?> What I am looking to do is when someone selects the bar name from the drop down it edits the below table to just display that bars information. I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item Would really appreciate any help with my request.... Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation. I want to have: - three images side by side - all images to rotate from a folder containing 100+ pictures - they all have different file names and extensions but i can change them if need be - i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything - i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that if any can help me with this i would be really grateful... iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript. just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want. again thanks for everyones time cheers Hey Everyone, I'm happy to have joined this forum. I have a javascript countdown but the digits countdown like 14 13 12 11 10 9 8 7 ... and I want it to look like 14 13 12 11 10 09 08 07.... I need this done for Days Hours Minutes and Seconds. Here is the code. Thank you in advanced for your help. Code: <script type="text/javascript"> function cd() { var now = <?php echo $now; ?>; var target = <?php echo $target; ?>; var horizvert = '<?php echo $horizvert; ?>'; var daytext = '<?php echo $daytext; ?>'; var daystext = '<?php echo $daystext; ?>'; var hourtext = '<?php echo $hourtext; ?>'; var hourstext = '<?php echo $hourstext; ?>'; var minutetext = '<?php echo $minutetext; ?>'; var minutestext = '<?php echo $minutestext; ?>'; var secondtext = '<?php echo $secondtext; ?>'; var secondstext = '<?php echo $secondstext; ?>'; var whatnow = '<?php echo $whatnow; ?>'; var redirect = '<?php echo $redirect; ?>'; timediff = target - now; var daysleft = 0; var hoursleft = 0; var minutesleft = 0; var secondsleft = timediff; if (timediff >= 60) { secondsleft = timediff % 60; minutesleft = (timediff - secondsleft) / 60; } if (minutesleft >= 60) { timediff = minutesleft; minutesleft = timediff % 60; hoursleft = (timediff - minutesleft) / 60; } if (hoursleft >= 24) { timediff = hoursleft; hoursleft = timediff % 24; daysleft = (timediff - hoursleft) / 24; } var gmctime = document.getElementById("gmctime"); var gmctimetext = ''; var gmccountdown_timer = setInterval(gmcTimer, 1000); function gmcUpdateDivHorizontal() { gmctimetext = ''; gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+' ' : ' '+daystext+' ') : ''; gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+' ' : ' '+hourstext+' ') : ''; gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+' ' : ' '+minutestext+' ') : ''; gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+' ' : ' '+secondstext+' '); gmctime.innerHTML = gmctimetext; } function gmcUpdateDivVertical() { gmctimetext = ''; gmctimetext += (daysleft) ? daysleft + (daysleft==1 ? ' '+daytext+'<br />' : ' '+daystext+'<br />') : ''; gmctimetext += (hoursleft || daysleft) ? hoursleft + (hoursleft==1 ? ' '+hourtext+'<br />' : ' '+hourstext+'<br />') : ''; gmctimetext += (minutesleft || hoursleft || daysleft) ? minutesleft + (minutesleft==1 ? ' '+minutetext+'<br />' : ' '+minutestext+'<br />') : ''; gmctimetext += secondsleft + (secondsleft==1 ? ' '+secondtext+'<br />' : ' '+secondstext+'<br />'); gmctime.innerHTML = gmctimetext; } function gmcTimer() { if (secondsleft == 0 && minutesleft == 0 && hoursleft == 0 && daysleft ==0) { clearInterval(gmccountdown_timer); if (whatnow == 'text') { document.getElementById('gmcpre').style.display = 'none'; document.getElementById('datetime').style.display = 'none'; document.getElementById('gmcpost').style.display = 'none'; document.getElementById('gmcafter').style.display = 'block'; } else { window.location = redirect; } return; } if (secondsleft > 0) secondsleft--; else { secondsleft = (minutesleft || hoursleft || daysleft) ? 59 : 0; if (minutesleft > 0) minutesleft--; else { minutesleft = (hoursleft || daysleft) ? 59 : 0; if (hoursleft > 0) hoursleft--; else { hoursleft = (daysleft) ? 23 : 0; if (daysleft) daysleft--; } } } if (horizvert == 'Horizontal') { gmcUpdateDivHorizontal(); } else { gmcUpdateDivVertical(); } } } window.onload = cd; </script> Hi All, Im trying to add some content by JS (which ive done) but i cant click a link i have made; JS: Code: function game() { document.getElementById('title').innerHTML = '<p style="float: left; text-decoration: underline; font-weight: bold;">Deady Teddy</p><img src=css/images/popup/close.png style="float: right; cursor: hand;" href="javascript: hideModal("modalPage");"></img>'; } *Yes i know about the Href but if i put "onClick" it gives errors*; HTML: Code: <a href="javascript:void(0);" onClick="javascript: revealModal('modalPage'); game();">Deady Teddy </a> And place its adding it to: Code: <div id="modalPage"> <div class="modalBackground"></div> <div class="modalContainer"> <div class="modal"> <div class="modalTop" id="title" onselectstart='return false'> </div></div></div></div> Any Idea's? Code: top.window.moveTo(0, 0); if (document.all) { top.window.resizeTo(screen.availWidth, screen.availHeight); } else if (document.layers || document.getElementById) { if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) { top.window.outerHeight = screen.availHeight; top.window.outerWidth = screen.availWidth; } } function gcd(a, b) { return (b === 0) ? a : gcd(b, a % b); } var i = 0; var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (; i < data.length; i + 1) { var dataString = data[i].string, dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) !== -1) { return data[i].identity; } } else if (dataProp) { return data[i].identity; } } return data[i].identity; }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) { return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); } }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; var version; if (dataString.indexOf(dataBrowser.versionSearch) !== -1) { version = parseFloat(string.indexOf(dataBrowser.versionSearch), 1); } else { version = parseFloat(string.indexOf(dataBrowser.identity), 1); } BrowserDetect.init(); if (dataBrowser.identity === "Chrome") { if (version >= 8) { document.location.replace("main/index.htm"); } else if (version >= 3) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } else if (dataBrowser.identity === "Safari") { if (version >= 5) { document.location.replace("main/index.htm"); } else if (version >= 3) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } else if (dataBrowser.identity === "Opera") { document.location.replace("http://www.google.com/"); } else if (dataBrowser.identity === "Firefox") { document.location.replace("http://www.google.com/"); } else if (dataBrowser.identity === "Mozilla") { document.location.replace("http://www.yahoo.com/"); } else if (dataBrowser.identity === "Explorer") { if (version >= 8) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } For some reason, this script was working before I put in the if statements, but after the if statements were placed in, it stopped auto maximizing as well, and no if statements were added around this. Does anyone know what the problem is? (It's supposed to redirect by browser to one of 3 sites based on how good they are) Below, I added: bmiresult to my database but I get the error: There has been an error: could not prepare statement (1 table bmical has no column named bmiresult) Code: html5rocks.webdb.createTable = function() { var db = html5rocks.webdb.db; db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 INTEGER, weight1 INTEGER, added_on DATETIME, bmiresult INTEGER)", []); }); } html5rocks.webdb.addTodo = function(todoText) { var db = html5rocks.webdb.db; db.transaction(function(tx){ var weight1 = document.getElementById("weight1").value; var height2 = todoText / 100 var BMI = weight1 / (height2 * height2) var BMI = BMI; var bmiresult = BMI.toFixed(3); var addedOn = new Date(); tx.executeSql("INSERT INTO bmical(height1, weight1, added_on, bmiresult) VALUES (?,?,?,?)", [todoText, weight1, addedOn, bmiresult], html5rocks.webdb.onSuccess, html5rocks.webdb.onError); }); } I'm stuck! - I have a search form, that when data is entered and submitted, the data is sent to another page! - this works well see eg below. http://www.nctfleetlist.co.uk/normal.php My problem is, I have a piece of javascript called "greybox", it basically loads an external page, dimming the first page and focusing on the external - see eg below. http://www.nctfleetlist.co.uk/div4.php The new window can be called via either a href "rel" link or an "onclick" command. I have tried implementing the the two together but when I use the javascript to call the new window the data from the original form is not passed over! - this is what I have so far... example 1 - using onclick command (http://www.nctfleetlist.co.uk/eg1.php) Code: <script> GB_show(caption, url, /*optional*/ height, width, callback_fn) </script> <form name="form1" action="test_script.php" method="post"> <input type="text" name="var1" value=""> <input type="submit" name="submit" value="submit" onclick="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)"> </form> example 2 - using onsubmit within the form tag (http://www.nctfleetlist.co.uk/eg2.php) Code: <script> GB_show(caption, url, /*optional*/ height, width, callback_fn) </script> <form name="form1" action="test_script.php" method="post" onSubmit="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)"> <input type="text" name="var1" value=""> <input type="submit" name="submit" value="submit"> </form> example 3 - using a javascript link to submit the form, adding a "rel" tag (http://www.nctfleetlist.co.uk/eg3.php) Code: <script> GB_show(caption, url, /*optional*/ height, width, callback_fn) </script> <form name="form1" action="test_script.php" method="post"> <input type="text" name="var1" value=""> <a href="#" onclick="document.forms[0].submit()" rel="gb_page_center[720, 300]">Search</a> </form> Any help is appreciated! Hi, i know i should have 2 fields for a first and last name in my form but i dont - and was wondering if someone would be able to help me with - or has - a java script valadation rule to only allow a one letter character (letter in between spaces such as a middle initial) in a text field if at least 2 words are also included (2 words of at least 2 or more characters) so if the user input ' John H ' an error prompt would display until one more word is added/at least 2 words are found right now im using the below coding to allow at least 2 words in the text field but would like to see if its possible to enhance it so it will only block a one letter word if there are less than 2 other words in the form - right now if any words is added with less than 2 characters it will display an error... if anyone knows of a better form of code that needs a minimum of 2 words added and still allows single characters such as middle initials to in a validation script i'd greatly appreciate your help... i get lost on validation process' 'cheers' in advance to anyone that may know of something or a site that can point me in a better direction function(value,element){return this.optional(element)||/^((\b[a-zA-Z]{2,80}\b)\s*){2,}/ Hi, I would like to prevent the addition of duplicate items in the following situation. Firstly, I have a listbox with a few options such as Code: <select id="listbox" name="listbox" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> Next, I have a submit button with a textbox. The user will be able to submit new options into the listbox via the textbox and submit button. Therefore, I need to prevent the user from entering duplicate items into the listbox. How should I do? The following code is used to add items into the listbox. Code: function addItem() { var lst = document.getElementById('listbox'); // listbox control id var newItem = prompt("Enter New Item","Enter Value Here"); //Option object is created for every option in a selection //new Option([text[, value[, defaultSelected[, selected]]]]) // Syntax if(newItem == null) { return false; } else { lst.options[lst.length] = new Option(newItem,newItem,false,false); return false; } } Hi everyone, now I need to add items into a dropdown list, and the items would be sorted alphabetically and it does not allow duplicate items to be added. Can anyone help take a look and see what's wrong with my code? Javascript Code: function addAnotherOption() { var newItem = document.getElementById("Text44"); if (!newItem.value == "") { var answer = confirm ("Are you sure you want to add? ") if (answer)//if answer is true { var lst = document.getElementById('comboBox'); // listbox control id // Now we need to create a new 'option' tag to add to MyListbox var newOption = document.createElement("option"); newOption.value = newItem.value; // The value that this option will have newOption.innerHTML = newItem.value; // The displayed text inside of the <option> tags for (var i = 0; i < lst.options.length; i++) { arrTexts = lst.options[i].text; if (arrTexts.toLowerCase() == newItem.toLowerCase()) { alert ("That option is already included in the list - please enter another item."); return false; } else { // Finally, add the new option to the listbox lst.appendChild(newOption); //sort items in listbox in alpha order arrTexts = new Array(); for(i=0; i<lst.length; i++) { arrTexts[i] = lst.options[i].text; } arrTexts.sort(); for(i=0; i<lst.length; i++) { lst.options[i].text = arrTexts[i]; lst.options[i].value = arrTexts[i]; } } } } } else { if(newItem.value == "") { alert("Key something to textbox please."); } else alert("Cancelled."); } } HTML Code: <input id="Text44" type="text" /> <input id="Submit22" type="submit" value="Add" onclick="addAnotherOption()" /><br /> <select name="combo" id= "comboBox" style="width: 323px"> <option value="H">Hearts</option> <option value="D">Diamonds</option> <option value="C">Clubs</option> <option value="S">Spades</option> </select> Voting button on the poll in the left column works fine if you take the sharethis javascripts out. Why won't they work together though? <script type="text/javascript" src="http://www.claimsheaven.co.uk/polls/admin/script.js"></script> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script> e.g. on this page: http://www.claimsheaven.co.uk/news/20120305.php **Solved**
I want to display a different adsence add each time my page is refreshed. How could this be acomplished? Is there existing banner rotation scripts at allow you to inser scripts instead of images and links. The scripts I need to rotate look like this. add 1 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> add 2 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Hey guys, Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc. Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help. Thanks in advance! Code: <script language="javascript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=12000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="images/simple_img_11.jpg" randomimages[1]="images/simple_img_2.jpg" randomimages[2]="images/simple_img_3.jpg" randomimages[3]="images/simple_img_4.jpg" randomimages[4]="images/simple_img_5.jpg" randomimages[5]="images/simple_img_6.jpg" randomimages[5]="images/simple_img_7.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds? Code: <script language="JavaScript"> images = new Array(3); images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>"; images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>"; images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> Kind regards Jon I created a drawEllipse function for a Canvas library I'm making, and it works fine in Safari, Firefox, and Chrome, but in Opera, the rotation doesn't work. The function is as follows: Code: ctx.drawEllipse = function (fill, x, y, rad1, rad2, r) { ctx.save(); if (r) { ctx.translate(x, y); ctx.rotate(r); ctx.translate(-x, -y); } ctx.scale(rad1, rad2); ctx.beginPath(); ctx.arc()(x / rad1, y / rad2, 1); ctx[fill](); ctx.restore(); }; When I add rotation to the ellipse, in Opera, it doesn't rotate and just gets bigger. I have no idea why. Can anyone suggest anything? Thanks, Julian I'm in search for a simple and clean timed rotation script. I have these quotes, and right now they're coded so that a single quote displays and changes upon refresh. The script is really clean, and I would like to maintain the cleanliness but make the images rotate every couple of seconds. Here's the script... Code: <script type="text/javascript"> quote = new Array(3); quote[0] = "Quote 1"; quote[1] = "Quote 2"; quote[2] = "Quote 3"; index = Math.floor(Math.random() * quote.length); document.write(quote[index]); </script> It's probably a really simple piece of coding, but I'm still new to JavaScript, so it's obviously out of my range. I appreciate anyone who will help Hi guys, I am building my second site, this time with wordpress, for a friend's restaurant. I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/ Main code Code: <?php wp_enqueue_script('jquery'); ?> <script type="text/javascript"> counter = 1; num_images = 5; // Enter the number of images to rotate dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored function rotateHeader() { var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace counter++; if (counter > num_images) counter = 1; } </script> I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition? Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { background-color: white; margin: 0; padding: 0; } img { -webkit-transition-property: opacity; -webkit-transition-duration: 3s; position: absolute; width: 320px; height: auto; } img.fade-out { opacity: 0; } img.fade-in { opacity: 1; } </style> </head> <body style="color: black"> <img src="01.jpg"/> <img src="02.jpg"/> <img src="03.jpg"/> <img src="04.jpg"/> <img src="05.jpg"/> <img src="06.jpg"/> <img src="07.jpg"/> <img src="08.jpg"/> <img src="09.jpg"/> <img src="10.jpg"/> <img src="11.jpg"/> <img src="12.jpg"/> <img src="13.jpg"/> <img src="14.jpg"/> <img src="15.jpg"/> <script> var interval = 4 * 1; // Seconds between change var images = document.getElementsByTagName("img"); var imageArray = []; var imageCount = images.length; var current = 0; var randomize = function(){ return (Math.round(Math.random() * 3 - 1.5)); } for(var i = 0; i < imageCount; i++){ images[i].className = 'fade-out'; imageArray[i] = images[i]; } imageArray.sort(randomize); var fade = function(){ imageArray[current++].className = 'fade-out'; if(current == imageCount){ current = 0; imageArray.sort(randomize); } imageArray[current].className = 'fade-in'; setTimeout(fade, interval * 1000); }; fade(); </script> </body> So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! |