JavaScript - Custom Slideshow Display Div
I am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug.
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"> <head> <body> <div id="page-wrap"> <button id="nextButton2">next('div')</button> <button id="prevButton2">prev('div')</button> <div id="start" style="background: none repeat scroll 0% 0% red;"></div> <div id="link_Babbling Brook" class="art"> <div id="link_Botany 101" class="art"> <div id="link_Cracking Up" class="art"> <div id="link_Eclipse" class="art"> <div id="link_Equinox" class="art"> <div id="link_Foliage Fluoresced" class="art"> <div id="link_In Vein" class="art"> <div id="link_Microscopic" class="art"> <div id="link_Pickup Sticks" class="art"> <div id="link_Relief" class="art"> <div id="link_Rhubarb" class="art"> <div id="link_Snow Dyed Shibori" class="art"> <div id="link_Symmetry" class="art"> <div id="link_Undulations" class="art"> <div id="link_Willow Mist" class="art"> <div id="link_Wired" class="art"> </div> </body> </html> Javascript code Code: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } $(document).ready(function () { $.ajax({ type: "GET", url: "sites.xml", dataType: "xml", success: function (xml) { $(xml).find('art').each(function () { var id = $(this).attr('id'); var name = $(this).find('name').text(); var full = $(this).find('large').text(); var detail = $(this).find('detail').text(); var thumb = $(this).find('thumb').text(); var category = $(this).find('category').text(); var dimensions = $(this).find('dimensions').text(); var description = $(this).find('description').text(); var detailthumb = '<img src= " ' + thumb + ' " />'; var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>'; var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />'; $('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap'); }); var $currElement = $("#start"); $currElement.css("background", "red"); $("#nextButton2").click(function () { if(!$currElement.next('div').length){ alert("No element found!"); return false; } $currElement = $currElement.next('div'); $("div,p").css("background", ""); $currElement.css("background", "red"); }); var $currElement = $("#start"); $currElement.css("background", "red"); $("#prevButton2").click(function () { if(!$currElement.prev('div').length){ alert("No element found!"); return false; } $currElement = $currElement.prev('div'); $("div,p").css("background", ""); $currElement.css("background", "red"); }); } }); }); Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP Similar TutorialsHello everyone, i hope your good. I decided when redesigning my website that i would try and build nearly everything in it by hand, which included a nice Javascript slideshow. While coding it (coded on Windows 7 and Vista) I ensured i checked it compatability with Firefox, IE, Chrome and Safari. From what i could tell everything was working good (except for some endless looping problems but lets ignore that for now). It even worked on the iPhone browser. But i sent it to a friend to test and they said nothing was working, after some discussion i descovered they were using IE7 (i was testing in IE8). From what i can see, IE7 has some problems with nested .appendChild and general document handling. I had tried to do my best keeping to using objects in javascript and now just writing HTML, and on one side it worked as it works on most browsers, but not IE7. The page it can be tested on it: http://xvolt.x-volt.com/downloads/view.php?id=3 And the code itself is: http://xvolt.x-volt.com/js/slideshow.js The code is nearly all based in a class, but i kept finding problems so there are a few functions found outside the class. The area where most things go wrong is in the function: this.goToImage = function (image) { As this is used to generate the floating div above all the content. This function also uses IMG objects which are hidden until the image has loaded (instead showing a nice please wait logo) and then once loaded it appears. I have tried using .innerHTML to get around the append child problems but the images dont seem to work the same as just passing object around. If anyone has any tips to get around this would be awesome as this little self project has seemed to become harder then i thought! Thanks Simon i have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/ Thanks for any suggestions or help in advance I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one. I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript. I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas? Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230. I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks! I'm not sure whether this is a javascript or CSS related problem so sorry if I've posted this in the wrong place. I'm modifying a slideshow plugin to fit my website and have changed some of the dimensions of the slides. Now the next slide is coming in from the wrong position on the right hand side. I'm not sure how to fix this, can someone please help? http://ah.mjtippet.com/ I am learning Javascript and HTML5... I am trying to create a slideshow using canvas with text display of what the current image is. I have done this without canvas but I want to use canvas this time. My idea involves using the file name as the text display. Here is my working slideshow.. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Slide Show</title> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script type="text/javascript"> var imagePaths = [ "images/Summer.jpg", "images/Spring.jpg", "images/Fall.jpg", "images/Winter.jpg", "images/Puppies.jpg", "images/Duck.jpg" ]; var showCanvas = null; var showCanvasCtx = null; var img = document.createElement("img"); var currentImage = 0; window.onload = function () { showCanvas = document.getElementById('showCanvas'); showCanvasCtx = showCanvas.getContext('2d'); img.setAttribute('width','480'); img.setAttribute('height','360'); } function nextImage() { currentImage++; if (currentImage >= imagePaths.length) currentImage = 0; img.setAttribute('src',imagePaths[currentImage]); img.onload = function() { showCanvasCtx.drawImage(img,0,0,480,360); } } function prevImage() { currentImage--; if (currentImage < 0) currentImage = imagePaths.length-1; img.setAttribute('src',imagePaths[currentImage]); img.onload = function() { showCanvasCtx.drawImage(img,0,0,480,360); } } </script> <style type="text/css"> <!-- #showCanvas { background-image: url(images/Summer.jpg); } #center { height: 360px; width: 491px; float: right; } #slideArea { height: 381px; width: 600px; margin-right: auto; margin-left: auto; } #right { height: 361px; width: 52px; float: right; } #left { float: left; height: 360px; width: 52px; } #nxtBtn { width: 57px; height: 57px; position: relative; top: 120px; } #bkBtn { height: 57px; width: 57px; position: relative; top: 120px; } #displayText { width: 600px; height: 20px; float: left; text-align: center; } --> </style> </head> <body> <br /> <div id="slideArea"> <div id="right"> <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a> </div> <div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div> <div id="center"> <center> <canvas id="showCanvas" width="480" height="360" > Your browser does not support the canvas tag. <br /> Please upgrade your browser </canvas> </center> </div> <div id="displayText">Display Text</div> </div> </body> </html> This is what I came up with so far but it doesn't work. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Slide Show</title> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script type="text/javascript"> ////added this code to be able to pull the display text from "imageName" var imagePath = ["images/]; var imageName = [ "Summer", "Spring", "Fall", "Winter", "Puppies", "Duck" ]; var imagePaths = imagePath + imageName + ".jpg"; ///////////////////// var showCanvas = null; var showCanvasCtx = null; var img = document.createElement("img"); var currentImage = 0; window.onload = function () { showCanvas = document.getElementById('showCanvas'); showCanvasCtx = showCanvas.getContext('2d'); img.setAttribute('width','480'); img.setAttribute('height','360'); } function nextImage() { currentImage++; if (currentImage >= imagePaths.length) currentImage = 0; img.setAttribute('src',imagePaths[currentImage]); img.onload = function() { showCanvasCtx.drawImage(img,0,0,480,360); } } function prevImage() { currentImage--; if (currentImage < 0) currentImage = imagePaths.length-1; img.setAttribute('src',imagePaths[currentImage]); img.onload = function() { showCanvasCtx.drawImage(img,0,0,480,360); } } </script> <style type="text/css"> <!-- #showCanvas { background-image: url(images/Summer.jpg); } #center { height: 360px; width: 491px; float: right; } #slideArea { height: 381px; width: 600px; margin-right: auto; margin-left: auto; } #right { height: 361px; width: 52px; float: right; } #left { float: left; height: 360px; width: 52px; } #nxtBtn { width: 57px; height: 57px; position: relative; top: 120px; } #bkBtn { height: 57px; width: 57px; position: relative; top: 120px; } #displayText { width: 600px; height: 20px; float: left; text-align: center; } --> </style> </head> <body> <br /> <div id="slideArea"> <div id="right"> <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a> </div> <div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></div> <div id="center"> <center> <canvas id="showCanvas" width="480" height="360" > Your browser does not support the canvas tag. <br /> Please upgrade your browser </canvas> </center> </div> <div id="displayText">Display Text</div> </div> </body> </htm> Any help would be greatly appreciated. I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() { var ele = document.getElementById("dropdown-items"); var text = document.getElementById("dropdown-menu"); if(ele.style.display == "block") { ele.style.display = "none"; } else { ele.style.display = "block"; } } I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript"> function translate() { if (document.form1.elements[0].checked == true) { EtoA() } else if (document.form1.elements[1].checked == true) { AtoE() } else { } } function EtoA() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "a") { tempb = "9" } else if(tempa == "b") { tempb = "a" } else if(tempa == "c") { tempb = "0" } else if(tempa == "d") { tempb = "c" } else if(tempa == "e") { tempb = "3" } else if(tempa == "f") { tempb = "b" } else if(tempa == "g") { tempb = "4" } else if(tempa == "h") { tempb = "?" } else if(tempa == "i") { tempb = "5" } else if(tempa == "j") { tempb = "6" } else if(tempa == "k") { tempb = "e" } else if(tempa == "l") { tempb = "+" } else if(tempa == "m") { tempb = "x" } else if(tempa == "n") { tempb = "7" } else if(tempa == "o") { tempb = "v" } else if(tempa == "p") { tempb = "1" } else if(tempa == "q") { tempb = "t" } else if(tempa == "r") { tempb = "q" } else if(tempa == "s") { tempb = "g" } else if(tempa == "t") { tempb = "n" } else if(tempa == "u") { tempb = "<" } else if(tempa == "v") { tempb = ">" } else if(tempa == "w") { tempb = "^" } else if(tempa == "x") { tempb = "!" } else if(tempa == "y") { tempb = "@" } else if(tempa == "z") { tempb = "#" } else if(tempa == "A") { tempb = "9" } else if(tempa == "B") { tempb = "a" } else if(tempa == "C") { tempb = "0" } else if(tempa == "D") { tempb = "c" } else if(tempa == "E") { tempb = "3" } else if(tempa == "F") { tempb = "b" } else if(tempa == "G") { tempb = "4" } else if(tempa == "H") { tempb = "h" } else if(tempa == "I") { tempb = "5" } else if(tempa == "J") { tempb = "6" } else if(tempa == "K") { tempb = "e" } else if(tempa == "L") { tempb = "f" } else if(tempa == "M") { tempb = "x" } else if(tempa == "N") { tempb = "7" } else if(tempa == "O") { tempb = "v" } else if(tempa == "P") { tempb = "1" } else if(tempa == "Q") { tempb = "t" } else if(tempa == "R") { tempb = "q" } else if(tempa == "S") { tempb = "g" } else if(tempa == "T") { tempb = "n" } else if(tempa == "U") { tempb = "<" } else if(tempa == "V") { tempb = ">" } else if(tempa == "W") { tempb = "^" } else if(tempa == "X") { tempb = "!" } else if(tempa == "Y") { tempb = "@" } else if(tempa == "Z") { tempb = "#" } else if(tempa == "1") { tempb = "}" } else if(tempa == "2") { tempb = "{" } else if(tempa == "3") { tempb = "(" } else if(tempa == "4") { tempb = "'" } else if(tempa == "5") { tempb = "|" } else if(tempa == "6") { tempb = "`" } else if(tempa == "7") { tempb = ":" } else if(tempa == "8") { tempb = ";" } else if(tempa == "9") { tempb = "=" } else if(tempa == "0") { tempb = ")" } else if(tempa == "~") { tempb = "R" } else if(tempa == "!") { tempb = "T" } else if(tempa == "@") { tempb = "F" } else if(tempa == "#") { tempb = "Y" } else if(tempa == "$") { tempb = "K" } else if(tempa == "%") { tempb = "J" } else if(tempa == "^") { tempb = "H" } else if(tempa == "&") { tempb = "G" } else if(tempa == "*") { tempb = "X" } else if(tempa == "_") { tempb = "V" } else if(tempa == "-") { tempb = "B" } else if(tempa == "+") { tempb = "M" } else if(tempa == "=") { } else if(tempa == "<") { tempb = "N" } else if(tempa == ">") { tempb = "U" } else if(tempa == ".") { tempb = "S" } else if(tempa == ",") { tempb = "W" } else if(tempa == "?") { tempb = "." } else if(tempa == ":") { tempb = "," } else if(tempa == ";") { tempb = "$" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } function AtoE() { var toggle = "false" var xlate = document.form1.elements[4].value var xlation = "" document.form1.elements[5].value = "" for (var i = 0; i <= xlate.length; i++) { tempa = xlate.charAt(i) if ( tempa == "[") { toggle = "true" i++ } else if ( tempa == "]") { toggle = "false" i++ } tempa = xlate.charAt(i) if (toggle == "true") { tempb = tempa } else if(tempa == "9") { tempb = "a" } else if(tempa == "a") { tempb = "b" } else if(tempa == "0") { tempb = "c" } else if(tempa == "c") { tempb = "d" } else if(tempa == "3") { tempb = "e" } else if(tempa == "b") { tempb = "f" } else if(tempa == "4") { tempb = "g" } else if(tempa == "?") { tempb = "h" } else if(tempa == "5") { tempb = "i" } else if(tempa == "6") { tempb = "j" } else if(tempa == "e") { tempb = "k" } else if(tempa == "+") { tempb = "l" } else if(tempa == "x") { tempb = "m" } else if(tempa == "7") { tempb = "n" } else if(tempa == "v") { tempb = "o" } else if(tempa == "1") { tempb = "p" } else if(tempa == "t") { tempb = "q" } else if(tempa == "q") { tempb = "r" } else if(tempa == "g") { tempb = "s" } else if(tempa == "n") { tempb = "t" } else if(tempa == "<") { tempb = "u" } else if(tempa == ">") { tempb = "v" } else if(tempa == "^") { tempb = "w" } else if(tempa == "!") { tempb = "x" } else if(tempa == "@") { tempb = "y" } else if(tempa == "#") { tempb = "z" } else if(tempa == "9") { tempb = "A" } else if(tempa == "a") { tempb = "B" } else if(tempa == "0") { tempb = "C" } else if(tempa == "c") { tempb = "D" } else if(tempa == "3") { tempb = "E" } else if(tempa == "b") { tempb = "F" } else if(tempa == "4") { tempb = "G" } else if(tempa == "?") { tempb = "H" } else if(tempa == "5") { tempb = "I" } else if(tempa == "6") { tempb = "J" } else if(tempa == "e") { tempb = "K" } else if(tempa == "+") { tempb = "L" } else if(tempa == "x") { tempb = "M" } else if(tempa == "7") { tempb = "N" } else if(tempa == "v") { tempb = "O" } else if(tempa == "1") { tempb = "P" } else if(tempa == "t") { tempb = "Q" } else if(tempa == "q") { tempb = "R" } else if(tempa == "g") { tempb = "S" } else if(tempa == "n") { tempb = "T" } else if(tempa == "<") { tempb = "U" } else if(tempa == ">") { tempb = "V" } else if(tempa == "^") { tempb = "W" } else if(tempa == "!") { tempb = "X" } else if(tempa == "@") { tempb = "Y" } else if(tempa == "#") { tempb = "Z" } else if(tempa == "}") { tempb = "1" } else if(tempa == "{") { tempb = "2" } else if(tempa == "(") { tempb = "3" } else if(tempa == "'") { tempb = "4" } else if(tempa == "|") { tempb = "5" } else if(tempa == "`") { tempb = "6" } else if(tempa == ":") { tempb = "7" } else if(tempa == ";") { tempb = "8" } else if(tempa == "=") { tempb = "9" } else if(tempa == ")") { tempb = "0" } else if(tempa == "R") { tempb = "~" } else if(tempa == "T") { tempb = "!" } else if(tempa == "F") { tempb = "@" } else if(tempa == "Y") { tempb = "#" } else if(tempa == "K") { tempb = "$" } else if(tempa == "J") { tempb = "%" } else if(tempa == "H") { tempb = "^" } else if(tempa == "G") { tempb = "&" } else if(tempa == "X") { tempb = "*" } else if(tempa == "V") { tempb = "_" } else if(tempa == "B") { tempb = "-" } else if(tempa == "M") { tempb = "+" } else if(tempa == "N") { tempb = "<" } else if(tempa == "U") { tempb = ">" } else if(tempa == "S") { tempb = "." } else if(tempa == "W") { tempb = "," } else if(tempa == ".") { tempb = "?" } else if(tempa == ",") { tempb = ":" } else if(tempa == "$") { tempb = ";" } else { tempb = tempa } xlation = document.form1.elements[5].value document.form1.elements[5].value = xlation + tempb } } Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong? Code: window.onload = initLinks; var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif"); var thisPic = 0; function initLinks() { document.getElementById("prevLink").onclick = processPrevious; document.getElementById("nextLink").onclick = processNext; } function processPrevious() { if (thisPic == 0) { thisPic = myPix.length; } thisPic--; document.getElementById("myPicture").src = myPix[thisPic]; return false; } function processNext() { thisPic++; if (thisPic == myPix.length) { thisPic = 0; } document.getElementById("myPicture").src = myPix[thisPic]; return false; } // Load Images if (document.images) { writeImg = new Image(); writeImg.src = (comic/Issue1_Page03.gif); } function imgOn(imgName) { if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;} return false; } // Load Images if (document.images) { writeImg = new Image(); writeImg.src = (comic/Issue1_Page00.gif); } function imgOn(imgName) { if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;} return false; } Code: var mySlideShow = document.getElementById("slideShow"); var imageArray=new Array(); imageArray[0]="url(images/Slide1.JPG)"; imageArray[1]="url(images/Slide2.JPG)"; imageArray[2]="url(images/Slide3.JPG)"; var imageIndex = 0; var leftArrow = document.getElementById("left"); var rightArrow = document.getElementById("right"); mySlideShow.style.backgroundImage = "url(images/Slide1.JPG"; function changeRight () { mySlideShow.style.backgroundImage = imageArray[imageIndex]; imageIndex++; if (imageIndex >= imageArray.length) { imageIndex = 1; } console.log(imageIndex); } function changeLeft () { mySlideShow.style.backgroundImage = imageArray[imageIndex]; imageIndex--; console.log(imageIndex); } rightArrow.onclick = function() { changeRight(); } leftArrow.onclick = function() { changeLeft(); } So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. Solved
Hey im looking to get 3 slide shows on 1 website (coded in php). I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this? I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images Code: <div id="imageBox"> <!-- Random Images --> <img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" /> </div> and here is the external .js file for it Code: window.onload = pics; var thisPic = 0; var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg"); function pics(){ thisPic = Math.floor((Math.random() * schoolImages.length)); document.getElementById('randImage').src = schoolImages[thisPic]; cycle(); } function cycle(){ thisPic++; if(thisPic == schoolImages.length){ thisPic = 0; } document.getElementById('randImage').src = schoolImages[thisPic]; setTimeout(cycle, 3 * 1000); } I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now? I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back. Here is the book and the case problem I am on: http://books.google.com/books?id=BeE...page&q&f=false Basically the images is not loading up, or anything is happening. //EDIT : I have the function setup() onLoad in the body ( body onload="setup()" ) Here is my code: FileName: flibrary.js Code: function getStyle(object, styleName) { if (window.getComputedStyle) { return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName); } else if (object.currentStyle) { return object.currentStyle[styleName] } } // step 3 function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } //step 4 function addEvent(object, evName, fnName, cap) { if (object.detachEvent) object.detachEvent("on" + evName, fnName); else if (object.removeEventListener) object.removeEventListener(evName, fnName, cap); } FileName: slideshows.js Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 6 Case Problem 2 Author: Date: Filename: slideshow.js Global Variables: scrollButton References the scrolling button in the slide show diffX Stores the horizontal distance in pixels between the mouse pointer when the scrolling button is clicked and the left edge of the scrolling button. Functions List: setup() Initializes the contents of the Web page. Creates event handlers for the mouse and keyboard events grabIt(e) "Grabs" the scrolling button to set up the horizontal scrolling of the slide show moveIt(e) Moves the scrolling button horizontally through the scrollbar showSlide(x) Shows the image corresponding the to the x coordinate on the scrollbar dropIt(e) Drops the scrolling button after the user releases the mouse button keyShow(e) Uses the left and right arrow keys to move the scrolling button through the scrollbar */ var scrollButton; var diffX; // step 7 function setup(){ scrollButton = document.getElementById("button"); scrollButton.style.top = getStyle(scrollButton,"top"); scrollButton.style.left = getStyle(scrollButton,"left"); scrollButton.style.cursor = "pointer"; addEvent(scrollButton, "mousedown", grabIt, false); addEvent(document, "keydown", keyShow, false); } // step 8 function grabIt(e){ var evt = e || window.event; var mouseX = evt.clientX; diffX = parseInt(scrollButton.style.left)- mouseX; addEvent(scrollButton, "mousemove", moveIt, false); addEvent(scrollButton, "mouseup", dropIt, false); } // step 9 function moveIt(e){ var evt = e || window.event; var mouseX = evt.clientX; var buttonPosX = mouseX - diffX; showSlide(); } // step 10 function showSlide(x){ if(x<20){ x = 20; } if(x>299){ x = 299; } scrollButton.style.left = x; var i = Math.floor((x-20)/31); document.getElementById("photo").src = image[i]; } // step 11 function dropIt(e){ removeEvent(scrollButton, "mousemove", moveIt, false); } // step 12 function keyShow(e){ var evt = e || window.event; var key = event.keyCode; var buttonPosX = scrollButton.style.left; if(key == 37) buttonPosX -= 31; if(key == 39) buttonPosX += 31; showSlide(buttonPosX); } hi evey one I need a slideshow like this website . zbiddy.com as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide . I've made my content for each slide and just need a script that change these content I need your help very much Thanks |