|
JavaScript - Help With Autoscrolling, Pause On Mouseover?
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! Similar TutorialsHello 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 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, 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>
Hey everyone, I have some long horizontal images (graphs) which i have got inside a fixed width div with a horizontal scroll so they can be viewed within the main page frame. I have some js code linked to a play button which allows users to 'play' the image (so it will autoscroll along it). The code is: PHP Code: var t; var scrollwidthglob; function scrollDiv(scrollwidth){ clearTimeout(t); scrollwidthglob = scrollwidth; scrollDiv2(scrollwidthglob) } function scrollDiv2(scrollwidth){ scrollwidthglob = scrollwidth; var div = document.getElementById('containerdiv'); if (div.scrollLeft<scrollwidthglob){ div.scrollLeft++; //scroll 1 pixel up t = setTimeout('scrollDiv2(scrollwidthglob)', 10); } else clearTimeout(t); } function stopScroll(){ clearTimeout(t); } This works fine but every now and then (it seems more often on IE) it goes quite slow and jerky, generally it recovers and goes back to normal speed again. This may just be my computer but it seemed unlikely for a task as simple as this, i was just wondering if there was anything wrong with the code that might be causing it? Thanks so much for any help in advance, Dave Hey everyone, So I just got my DIV named ".center2" to autoscroll. Well, it works when I view it live on Dreamweaver CS5, but when I open it on Safari...nothing. Could anyone help me optimize the code for all web browsers? Thanks! The targeted code is marked in red: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<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];}
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aylonetic Sounds [v1.1] | News</title>
<style type="text/css">
.center
{
margin:auto;
width:1024px;
}
.center2
{
width:1024px;
height:450px;
border:none;
overflow:scroll;
}
#apDiv2 {
position:relative;
width:50px;
height:30px;
z-index:0;
left: 611px;
top: 0px;
}
body {
background-color: #000;
}
</style>
</head>
<body onload="MM_preloadImages('titlehover.jpg','marketplacehover.jpg','forumshover.jpg','supporthover.jpg','abouthover.jpg','images/title_new_hover_inv.jpg','images/marketplace_new_hover_inv.jpg','images/forums_new5_hover_inv.jpg','images/support_new_hover_inv.jpg','images/about_new_hover_inv.jpg')">
<div class="center">
<table width="1025" border="0">
<tr>
<td width="673"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/title_new_hover_inv.jpg',1)"><img src="images/title_new_main_inv.jpg" name="Image7" width="150" height="14" border="0" id="Image7" /></a></td>
<td width="46"><img src="images/news_new_hover_inv.jpg" width="58" height="14" /></td>
<td width="101"><a href="marketplace.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/marketplace_new_hover_inv.jpg',1)"><img src="images/marketplace_new_main_inv.jpg" name="Image8" width="100" height="14" border="0" id="Image8" /></a></td>
<td width="63"><a href="forums.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/forums_new5_hover_inv.jpg',1)"><img src="images/forums_new5_main_inv.jpg" name="Image9" width="65" height="14" border="0" id="Image9" /></a></td>
<td width="69"><a href="support.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/support_new_hover_inv.jpg',1)"><img src="images/support_new_main_inv.jpg" name="Image10" width="70" height="14" border="0" id="Image10" /></a></td>
<td width="47"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/about_new_hover_inv.jpg',1)"><img src="images/about_new_main_inv.jpg" name="Image11" width="58" height="14" border="0" id="Image11" /></a></td>
</tr>
</table>
<table width="1024" border="0">
<tr bgcolor="#FFFFFF">
<td width="507"><img src="images/banner1.jpg" width="507" height="150" border="0" /></td>
<td width="507"><img src="images/banner2.jpg" width="507" height="150" /></td>
</tr>
</table>
<body onload="scrollMe('news')">
<div class="center2" id="news">
<table width="1024" border="0">
<tr>
<td width="507"><img src="images/newstemplate_l.jpg" width="506" height="100" /></td>
<td width="507"><img src="newstemplate_r.jpg" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
<tr>
<td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td>
<td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Hello Everybody I have recently been tasked with a unique task and for the life of me I can not work out how to do it. Using this website as an example: http://www.coastalcontacts.com/cFaq.html You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part. Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up. Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content. This does not need to happen for questions that do not go to the bottom of the page and are fully visible. Any and all ideas would be much appreciated Thank you 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. . 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 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.
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.
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; } } 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. 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]);
}
}
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! I 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>
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. 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. 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.
Hi there, This forum was linked off of http://www.javascriptkit.com so I was hoping someone could lend me a hand. I like the image rotator script at http://www.javascriptkit.com/script/...tionshow.shtml as it is very easy to use. It currently pauses the image rotation on mouseover, but I would like to enable it to also pause onFocus and onBlur. My initial thoughts were to add a small "pause" form button under the image description that people could tab to with the keyboard, and perhaps capture the onBlur or onFocus event to initiate the pause. But the code is difficult to wrap my mind around. Any thoughts? Link to .js code: http://www.javascriptkit.com/script/...nsitionshow.js |
|||||||