hi have you seen windows that are neither a popup nor a popunder but appear when you load a webpage with the original page? to see an example of what i mean please visit http://buildtrafficx.com ( Get free search engine optimization tutorial) OK. how can I have one of those for my website? Can someone help me? thanks
hello, well that is a div that has some content in it. Its not very hard to create something like this .. you need to use javascript for creating the move of the banner and show/close action. There are many tips of banners that are build using div/css2/javascript. Make a search on google with div css2 banner and you will find more useful links. If you need more help let me know! Hope this is useful! Regards, Cris
Ez, use prototype and scriptalicious <!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=iso-8859-1" /> <title>Google</title> <style> <!-- body,td,a,p,.h{font-family:arial,sans-serif} .h{font-size:20px} .h{color:#3366cc} .q{color:#00c} div#popin { position: absolute; left: 500px; background: black; color: white; font-weight: bold; border: 1px solid blue; } --> </style> <script language="javascript" src="js/prototype.js"></script> <script language="javascript" src="js/scriptaculous.js"></script> <script> <!-- function sf(){document.f.q.focus();} window.rwt=function(b,d,f,j,k,g,l){var a=window.encodeURIComponent?encodeURIComponent:escape,h="",i="",c=b.href.split("#"),e="";if(d){h="&oi="+a(d)}if(f){i="&cad="+a(f)}if(g){e="&usg="+g}b.href="/url?sa=t"+h+i+"&ct="+a(j)+"&cd="+a(k)+"&url="+a(c[0]).replace(/\+/g,"%2B")+"&ei=RuolRsnlOavmaOjBzbQJ"+e+l+(c[1]?"#"+c[1]:"");b.onmousedown="";return true};// --> </script> </head> <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="sf();if(document.images){new Image().src='/images/nav_logo.png'}" topmargin=3 marginheight=3> <div id="popin" style="display:none;"> <a href="javascript:void(0);" onclick="$('popin').hide();">[X] Close</a> <br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> SLIDE IN CONTENT<br /> </div> <center> <div align=right id=guser style="font-size:84%;padding-bottom:4px" width=100%><nobr><a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.co.uk/ig%3Fhl%3Den&usg=__ftfhsj1EbMM1bA7cvve876J1zs4=" onmousedown="return rwt(this,'promos','hppphnu:en_uk','pro','1','__NM3vTxGgbxwBf6KZJheLQwXN4oc=','')">Personalise this page</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.co.uk/&hl=en">Sign in</a></nobr></div> <img alt="Google" height=110 src="http://google.com/intl/en_uk/images/logo.gif" width=276><br> <br> <form action="/search" name=f> <script defer><!-- function qs(el){if(window.RegExp&&window.encodeURIComponent){var ue=el.href,qe=encodeURIComponent(document.f.q.value);if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;} //--> </script> <table border=0 cellspacing=0 cellpadding=4> <tr> <td nowrap><font size=-1><b>Web</b> <a class=q href="http://images.google.co.uk/imghp?ie=UTF-8&oe=UTF-8&hl=en&tab=wi" onclick="return qs(this)">Images</a> <a class=q href="http://news.google.co.uk/nwshp?ie=UTF-8&oe=UTF-8&hl=en&tab=wn" onclick="return qs(this)">News</a> <a class=q href="http://maps.google.co.uk/maps?ie=UTF-8&oe=UTF-8&hl=en&tab=wl" onclick="return qs(this)">Maps</a><sup><font color=red>New!</font></sup> <a class=q href="http://froogle.google.co.uk/frghp?ie=UTF-8&oe=UTF-8&hl=en&tab=wf" onclick="return qs(this)">Froogle</a> <a class=q href="http://groups.google.co.uk/grphp?ie=UTF-8&oe=UTF-8&hl=en&tab=wg" onclick="return qs(this)">Groups</a> <b><a href="/intl/en/options/" class=q>more »</a></b></font></td> </tr> </table> <table cellpadding=0 cellspacing=0> <tr valign=top> <td width=25%> </td> <td align=center nowrap><input name=hl type=hidden value=en> <input maxlength=2048 name=q size=55 title="Google Search" value=""> <br> <input name=btnG type=submit value="Google Search"> <input name=btnI type=submit value="I'm Feeling Lucky"></td> <td nowrap width=25%><font size=-2> <a href=/advanced_search?hl=en>Advanced Search</a><br> <a href=/preferences?hl=en>Preferences</a><br> <a href=/language_tools?hl=en>Language Tools</a></font></td> </tr> <tr> <td align=center colspan=3><font size=-1>Search: <input id=all type=radio name=meta value="" checked> <label for=all> the web </label> <input id=cty type=radio name=meta value="cr=countryUK|countryGB"> <label for=cty> pages from the UK </label> </font></td> </tr> </table> </form> <br> <br> <font size=-1><a href="/intl/en/ads/">Advertising Programmes</a> - <a href="/services/">Business Solutions</a> - <a href="/intl/en/about.html">About Google</a> - <a href=http://www.google.com/ncr>Go to Google.com</a></font> <p><font size=-2>©2007 Google</font></p> </center> <script language="javascript"> window.onload=function() { Effect.Appear( 'popin' ); Effect.MoveBy( 'popin', 150, 0, { duration: 3 } ); }; </script> </body> </html> HTML: Heres one I just made in less than 70 seconds including the time to download the scripts. I'll draw your attention to the parts that actually matter, first cast your eyes to the css div#popin { position: absolute; left: 500px; background: black; color: white; font-weight: bold; border: 1px solid blue; } HTML: Needs to have a position specified that suits your page, use this class to style the inside of the box. Next look at the <div popin tag <div id="popin" style="display:none;"> HTML: display:none needs to be defined here NOT in the css. next look at the code that closes the window .... <a href="javascript:void(0);" onclick="$('popin').hide();">[X] Close</a> HTML: $() is a prototype method / alias for document.getElementById and hide() is a prototype method pretty simple stuff. next go to the bottom of the page <script language="javascript"> window.onload=function() { Effect.Appear( 'popin' ); Effect.MoveBy( 'popin', 150, 0, { duration: 3 } ); }; </script> HTML: Effect is part of the scriptalicous library, I totally cheated I suppose, but hey it works pretty good, and cross browser too, because the div is hidden we use Effect.Appear on it show the div - it's already started moving because of Effect.MoveBy by the time the div is viewable..... http://krakjoe.com/popin.html http://wiki.script.aculo.us/ http://script.aculo.us/ http://www.prototypejs.org/api http://www.prototypejs.org/ pretty easy right ??? to do other stuff would be pretty easy too, like delaying the effects the docs for both those scripts are real good.....
Many thanks for your help! I uploaded the code you provided to http://www.promotingspace.net/div.htm to test and realize what I should do. as you see in the link above no popins appear. what else I should upload to my host and in what format and what should it's name be? sorry if I don't have proffessional skills like you thanks
<script language="javascript" src="js/prototype.js"></script> <script language="javascript" src="js/scriptaculous.js"></script> those two lines are looking for prototype and scriptalicious available at the locations I posed a minute ago, if you dont wanna look at those site ( you really should ) then download all the js from http://krakjoe.com/js and upload to a folder named /js on your webserver......
How can I align it center? How to change its size and how to change the background color? Great if you could explain with example ( no need to a full example; just what should be added and where) Thanks
all styles controlled from div#popin { position: absolute; left: 500px; background: black; color: white; font-weight: bold; border: 1px solid blue; }
You can easily develop using Flashmx and Javascript.It is called splash page used when loading URL.Please, check this site www.web-source.net.. Thanks!
Sure! Your posts were very useful to me and helped a lot. Ofcourse I read it but it has been emailed to me and I read it in my email Thanks