www.webdeveloper.com
Results 1 to 7 of 7

Thread: IFrame in a new Layer

  1. #1
    Join Date
    Jun 2014
    Posts
    13

    IFrame in a new Layer

    How do I put an iframe in a new layer in front of all other elements in the page?

    Here's my code so far:

    HTML Code:
    <html>
    <head></head>
    <body>
    
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    
    <script type="text/javascript">
    
    var iframe;
    
    window.onload = function()
    {
    	openOffers(123, 'royi', 'ohdfg345dsf');
    }
    
    function openOffers(id, username, session)
    {
    	iframe = document.createElement('iframe');
    	
    	iframe.src = 'https://www.trialpay.com/social/offers/?vic=1b931e374ab4e3347d67e142916131c9&type=payment_overlay&sid=' + id + '&id=' + id + '&username=' + username + '&session=' + session;
    	iframe.width = 585;
    	iframe.height = 600;
    	iframe.scrolling = 'no';
    	iframe.frameBorder = 0;
    	
    	document.body.appendChild(iframe);
    	
    	centerElement(iframe);
    }
    
    function closeOffers()
    {
    	document.body.removeChild(iframe);
    	
    	iframe = null;
    }
    
    function centerElement(el)
    {
       var w, h;
       
       w = (el.parentNode.offsetWidth - el.offsetWidth) / 2;
       w = parseInt(w, 10);
       
       h = (el.parentNode.offsetHeight - el.offsetHeight) / 2;
       h = parseInt(h, 10);
       
       el.style.marginLeft = w + 'px';
       el.style.marginTop = h + 'px';
       
       el.style.position = 'absolute';
       el.style.zIndex = 2;
    }
    
    </script>
    
    </body>
    </html>

  2. #2
    Join Date
    Jun 2014
    Posts
    13
    bump

  3. #3
    Join Date
    Mar 2009
    Posts
    468
    What I might suggest is:

    1. Upon window.onload create a div element which should be appended to document.body
    2. make sure the div will be transparent. Don't let any CSS give it any background color.
    3. set its position to 'absolute' with "left" being '0px' and 'top' being '0px'.
    4. set zIndex at some value greater than 1
    5. append the dynamically created iframe to that div rather than to document.body
    Last edited by Tcobb; 06-08-2014 at 04:37 PM.

  4. #4
    Join Date
    Jun 2014
    Posts
    13
    Not working, did I do it right?

    HTML Code:
    <html>
    <head></head>
    <body>
    
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text<br><br><br>
    
    <script type="text/javascript">
    
    var iframe, div;
    
    window.onload = function()
    {
    	openOffers(6457, 'somename', 'dfgknbiem');
    }
    
    function openOffers(id, username, session)
    {
    	div = document.createElement('div');
    	iframe = document.createElement('iframe');
    	
    	iframe.src = 'https://www.trialpay.com/social/offers/?vic=1b931e374ab4e3347d67e142916131c9&type=payment_overlay&sid=' + id + '&id=' + id + '&username=' + username + '&session=' + session;
    	iframe.width = 585;
    	iframe.height = 600;
    	iframe.scrolling = 'no';
    	iframe.frameBorder = 0;
    	
    	document.body.appendChild(div);
    	div.appendChild(iframe);
    	
    	centerElement(div);
    }
    
    function closeOffers()
    {
    	document.body.removeChild(iframe);
    	
    	iframe = null;
    }
    
    function centerElement(el)
    {
       var w, h;
       
       w = (el.parentNode.offsetWidth - el.offsetWidth) / 2;
       w = parseInt(w, 10);
       
       h = (el.parentNode.offsetHeight - el.offsetHeight) / 2;
       h = parseInt(h, 10);
       w = 0;
       h = 0;
       el.style.marginLeft = w + 'px';
       el.style.marginTop = h + 'px';
       
       el.style.position = 'absolute';
       el.style.zIndex = 2;
    }
    
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Mar 2009
    Posts
    468
    Try this in your code:

    Code:
    function openOffers(id, username, session)
    {
    	div = document.createElement('div');
    	iframe = document.createElement('iframe');
           //!!!!!!!!!!!!!!!!! note changes
            div.style.position = "absolute";
            div.style.top = "0px";
            div.style.left = "0px";
            div.style.zIndex = 5;
           //!!!!!!!!!!!!!!!!!!!! end changes
    //continue with original code
    You will probably need to change the function that centers the iframe as well.

  6. #6
    Join Date
    Jun 2014
    Posts
    13
    Oh you meant literally "top" and "left". Yeah I changed the centering code as well. Thanks for everything

  7. #7
    Join Date
    Mar 2009
    Posts
    468
    You are welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles