HTML - Help With Inline Frames And Pop Up Windows!?
I am trying to create a pop-up window from a link that is within an inline frame. I know the code I am using is correct as when I place the link outside of the inline frame, it works perfectly. It is when the link is placed within the inline frame that it acts up - it opens itself like a regular link within the frame (except that all my pages have frame break on them so it just works to open the page within the same window).
This is the code I am using for the frame in my head section... <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=1000,height=700,scrollbars=no'); return false; } //--> </SCRIPT> and this is the script I am using for the link itself... <A hREF="news.html" onClick="return popup(this, 'notes')"><img align="right" src="news.jpg" border=0></A> This is my website I'm testing this on: www.kingsfieldfarm.net/index3.html The lower link (outside of the inline frame) works. The link inside the frame does not. Can anyone help me? Thanks! (and PS: Does anyone know how to centre the pop up window and get rid of the address bar?) Similar TutorialsI'd like to open an inline frame on my site. I've got the code this far; however I cannot find out how to finish it. I need to knowhow to get it to open at a certain spot on the page. So like an example would be I want it to open at spot x on a page. How would I code this to open it at that spot? Code: <html> <body> <iframe src="default.asp" width=125px height=125px></iframe> </body> </html> OK I have a home page that has several inline frames. All the action happens in one of the frames in the middle. Now what I want is when they click on a link in this main pane it loads the new page in said frame, but moves the browser back to the top of the parent frame, which is still home.html. The site I'm working on can be accessed at http://www.awardworks.com I tried using an onLoad with a java function that performs: window.scrollTo(0,0); but this didn't work Hey Guys, I am getting a website built for my company to use for internal use, and I have a web builder that is saying some of the things i want done, are not in the world of code, and they cannot do it, so of course, thinking you can want to prove him wrong. My question is... the website i will have, will have a frame, 25% of the screen with miniature windows in the frames, of different websites (help page, info page etc) when you click the miniature window IN the frame, can you make is to that whatever happens in the 75% of the main body of the screen, mimics IN the minature window, in the frame? So if have a blue screen with a plane on the main body of the website, (75% portion of the screen), can that same blue screen with the plane be showing LIVE in the miniature window, so now, what happens in the larger main body, say it be a red background, and a green car, the miniature window will copy its movement of images/background, and display as it does in the main window... i want a mirror image of a mini window following a larger window.. is there a code for this? can this be coded? HOPE THIS MAKES SENSE! Thanks! hope to hear from you!! Hi, I am currently making a website, I have used an inline frame on my site, and I am having trouble getting it to do what I want it to! lol Basically, I have put a menu on the left of the page, and an inline frame in the middle, now, I want it so that when you click on a link on the left, the whole page stays the same, but the inline frame will go to the requested page. So basically, a website inside a website if you see what I mean. I have tried using <a href="http://address.com/page.htm" target="mainframe"> </a> but I still can't get it to work. If anyone has any ideas it would be great!! Thanks a lot. ps: I should also add, I am using tables on my site, and the menu is in a different table to the iframe, does that make a difference? I have browsed the search function and found some topics that are helpful, but when I try the codes that are stated on those pages, it creates another iframe on my page, but it works with that one, but the new iframe is always in the wrong place, I am using MS frontpage by the way, and I added my iframe by click insert, and inline frame. The code I used that worked, but put another iframe below the menu, was this one: <p><a href="http://www.websitename.com/page.htm" target="frame">About</a></p> <!-- #BeginEditable "content" --> <iframe id="frame" name="frame" width="580px" height="450px" scrolling="auto" frameborder="0" Your browser does not support frames or inline frames.</iframe> <!-- #EndEditable --> It is done like that, because the page I am linking to, isn't stored on my site, but I don't think that should pose a problem, as it should display the same as it would if it was stored on my server, or so I would have thought? I look forward to any replies, and I thank you for taking the time to read this long post. In a nutshell: --- The following <li> tags are inline-blocks. Why does removing the closing <li> tags fix the whitespace issue? Code: <li>Item one</li> <li>Item two</li> <li>Item three</li> Versus... Code: <li>Item one <li>Item two <li>Item three The context of this question: --- From: CSS display: inline-Block: Why It Rocks, And Why It Sucks The above post is about using inline-block instead of float to position <li> elements, which is useful for making navigation bars. There is one drawback to using inline-block: (You can copy and paste the first piece of code below to see what I'm talking about.) If you restrict the <ul> to a particular width, your navbar won't display correctly, which has something to do with hitting the RETURN key between your lines of code (whitespace issues?). See below: This works fine because there we didn't hit RETURN to create a line break between each list. <li>Item One</li><li>Item Two</li> Here, we hit RETURN to put each list on a separate line and now the code doesn't display properly. The first piece of code below illustrates this problem. <li>Item One</li> <li>Item Two</li> The second piece of code solves this problem by using comments to remove the whitespace. The third piece of code solves this problem by removing the closing <li> tags. My question is, how does removing closing tags change anything? Are there any issues I should be aware of if I use this solution? Are there other contexts where I can apply a similar technique? Code: <style type="text/css"> ul#display-inline-block-example, ul#display-inline-block-example li { margin: 0; padding: 0; } ul#display-inline-block-example { width: 300px; border: 1px solid #000; } ul#display-inline-block-example li { display: inline-block; width: 100px; min-height: 100px; background: #ccc; vertical-align: top; } </style> <ul id="display-inline-block-example"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> Code: <style type="text/css"> ul#display-inline-block-example, ul#display-inline-block-example li { margin: 0; padding: 0; } ul#display-inline-block-example { width: 300px; border: 1px solid #000; } ul#display-inline-block-example li { display: inline-block; width: 100px; min-height: 100px; background: #ccc; vertical-align: top; } </style> <ul id="display-inline-block-example"> <li>Item one<!-- --><li>Item two</li><!-- --><li>Item three</li> </ul> Code: <style type="text/css"> ul#display-inline-block-example, ul#display-inline-block-example li { margin: 0; padding: 0; } ul#display-inline-block-example { width: 300px; border: 1px solid #000; } ul#display-inline-block-example li { display: inline-block; width: 100px; min-height: 100px; background: #ccc; vertical-align: top; } </style> <ul id="display-inline-block-example"> <li>Item one <li>Item two <li>Item three </ul> I've heard many times "don't use frames, there is better ways to accomplish it", and I was wondering, is this just referring to "invisible" frames, or any frames? For example, look at Kingdom of Loathing. They use frames (or what appears to be frames) and I can't see how they could successfully make that site without. If I had to have all the screens scroll as one rather than separate, and couldn't resize when I needed to, it would be extremely annoying. So, frames are bad, or just the invisible ones? Hi all, newbie here. I'm trying to make an "interactive" music video where a user clicks images which trigger pop up windows playing youtuve videos to appear. My problem is keeping the pop up youtube videos "on top" while retaining the user's ability to click on the interface of the original webpage (to trigger more videos). any ideas? Any help would be greatly appreciated. thanks in advance I have to write a html code where i have to jump to 2 urls on click a object. presently i have written a code to jump to one url only "<a href=\"http://bodev:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AdknCqrhpYZKkFBzpe1wbsU&sIDType=CUID&sType=wid&sRefresh=N&sWindow=New\" title=\"\" target=\"_self\" nav=\"doc\">"+"Click State"+"</a>" When I click the object with text Click State, a new window pops ups with url. So, the requirement is now to pop open 2 windows when i click Click state The first url is as above and the second code is "<a href=\"http://bodev:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AYhtqwsujalMpBHSjfT0hF0&sIDType=CUID&sType=wid&sRefresh=N&sWindow=New\" title=\"\" target=\"_self\" nav=\"doc\">"+[State]+"</a>" Note: My program embeds these codes, so i need to use <a href> and </a> Hey there, I'm trying to code my site for not only IE8 but also IE6/7 versions. I can't seem to figure out how to download the earlier versions without either getting rid of IE8 or just not being able to download them. Is it possible for me to have IE6, 7, and 8 on one computer? Thanks, ~C-Style~ 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> Hey guys. One of my pages is full of hundreads of pictures. When you click them in makes them bigger, but it makes them bigger on the same page. Does anyone have anything that can make any link that is clicked on that page open in a new window. Heres the site. www.jimandanne.net/pictures.htm help would be great, Thanks I have been working on this thing forever!! I am in desperate need of help!! I currently am running an HTA file called h1.hta and I want to be able to open another HTA called h2.hta that will take in parameters and close the current HTA. I am using this snippet of code to open the new h2.hta(parameters) within my current h1.hta : nextpage = h2.hta?trial=2&condition=1 //vbscript set WshShell = CreateObject("WScript.Shell") WshShell.Run(nextpage) When I run this, I get a "File not Found" error. I believe it's because the file in the system is entitled h2.hta and when i send it with the parameters, it does not recognize. My question is how do I go to another hta file with parameters??? Hi. I'm trying to replicate an old app that used to be in the App Store. It let you log into xbox.com, and take your friends list and various other info, and put a nice interface over it. Right now I'm having real trouble even logging into xbox.com, or live.login.com. You can see my webapp here. For some reason it doesn't work. I even tried using all the HTML which doesn't seem to work either. Does anybody know how to fix this, OR another way to login to xbox.com to get the info. Thanks. Hi, Wonder if you can help please. I have a long established ASP page called carkeys.asp - which does not work on my new Linux hosting (whoops should have know that). Before I change back to a windows platform is there anyway this page can be bounced to the replacement page at carkeys.html? The .asp page is well ranked with google and I would like its statistics to be directed to the new html page. I have code for the re-direction, but the page cannot be viewed to get this far. http://www.lockcity.co.uk/carkeys.asp > http://www.lockcity.co.uk/carkeys.html Many thanks for any help you can give Abi hi guys, I am new here and my friend says he always gets help when he comes on this forum so I will follow in his foot steps. My problem is this; I am building my website and I have come up to a wall. I have 4 different playlist that I want to come out on a pop up window which I already configured and all but I can't seem to get my links to open in the same pop up window. I want to be able to click on a link and it opens it in the same pop up that is already there. Is that possible. This is the code that I am using: <p>These are our current playlists:</p> <blockquote> <p><a href='media/gospel playlist/gospel player.html' target="_blank" onClick="window.open('media/gospel playlist/gospel player.html', '', 'scrollbars=auto, menubar=no, height=500, width=400, resizable=no, toolbar=no, location=no, status=no'); return false;">GOSPEL</a></p> <p><a href='media/hiphop playlist/hiphop player.html' target="_blank" onClick="window.open('media/hiphop playlist/hiphop player.html', '', 'scrollbars=auto, menubar=no, height=500, width=400, resizable=no, toolbar=no, location=no, status=no'); return false;">HIPHOP - R&B - REGGAE</a></p> <p><a href='media/zouk playlist/zouk player.html' target="_blank" onClick="window.open('media/zouk playlist/zouk player.html', '', 'scrollbars=auto, menubar=no, height=500, width=400, resizable=no, toolbar=no, location=no, status=no'); return false;">ZOUK - KONPA - LATIN</a></p> <p><a href='media/jazz playlist/jazz player.html' target="_self" onClick="window.open('media/jazz playlist/jazz player.html', '', 'scrollbars=auto, menubar=no, height=500, width=400, resizable=no, toolbar=no, location=no, status=no'); return false;">LOVE SONGS - JAZZ - BLUES</a></p> <p> </p> </blockquote> Pleas help out if possible.. Thanks a bunch Hello! I am in need of some assistance with pop-up windows... Thisis an example of the code I am currently using for pop-up windows (below), it opens a new window that displays an image and it works great!... Only now I require the same format (including the text underneath), only instead of having the pop-up windows display images, I need them to display a body of text in html format.... Can anyone please assist me with this? Thank you!!! <center><html> <head> <style type="text/css"> div.img { margin:2px; border:0px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> <body> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="200" height="150" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="200" height="150" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="200" height="150" /> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html> Is their any shortcut to give inline css in Dreamviewer ? Since I am using Dreamviewer & I have to write Inline CSS explicitly & there is streachable facility in the control so that we can stretch & its appropriate width & height can be assign to its component ? Since I am getting it in dreamviewer & if any body knows how to do it then please let me know abt it ? Regards.... Hello, I am making this site on a Mac and having no problems with it, untill I look at it in Explorer on Windows PC, where it shows strange gaps in the layout of the tables. Sometimes I solve these problems by changing the background colour or moving an element to the top, but I think Im just busy covering up the main problem and not really solving it. So my question is: Does anybody have an idea what causes this problem, aside from the fact that these are different types of computers, and how to solve it, if there is a common solution to it? http://dixdesign.net/dixdesign/pentecost/index.html If anyone could have a look at it, would be much appreciated. Thanks in advance, Dix Ive had this code before back when I was in school. It simulated the windows start bar in the explorer where if you clicked the start button a list of directories came up and you could select a htm file within that was linked in it...and it would have a tab in the bottom next to that start button that would allow you to switch between them like tabs essentially. I was wondering if anyone happened to have that code by chance its been a long time and I couldn't seem to find it by searching. Thanks in Advance |