|
HTML - Need Help Creating One Line For 4 Objects
My header looks weird. I tried using a table to get it down, but it doesn't want to seem to work the way I want it to.
I want my search box and submit to ditchtime.com blocks to be right under each other all on the same line with my other ads. Instead the submit 2 ditchtime block is underneath everything else. Any table I could use to fix this? site http://www.ditchtime.com Similar TutorialsI try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ ------------------------------------ How can I create a line about (2px) in height to float above my header? For example would I use an empty div tag? Then just style it? thanks superbia I'm working with this web page code (below) and I'd like to seperate the two cells (or tables, I'm not sure). The one on the left holds the log-in and the links, and the one on the right contains the main text. I've attached an image and am showing the borders just to show you where the cells are. (I'm adding the lower half of the code to a reply, due to sixe limitations of this post). I'd like to seperate these two and run a vertical line between them. Can you help me with this? Code: <HTML>
<HEAD>
<Title></Title>
<style type="text/css">
body {margin: 1px 100px; 0px 100px;
padding: 1px;}
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle height=10>
<TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera2> </TD>
</TR>
<TR>
<TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera4> </TD>
</tr>
<TR valign=top>
<TD><!--<IMG src="/smusermanager/images/logo1.gif" height=150 width=159 border=0>--></TD>
<TD valign=left width=795 height=1><IMG src="/images/topimg.jpg"> <IMG src="/images/topimg.jpg"></font></TD>
</TR>
<TR valign=top height=1>
<TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 valign=top cellPadding=0 height=100% width=100% border=0>
<TR valign=top>
<TD width=10%>
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/images/clear.gif" height=20 width=160 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD><IMG src="/images/clear.gif" height=2 width=160 border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=1>
<TR>
<TD><font class=tbody>
<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">
<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>
<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>
<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>
</td></tr></table></td></tr></table></td></tr></table></form>
<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"><a href="?action=login"> Home</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphon.gif">--><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername"> Contact Us</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphon.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div>
</font>
</TD>
</TR>
</TABLE>
</TD>
<TD width="1" height=100% background="/smusermanager/images/dot.gif">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=1 border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=1 border=0></TD>
</TR>
</TABLE>
</TD>
<TD width=100%>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=11 border=0></TD>
</TR>
<TR>
<TD valign=top><font class=tbody>
I am using dreamweaver and for some reason when I save files it's creating extra linespaces. like <br> <br> <br> will show up as <br> <br> <br> How can I fix this? It's a real pain. It must increase my page size? Or is it fine? One page I have, I don't know why, but it has 5-6 lines in between, maybe every time I save it' adds another line? I am trying to insert the same html page http://www.danhead.com/store/dirtfest/index.html into several other pages including a myspace profile. Thanks to the blocking of iframes on MySpace the only solution I have found so far is to embed the html in an object. This is the code I am using now to insert the object: Code: <object type="text/html" data="http://www.danhead.com/store/test/index.html" width="420" height="800"></object> My problem is that the object is visible in Mozilla Firefox but not IE and possibly many other browsers as well, for I only have the two to check. With IE, all that appears is a blank frame the intended size of the object. My ultimate intention is to have both the object visible and the transparent background to show through on all browsers. You can view the code in use he http://www.dirtfest.com http://www.myspace.com/dirtfest Thanks in advance! Hi, I am trying to create a 'Add to Basket' button on my site using HTML. I have created the following code whcih you can see in action at www.martinspares.com/shop.html (its about halfway down the page). The trouble is that the Quantity box is lower than the button but i would like them to be level which other. How can I achieve this? I am new to all this and am quite confused so any help is much appreciated. Paul HTML Code: <iframe name="cart1" width="0" height="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe> <form action="http://ww4.aitsafe.com/cf/add.cfm" target="cart1"> <input type="hidden" name="userid" value="66349534" /> <input type="hidden" name="nocart" /> <input type="hidden" name="return" value="www.martinspares.com/basket.html" /> <input type="hidden" name="product" value="Mac 600 Colour Wheel" /> <input type="hidden" name="price" value="26.97" /> <input type="hidden" name="scode" value="123456" /> <input name="units" type="hidden" value="2" /> <input type="text" name="qty" size="1"><input type="image" name="Submit" src="wpimages/Add to Basket.png" alt="Add Item to Shopping Cart" onclick="this.src='wpimages/Added to Basket.png'" /> </form> Hi, I think this should be pretty simple to solve but can't find a resource online anywhere. I've written a photo viewing site using HTML server side includes. It is simply a large (480x360px) photo with an embedded object navigation menu below. The navigation menu has thumbnails of all the photos. It looks fine but the glitch is getting the navigation menu to change the large photo. I'm trying to avoid using JScript as it may be seen by those with basic computers (developing countries) although this is an option. The only resources I've found for this suggest creating a new page for each photo. This seems inefficient but I can't figure out if there's an elegant solution (CGI?) to pass which photo is required to a generic webpage. I'm pretty computer literate (degree in computer science in '99) but haven't programmed since I graduated and things have obviously moved on since then. You can see the page at http://osburn.co.uk/testpage/lebleu.shtml and the source below. Thanks for any help! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href= "css/main.css" name="default" type="text/css"/> <title>Davellos test page - business portal</title> <META Name="KEYWORDS" Content=""> <META Name="DESCRIPTION" Content=""> </head> <body> <br><br /> <table class="davell_photo_standard"> <tbody> <tr><td> </td></tr> <tr align="center"> <td id="vu"><a href="movie.shtml"><img alt="Davell tulip" src="jpg/chalets/brad/large/brad.3.jpg" name='SlideShow' align="center" border="0"></a></td> </tr> <tr> <td><object name="lebleuembed" class="davell_smallphoto_embed" data="lebleu2.shtml"></object></td> </tr> </tbody> </table> </body> </html> I'm fixing a website for work, and I need help. I know that you can find out which browser the user is using, but is there anything else you can find out. Specifically, screen resolution or internet speed? Hello all, Working on a site for a client, and unfortunately I'm getting some errors in IE. Chrome and Firefox seem to work fine, but with IE8 I'm not sure of the changes. Here is the page: http://redd-design.com/clients/shepedals/index.htm I'd love to hear some input...thanks! Ok im am kinda new to html i have set up a website that in my mind is not to bad considering i dont know much.. but when i minimize my buttons and 2 logos at the top all smash up together and it looks like crap.. All the help i could get would be great.. thanks for all the help http://www.dlsvendingllc.com Hi, I'm adding a flash games page to my site. My question is - I have a swf file (say for pac-man), how do I put it in the html? Is this even how one goes about putting a flash game on a page? I've also tried this: I've seen a game that I want - then I've just looked at the source info - then copied the part that "is" the game... like say this: Quote: <object classid "clsid87CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400"> <param name="movie" value="http://www.flashstash.com/media/swf/catch33.swf"> <param name="quality" value="high"> <embed src="http://www.flashstash.com/media/swf/catch33.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="v" type="application/x-shockwave-flash" width="400" height="400"></embed> </object> ...and just pasted that in an html page, to see if it would work and it did. But, when I do that, is it actually just linking from that page and playing on my screen? What's the right way to go? Can anyone help me? http://cortlandareatribune.com/test2/index2.html i have not defined any margins, actually removed them all together, by my two SWF files are being displayed with big gaps between them. how do i get these to display as normal block elements without the gaps? edit: i'm an idiot. had a wrong height defined in the html. Hello. I need to insert MS Word and MS Excell documents directly into html file. I use <object> tag for these perposes. Everything is ok and the whole documents can be viewed in IE through html file. But the problem is that these documents can not be printed currently from html file! One possible reason is that version of server(office) to print these OLE objects must be exatly the same as the version of office they were created in. Is there are any others ways to create printable html (or xml) document with office OLE objects inside? Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg Hi, I am trying to figure out how to make my links stay on the left side page while scrolling down or up. Not sure if this is the right place to post. Any help, codes, and/or examples would be great. Thanks Hiyas, well I am trying to make an html website, and I got two things I trie to add to my page. One is a shoutbox using direct link code, and in the preview it displays fine, and works fine. Another is a teamspeak launcher I made, just a link and an image. I align one to the right the other to the left, and that works. The problem is, that the one on the right is level with the bottom of the shoutbox on the left, whereas I want them to be a part of two side columns eventually, where they are both the same length etc, not all uneven. Here is my preview page: http://i116.photobucket.com/albums/o...Untitled-1.gif I hope you see what I mean. Please help me, as I need this website online ASAP cos me and my clan are going to some tournaments and seriously need this online. Thanks in advance, Ferinos I basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab">
<param name="SRC" value="splash.swf">
<embed src="splash.swf" width="640" height="480"></embed>
</object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. If anyone could take the time to answer this then much appreciated, it's pretty easy to read through, the php code is very basic and repeats itself in most places.. To create a CMS in PHP, is the best way to do it to save sections of the html to either say either a db or text file. This seems a bit messy but maybe the best way, for example say i have this html and i want to have a user be able to add more images to their page by just uploading an image and clicking a button ........, HTML Code: <table>
<tr>
<td> <img src = "i1.jpg" ></td>
</tr>
</table>
Now i could save, HTML Code: <table> <tr> to say text1.txt and HTML Code: </tr> </table> to text2.txt, and the images to say text3.txt, HTML Code: <td> <img src = "i1.jpg" ></td> i could then say something like, PHP Code: <?php $fname = "text1.txt"; $fo = fopen($fname,r); $fr1 = fread($fo,filesize($fname)); fclose($fo); $fname = "text2.txt"; $fo = fopen($fname,r); $fr2 = fread($fo,filesize($fname)); fclose($fo); $fname = "text3.txt"; $fo = fopen($fname,r); $fr3 = fread($fo,filesize($fname)); fclose($fo); $f_final= $fr1.$fr3.$fr2; echo $f_final; ?> This would put the contents of all 3 text files into a single variable $f_final so that all i would need to do if i needed a new image added is add that images html to text3.txt. This seems like a pretty good way of doing things, i assume this is how CMS systems are made pretty much?? So basically i could have a user frontend "addimg.html" which is for adding the image, HTML Code: <form method="post" action ="newimage.php"> <input tpye = "text" name = "img1"> <input type = "submit"> </form> and then a modified version of the above php, PHP Code: <?php //save new image name to text3.txt *********** $newimgge_to_ADD = $_POST["img1"]; $fname = "text3.txt"; $fo = fopen($fname,a); fwrite($fo,"\r\n".'<td> <img src = "'.$newimgge_to_ADD.'.jpg"> </td>'); fclose($fo); //********************** //Open all the text files one by one and save their contents to a variable ***** $fname = "text1.txt"; $fo = fopen($fname,r); $fr1 = fread($fo,filesize($fname)); fclose($fo); $fname = "text2.txt"; $fo = fopen($fname,r); $fr2 = fread($fo,filesize($fname)); fclose($fo); $fname = "text3.txt"; $fo = fopen($fname,r); $fr3 = fread($fo,filesize($fname)); fclose($fo); //****************** //Combine the contents of all 3 varables to one varable f_final ********** $f_final= $fr1.$fr3.$fr2; //********************* //Print out the result ********************* echo $f_final; //************************** ?> This would need a good bit of tweaking but i just want to know if i am on the right tracks.. Popup Windows: The Basics We'll begin the tutorial by creating a basic popup window. The technique described here addresses all the major issues in popups. The popup always comes to the front. Different links can target the same popup. The code is simple and easily modified. Everything for the rest of the turorial is a variation on the theme described here. The code in this page creates a popup that is opened from a link. In this section we'll show the code with just the minimal description you need to get it going. First, copy this script into the <HEAD> section of your page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
For now we'll skip the details of how the script works, and move to the next step. The script above opens the popup, but something needs to run the script. The most common situation is that the script is run when the user clicks on a link. A link like the following would run the script: HTML Code: <A HREF="popupbasic.html" onClick="return popup(this, 'notes')">my popup</A> Most of the link is as usual. The URL of the page being linked to is in the HREF attribute. We've added an additional attribute called onClick. Copy the code as it is into your link, with only a small modification. The second argument of the popup() -- 'notes' -- indicates name of the popup window. Every popup window should have its own unique name. Be sure to put the name in single quotes (''). So if you want to name the popup 'stevie' then this would be the code: HTML Code: <A HREF="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</A> Read This Next Part Or You'll Go Insane Trying to Figure Out Why Your Popup Doesn't Work A small but crucial point is often overlooked. The command in onClick must begin with return or the script won't work. Be sure to start the command with return like this: HTML Code: onClick="return popup(this, 'notes')" And don't put a space in the page name between the single quotes. If you do, the link will act just like a regular link. Popup Windows: From an Image Map In our first variation we'll open the popup from an image map instead of from a regular anchor. We'll use the same script as from our first example. With that script, an <AREA ...> tag in an image map can be made to open a popup in exactly the same way as an <A ...> tag: HTML Code: <MAP NAME="index"> <AREA HREF="mypopup.html" ALT="My Popup" COORDS="10,10,120,120" SHAPE=RECT onClick="return popup(this, 'gloss')"> <AREA SHAPE=RECT ALT="Your Popup" COORDS="140,10,180,50" HREF="yourpopup.html" onClick="return popup(this, 'gloss')"> <AREA SHAPE=DEFAULT NOHREF> </MAP> <IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example" BORDER="0" USEMAP="#index"> Popup Windows: Opening Automatically In the first two examples (Popup Windows: The Basics and Popup Windows: From an Image Map) the popup is opened when the user clicks on something. In this example the popup opens automatically. We'll use the same script as in the first example. Copy this script in the <HEAD> section of your page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
This time, instead of running the script from a link we'll run it from the onLoad attribute of the <BODY ...> tag. HTML Code: <BODY onLoad="popup('autopopup.html', 'ad')">
The command in onLoad is run when the document is finished loading. Like in our previous example, the command runs popup(), but this time the first argument for popup() is a little different. In the previous example we put this, meaning the link itself, and the script got the URL from the link. In this case there is no link so we pass the actual URL to open. So in our example we put 'autopopup.html'. Popup Windows: From a Form For our next variation on the popup theme we're going to open the popup from a form. In this example we're going to change the script around. The following script is custom designed for opening a popup from a form. It works with forms that use both POST and GET. Copy the following script exactly as-is into the <HEAD> section of your document: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function popupform(myform, windowname)
{
if (! window.focus)return true;
window.open('', windowname, 'height=200,width=400,scrollbars=yes');
myform.target=windowname;
return true;
}
//-->
</SCRIPT>
Now we'll add some code so that the popup opens when the user submits the form. Add an onSubmit attribute to <FORM ...> tag: HTML Code: <FORM METHOD=POST ACTION="../cgi-bin/mypopupcgi.pl" onSubmit="popupform(this, 'join')"> The first argument for popupform() is always this, meaning the form itself. The second argument, 'join' in this case, is a unique name for the popup. Popup Windows: Targeting the Opener Once a popup window has been created, linking from the popup back to the main window (i.e. the window which opened the popup) is a little trickier than might be expected. The problem is that the main window doesn't have a "name" the way the popup window does. Fortunately, JavaScript provides an answer in the form of opener. To create links in the popup window that target back to the main window, first put this JavaScript in the <HEAD> of the popup page: HTML Code: <SCRIPT TYPE="text/javascript">
<!--
function targetopener(mylink, closeme, closeonly)
{
if (! (window.focus && window.opener))return true;
window.opener.focus();
if (! closeonly)window.opener.location.href=mylink.href;
if (closeme)window.close();
return false;
}
//-->
</SCRIPT>
A link that uses this script looks like this: HTML Code: <A HREF="rbex.html" onClick="return targetopener(this)">my page</A> Popup Windows: Closing When They Go to the Opener In the previous example the link in the popup targets the main page, but the popup stays open in the background after the user clicks on the link. In this page we'll set the link so that it closes the popup after the click. targetopener takes three parameters. The first is always this, meaning the link itself. The second and third parameters are optional and default to false. (Notice we don't use them in the example above, we'll get to them shortly.) The second parameter indicates if the popup should close. The third is if the link should actually send the opener to the linked resource, or if the opener should just get the focus regardless of what its current page is. The third parameter provides a safe way to close the popup after closing, but still having a link to an existing page if the window isn't actually a popup (such as if the user found the page through a search engine). When the user clicks on the link, targetopener checks if the browser has the focus command (a few older browsers don't) and if the current window was opened by another window. If these conditions are true, then the opener window gets the focus, the opener is directed to the referenced URL, and the script returns false. Because the function returns false, the link does not go on to the URL (the script has already done that). Note that the link which targets the opener is a little different than the link that opened the popup window to begin with. In this link, onClick says "return goOpener(this)"... the links on the previous pages did not use return. By default, the popup window stays open but is in the background. If you want the popup to close after going back to the opener, add a second parameter of true to the targetopener function call: HTML Code: <A HREF="rbex.html" onClick="return targetopener(this,true)">main page</A> |
|||||||