|
JavaScript - Content Rotator
Dear All,
please i want to create content image rotator with thumbs image horizontal and starts automatically.you can understand more when you see http://maktoob.yahoo.com/?p=us many thanks for your efforts Similar TutorialsMy site is http://gofi.netai.net/ I don't want it to completely stop or pause when the users mouse is over the page but keeps rotating. I want it to stop for good when the users mouse clicks on one of the tabs. I wanted a auto rotator so the user can see all my pages up front and fast before moving to anther site. This is snip-it of the code but you can see in the complete code in the source code. I'm new at this can you help? script type="text/javascript"> $(document).ready(function(){ $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); Hi, I've been searching for about an hour now for an div id javascript/jquery rotator dont need to have buttons just needs to roatate 3 divs every 5 secs can anyone help thanks. +rep I'm trying to slow this image rotator down. I thought I would just change the setInterval part. But it's not working. Quote: $(function() { setInterval( "nextPage()", 7000 ); }); Below is the full script. Am I missing something? Code: // Global variable that controls billboard image rotation
var $rotate = 1;
// Load this script when page loads
$(document).ready(function(){
// Set up a listener so that when anything with a class of 'bbtab'
// is clicked, this function is run.
$('.bbtab').click(function () {
// Turn off autorotation.
$rotate = 0;
// Remove the 'bboard_page_active' class from the visible tab contents.
$('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the associated tab contents.
$(this.rel).addClass('bboard_page_active');
return false; //stop the links default action
});
});
function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
// Remove the 'bboard_page_active' class from the active page.
$('#'+$active_page).removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the next page.
$('#bbpage'+$next_page).addClass('bboard_page_active');
// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}
$(function() {
setInterval( "nextPage()", 7000 );
});
Hello, Im new and need help with an image rotator script I got from "wowslider" if anyone ever heard of it. I have the following code on my website (please note that the CSS and javascript were just pre-made and I barely adjusted anything if at all; all names of the tags are not mine): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>unnamed</title>
<script src="scripts/wowslider.js" type="text/javascript"></script>
<style type="text/css">
/* bottom center */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}
#wowslider-container1 {
/*overflow: hidden; */
zoom: 1;
position: relative;
width:1032px;
margin:0 auto;
z-index:100;
border:none;
}
#wowslider-container1 .ws_images{
width:1032px;
height:500px;
overflow:hidden;
position:relative;
}
#wowslider-container1 .ws_images a{
color:transparent;
}
#wowslider-container1 .ws_images img{
top:0;
left:0;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
padding: 5px;
float: left;
position:absolute;
z-index:70;
top:450px;
right:900px;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .ws_bullets a {
width:22px;
height:20px;
background: url(images/backgrounds/bullet.png) left top;
float: left;
text-indent: -1000px;
position:relative;
color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-16px;
z-index:60;
height: 50px;
width: 39px;
background-image: url(images/backgrounds/arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:7%;
left: 0;
margin-right:5px;
z-index: 50;
background: #FFF;
color: #000;
padding: 10px;
font-size: 19px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 1px 1px 0 #fff;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 13px;
}
</style>
</head>
<!-- Slideshow Backgrounds -->
<div id="wowslider-container1">
<div class="ws_images">
<div><img src="images/backgrounds/test1.jpg" alt="test1" title="test1" id="wows0"/><span style="top:150px; right:300px; color:red; font-weight:bold;">TEXTTEXTTEXTTEXTTEXT</span></div>
<div><img src="images/backgrounds/test2.jpg" alt="test2" title="test2" id="wows1"/></div>
<div><img src="images/backgrounds/test3.jpg" alt="test3" title="test3" id="wows2"/></div>
<div><img src="images/backgrounds/test4.jpg" alt="test4" title="test4" id="wows3"/></div>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="test1">1</a>
<a href="#wows1" title="test2">2</a>
<a href="#wows2" title="test3">3</a>
<a href="#wows3" title="test4">4</a>
</div>
</div>
<script type="text/javascript" src="scripts/wow_script.js"></script>
<!-- END ROTATOR -->
</body>
</html>
The following is the jscript used in reference (two external files): 1)wow_script.js Code: function ws_fade(b,a){var c=jQuery;a.each(function(d){if(!d){c(this).show()}else{c(this).hide()}});this.go=function(d,e){c(a.get(d)).fadeIn(b.duration);c(a.get(e)).fadeOut(b.duration);return d}};// -----------------------------------------------------------------------------------
jQuery("#wowslider-container1").wowSlider({effect:"fade",prev:"",next:"",duration:20*100,delay:90*100,outWidth:1032,outHeight:500,width:1032,height:500,autoPlay:true,stopOnHover:true,loop:false,bullets:true,caption:false,controls:true});
2) wowslider.js Code: if(!jQuery.fn.wowSlider){jQuery.fn.wowSlider=function(b){var i=this;var g=jQuery;b=g.extend({effect:function(f,d){var t=jQuery;d.each(function(H){if(!H){t(this).show()}else{t(this).hide()}});this.go=function(H,I){t(d.get(H)).fadeIn(f.duration);t(d.get(I)).fadeOut(f.duration);return H}},prev:"",next:"",duration:1000,delay:20*100,captionDuration:1000,outWidth:960,outHeight:360,width:960,height:360,caption:true,controls:true,autoPlay:true,bullets:true,stopOnHover:0,preventCopy:1},b);b.loop=b.loop||Number.MAX_VALUE;var E=i.find(".ws_images>*");var v=E.length;b.stopOn=((b.stopOn||0)+v)%v;var D;if(b.preventCopy){D=g('<div><a href="#" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%"></a></div>').css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":10,background:"#FFF",opacity:0}).appendTo(i).find("A").get(0)}E.each(function(f){var d=g(this).html()||"";var t=d.indexOf(">",d);if(t>=0){g(this).data("descr",d.substr(t+1));if(t<d.length-1){g(this).html(d.substr(0,t+1))}}g(this).css({"font-size":0})});var k=E.find("IMG");var a=0;function s(t,f,d){t=((t%v)+v)%v;if(a==t){return}var t=o.go(t,a,f,d);if(t<0){return}r(t);if(b.caption){j(E[t])}a=t;if(b.onStep){b.onStep(t)}}var C,A,e=0;var u=i.get(0);if(u.addEventListener){u.addEventListener("touchmove",function(t){if(e){var f=(C-t.touches[0].pageX)/20;var d=(A-t.touches[0].pageY)/20;if((Math.abs(f)>1)||(Math.abs(d)>1)){C=A=e=0;y(t,a+((f+d)>0?1:-1),f,d)}}},false);u.addEventListener("touchstart",function(d){if(d.touches.length==1){C=d.touches[0].pageX;A=d.touches[0].pageY;e=1}else{e=0}},false);u.addEventListener("touchend",function(d){e=0},false)}function r(f){if(b.bullets){n(f)}if(D){var d=E.get(f).href;if(d){D.setAttribute("href",d);D.setAttribute("target",E.get(f).target);D.style.display="block"}else{D.style.display="none"}}}var q;function z(){w();if(b.autoPlay){q=setTimeout(function(){s(a<v-1?a+1:0);if(a==b.stopOn&&!--b.loop){b.autoPlay=0}z()},b.delay+b.duration)}}function w(){if(q){clearTimeout(q)}q=null}function y(H,t,f,d){w();H.preventDefault();s(t,f,d);z()}g(k.get(0)).css("z-index",1);k.css("position","absolute");if(typeof b.effect=="string"){b.effect=window["ws_"+b.effect]}var o=new b.effect(b,k,g(".ws_images",i));E.find("IMG").css("visibility","visible");var p=c=g(".ws_images",i);var m=" ";c=m?g("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});p.append(c)}if(c&&document.all){var B=g('<iframe src="javascript:false"></iframe>');B.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});B.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(B)}var F=c?g(document.createElement("A")):c;if(F){F.css({position:"relative",display:"block","background-color":"#E4EFEB",color:"#837F80","font-family":"Lucida Grande,sans-serif","font-size":"11px","font-weight":"normal","font-style":"normal","-moz-border-radius":"5px","border-radius":"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});F.attr({href:"http://"+m.toLowerCase()});F.html(m);F.bind("contextmenu",function(d){return false});c.append(F)}if(b.controls){var x=g('<a href="#" class="ws_next">'+b.next+"</a>");var h=g('<a href="#" class="ws_prev">'+b.prev+"</a>");i.append(x);i.append(h);x.bind("click",function(d){y(d,a+1)});h.bind("click",function(d){y(d,a-1)})}function G(){var t=i.find(".ws_bullets>div");var L=g("a",t);L.click(function(M){y(M,g(M.target).index())});var J=L.find("IMG");if(J.length){var I=g('<div class="ws_bulframe"/>').appendTo(t);var f=g("<div/>").css({width:J.length+1+"00%"}).appendTo(g("<div/>").appendTo(I));J.appendTo(f);g("<span/>").appendTo(I);var H=-1;function K(N){if(N<0){N=0}g(L.get(H)).removeClass("ws_overbull");g(L.get(N)).addClass("ws_overbull");I.show();var O={left:L.get(N).offsetLeft-I.width()/2};var M={left:-J.get(N).offsetLeft};if(H<0){I.css(O);f.css(M)}else{if(!document.all){O.opacity=1}I.stop().animate(O,"fast");f.stop().animate(M,"fast")}H=N}L.hover(function(){K(g(this).index())});var d;t.hover(function(){if(d){clearTimeout(d);d=0}K(H)},function(){L.removeClass("ws_overbull");if(document.all){if(!d){d=setTimeout(function(){I.hide();d=0},400)}}else{I.stop().animate({opacity:0},{duration:"fast",complete:function(){I.hide()}})}});t.click(function(M){y(M,g(M.target).index())})}}function n(d){g(".ws_bullets A",i).each(function(f){if(f==d){g(this).addClass("ws_selbull")}else{g(this).removeClass("ws_selbull")}})}if(b.caption){$caption=g("<div class='ws-title' style='display:none'></div>");i.append($caption);$caption.bind("mouseover",function(d){w()});$caption.bind("mouseout",function(d){z()})}function j(d){var H=g("img",d).attr("title");var t=g(d).data("descr");var f=g(".ws-title",i);f.stop(1,1).stop(1,1).fadeOut(b.captionDuration/3,function(){if(H||t){f.html((H?"<span>"+H+"</span>":"")+(t?"<div>"+t+"</div>":""));l(f,{direction:"left",easing:"easeInOutExpo",complete:function(){if(g.browser.msie){f.get(0).style.removeAttribute("filter")}},duration:b.captionDuration})}})}if(b.bullets){G()}r(0);if(b.caption){j(E[0])}if(b.stopOnHover){this.bind("mouseover",function(d){w()});this.bind("mouseout",function(d){z()})}z();function l(K,P){var M={};var N=["position","top","bottom","left","right"];for(var L=0;L<N.length;L++){M[N[L]]=K[0].style[N[L]]}K.show();var J={width:K.outerWidth(true),height:K.outerHeight(true),"float":K.css("float"),overflow:"hidden",left:K.position().left,top:K.position().top,opacity:0},f=g("<div></div>").css({fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0});K.wrap(f);f=K.parent();if(K.css("position")=="static"){f.css({position:"relative"});K.css({position:"relative"})}else{g.extend(J,{position:K.css("position"),zIndex:K.css("z-index")});K.css({position:"relative",top:0,left:0,right:"auto",bottom:"auto"})}f.css(J).show();var O=P.direction||"left";var t=(O=="up"||O=="down")?"top":"left";var H=(O=="up"||O=="left");var d=P.distance||(t=="top"?K.outerHeight({margin:true}):K.outerWidth({margin:true}));K.css(t,H?(isNaN(d)?"-"+d:-d):d);var I={};I[t]=(H?"+=":"-=")+d;f.animate({opacity:1},{duration:P.duration,easing:P.easing});K.animate(I,{queue:false,duration:P.duration,easing:P.easing,complete:function(){for(var Q in M){K[0].style[Q]=M[Q]}K.parent().replaceWith(K);if(P.complete){P.complete()}}})}return this}}jQuery.extend(jQuery.easing,{easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a}});
The rotator works perfectly with fading the images referenced in and out and the bullets for switching between images works great too, however I am looking to place text OVER the images so it can be highlighted/copied/etc. When I tried to put a SPAN in the code DIV the text I put into the SPAN (i.e. "TEXTTEXTTEXTTEXTTEXT") doesnt appear over the image. I dont know what else to do and Im not sure if its a javascript issue OR a coding issue within the page. Any ideas? Thanks NOTE: To be clear, I want four images, rotating, with four different text pieces to be placed OVER each image. So when one image rotates, its text change as well (to the next image and next set of text). Ok, so I currently have a rotator on my site that rotates every 5 seconds. I'd like to change it to where anytime between 10pm and 7pm, it rotates as normal. But at 7pm I'd like it to stay on one specific image. At 8, it stays on another image. Then at 9, it stays on another image. Basically, I work at at TV station so at 7 I want the graphic to be the show that is on TV. The same at 8 and 9. Here's a link to the js file. http://tinyurl.com/3h5bz6p Hi all, I am using Javascript for rotating 2 images. In the head section, var maxAdNo = 1 var adNo var myAd = new Array() myAd[0] = '<img src="images/sponsor-box-1.jpg" width="322" height="306" border="0">' myAd[1] = '<img src="images/sponsor-box-2.jpg" width="322" height="306" border="0">' In the body, <script type="text/javascript"> <!-- Begin adNo = Math.round(Math.random() * maxAdNo) document.write(myAd[adNo]) // End --> </script> I want to rotate these 2 images 50% / 50% i.e. alternate image to be loaded for every page refresh instead of random. What is to be done? Thank you in advance. Hello, I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code: ==== <script language="JavaScript1.2"> var bgimages=new Array() bgimages[0]="../gfx/bgs/bg1.jpg" bgimages[1]="../gfx/bgs/bg2.jpg" //preload images var pathToImg=new Array() for (i=0;i<bgimages.length;i++){ pathToImg[i]=new Image() pathToImg[i].src=bgimages[i] } var inc=-1 function bgSlide(){ if (inc<bgimages.length-1) inc++ else inc=0 document.body.background=pathToImg[inc].src } if (document.all||document.getElementById) window.onload=new Function('setInterval("bgSlide()",6000)') </script> ==== The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate. How would this be possible? Thanks a bunch! -Captainel Hello everyone, I am looking for a solution to make a iframe rotator in PHP. I currently have this code that combines JS / HTML Quote: <html> <head> <script language="JavaScript"> function lancement() { a = setTimeout("affiche(1)",100); } function stopAll() { frame1.stop(); frame2.stop(); frame3.stop(); frame4.stop(); frame5.stop(); } function affiche(i) { if (i==1) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(2)",1300); } else if (i==2) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(3)",1300); } else if (i==3) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(4)",1300); } else if (i==4) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("fin()",1300); } } function afficheFin() { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; } function fin() { afficheFin(); } </script> </head> <body onload="lancement()"> <iframe name=frame1 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame2 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame3 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame4 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame5 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> </table> </html> </body> The problem with this script is that it is too complicated I think. I wish I actually have a script like PHP, but that read variables from a text file for example I can put: $url1="website" $w="600" $h="600" $timer="8" (in seconds, not milliseconds) I do not know if I am very clear, in fact it is a friend who gave me the script on a html page, it allows me to do the rotations of urls to promote my sites In fact I wish I could add as much iframe on my page or at least 5 iframes. And each iframe is controlled by a document, I do not know if it's really possible, I have little knowledge, and my friend can not make me. I wanted to find a good solution, all the scripts I found are not suitable, it involves images or banners. And it's too complicated to put the time in milliseconds and I find having to change the entire page at a time There are just some questions I ask myself, is it possible thereafter to include a module for this kind of script in order to limit the display by IP address of the person? For example if Michael has the IP 192.168.0.1, there's way to record that he saw $url3 and $url5 already, and to display the URLs that it has not seen it yet? Of course by putting in the file, whether or not to display per IP per 24 hours If anyone can help me, thank you. Even if someone can offer me an interesting solution I am willing to pay, I do not have much, but I think it will make you happy anyway (I'm also looking for a true freelance php coder - no warez/nulled script - with 50% increase in my earnings every month for him, if he makes the scripts) Bye I have a banner ad with an image rotation embedded in a DIV. It works quite fine, but doesn't have required SEO info, ie: alt text. Here is the code that is working. Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoPro.png");
var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/hd-cameras/impact-series-720p-mx-goggle-red", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-motorsports-hero");
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) + ")",5000);
}
RotateImages(0);
</script>
</div>
</div>
Now, I thought I would modify the code a little and include "Image Title" and "ALT Text" I am not much of a scripting genius, therefore my modifications don't work. Here is my modified code Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" id="imagealt" id="imagetitle" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoProHDHERO2.png");
var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/impact-series-hd-1080p-mx-video-goggle-white", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-hero2-motorsports-edition");
var e = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
var g = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
var f = document.getElementById('imagealt');
var h = document.getElementById('imagetitle');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
f.alt = e[Start];
h.title = g[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",5000);
}
RotateImages(0);
</script>
</div>
</div>
Any ideas how I can get this to work Hey guys my 2nd thread on this forum requesting help ok so last month i edited this cool banner rotator and got it doing exactly what i wanted. but i need some help adding a bit more functionality to it and maybe improoving the code. would any1 be kind enough to help me out? can link codes etc just ask. Thanking you :P 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>
I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this: var now = new Date(); var dd = now.getDate(); [code] if (dd==1) document.write('<img src="pic1.gif">') else if (dd==2) document.write('<img src="pic2.gif">') else if (dd==3) document.write('<img src="pic3.gif">') else if (dd==4) [code] but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first. I just need something that rotates/slides a few images when a page loads. I'd guess Jquery would work best? But it needs to work in all browsers, and I have read some horror stories about ones that don't. Any good recommendations?
I recently uploaded my site from locally to a remote host. After uploading I noticed my ad block detection system stopped working as well as my banner rotation script. First off, I used the banner rotation script shown demo'd he http://labs.beacon9.ca/bannerRotator/ Now if you look at the source of that page you can see how the javascript works by including the BannerRotator.js. On my website, I stuck the jQuery "module" in a folder called "simple" and went from that route. If you look on my site: http://www.flex-essentials.com you can see that on the home page there is a large grey box where the banner rotator script should be, but is not. I'm using this "ready" function by jquery to load some things: Code: $(document).ready(function($) {
bannerRotator('#bannerRotator', 500, 5000, true);
$('a[rel*=facebox]').facebox();
if ($("#advert").height() == "0" || $("#advert").css("display") == "none"){//enabled
$("#lolaa").css("display", "block");
$("#lolaa").css("height", "90px");
}
else if($("#advert").height() != "0" || $("#advert").css("display") != "none"){//disabled
$("#lolaa").css("height", "0");
$("#lolaa").css("display", "none");
}
if($("#BodyAd").height() == "0" || $("#BodyAd").css("display") == "none"){//enabled
$("#wtlt_cube").css("display", "block");
$("#wtlt_cube").css("height", "213px");
}
else if($("#BodyAd").height() != "0" || $("#BodyAd").css("display") != "none"){//disabled
$("#wtlt_cube").css("height", "0");
$("#wtlt_cube").css("display", "none");
}
});
But for some reason, the only javascript code that is working is the "facebox" module. Please help me figure out why this javascript isnt loading. Thanks! I have added an image rotator to my website using Java Script. The box for the rotator shows up on the published site but not the pictures. When I click on the box it links to the pictures I have added, and I know they are rotating because it changes every time I click on it. Also, the code does not seem to be showing up when I view the source of the page. This is a link to my site: http://www.jenniferbrenn.com/Fashion/Home.html the problem is in the box beneath the name "Jenny" near the bottom of the page. This is the code I am using: [CODE] <script language="JavaScript"> // Copyright 1996, Infohiway, Inc. (http://www.infohiway.com) // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ <!-- function adArray() { for (i=0; i*2<adArray.arguments.length; i++) { this[i] = new Object(); this[i].src = adArray.arguments[i*2]; this[i].href = adArray.arguments[i*2+1]; } this.length = i; } function getAdNum() { dat = new Date(); dat = (dat.getTime()+"").charAt(8); if (dat.length == 1) ad_num = dat%ads.length; else ad_num = 0; return ad_num; } var ads = new adArray( "images/banner_1.gif","http://web.me.com/jim.stevenson/Fashion/Media/bee_vogue.jpg", "images/banner_2.gif","http://www.superficialdiva.com/wp-content/uploads/2009/01/hana-soukupova-vogue-belleza-february-2009-magazine-cover.jpg", "images/banner_3.gif","http://bp3.blogger.com/_maRo3z-KVqA/R9IKSDQPIwI/AAAAAAAAB4g/ghZysBSq-9M/s400/Victoria-Beckham-Vogue.jpg"); var ad_num = getAdNum(); document.write('<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD ' +'ALIGN=CENTER><FONT SIZE=2 FACE=Arial><B>Jenny ' +'</FONT></TD><TR></TR><TD><A HREF="'+ads[ad_num].href+'"><IMG SRC="'+ads[ad_num].src+'" ' +'WIDTH="240" HEIGHT="320" BORDER=0 name=js_ad></A></TD></TR></TABLE></CENTER>'); link_num = document.links.length-1; function rotateSponsor() { if (document.images) { ad_num = (ad_num+1)%ads.length; document.js_ad.src = ads[ad_num].src; document.links[link_num].href = ads[ad_num].href; setTimeout("rotateSponsor()",5000); } } setTimeout("rotateSponsor()",5000); // --> </script> [CODE] Can someone help me get my frontpage image rotator working and my lightbox for my product images? I'd appreciate any help. Respectfully, LMW1 Hi all, Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix. I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code: (there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window) $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window. The code to the whole slider is below, minus the CSS. A demo of the slider is he http://demo.webdeveloperplus.com/fea...ontent-slider/ Many thanks. <!-- Links to Jquery. Do not touch --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <div> <!-- This Week's Offer Product Viewer Code Starts Here --> <script> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); </script> <center> <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/about-us-main.gif" width="760" height="500" alt="" /> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button3.jpg" width="760" height="500" alt="" /> <div class="info" > <center><h2>Content </h2></center> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button4.jpg" width="760" height="500" alt="" /> </div> <!-- Fifth Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Sixth Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button6.jpg" alt="" width="760" height="500" /> </div> <!-- Seventh Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button7.jpg" alt="" width="760" height="500" /> </div> <!-- Third Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button8.jpg" alt="" width="760" height="500" /> </div> </div> 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 Hello guys, You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.</title>
<script type="text/javascript">
var ImageArray = [ // add paths, if needed
['randoms/0.jpg','http://0.com'],
['randoms/1.jpg','http://1.com'],
['randoms/2.jpg','http://2.com'],
['randoms/3.jpg','http://3.com'],
['randoms/4.jpg','http://4.com'],
['randoms/5.jpg','http://5.com'],
['randoms/6.jpg','http://6.com'],
['randoms/7.jpg','http://7.com'],
['randoms/8.jpg','http://8.com'],
['randoms/9.jpg','http://9.com'],
['randoms/10.jpg','http://10.com'],
['randoms/11.jpg','http://11.com'],
['randoms/12.jpg','http://12.com'],
['randoms/13.jpg','http://13.com'],
['randoms/14.jpg','http://14.com'],
['randoms/15.jpg','http://15.com'] // No comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
var ImgPtr = new Array();
for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
ImgPtr = ImgPtr.sort(randOrd);
var tmp = '';
for (var i=0; i<ImgPtr.length; i++) {
tmp = 'tImg'+i;
document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];
document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];
tmp = 'lImg'+i;
document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];
}
}
var TimerAction = 0;
function startTimer() {
TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>
<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
<tr><td>
<a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
<img id="tImg0" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
<img id="tImg1" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
<img id="tImg2" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
<img id="tImg3" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
<img id="tImg4" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
<img id="tImg5" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
<img id="tImg6" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
<img id="tImg7" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
<img id="tImg8" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
<img id="tImg9" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
<img id="tImg10" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
<img id="tImg11" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
<img id="tImg12" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
<img id="tImg13" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
<img id="tImg14" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
<img id="tImg15" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
</table>
</body>
</html>
Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! |
|||||||