SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Appearing infront of frame

    Hi i have a popup code that appears when the page is loaded, is there a way to modify the code is it appears in the frame called chatframe and it appears infront of everything inside the frame:

    Code:
    <div id='mypopup' name='mypopup' style='position: relative; width: 179px; height: 36px; display: none;'>
    <img src="images/membersonlymessage.gif">
    </div>
    thanks.
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand your question. Can you clarify?
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Mike4x4s, if you want something to appear over the iframe (from the outside) you should use absolute positioning with a z-index (giving it priority on top of everything else), that way you can effectively overlap the frames contents with the message you want to display.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry i changed it to absolute but that didnt change anything what do you mean with a z index
    Animated Chatrooms - www.121chatrooms.net

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Using the CSS property z-index, it allows you to stack elements so they overflow on top of each other (best way to explain it).

  6. #6
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok in the head of my css i got this:

    <style>
    img
    {
    position:absolute;
    left:50px;
    top:50px;
    z-index:-1;
    }
    </style>

    but its still not showing
    Animated Chatrooms - www.121chatrooms.net

  7. #7
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    A Z index of -1 will put it behind other elements. You need a higher number for it to be infront of everything. Try a z index of 1 or 2.

    You probably want to set this property for the whole div, not just the image. So you should have:

    HTML Code:
    <style>
    #mypopup
    {
    position:absolute;
    left:50px;
    top:50px;
    z-index:2;
    }
    </style>
    Cheers
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  8. #8
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm still not working
    Animated Chatrooms - www.121chatrooms.net

  9. #9
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mike4x4s View Post
    hmm still not working
    sorry, i just edited my post above. check again.
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  10. #10
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nothing and at bottom of ie it says done but errors on page
    Animated Chatrooms - www.121chatrooms.net

  11. #11
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you also change the inline css that you have on the original div?

    Currently it reads:

    HTML Code:
    <div id='mypopup' name='mypopup' style='position: relative; width: 179px; height: 36px; display: none;'>
    <img src="images/membersonlymessage.gif">
    </div>
    but you'll need to remove the positioning from it, since you're already declaring an absolute position in your head CSS. Unfortunately, your inline CSS will override it. SO, best thing is remove all CSS inline, so you only have:

    HTML Code:
    <div id="mypopup" name="mypopup">
    <img src="images/membersonlymessage.gif">
    </div>
    Then for your head css:

    HTML Code:
    <style type="text/css">
    #mypopup
    {
    position:absolute;
    left:50px;
    top:50px;
    z-index:2;
    width: 179px;
    height: 36px;
    display: block;
    }
    </style>
    Let us know if this works for you.

    Notice also that I set the display property to "block", so it's not hidden while you test this. I assume you'll later be using javascript to switch between hidden and block?
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  12. #12
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm i attached a screenshot that image on the right is supposed to overlap the frame on the left but i cant position it infront

    Animated Chatrooms - www.121chatrooms.net

  13. #13
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show on your screenshot where it should appear?

    One thing I would say, that if it's not appearing where you want it to, even though you have specified an absolute position, could it be because you have nested the div inside another (or several) divs?
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  14. #14
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am trying to get the image on the right to overlap the center of the 2 users in the window, they are both in seperate frames.
    Animated Chatrooms - www.121chatrooms.net

  15. #15
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frames, yuk! But anyway, I would say that you must put the div and the CSS in the same frame that you want it to appear. I don't believe there is a way to overlay a div from one frame, over another frame.

    It way work with overlaying on to an IFRAME, though I've never tried it...
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  16. #16
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is my code to show the frames: chat frame is the 1 on the left and function1 is the one on the right

    <iframe src="startavatarselect.php" name="chatframe" scrolling="no" frameborder="no" align="left" height = "100&#37;" width = "100%">
    </iframe>
    <iframe name="function1" scrolling="no" frameborder="no" align="left" height = "500" width = "500">
    </iframe>
    Animated Chatrooms - www.121chatrooms.net

  17. #17
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive moved the frames together but when i load the page i only see 1 frame not both
    Animated Chatrooms - www.121chatrooms.net

  18. #18
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well its only an image i want displayed on the parent frame is there another code, so when the page loads it loads an image on top of everything else in its parent frame
    Animated Chatrooms - www.121chatrooms.net

  19. #19
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really need to see the whole thing live in a browser to make any further comment. Do you have it online?
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  20. #20
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry its not possible to go online at this stage, hmm was thinking is it possible to load a floating iframe over another iframe then close the floating one after a few seconds automaticly
    Animated Chatrooms - www.121chatrooms.net

  21. #21
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried it on my system. I can successfully overlay a DIV on to an IFRAME.
    So, if it's not working for you, then you must be implementing it incorrectly.
    You'll need to post up the code.

    Here's my test page, by the way:

    HTML Code:
    <!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=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #mypopup
    {
    position:absolute;
    left:50px;
    top:50px;
    z-index:2;
    width: 179px;
    height: 36px;
    display: block;
    border:1px #000000 solid;
    background-color:#990000;
    }
    #mypopup2
    {
    position:absolute;
    left:330px;
    top:50px;
    z-index:2;
    width: 179px;
    height: 36px;
    display: block;
    border:1px #000000 solid;
    background-color:#0033CC;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="mypopup">This is a popup</div>
    <div id="mypopup2">This is another popup</div>
    <iframe src="embedded.html" width="300" height="350"></iframe>
    <iframe src="embedded2.html" width="300" height="350"></iframe>
    </body>
    </html>
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  22. #22
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    with the alert function it appears over the top of everything, isnt there a simple way to show an image on top of everything instead of an alert:

    Animated Chatrooms - www.121chatrooms.net

  23. #23
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ill try your code i think it might work
    Animated Chatrooms - www.121chatrooms.net

  24. #24
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    hmm its still not overlapping the other frame
    Animated Chatrooms - www.121chatrooms.net

  25. #25
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you post the code that you used? :-)
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!


Bookmarks

Posting Permissions

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