|
JavaScript - How To Load The Banner Ad Last?
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! Similar Tutorials-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 all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> Hi guys, I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:250,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George 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 (: 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 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.. 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 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 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, Please bear with me as I've never worked with Flash before. I wish to include a Flash banner in my web page that is a link to another web site. The other web site has provided the code for the Flash banner link as: Code: <script language="JavaScript" src="http://www.************************"></script> <noscript><iframe src="http://www.********************&iframe=1" width=468 height=60 frameborder=0 border=0 scrolling=no marginheight=0 marginwidth=0></iframe></noscript> When I include the code inbetween <head></head> or between <body></body> nothing happens. I wonder why the banner is not showing? Do I have to alter the code or include something in my HTML code? I'd be very grateful for all help. 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'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 I'm trying to displaying a different banner each time someone reloads a page. I did this originally without a cookie and while it works, it has a tendency to display the same banner 3 or 4 times in a row, on occasion. I've never dealt with cookies before, but thought it might be an option for this. However, what I have below isn't working at all. Is it even on the right track?? thanks! Code: <script type="text/javascript">
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var banner = getCookie("banner");
if (banner = "") {
document.write("<a href='/donate'>");
document.write("<img src='ad1.jpg' />");
document.write("</a>");
setCookie("banner1", banner, 1);
} else if (banner = "banner1") {
document.write("<a href='/donate'>");
document.write("<img src='ad2.jpg' />");
document.write("</a>");
setCookie("banner2", banner, 1);
}
else if (banner = "banner2"){
document.write("<a href='/donate'>");
document.write("<img src='ad3.jpg' />");
document.write("</a>");
setCookie("banner3", banner, 1);
}
else {
document.write("<a href='/donate'>");
document.write("<img src='ad1.jpg' />");
document.write("</a>");
setCookie("banner3", banner, 1);
}
}
}
</script>
</head>
<body>
<div id="main">
<div id="ads" onclick="checkCookie()">
</div>
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! |
|||||||