|
JavaScript - Chose Own Banner?
Hi,
I've created following script: Code: <script type="text/javascript">
banners=new Array;
banners[1]="http://i33.servimg.com/u/f33/14/73/69/91/110.png";
banners[2]="http://i33.servimg.com/u/f33/14/73/69/91/210.png";
banners[3]="http://i33.servimg.com/u/f33/14/73/69/91/510.png";
banners[4]="http://i33.servimg.com/u/f33/14/73/69/91/310.png";
banners[5]="http://i33.servimg.com/u/f33/14/73/69/91/410.png";
function ShowBANNERS() {
num = Math.random();
num = 1 + ( num * ((banners.length - 1)-1));
num = Math.round(num);
document.write("<style> #i_logo { background-image : url('" + banners[num] + "'); } <\/style>");
}
ShowBANNERS();
</script>
... And I was thinking if there was a way to create a select/value script, were the user can choose on of the banners inside the select/value - like... Code: <select> <option value="banners1">1. Banner</option> <option value="banners2">2. Banner</option> <option value="banners3">3. Banner</option> <option value="banners4">4. Banner</option> <option value="banners5">5. Banner</option> <option value="bannerrotator">Random Banner</option> </select> <input type="button" value="submit"> The following option will then choose one valued banner, and will be the new banner on the site, when clicking submit (the bannerrotator value, will rotate the banners, so there aren't one chosed all the time). I can figure out I also have to use cookies to this, but I aren't the best at it (I only know the basic properties). Thanks (: Similar TutorialsCode: http://www.handbagsonsaleuk.com/checkout/onepage/ the fourth step (Shipping Method) on the page. there are two radio type input, one is Free shipping radio button another is Flat Rate radio button why i can't chose the Flat Rate button. how to correct it? thank you. http://www.codingforums.com/attachme...1&d=1333018258 -edit - nevermind. mods plz delete.
so i have to use the addEvent() to call the makeBannerAd function which i believe i have done so.... but then i gotta <div id = "bannerBox"> </div> and loop through all the iteams in my adsURL Array and for each item i must create the html fragment <div class = "bannerAd"> <a href = "url"> <img src = "bannerindex" /> </a> </div> i must set the z index number to each number ad to the value of the counter index and append the banner ad to the banner Box element.....Append the bannerBox to the documentbody, run the changeBannerAd() every 10 sec Banners.js Code: //this is the global scope here when you declare out side of a function it because global or at the top of the js file
var nextAd; //this is going to be used to change or show the next banner ad to the web page
function addEvent(object, evName, fnName, cap)
{
makeBannerAds();
if (object.attachEvent)
{
object.attachEvent("on" + evName, fnName);
}//end if
else if (object.addEventListener)
{
object.addEventListener(evName, fnName, cap);
}//end else if
}//end function addEvent
function makeBannerAds()
{
//this creates a banner box to store the banner ads in
var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";
for(var i = 0; i < document.adsURL.length; i++)
{
if(adsURL[i] != <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>)
{
if
(adsURL[i] = <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>)
else
return adsURL[i] = <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>;
}//end if
}//end if
}//end function makeBannerAds
ads.js Code: function storeURL()
{
//this creates a new array, the array is called adsUR:
var adsURL = new Array();
//this stores each item in the array using a index place holder
adsURL[0] = "testpage0.htm";
adsURL[1] = "testpage1.htm";
adsURL[2] = "testpage2.htm";
adsURL[3] = "testpage3.htm";
adsURL[4] = "testpage4.htm";
adsURL[5] = "testpage5.htm";
adsURL[6] = "testpage6.htm";
adsURL[7] = "testpage7.htm";
adsURL[8] = "testpage8.htm";
adsURL[9] = "testpage9.htm";
adsURL[10] = "testpage10.htm";
adsURL[11] = "testpage11.htm";
}//end function storeURL
books.html file Code: <head>
<!--
-->
<title>Online Bookworms</title>
<link href="bw.css" rel="stylesheet" type="text/css" />
<link href="bannerstyles.css" rel="stylesheet" type="text/css" />
<script src ="ads.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
<script src ="banners.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
</head>
<body>
<div id="page">
<h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Book Swaps</a></li>
<li><a href="#">OBW Store</a></li>
<li><a href="#">Author's Corner</a></li>
<li><a href="#">My Account</a></li>
</ul>
<ul id="menu2">
<li><a href="#">My Reading List</a></li>
<li><a href="#">Review a Book</a></li>
<li><a href="#">Join a Discussion</a></li>
<li><a href="#">Post to a Forum</a></li>
<li><a href="#">My Mail</a></li>
<li><a href="#">My Posts</a></li>
<li class="newgroup"><a href="#">Reading Recommendations</a></li>
<li><a href="#">Books of the Month</a></li>
<li class="newgroup"><a href="#">MP3 Downloads</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">RSS Feeds</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">About online BookWorms</a></li>
</ul>
<div id="main">
<h2>Welcome</h2>
<p>Welcome to <strong>online BookWorms</strong> — your location on
the Web for books, magazines, short stories, poetry, and essays.
Please explore our online bookstore for the lowest prices on new
and rare books. Share your love of reading by joining one of our
many forums and discussion groups. Are you an aspiring critic?
We welcome book reviews and essays on your favorite authors and
works.
</p>
<h2>News</h2>
<p>We are very happy to introduce the <a href="#">online BookWorms
Podcast</a>. The podcast will contain free excerpts from great
works of fiction and reviews of current books. You can quickly
subscribe to this new BookWorms feature <a href="#">here</a>.
</p>
<p>Take a few moments now to explore our book shelves. And remember to
patronize our sponsors by clicking the banner ads at the top of the
page. Enjoy browsing our site!
<p id="signature">
<img src="signature.jpg" alt="Helen Ungerstatz" />
</p>
</div>
</div>
</body>
</html>
Hi, I have an animated banner on my homepage. I have a CSS menu. The CSS menu is appearing behind the JS banner. Only in one version of IE8 (8.0.6001.18702). Other version of IE 8, it works fine. I have set all the Z-index values in the CSS. I was wondering if you could add anything in the JS. Like for SWF you can set <param name="wmode" value="transparent">. The site is http://capitalshores.com/ I am using this slideshow: http://www.dynamicdrive.com/dynamici...nslideshow.htm Thanks, Ryan 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. I have a banner ad at the top of the page (created by javascript). It is sometimes flash, sometimes a div, sometimes just an image (the ad company determines this). I need it to appear at the top of the page, but I want it to load AFTER all of the rest of the page content has loaded. Here is a test page I've created to demonstrate this: http://jeremymoritz.com/js-test.php Here is the code with the javascript at the bottom so it will load last: Code: <html> <head> </head> <body> <div id='ad_spot'> <!--ad needs to go here--> </div> <div id='content'> <!--Content--> </div> <div id='load_last'> <script defer='defer' type="text/javascript"> var __fbr_pid = "1746"; var __fbr_bid = "18281"; var __fbr_sid = "4568"; var __fbr_size = "728x90"; var __fbr_auid = "28762"; var __fbr_zone = ""; </script> <script type='text/javascript' src='http://ads.foodieblogroll.com'></script> </div> </body> </html> </div> I've tried many things to fix this, but the javascript usually creates elements (iframes, divs, etc.) that are OUTSIDE of container div so manipulating the dom (to move the div or its contents to the <div id='ad_spot'>)has yielded unexpected results. Thank you in advance for your help! Hi everybody Im new here and javascript newbie ,so I need your helps I want to use a left floating banner on my site www.guruht.com so the floating banner don't cover any text content when a visitor zoom in the page or use a very low resolution like 800x600 or 1024x700. this is the code I use but the banner cover the text : Code: <style>
#floating_banner_bottom {
text-align: left;
width: 00%;
bottom: 00px;
margin-bottom: 0px;
height: 50px;
position: fixed;
z-index: 50;
left: 0px;
</style>
<div id="floating_banner_bottom">
<!-- Button to Close Banner -->
<a style="display:scroll;position:fixed;bottom:50px;left:0px">
banner code
<br />
<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;">
<i style="font-family: Georgia,"Times New Roman",serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i>
<center>
<img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" />
</center>
</a>
</div>
<a/>
</a></a></div>
<!-- End Here -->
Hello, I'm looking for an option for a rotating banner on a website. I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed. Is this possible? Hi guys, I need some help. I'm trying to make a banner in java or jquery. Idea is div 1 div 2 div 3 div 4 >> custom div1 button >> custom div2 button >> custom div3 button >> custom div4 button I've also added an image of something i have in mind... i can do the CSS but i can't figure out a good tutorial. The closest I found on google was this http://cssglobe.com/lab/easyslider1.7/02.html but its with numbers.. Hi I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc Code: <script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";
var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;
//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}
</script>
Hi everyone. I am running a short url service with payment... So now we have 1 full ad advertising and banner advertising. On Full ad page For users to skip the full ad page they must click on the banner on the header so then go main link. <a href="{$_WEB_URL}"> is the link on the database tat it has been shortened. So when guests click on the banner the banner opens in new window but the page does not start to forward to main url. Can some one help me on this ..? I tried this : <div class="lb_ad"> <a href="{$_WEB_URL}"> <div onclick="redir()"> <!-- START all AdPeeps.com Code --> <p align="center"> <script type="text/javascript" src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&uid=100000&bmode=off&gpos=center&gwidth=90&bzone=de fault&bsize=all&btype=3&bpos=default&ver=2.0&btotal=1&brel="nofollow" target=_blank&bbo rder=0"> </script> <noscript> <a href="http://paytox.us/advertises/adpeeps.php?bfunction=clickad&uid=100000&bmode=off&bzone=default&bsize=all&btype =1&bpos=default&ver=2.0" rel="nofollow" target="_blank"> <img src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&uid=100000&bmode=off&bzone=default&bsize=all&btype= 1&bpos=default&ver=2.0" alt="Click Here!" title="Click Here!" border="0" /></a> </noscript> </p> <!-- END AdPeeps.com Code --> </div> </a> </div> I have a javascript banner on my site which is working perfectly. however if the user goes to my domain without www. infront of the address the banner is non existent. I'm pretty sure there should be some kind of option for this on my hosts control panel but I can't find anything on it however. (bluehost) or is there something else that must be done? Thanks for any help. Hi I am trying to include an animated banner on my website but it wont work is there anyone out there who can look at my code and tell me where I am going wrong? Code:
<head>
<title>Online movie store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript" src="mylibrary.js">
</script>
<script type="text/javascript" language="JavaScript">
<!--
var myproducts = new Array("sherlockholmes","anchorman","weweresoldiers","starshiproopers","homealone","gamer","residentevil");
var itemqty = 0;
function showCookies(){
for (i=0;i<myproducts.length;i++){
var qtyWanted = GetCookie(myproducts[i]);
itemqty = qtyWanted ? qtyWanted : "0";
document.dvdform[myproducts[i]+"qty"].value = itemqty;
}
}
function addToCart(dvd){
itemqty = document.dvdform[dvd + "qty"].value;
itemqty = parseInt(itemqty);
SetCookie(dvd,itemqty);
var feedback = "An order for " + itemqty + " dvd(s) of ";
feedback += dvd.toUpperCase();
feedback += " has been added to your shopping cart.";
feedback += " Please click 'Check Out' when finished."
alert(feedback);
}
function checkOut(){
window.location.href = "return.html";
}
var myAds = new Array();
myAds[1] = new Image();
myAds[2] = new Image();
myAds[3] = new Image();
myAds[4] = new Image();
myAds[1].src = "images/sh.jpg";
myAds[2].src = "images/am.jpg";
myAds[3].src = "images/sold.jpg";
myAds[4].src = "images/star.jpg";
/* Callout: The timings represent the number of milliseconds delay between the images.*/
var myTimings = new Array();
myTimings[1] = 3000;
myTimings[2] = 1500;
myTimings[3] = 1500;
myTimings[4] = 1500;
var mySites = new Array();
mySites[1] = "sh.html";
mySites[2] = "am.html";
mySites[3] = "sold.html";
mySites[4] = "star.html";
var adnumber = 0;
var totalads = myAds.length - 1;
var timerID = "";
function startBanner(){
adnumber = 0;
showAd();
}
function showAd(){
if (document.images){
/*Callout: This condition ensures that each image loads
completely before the next image appears in the sequence. */
if (document.myBanner.complete){
adnumber++;
(adnumber > totalads) ? adnumber=1 : adnumber=adnumber;
document.myBanner.src = myAds[adnumber].src;
}
timerID = setTimeout("showAd()",myTimings[adnumber]);
}
}
function goSite(){
clearTimeout(timerID);
window.location.href = mySites[adnumber];
}
//-->
</script>
</head>
<body onload="showCookies(); startBanner();">
<form name="dvdform">
<div id="wrapper">
<div id="inner">
<div id="header">
<h1><img src="images/logo.png" width="519" height="63" alt="Online Movie Store" /></h1>
<div id="nav">
<a href="account.html">your account</a> | <a href="cart.html">view cart</a>
</div><!-- end nav -->
<img src="images/movie.png" width="744" height="198" alt="Banner" /></a>
</div><!-- end header -->
<dl id="browse">
<dt>We Have All Your Favourite Movies</dt>
<div align="CENTER">
<a href="sh.html" onclick=
"goSite();return false;"><img src = "images/sh.jpg"
name="myBanner" width="180" height="400" border="0" alt="Sherlock Holmes"></a></div>
</dl>
<div id="body">
<div class="inner">
<div class="leftbox">
<h3>Sherlock Holmes (2009)</h3>
<img src="images/sh.jpg" width="80" height="100" alt="sherlock holmes" class="left" />
<p>Detective Sherlock Holmes and his stalwart partner Watson engage in a battle of wits and brawn with a nemesis whose plot is a threat
to all of England.</p>
<input type="TEXT" name="sherlockholmesqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('sherlockholmes');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Anchorman: The legend of Ron Burgundy (2004)</h3>
<img src="images/am.jpg" width="80" height="100" alt="Anchorman" class="left" />
<p>Ron Burgundy is San Diego's top rated newsman in the male dominated broadcasting of the 1970's, but that's all about to change when a new
female employee with ambition to burn arrives in his office.</p>
<input type="TEXT" name="anchormanqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('anchorman');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>We Were Soldiers (2002)</h3>
<img src="images/sold.jpg" width="80" height="100" alt="we were soldiers" class="left" />
<p>The story of the first major battle of the American phase of the Vietnam War and the soldiers on both sides that fought it.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="weweresoldiersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('weweresoldiers');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Starship Troopers (1997)</h3>
<img src="images/star.jpg" width="80" height="100" alt="Starship troopers" class="left" />
<p>Humans of a fascistic, militaristic future do battle with giant alien bugs in a fight for survival.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="starshiptroopersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('starshiptroopers');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>Home Alone (1990)</h3>
<img src="images/homealone.jpg" width="80" height="100" alt="Home Alone" class="left" />
<p>An 8-year-old boy, who is accidentally left behind while his family flies to France for Christmas, has to defend his home against idiotic burglars.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="homealoneqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('homealone');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Gamer (2009)</h3>
<img src="images/gamer.jpg" width="80" height="100" alt="Gamer" class="left" />
<p>In a future mind-controlling game, death row convicts are forced to battle in a 'doom'-type environment. Convict Kable, controlled by Simon,
a skilled teenage gamer, must survive 30 sessions in order to be set free. Or won't he?</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="gamerqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('gamer');">
</p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear"></div>
</div><!-- end .inner -->
</div><!-- end body -->
<div class="clear"></div>
<div id="footer">
<div id="footnav">
<a href="account.html">Your Account</a> | <a href="cart.html">View Cart</a>
</div><!-- end footnav -->
</div><!-- end footer -->
</div><!-- end inner -->
</div><!-- end wrapper -->
</form>
</body>
</html>
I think the problem is that I have 2 onload functions in the body tag *<body onload="showCookies(); startBanner();">* does anyone know how I can fix this? Also when I put the Javascript into external files they won't work! but when I included the show cookies file in the html it works does anyone know where I am going wrong? Hi All, I came across various codes that is used to delay the banner from not loading while the document is loading but i got struck with this one, this one sounds interesting but confusing, Which page in this code is delaying the banner & how to adjust that (to delay further or to speedup)- http://en.wikipedia.org/wiki/Script?...AFS020fader_US Hi, i'm trying to create horizontal banner slide, I want something really simple and basic, most script i find is far to complex and more like a gallery. I found this script on dynamicdrive but it is quite old, it does what i'm after but and its a big but, i can't speed it up :-( Does anybody know how i could increase the speed of the swipe from slide to slide on this? thanks Ben Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='800px'
var scrollerheight='300px'
var scrollerbgcolor=''
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="#"><img src="images/website-banner-1.jpg" border="0"></a>'
slideimages[1]='<a href="#"><img src="images/website-banner-2.jpg" border="0"></a>'
slideimages[2]='<a href="#"><img src="images/website-banner-3.jpg" border="0"></a>'
//extend this list
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",5)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",5)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
</head>
<body>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script type="text/javascript">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script type="text/javascript">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<script type="text/javascript">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
</body>
Hi people, I've been asked to build a rotative news/banner switcher. Like you would see on news channel on TV at the bottom. I am using setInterval() to call an xajax method every X seconds. Works great. I keep trace of an array index and return the next content everytime it is called. (Not forgeting to roll up the index (or go back to 0 if I reach the end)) So for so good. But I was asked to add mouse events to this. The ability to stop the rolling interval onmouseover and resume onmouseout. Same goes with a pause/play button. So I kill the interval using clearInterval(), its stops. onmouseout resumes the first timer AND Creates a new one so it doubles the rotations. I tried various solutions found on google but none of them works at all. I need help to properly start/stop pause/resume a javascript timer. now to the code. I'm using a little xajax here but my problem is from javascript. init() gets called on body onload() Code: function init(){
$xAjax_objResponse = initXajaxObject();
//time script to refresh the banner
//I also declare the timer variable there.
$xAjax_objResponse->script("var timerMarquise; xajax_refreshMarquise();");
//Starts the timer
$xAjax_objResponse->script(getMarquisePlayScript());
return $xAjax_objResponse;
}
refreshMarquise() sets the banner content Code: function refreshMarquise(){
$xAjax_objResponse = initXajaxObject();
$oRedaction = unserialize($_SESSION["creation2"]["redact"]["obj"]); //Session object
$oIdee = $oRedaction->getNextIdee(); //Gets the next object containing the info to show
$innerMarquise = getMarquiseInner($oIdee); //builds the html to show the content
$xAjax_objResponse->assign("redaction_marquise", "innerHTML", $innerMarquise); //Actually sets the result to the page
//without anything to show, I don't display the banner
$displayMarquise = count($oRedaction->getArrIdeesValides()) == 0 ? "none":"block";
$xAjax_objResponse->assign("redaction_marquise_cheat", "style.display", $displayMarquise);
$_SESSION["creation2"]["redact"]["obj"] = serialize($oRedaction); //Save objects new state - modified index
return $xAjax_objResponse;
}
getMarquisePlayScript() starts the timer Code: function getMarquisePlayScript(){
$script = getMarquisePauseScript(); //I clear the current timer
$script .= "timerMarquise = window.setInterval(\"xajax_refreshMarquise()\", 3000);"; //This should call refreshMarquise every 3 seconds
return $script;
}
getMarquisePauseScript() - should stop and clear the interval Code: function getMarquisePauseScript(){
return "window.clearInterval(timerMarquise);";
}
Mouse events - call the pause and play scripts Code: onmouseover='xajax_pauseMarquise();' onmouseout='xajax_playMarquise(); thanks for help Hi, I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links? Any help would be much appreciated. Thanks! Hi All! I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page: http://www.constantcontact.com/index.jsp If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality: 1) Have the ability to hover over each number to change the main photo 2) Have the script advance the main photo on its own 3) Be able to click the main photo when it is selected Any questions, let me know! Thanks, Eric |
|||||||