www.webdeveloper.com
Results 1 to 3 of 3

Thread: Center an IFrame via Javascript

  1. #1
    Join Date
    Jun 2014
    Posts
    13

    Center an IFrame via Javascript

    I'm trying to center an IFrame I'm creating via Javascript, without having to rely on css defined outside of the script (if it's possible to define it inside of the script it's fine), and without having to re-write the whole document.

    I googled the matter and saw either HTML tags which are of no use to me in my situation (correct me if I'm wrong), or an attempt to do it by creating a div and appending the iframe to it, but it wasn't really center.

    Here's my code (just creating / removing an iframe):

    Code:
    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);
    }
    
    function closeOffers()
    {
    	document.body.removeChild(iframe);
    	
    	iframe = null;
    }

  2. #2
    Join Date
    Mar 2009
    Posts
    495
    Hopefully this will get you fixed up:

    Code:
    function doCenter(el){  //send ref to your iframe as the argument
       var w;
       w = (el.parentNode.offsetWidth - el.offsetWidth)/2;
       w = parseInt(w,10);
       el.style.marginLeft = w + 'px';
    }

  3. #3
    Join Date
    Jun 2014
    Posts
    13
    Yup, did the same thing with marginTop to center vertically as well.

    How do I have the whole thing in front of all other elements in the page? as in in a different layer?

    I tried setting position to absolute and even zIndex to a high number, but neither worked.

    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 = 200;
    }
    
    </script>
    
    </body>
    </html>

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