|
JavaScript - Banner Shrinks Slowly In Firefox
Hello,
I have a banner on a site that auto shrinks after 5 seconds. The problem is, in Firefox (and Safari on the iPad) it shrinks too slow (compared to other browsers) and shrinks irregular (for lack of a better word). What I mean by the last part is it starts shrinking, then stops for half a second, then continues. Is there anyway to fix this? Here's thelink If you'd rather me just post the script, let me know. Thanks Similar TutorialsHi All, I'm sure I'm not the only one who has had this problem... In internet explorer I have no problems. I literally just taught myself flash so I am hoping there is an easy fix that I am not finding. I did not design or create the template for the original site, I am just upgrading and adding features to improve what was already there. I am trying to fix this as soon as possible so any help anyone could offer would be greatly appreciated!! Here is the code for the flash banner: Code: <td><div style="height:230px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1090" height="230">
<param name="movie" value="images/home/homeheader1.swf" />
<param name="quality" value="high" />
<embed src="images/home/homeheader1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1090" height="230"></embed>
</object></div></td>
</tr>
Here is the code for the nav bar: Code: <script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>
<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10" style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td>
</tr>
</table>
-edit - nevermind. mods plz delete.
I've started seeing this on a few pages and I'd like to add it to mine. I'd like to add a back to top button where it doesn't just jump right to the top, but acts like the user were actually using the scroll bar. here are some well done examples: http://www.javascriptkit.com/jsref/window.shtml and http://www.webdesignerheaven.com/ I like the first one better (where it shows an up arrow if you've scrolled far enough), and I found what I think is the javascript responsible (though I'm not sure if it's exact right to take it.) let alone, i'm not sure how i would even implement it yet. http://www.javascriptkit.com/jkinclu...ltopcontrol.js i've got a basic example working on my own site, I just don't know how to stop it, (right now it just keeps going and going even if i try to scroll back down.) i'd like to be able to tell if the user reached the top, then stop it, but from what I've looked, i can't find a way to check where exactly they are in my page. i figure, if i can get mine to stop, I can fancify it later with the image that shows if you've moved down and what not, right now I'd like to just stop it when it reaches the top. I have 10 buttons on a page, and 10 more "onmouseover buttons" that correlate to the first set. Each button or onmouseover button is only 1-2KB! But I can still hold the mouse over a button for a couple seconds until it loads the onmouseover button. I'm using javascript to have the buttons change. The page does load a 2MB video. Could that be the cause? Can I tell it to load the buttons first somehow? Any ideas?
Just a basic question.... I am fairly new here. Just wondering if this is just a part of life. It seems like when I load javascript code into a page, that each item I add, such as an accordian vertical navbar, image slider, etc, that each time I add one, the page loads a second or so slower with each one added. I would like some of these features, but is this just a part of life, or are there tricks to avoid the slower load time? It is not major time but after the 2 items I mentioned, it added on about 2 seconds. Just enough to make it a bit annoying. I read that $(document).ready(function() might slow me down but I do not see that statement in any of my .js files. Thanks, Buffmin. 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'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 (: 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. 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 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 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.. 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! 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 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> 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 -->
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 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 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 |
|||||||