Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Replication of <iframe src url> in a new browser window upon clicking iframe

    I have the code below for Iframe

    <iframe src="http://www.google.com" height="400"
    width="300">
    </iframe>

    I want to click on the Iframe and have a new window open as a result, not inside the iframe, but outside the iframe, with the same url as shown in the iframe.

    I try using the code <urlTarget>_blank</urlTarget>

    like this


    <iframe src="http://www.google.com" height="400"
    width="300" <urlTarget>_blank</urlTarget> >
    </iframe>


    but it does not work, i also tried other variatons of code such as:

    <IFRAME src="http://www.ebay.com" width="400" height="500"
    scrolling="auto" frameborder="1">
    <A href="http://www.ebay.com"></A>
    </IFRAME>


    but it still does not work.

    Please, Does anyone know how to do this?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css">
    a {
    position: relative;
    width: 400px;
    height: 500px;
    display: block;
    }
    span.frame {
    /*background: transparent;*/
    background: #d9c;
    position: absolute;
    width: 384px;
    height: 484px;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    -moz-opacity: .30;
    }
    
    </style>
    	
    </head>
    <body>
    <a href="http://www.ebay.com" target="_blank"><span class="frame"></span>
    <IFRAME src="http://www.ebay.com" width="400" height="500"
    scrolling="auto" frameborder="1">
    </IFRAME>
    </a>
    </body>
    </html>
    a little hacky but it kind of sound slike what you want is hacky too

    deal with this wrapping the iframe in a link doesnt work ecause only the border will be clickable. so to remedy this (but make another problem rear up) I relatively positioned the link allowing me to slap a span inside of it and absolutely position it over the frame. I used a opacity (only in mozilla for my test) to show the span over the frame. problem was that the span made the scrolling useless as it was over it. so I chopped off 16px on the sides so you can still scroll the frame. all the content of the frame is useless but anywhere they click on it will take them to the site in the frame.

    so if you use this example just turn off the opacity of the span and voila!

    tested in FF1.5 and IE6. does not work in opera 8. told you it was hacky but it's a start?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thank you so much I am going to try it out right away! I really appreciate it and I hope you had a Merry Christmas and have a Happy New Year!

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for the help. I have one question, do you know why in I.E. the image is not transparent? Check it out at this link: www.powerizerz.com/trans.html

    It works fine in Mozilla 2.0 but for some reason in I.E. it shows purple and you cannot see what is beneath the image. if you have any idea why please let me know.

    Thanks

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    -moz-opacity, as the name implies, only works in browsers using the Mozilla engine, such as Firefox. Firefox, along with Opera, now supports the CSS3 opacity property though, so you should be using that instead of -moz-opacity.

    You need to use a Microsoft‐only declaration for opacity variations in Internet Explorer: filter: alpha(opacity=30).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Glad it sort of worked.

    I used the opacity just so I could see exactly where the span was sitting over the iframe. Since I built it in FF, I just checked IE to see if things were working. Didn't really need the opacity.

    Code:
    span.frame {
    /*background: transparent;*/
    background: #d9c;
    position: absolute;
    width: 384px;
    height: 484px;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    -moz-opacity: .30;
    }
    the commented out background: transparent was what i had in there ofr starters but just needed to see itbetter.

    one thing I did learn about all this is that IE gives select boxes a z-index: infinity. Thats why on your link th eselct box is still usable and the opaque purple doesn't cover it up. Better to probally take it off completely but not my call. Opera gives a z-index: infinity to an Iframe and that's why it doesn't work for Opera at all.

    have fun.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •