Announcement

Collapse
No announcement yet.

Iframe Containment within parent webpage

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Iframe Containment within parent webpage


    Hi again folks. Im a little stuck on containing an iframe within the webpage that it is placed within.

    I wish to drag the iframe around but i at the moment can drag the iframe out of the screen and when i go below the screen or out of bounds to the right the screen generates white space instead of not allowing the iframe to pass the edge. So my question is what would be the right approach taking into concideration the coding below...

    I amagine that it would be jscript issue , but im not very good with jscript and the little script within this code is copied from the web in the 1st place.....

    I have looked around on the internet and have found that i need to set attributes in the jscript but i cannot code it myself as i have no idea where to start..

    If anybody could provide me a little help i would be most greatfull and you would save me alot of time and frustration that i have allready been through trying to understand jscript and how to attribute the containment.

    Thanks in advance to anybody kind enough to offer me a solution....


    Here is the coding....




    Code:

    var selected = null, // Object of the element to be moved x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element // Will be called when user starts dragging an element function _drag_init(elem) { // Store the object of the element which needs to be moved selected = elem; x_elem = x_pos - selected.offsetLeft; y_elem = y_pos - selected.offsetTop; } // Will be called when user dragging an element function _move_elem(e) { x_pos = document.all ? window.event.clientX : e.pageX; y_pos = document.all ? window.event.clientY : e.pageY; if (selected !== null) { selected.style.left = (x_pos - x_elem) + 'px'; selected.style.top = (y_pos - y_elem) + 'px'; } } // Destroy the object when we are done function _destroy() { selected = null; } // Bind the functions... document.getElementById('draggable-element').onmousedown = function () { _drag_init(this); return false; }; document.onmousemove = _move_elem; document.onmouseup = _destroy; <!DOCTYPE html> <html> <script src="modernizr.js"></scriptsrc="phone.mp3" starttime="60" width="0" height="0"> </embed> <head> <meta name="fl-verify" content="badbe59c5dd92ad1213f1d19eb9726d2"> <style type="text/css"> #back{ position:absolute; top:0px; left:0%; background-size: 100%; 100%; body { background-size: cover; body:before { content: (webapp1.png) display:none; } } </style> } </style> <!-- Facebook Pixel Code --> <meta charset="UTF-8"> <title>linkmywebsite.com</title <link href="https://plus.google.com/101382907613027910897" rel="publisher" /> <meta name="robots" content="link a website, link my website, advertisement, advertisment linking , promote my website , premote my site> <meta content=" charset=UTF-8"> <meta name="keywords" content="advertise my website , advertising , advertise , link my website , link my webpage , advertise online ,free advertising , free ads , free advert"> <meta name="description" content="advertise my website , advertising , advertise , link my website , link my webpage , advertise online ,free advertising , free ads , free advert"> <style type="css/text"> </style> <script type="text/javascript" async defer src="https://apis.google.com/js/platform.js?publisherid=101382907613027910897"> </script> </head> <div> <img id="back" alt="webapp1.png" src="webapp1.png"> </div> <!--[if (gt IE 9)|!(IE)]><!--> <body> <audio> <source src="click.mp3"> </audio> <script type="text/javascript" src="sound-mouseover.js"></script"sounddiv"><bgsound id="sound"></div> <div id="draggable-element" style ="position:absolute; cursor:crosshair;" > <div id="frame1" style="position:absolute; padding:100; top:485px; left:60px; z-index:99";> <font face="impact" size="5"> <style type="text/css"> b:hover{color:red;}</style> <b>ADVERTISEING</b> </font> <iframe name="frame1" src="linkpage8large.html?interframe=true" style="border:0 draggable="true" width="405" height="470" scrolling="no" horizontalscrolling="no" verticalscrolling="no" frameborder="transparent";"></iframe> </div> </div> <script type="text/javascript" src="java.js"></scriptdy of parent window end---->

    Code:
     Code:
      
     var selected = null, // Object of the element to be moved     x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer     x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element  // Will be called when user starts dragging an element function _drag_init(elem) {     // Store the object of the element which needs to be moved     selected = elem;     x_elem = x_pos - selected.offsetLeft;     y_elem = y_pos - selected.offsetTop; }  // Will be called when user dragging an element function _move_elem(e) {     x_pos = document.all ? window.event.clientX : e.pageX;     y_pos = document.all ? window.event.clientY : e.pageY;     if (selected !== null) {         selected.style.left = (x_pos - x_elem) + 'px';         selected.style.top = (y_pos - y_elem) + 'px';     } }  // Destroy the object when we are done function _destroy() {     selected = null; }  // Bind the functions... document.getElementById('draggable-element').onmousedown = function () {     _drag_init(this);     return false; };  document.onmousemove = _move_elem; document.onmouseup = _destroy;    <!DOCTYPE html> <html>  <script src="modernizr.js"></scriptsrc="phone.mp3" starttime="60"   width="0"   height="0"> </embed> <head> <meta name="fl-verify" content="badbe59c5dd92ad1213f1d19eb9726d2">        <style type="text/css">        	#back{                  				position:absolute; top:0px; left:0%; 				                 background-size: 100%; 100%;                   body {        background-size: cover; 	 	body:before {     content: (webapp1.png)     display:none; 	 } } </style> 				             }   </style>           <!-- Facebook Pixel Code -->  <meta charset="UTF-8">    <title>linkmywebsite.com</title  <link href="https://plus.google.com/101382907613027910897" rel="publisher" />   <meta name="robots" content="link a website, link my website, advertisement, advertisment linking , promote my website , premote my site>   <meta content=" charset=UTF-8">    <meta name="keywords" content="advertise my website , advertising , advertise , link my website , link my webpage , advertise online ,free advertising , free ads , free advert">   <meta name="description" content="advertise my website , advertising , advertise , link my website , link my webpage , advertise online ,free advertising , free ads , free advert">    <style type="css/text">  </style>  <script type="text/javascript" async defer   src="https://apis.google.com/js/platform.js?publisherid=101382907613027910897"> </script>  </head>     <div>  <img id="back" alt="webapp1.png" src="webapp1.png">  </div> <!--[if (gt IE 9)|!(IE)]><!-->  <body>   <audio> <source src="click.mp3"> </audio> <script type="text/javascript" src="sound-mouseover.js"></script"sounddiv"><bgsound id="sound"></div>   <div id="draggable-element" style ="position:absolute; cursor:crosshair;"  >      <div id="frame1" style="position:absolute; padding:100; top:485px; left:60px; z-index:99";>      <font face="impact" size="5">      <style type="text/css"> b:hover{color:red;}</style>    <b>ADVERTISEING</b>   </font>   <iframe name="frame1" src="linkpage8large.html?interframe=true" style="border:0 draggable="true"  width="405" height="470" scrolling="no" horizontalscrolling="no" verticalscrolling="no" frameborder="transparent";"></iframe>      </div>  </div>    <script type="text/javascript" src="java.js"></scriptdy of parent window end---->
    Last edited by mysterdee888; 06-06-2017, 04:55 PM.

  • #2
    Sorted this out.... I was actually coding java , not jquery - so i mixed the 2 up and couldnt code it right, But i eventually re-coded in jquery ...



    $(document).ready(function(){
    $('#frame1').draggable( {containment: "document" } );
    });

    Comment

    Working...
    X