JavaScript - Menu Dissapearing Behind Slideshow
Heres my website in progress: http://whnpf.perdu.servertrust.com/
When you rollover the categories such as 'Batteries' the menu sometimes dissapears behind the slideshow, and was wondering how I can prevent this and have the menu drop down go OVER the slideshow. I dont know what 'z' values to change exactly, but heres the code: Code: <center><script type="text/javascript" src="/v/vspfiles/assets/images/fadeslideshow.js "></script> <script type="text/javascript" src="/v/vspfiles/assets/images/fadeslideshow.js "> </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [939, 188], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["/v/vspfiles/assets/images/bannerad4.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."], ["/v/vspfiles/assets/images/bannerad2.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"], ["/v/vspfiles/assets/images/banneradcases.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"], ["/v/vspfiles/assets/images/ABOUTUSLOGO.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"] ], displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script> <div id="fadeshow1"></div> <div id="fadeshow2"></div> </div> Many thanks in advance! Similar TutorialsI find that my tabs on my menu at the top dissapear as soon as I try to cover over them, and I do not know why? This is my website in testing: http://whnpf.perdu.servertrust.com/ Hover over a categroy at the top, and you will see a tab appear, if you hover over that, it will dissapear and you wont be able to click anything inside it? Im not sure if its the z-index that needs changing in the .js file, but would take any advice on board, thanks! Hi everyone, How can I achieve this? I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store It works on all browsers except for IE, which hides the menu behind the js slideshow. Any help would be greatly appreciated! I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive: http://www.dynamicdrive.com/dynamici...nslideshow.htm This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow. You can see it he http://brookenelson.com/upticon/draft3/index.html Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution ( see he http://brookenelson.com/upticon/draft3/index2.html ) But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item. Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better? Many many many thanks in advance. p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!! 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); } 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; } Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. 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? Hi, I desperately need a javascript slideshow that does the following: 1--shows still images with thumbnails 2--can be played manually or automatically 3--can embed youtube videos 4--audio can accompany slideshows 5--powered by javascript, not Flash so it shows up on iPad Does anyone know where I can get such a slideshow? Thanks 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 Hello everybody! first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem: As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want... Thank you very much! S.P. 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? This slideshow has a drop down menu that lets you go from one picture to another. Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)? I know absolutley nothing about javascript. sorry. Thanks programmers! <!-- configurable script --> <script type="text/javascript"> theimage = new Array(); theimage[0]=["url", "", "1"]; theimage[1]=["url", "", "2"]; theimage[2]=["url", "", "3"]; //########################################### window.onload=function(){ //preload images into browser preloadSlide(); //"jump to" box for (y=0;y<theimage.length;y++) { document.slideshow.imgComboBox[y]=new Option(theimage[y][2]); } //set the first slide SetSlide(0); } //########################################### function SetSlide(num) { //too big i=num%theimage.length; //too small if(i<0)i=theimage.length-1; //switch the image document.images.imgslide.src=theimage[i][0]; //if drop down box if(document.slideshow.imgComboBox){ document.slideshow.imgComboBox.selectedIndex = i; } //if they want name of current slide document.getElementById('slidebox').innerHTML=theimage[i][2]; } //########################################### function PlaySlide() { if (!window.playing) { PlayingSlide(i+1); if(document.slideshow.play){ document.slideshow.play.value=" Stop "; } } else { playing=clearTimeout(playing); if(document.slideshow.play){ document.slideshow.play.value=" Play "; } } // if you have to change the image for the "playing" slide if(document.images.imgPlay){ setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); imgStop=document.images.imgPlay.src } } //########################################### function PlayingSlide(num) { playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); } //########################################### function preloadSlide() { for(k=0;k<theimage.length;k++) { theimage[k][0]=new Image().src=theimage[k][0]; } } </script> <!-- slide show HTML --> <form name="slideshow"> <table border="1" cellpadding="2" cellspacing="0"> <tr> <td align="center"> <a href="#" onmouseover="this.href=theimage[i][1];return false"> <script type="text/javascript"> document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') </script> </a> </td> </tr> <tr> <td align="center"><div id="slidebox"></div></td> </tr> <tr> <td align="center"> <select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select> </td> </tr> </table> </form> <!-- end of slide show HTML --> 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. Solved
Hello All, I found lightbox to be very useful for certain things, however I was hoping someone could help me out with the code or point me to a tutorial that could do what I am looking for. Similar to lightbox (http://lokeshdhakar.com/projects/lightbox2/) how you can click on an image to open a separate window to display a slideshow, however with lightbox you need to display all images that are included in the slideshow, i.e. thumbnails. I was hoping to find a way to do something similar but without having to display all the images as thumbnails. I want to display only one picture which the user can click on that will open a new window and display a slideshow with multiple images. If this possible? Can someone help me out with this? Any tips or tricks or tutorials that can be shared with me I would greatly greatly appreciate it. Many thanks, bg I am new to both javascript and .asp. I'm hoping someone here can help me accomplish this task. There is a slideshow on this homepage: http://www.ledson.com The same type of slideshow needs to go on this page, in approx the same spot (right under the logo on the left side): http://ledsonhotel.com I did not write the code for the original site so it's a little confusing to me. I have placed the files in what I believe to be the appropriate folders and added the same code, but my slideshow doesn't show up. Is there a simpler javascript slideshow that I can add here that will go under the logo? Thanks! I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after. Here is my code so far. Javascript: Code: <script type="text/javascript"> // Modified for: http://codingforums.com/showthread.php?p=949514#post949514 // and: http://www.codingforums.com/showthread.php?t=195033 var ImgPtr = -1; // -1 for first pass only var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/'; ImgArray = [ // format: ['imageName','Comments about image'] ['pinto-1.jpg', '<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'], ['shedding.jpg', '<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'], ['dewormer-1.jpg', '<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>'] // Note: No comma after last entry ]; var intervalAction; function ShowSlide(slide_num) { document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0]; document.getElementById('mypic').alt = ImgArray[slide_num][1]; document.getElementById('Caption').innerHTML = ImgArray[slide_num][1]; } function slideshow() { ImgPtr++; ImgPtr = ImgPtr % ImgArray.length; // document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr; ShowSlide(ImgPtr); } onload = function() { slideshow(); intervalAction = setInterval("slideshow()",5000); } </script> HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! Hi, Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me?? The slideshow will hold just text and links but will need to be dynamic in size. i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text. how would i do this?? Thanks |