JavaScript - Adding Ticker Pause And Direct Navigation
I have the following script in my page
Code: var tickspeed=4000 var enablesubject=0 if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.dropcontent{display:none;}\n') document.write('</style>\n') } var firstDiv=0 var allDivs=0 function contractall(){ var inc=0 while (document.getElementById("dropmsg"+inc)){ document.getElementById("dropmsg"+inc).style.display="none" inc++ } } function expandone(){ var firstDivObj=document.getElementById("dropmsg"+firstDiv) contractall() document.getElementById("dropcontentsubject").innerHTML=firstDivObj.getAttribute("subject") firstDivObj.style.display="block" firstDiv=(firstDiv<allDivs-1)? firstDiv+1 : 0 setTimeout("expandone()",tickspeed) } function startscroller(){ while (document.getElementById("dropmsg"+allDivs)!=null) allDivs++ expandone() if (!enablesubject) document.getElementById("dropcontentsubject").style.display="none" } if (window.addEventListener) window.addEventListener("load", startscroller, false) else if (window.attachEvent) window.attachEvent("onload", startscroller) I also have the following in my html: Code: <div id="dropcontentsubject"></div> <div id="dropmsg0" class="dropcontent" subject=""></div> There are a total of 4 dropmsg# divs. I need to be able to input 4 navigation buttons below this code that will, when clicked, pause the ticker and go directly to the "dropmsg#" assigned to that button. I would deeply appreciate any assistance with this. Thank you. Similar TutorialsI have a rotating content js, and I want to add a pause to it when its mosed over, heres the current code: Code: <body> <a id="imageurl" ><img id="Rotating1" border="0"></img></a> <script language="JavaScript"> function RotateImages(Start) { var a = new Array("image1","image2","image3","image4"); var c = new Array("www.google.ca", "www.google.ca", "www.google.ca", "www.google.ca"); var b = document.getElementById('Rotating1'); var d = document.getElementById('imageurl'); if(Start>=a.length) Start=0; b.src = a[Start]; d.href = c[Start]; window.setTimeout("RotateImages(" + (Start+1) + ")",3000); } RotateImages(0); </script> </body> Hi, I found a nice simple javascript slider but there is a small change I want to make. How can I make the slider pause for one or two seconds when the image has slid fully into position ? PHP Code: <style> #ParentDiv { margin: auto; width: 200px; overflow: hidden; } #ChildDiv { width: 6000px; position:relative; cursor:pointer; } #ParentDiv img { float: left; padding: 3px; margin: 0px; } </style> <script type="text/javascript"> //Array Of Image, [URL, width of Image, LinkTo] var t; var StepTime=20; var StepPixel=2; var ImgPadding=3; var ParentDivLen=200; var Img= Array( ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"], ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"], ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"] ); var Pos=3; var Len=Img.length; var DivWidth=0; var MoreImage=0; function goURL(URLS) { document.location.href=URLS; } for(i=0;i<Len;i++) { DivWidth+=Img[i][1] + ImgPadding*2; if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i; } function getE(id) { return document.getElementById(id); } function Dr_Img(IMG) { return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">'; } function Dr_ImgArr() { var str=''; for(i=0;i<Len;i++) str += Dr_Img(Img[i]); for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]); document.write(str); } function DoSlide() { if(Pos==0)Pos=-1; divtg=getE('ChildDiv'); Pos-=StepPixel; if(Pos<-DivWidth)Pos=0; divtg.style.left=Pos +'px'; t=setTimeout('DoSlide()',StepTime); } function SlideStop() { clearTimeout(t); } function setmouse(id) { if(id==1) { DoSlide(); } else { SlideStop(); } } </script> </head> <body onload="DoSlide()"> <div id="ParentDiv"> <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);"> <script> Dr_ImgArr(); </script> </div> </div> I have tried adding wait(2) in a couple of places but the script just failed to run. Any ideas ? Thanks. . I have some text that I don't want to display until 2 seconds after the previous text. The sleep(2); function won't work for what I am doing.
Instead of using setTimeout() or setInterval(), I wrote a function like this: Code: function pause(time) { var currentTime=(new Date()).getTime(); while (currentTime+time > (new Date()).getTime()); } However, it doesn't work as expected. if you append a character to the value of button, you will get the result at one time. e.g. Code: for (var i=0; i<5; i++) { aButton.value+="2 "; pause(2000); } then the webpage wait 10 secs then display 2 2 2 2 2 while it should append '2' every 2 secs ... so is there real pause mechanism in js? (besides alert() etc which makes the background totally blank...) I have a site with a lot of animated gifs and I was wondering if there was a way to (on page load) stop all gif animations (only show first image frame). Then when you click a link, it will animate the animated gifs.
Hello everyone, 1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript. 2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover? Code: var currentSlide = 1; var maxSlides = 0; function fadeImage(){ opacity = 100; if(steps < 4){ steps += 1; opacity = opacity / steps; imageObj = document.getElementById("slide-"+currentSlide); imageObjN = document.getElementById("slide-"+nextSlide); imageObjN.style.display = "block"; imageObj.style.opacity = "" + opacity / 100; imageObjN.style.opacity = "" + ((steps * 25) / 100); //fade slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */ }else{ steps = 1; document.getElementById("slide-"+currentSlide).style.display = "none"; currentSlide += 1; if(currentSlide > maxSlides){ currentSlide = 1; } showSlide(); } } function initSlideshow(){ slidesCollection = document.getElementById("slides").children; maxSlides = slidesCollection.length; for (var i=0; i < maxSlides; i++){ slidesCollection[i].id = "slide-"+(i+1); if (i > 0) slidesCollection[i].style.display = "none"; } steps = 1; nextSlide = 2; slideTimeout = 0; showSlide(); } function showSlide(){ clearTimeout(slideTimeout); nextSlide = currentSlide + 1; if (currentSlide >= maxSlides){ nextSlide = 1; } slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */ } I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated. index.html PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page 1</title> <link rel="stylesheet" type="text/css" href="css.css"></link> <script language="JavaScript" type="text/javascript" src="js.js"></script> </head> <body onLoad="LoadMenu(); PlaceArrow();"> <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center"> <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr> <tr valign="top"> <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td> <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td> <td id="hmtr"> <script language="JavaScript" type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="photos/slides/photo01.jpg" var image2=new Image() image2.src="photos/slides/photo02.jpg" var image3=new Image() image3.src="photos/slides/photo03.jpg" var image4=new Image() image4.src="photos/slides/photo04.jpg" var image5=new Image() image5.src="photos/slides/photo05.jpg" var image6=new Image() image6.src="photos/slides/photo06.jpg" var image7=new Image() image7.src="img/thumbarrow.png" var image8=new Image() image8.src="img/spacer.gif" var cphoto = Math.ceil(6*Math.random()); document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>'); var step=cphoto var whichimage=step function slideit() { if (!document.images) return document.images.photo.src=eval("image"+step+".src") whichimage=step if (step<6) { step=parseInt(Math.ceil(6*Math.random())) } else { step=1 } setTimeout("slideit()",3000) var i = "a" + whichimage document.images.a1.src=eval("image8.src") document.images.a2.src=eval("image8.src") document.images.a3.src=eval("image8.src") document.images.a4.src=eval("image8.src") document.images.a5.src=eval("image8.src") document.images.a6.src=eval("image8.src") document.images[i].src=eval("image7.src") } slideit() function slidelink() { if (whichimage==1) window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==2) window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==3) window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==4) window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==5) window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==6) window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') } //--> </script> <noscript> <div id="homephoto"> <img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg"> </div> </noscript> </td> <td id="mtmenu" valign="middle">Links Here</td> </tr> <tr> <td colspan="4"> <div id="hfoot"> <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div> <div id="thumb1"> <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div> </div> <div id="thumb2"> <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div> </div> <div id="thumb3"> <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div> </div> <div id="thumb4"> <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div> </div> <div id="thumb5"> <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div> </div> <div id="thumb6"> <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div> </div> </div> </td> </tr> </table> </table> </body> </html> js.js PHP Code: function PlaceArrow() { if ( cphoto ) { carrow = "a" + cphoto; document.images[carrow].src = "img/thumbarrow.png"; } } function LoadPhoto (i) { if (document.images) { carrow = "a" + cphoto; document.images[carrow].src = "img/spacer.gif"; narrow = "a" + i; nphoto = "photo0" + i; document.images[narrow].src = "img/thumbarrow.png"; document.images['photo'].src = "photos/slides/" + nphoto + ".jpg"; cphoto = i; } } Hey guys, So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code? Code: <script type="text/javascript"> var defaultStep=1; var step=defaultStep; var timer; function scrollDiv(id,s){ var obj=document.getElementById(id); var iScrollTop = obj.scrollTop; step=s||step; if (iScrollTop == 0){ step=defaultStep; } else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){ step=-defaultStep; } clearTimeout(timer); obj.scrollTop+=step; timer=setTimeout(function(){ scrollDiv(id); },100) } function stopMe(){ clearTimeout(timer); } function scrollMe(id){ scrollDiv(id) } </script> Thanks! I have a banner but it keeps rotating even when you mouse over it. Is there a simple code I can add to the code below so that the banner will paused when you mouse over it? Thanks! Jeremy Quote: </script> <script type="text/javascript"> $(function() { //some elements.. var $ps_container = $('#ps_container'), $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'), $ps_next = $ps_container.find('.ps_next'), $ps_prev = $ps_container.find('.ps_prev'), $ps_nav = $ps_container.find('.ps_nav'), $tooltip = $ps_container.find('.ps_preview'), $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'), $links = $ps_nav.children('li').not($tooltip), total_images = $links.length, currentHovered = -1, current = 0, $loader = $('#loader'); /*check if you are using a browser*/ var ie = false; if ($.browser.msie) { ie = true;//you are not!Anyway let's give it a try } if(!ie) $tooltip.css({ opacity : 0 }).show(); /*first preload images (thumbs and large images)*/ var loaded = 0; $links.each(function(i){ var $link = $(this); $link.find('a').preload({ onComplete : function(){ ++loaded; if(loaded == total_images){ //all images preloaded, //show ps_container and initialize events $loader.hide(); $ps_container.show(); //when mouse enters the pages (the dots), //show the tooltip, //when mouse leaves hide the tooltip, //clicking on one will display the respective image $links.bind('mouseenter',showTooltip) .bind('mouseleave',hideTooltip) .bind('click',showImage); //navigate through the images $ps_next.bind('click',nextImage); $ps_prev.bind('click',prevImage); } } }); }); function showTooltip(){ var $link = $(this), idx = $link.index(), linkOuterWidth = $link.outerWidth(), //this holds the left value for the next position //of the tooltip left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2, //the thumb image source $thumb = $link.find('a').attr('rel'), imageLeft; //if we are not hovering the current one if(currentHovered != idx){ //check if we will animate left->right or right->left if(currentHovered != -1){ if(currentHovered < idx){ imageLeft = 75; } else{ imageLeft = -75; } } currentHovered = idx; //the next thumb image to be shown in the tooltip var $newImage = $('<img/>').css('left','0px') .attr('src',$thumb); //if theres more than 1 image //(if we would move the mouse too fast it would probably happen) //then remove the oldest one (:last) if($ps_preview_wrapper.children().length > 1) $ps_preview_wrapper.children(':last').remove(); //prepend the new image $ps_preview_wrapper.prepend($newImage); var $tooltip_imgs = $ps_preview_wrapper.children(), tooltip_imgs_count = $tooltip_imgs.length; //if theres 2 images on the tooltip //animate the current one out, and the new one in if(tooltip_imgs_count > 1){ $tooltip_imgs.eq(tooltip_imgs_count-1) .stop() .animate({ left:-imageLeft+'px' },150,function(){ //remove the old one $(this).remove(); }); $tooltip_imgs.eq(0) .css('left',imageLeft + 'px') .stop() .animate({ left:'0px' },150); } } //if we are not using a "browser", we just show the tooltip, //otherwise we fade it // if(ie) $tooltip.css('left',left + 'px').show(); else $tooltip.stop() .animate({ left : left + 'px', opacity : 1 },150); } function hideTooltip(){ //hide / fade out the tooltip if(ie) $tooltip.hide(); else $tooltip.stop() .animate({ opacity : 0 },150); } function showImage(e){ var $link = $(this), idx = $link.index(), $image = $link.find('a').attr('href'), $currentImage = $ps_image_wrapper.find('img'), currentImageWidth = $currentImage.width(); //if we click the current one return if(current == idx) return false; //add class selected to the current page / dot $links.eq(current).removeClass('selected'); $link.addClass('selected'); //the new image element var $newImage = $('<img/>').css('left',currentImageWidth + 'px') .attr('src',$image); //if the wrapper has more than one image, remove oldest if($ps_image_wrapper.children().length > 1) $ps_image_wrapper.children(':last').remove(); //prepend the new image $ps_image_wrapper.prepend($newImage); //the new image width. //This will be the new width of the ps_image_wrapper var newImageWidth = $newImage.width(); //check animation direction if(current > idx){ $newImage.css('left',-newImageWidth + 'px'); currentImageWidth = -newImageWidth; } current = idx; //animate the new width of the ps_image_wrapper //(same like new image width) $ps_image_wrapper.stop().animate({ width : newImageWidth + 'px' },350); //animate the new image in $newImage.stop().animate({ left : '0px' },350); //animate the old image out $currentImage.stop().animate({ left : -currentImageWidth + 'px' },350); e.preventDefault(); } function nextImage() { var cache=''; cache = cache==''?current+':'+total_images:cache; if(current < total_images) $links.eq(current+1).trigger('click'); if(cache == (current+':'+total_images)) $links.eq(0).trigger('click'); } function prevImage(){ if(current > 0){ $links.eq(current-1).trigger('click'); } } setInterval( function(){ $('.ps_next').click(); },4000 ); Hello! I was looking for a way to pause animated gifs per command, and I found a thread in this forum with the appropriate instruction: http://www.codingforums.com/showthread.php?t=177543 I used the code example from there and adjusted it to my needs on my website: http://www.baelavay.com/v6 The code works as it should! (The button is in the top-left corner) But there are 2 things I would want to improve. Unfortunately I can't fix them myself, maybe you can help 1) I don't want to use a button for pausing the gifs. Instead, I want the gifs to pause when Code: <img id="tiles-img" ...> is clicked. So what I tried is to replace the line Code: obj=document.getElementById('button'); with Code: obj=document.getElementById('tiles-img'); But then, it doesn't work anymore. Why? 2) (*edit: RESOLVED) The button only starts working from the 2nd click on? (No gif pausing at 1st click) Thank you in advance. hello, It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below.... Code: <div id="quotetext" > text </div> <script type="text/javascript" > var myquotes = new Array( 'quote 1', 'quote 2', 'qoute 3' ); function rotatequote() { thequote = myquotes.shift(); //Pull the top one myquotes.push(thequote); //And add it back to the end document.getElementById('quotetext').innerHTML = thequote; // This rotates the quote every 10 seconds. // Replace 10000 with (the number of seconds you want) * 1000 t=setTimeout("rotatequote()",5000); } // Start the first rotation. rotatequote(); </script> Hi, We have a marquee that we use occasionally at work when we want to announce something important. The text is dynamic and will sometimes contain links. I need to make it so that the marquee stops when you mouseover it and then begins again when you mouseout. I can get this to work just fine. The problem is, I want the pause to happen when you hover over the text ONLY, not the entire 690 width TD! I tried wrapping a span around the text and putting an action on it, but the marquee still stops even when you have your cursor out in never-never land to the right. Does anyone know how to make this work in IE without using a huge JavaScript file like on Dynamic Drive? Code: <td width="690" valign="middle" class="headerNewsFlash"> <marquee onMouseOver="this.stop();" onMouseOut="this.start();" scrolldelay="0" scrollamount="4">News Flash Text Goes Here</marquee> </td> Thanks! Hi everyone! I'm using a jquery image sliding plugin from this site: http://flexidev.co.za/projects/flexislider/ It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible. I'd really appreciate any pointers or tips! Here is the javascript: Code: var speed = 50; var pic, numImgs, arrLeft, i, totalWidth, n, myInterval; $(window).load(function(){ pic = $("#slider").children("img"); numImgs = pic.length; arrLeft = new Array(numImgs); for (i=0;i<numImgs;i++){ totalWidth=0; for(n=0;n<i;n++){ totalWidth += $(pic[n]).width(); } arrLeft[i] = totalWidth; $(pic[i]).css("left",totalWidth); } myInterval = setInterval("flexiScroll()",speed); $('#imageloader').hide(); $(pic).show(); }); function flexiScroll(){ for (i=0;i<numImgs;i++){ arrLeft[i] -= 1; if (arrLeft[i] == -($(pic[i]).width())){ totalWidth = 0; for (n=0;n<numImgs;n++){ if (n!=i){ totalWidth += $(pic[n]).width(); } } arrLeft[i] = totalWidth; } $(pic[i]).css("left",arrLeft[i]); } } i have a photo slideshow that loads in the header so when the page is loaded the slide show is there on the left. it looks like this (page layout) header --------------------> slideshow content ---------------------> image footer ----------------------- where it says image i am adding an image, that colum is controlled by the header so i added a div in there for the image. what is happening is that since the image is small and the slideshow is large, when the page loads the single image pops up for a second where the slide show is, then it moves down on the page where it should be. I know this is caused by the fact that the image loads faster than the slideshow so we see the image first in that space. what i am trying to do is pause the single image load until the slideshow loads, but i dont know how? I cant move the image down and load it in the body because that left side column is controlled by the header slideshow it has to be part of it when it loads. has to be a way to make the slide show load on the page and then the image. here is the setup on the header.. Code: <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr><td height="10px"> </td></tr> <tr><td valign="top"> <?php if($_SERVER['PHP_SELF']!='/crop.php') {?> <div style="width:250px; background-color:#666666; height:250px; float:right; display:inline; color:#CCCCCC; margin-right:8px;"> <div id="fadeshow1"> </div> <!-- close fadeshow div --> <!-- added image --> <div style="text-align:center;width:250px;padding-top:30px; background-color:#FFFFFF;float:right;color:#000000;"> <img src="<?=$SKIN_IMAGE_PATH?>/myimage.gif" border="0" alt="" title="myimage" /> </div> <!-- end add --> </div> <!-- close top div for fadeshow and this image --> <?php } ?> the body of the site pages load here Hi all and hope that you can help. I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button. Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do. Thanks for your interest, R I've highlighted the relevant chunks of code below... The HTML / CSS... Code: <style type="text/css"> #midcol { padding: 0 25px; width: 672px; margin-left:auto; margin-right:auto; text-align:center; } #first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; } #previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; } #pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; } #pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; } #next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; } #last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; } #first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; } #previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;} #pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;} #pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;} #next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;} #last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;} </style> </head> <body> <div id="midcol"> <table width="592" border="0"> <tr > <td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr> <tr><td colspan="8"><br /></td></tr> <tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr> <tr height="33"> <td width="160"></td> <td id="first" onclick="first();clearTimeout(timerID);"></td> <td id="previous" onclick="previous();clearTimeout(timerID);"></td> <td id="pause" onclick="clearTimeout(timerID);"></td> <td id="pplay" onclick="swapPicture();"></td> <td id="next" onclick="next();clearTimeout(timerID);"></td> <td id="last" onclick="last();clearTimeout(timerID);"></td> <td width="160"><form name="dropdown" action="">Slide duration: <select id="duration" onchange="setInterval(this.form.duration);"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </form></td> </tr> </table> The JavaScript... Code: var dimages=new Array(); var numImages=31; var interval = 3000; var image_dir = "images/large/" for (i=0; i<numImages; i++) { dimages[i]=new Image(); dimages[i].src=image_dir+(i+1)+".jpg"; } var imageCaption = new Array(); var ImageNum = 0; imageCaption[ImageNum++] = "Caption 1."; imageCaption[ImageNum++] = "Caption 2."; etc. etc. var curImage=-1; function swapPicture() { if (document.images) // does the browser support image changes? { var nextImage=curImage+1; if (nextImage>=numImages) nextImage=0; if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded? { var target=0; if (document.images.myImage) target=document.images.myImage; cap = imageCaption[nextImage]; document.getElementById('caption').innerHTML=cap; if (document.all && document.getElementById("myImage")) target=document.getElementById("myImage"); cap = imageCaption[nextImage]; document.getElementById('caption').innerHTML=cap; // make sure target is valid. It might not be valid // if the page has not finished loading if (target) { target.src=dimages[nextImage].src; curImage=nextImage; } doTimer(interval); } else { setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again. } } } function first(){ // Goes to the 1st image and stops curImage=-1; stopTimer(); swapPicture(); } function last(){ // Goes to the last image and stops curImage=numImages-2; stopTimer(); swapPicture(); } function previous(){ // Goes to the previous image and stops curImage=curImage-2; stopTimer(); swapPicture(); } function next(){ // Goes to the next image and stops stopTimer(); swapPicture(); } function doTimer(interval){ // The Play button timerID=setTimeout("swapPicture()",interval); } function stopTimer(){ // The Pause button clearTimeout(timerID); } function setInterval(t){ // The slide duration drop down box. var e = document.getElementById("duration"); interval = (e.options[e.selectedIndex].value)*1000; } doTimer(interval); // Starts the slideshow on load. Hello, I just have a quick question; what code would I need to insert into the coding below in order to get the slide show to pause when someone hovers their cursor on an image? Code: <html> <head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <a href="javascript:slidelink()"> <img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<3) step++ else step=1 setTimeout("slideit()",1800) } slideit() function slidelink(){ if (whichimage==1) window.location="link1.htm" else if (whichimage==2) window.location="link2.htm" else if (whichimage==3) window.location="link3.htm" } //--> </script> </body> </html> Thanks in advance! I'm newer to coding this stuff and have tried various ways to get this to work, ending in failure of course. First of all sorry if i have posted in the wrong forum! Ok my problem is with an RSS ticker for my website. I am having the error req is not defined. Im hoping its something very simple is the script is much complete! THIS IS THE GRAB.PHP CODE PHP Code: <? // [email]jim-jh@webcoding.co.uk[/email] // ticker stuff - grab remote stream // begin grab.php $_receivedRemoteData = "" ; $_requestedStream = $_SERVER['QUERY_STRING']; if ( preg_match("/http/i", $_requestedStream ) ) { $fp = @fopen( $_requestedStream, "r" ) ; if ( $fp ) { while ( !feof( $fp ) ) { $_receivedRemoteData .= @fread($fp, 1024); } @fclose($fp); } } header("content-type: text/xml") ; print $_receivedRemoteData ; // end grab.php ?> THIS IS THE TICKER.PHP FILE CODE Code: <style> .headlines { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #003366; text-decoration: none; } .headlines:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #003366; text-decoration: none; } .globalheader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #990000; text-decoration: none; } </style> <span align="left" width="100%" id="scroller" style="align:left;z-index:99; position:relative; display;"> <span class=globalheader>BBC NEWS RSS TICKER:</span><br/> <span class="headlines">Loading RSS feeds....</span> </span> <script src="ticker.js"></script> AND THIS IS THE JS CODE WHERE I THINK THE PROBLEM MAY BE. PHP Code: function getRequest() { var con = new Array(); var _ms_XMLHttpRequest_ActiveX = ""; var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { if (_ms_XMLHttpRequest_ActiveX) { req = new ActiveXObject(_ms_XMLHttpRequest_ActiveX); } else { var versions = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < versions.length ; i++) { try { req = new ActiveXObject(versions[i]); if (req) { _ms_XMLHttpRequest_ActiveX = versions[i]; break; } } catch (objException) { // trap; try next one } } } } con[0]=req; con[1]=_ms_XMLHttpRequest_ActiveX; return con; } function loadRSS(url) { //alert("running"); try { if ( _ms_XMLHttpRequest_ActiveX1 ) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } else { if (rssRequest) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } } } catch ( rssRequestException ) {} } function getChildNode( myElement, naming ) { return myElement.getElementsByTagName(naming)[0].firstChild.nodeValue; } function processRSS() { var cycle = 0; try { if (rssRequest.readyState == 4) { if (rssRequest.status == 200) { response = rssRequest.responseXML.documentElement; if ( response ) { var items = response.getElementsByTagName("item"); for ( var i = 0 ; i < items.length; i++ ) { var title = getChildNode(items[i],"title"); var desc = getChildNode(items[i],"description"); var link = getChildNode(items[i],"link"); rssItems[cycle] = title + " - " + desc; linkItems[cycle] = link; ++cycle; } } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } } catch ( jsException ) {alert(jsException.message);} } var httpArc2 = getRequest(); var rssRequest = httpArc2[0]; var _ms_XMLHttpRequest_ActiveX1 = httpArc2[1]; var rssItems = new Array(); var linkItems = new Array(); function openWindow(url){ window.open(url); } var storyCount = 0; var itemLen = 0; function tickTock(){ var obj = document.getElementById("scroller"); var myTimeout = 50; var str; var st = rssItems[storyCount]; if ( itemLen > st.length ) { storyCount++; if ( storyCount >= rssItems.length ) { storyCount = 0; } itemLen = 0; myTimeout=2000; setTimeout("tickTock()", myTimeout); } else { ++itemLen; str = rssItems[storyCount].toString(); str = str.substring(0,itemLen) + "_"; obj.innerHTML = "<span class=globalheader>BBC NEWS RSS TICKER:</span><br/><a href=\"javascript:openWindow('"+linkItems[storyCount]+"')\" class=headlines>" + str + "</a>"; setTimeout("tickTock()", myTimeout); } } setTimeout("tickTock()", 3000); loadRSS("/grab.php?http://news.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml"); IS THERE ANYONE THAT CAN HELP WITH THIS? I have this horizontal news ticker which works just perfect in ie7 regarding to speed, but when looking at the same page in ie8 the speed is very slow... Has anybody else encountered this, and if yes... How do I solve this? Code: initialize: function(element, options) { this.setOptions({ marHeight: 18, marWidth: 565, steps: 20, speed: 20, direction: 'left', pauseOnOver: true, pauseOnContainerOver: true }, options); this.timer = null; this.textElement = null; this.mooqueeElement = element; this.constructMooquee(); } Thanks in advance :-) Hello, i have got a code for a ticker bar that is written in javascript and i can change most things except the colour of the writting, witch is one of the things that really does need to be changed as its rather dull at the moment. This is the code i found: <script language="JavaScript1.2"> //Specify the marquee's width (in pixels) var marqueewidth="960px" //Specify the marquee's height var marqueeheight="28px" //Specify the marquee's marquee speed (larger is faster 1-10) var marqueespeed=2 //configure background color: var marqueebgcolor="004080" //Pause marquee onMousever (0=no. 1=yes)? var pauseit=1 //Specify the marquee's content (don't delete <nobr> tag) //Keep all content on ONE line, and backslash any single quotations (ie: that\'s great): var marqueecontent='<nobr><font face="Arial"> Term Ends on Friday 18th Febuary.</nobr>' ////NO NEED TO EDIT BELOW THIS LINE//////////// marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>') var actualwidth='' var cross_marquee, ns_marquee function populate(){ if (iedom){ cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee cross_marquee.style.left=parseInt(marqueewidth)+8+"px" cross_marquee.innerHTML=marqueecontent actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_marquee=document.ns_marquee.document.ns_marquee2 ns_marquee.left=parseInt(marqueewidth)+8 ns_marquee.document.write(marqueecontent) ns_marquee.document.close() actualwidth=ns_marquee.document.width } lefttime=setInterval("scrollmarquee()",20) } window.onload=populate function scrollmarquee(){ if (iedom){ if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8)) cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px" else cross_marquee.style.left=parseInt(marqueewidth)+8+"px" } else if (document.layers){ if (ns_marquee.left>(actualwidth*(-1)+8)) ns_marquee.left-=copyspeed else ns_marquee.left=parseInt(marqueewidth)+8 } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">') write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">') write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>') write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script> Thanks. |