Help with iframes and divs

Dustin013 · July 15, 2008

Currently I am using the following code to load content into a side navigation bar.

I put this into the <head> section of the HTML

<script type="text/javascript">
document.write('<div id="placeholder" style="position:absolute"></div>');
var ie5=document.all && !window.opera
var ns6=document.getElementById

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which){
if (!document.all&&!document.getElementById)
return
menuobj=ie5? document.all.placeholder : document.getElementById("placeholder")
menuobj.innerHTML=which
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+rightedge-18+"px" : window.pageXOffset+eventX-menuobj.contentwidth+rightedge-18+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+bottomedge+8+"px" : window.pageYOffset+eventY-menuobj.contentheight+bottomedge-8+"px";
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY-3+"px" : window.pageYOffset+eventY-3+"px"
menuobj.style.visibility="visible"
return false;
}

function pos(){toppos=menuobj.style.top;leftpos=menuobj.style.left};

</script>


<script>
function toggleLayer( whichLayer )
//found at http://www.netlobo.com/div_hiding.html
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

<style type="text/css">
.HideMe{position:fixed;border:1px solid red;z-index:2;top:30%;overflow:auto;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
.HideMe{position:absolute;top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+screen.height*0.2 : document.body.scrollTop+screen.height*0.2);}
body{background:url(foo) fixed}
</style>
<![endif]-->



<script type="text/javascript">

document.write('<div id="SomeDiv" class="HideMe" style="position:absolute"></div>');

function hide('div','HideMe'){document.getElementById('SomeDiv').style.display='none';document.getElementById('inserted_thing_into_relative').innerHTML="";}*/
</script>

<script type="text/javascript">
var d=document //used on this page
function hide(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
	if (els.item(i).className == className){
	els.item(i).style.display="none";
	while (els.item(i).firstChild)
	els.item(i).removeChild(els.item(i).firstChild);
}
       }
      }
</script>

Down below after my <body> tag I use the following code:

			<div id="listings" style="position:relative;top:-1px;left:1%;width:100%;z-index:1;padding:5px">
				<a href="#"  onclick="inserted=document.getElementById('inserted_thing_into_relative');javascript:toggleLayer('inserted_thing_into_relative');inserted.innerHTML='<iframe src=\'tvguide.php\'   frameborder=\'no\'  style=\'width:100%;height:400px;background:white\'></iframe>'; return false"><b>Toggle Media Guide</b></a><br>
				</div>
				<div id="inserted_thing_into_relative" style="position:relative;background:white;padding:3px;display:none;top:10px;margin-bottom:5px" frameborder="false" class="HideMe">
			</div>

This will simply load up tvguide.php when the text Toggle Media Guide is clicked.

Ok, so at this point I am trying to use javascript to send a command to another DIV located on the index.php page to let a JWPlayer embed know which file to load up.

Now my problem is I can't seem to get the iframe to send information back to index.php. Any suggestions?

Maybe these is a better way to do this instead of using iframes? The only reason why I am using the above is because I have 3 pages that each create queries. I just didn't want the page to have to reload 3 times for the user to find their selected media.

Dustin013 · July 15, 2008

Ok, let me try to simplify this a bit.

I have a link on tvguide.php that is trying to communicate with a <div> in index.php.

This is the link being displayed for example by tvguide.php

<a href="#" onclick="javascript:loadNplay('http://localhost/mocha/test/video.flv', 'video', 'Author 4', 'Title 4', 'Description 4', 'http://my.domain.com/path/image4.jpg'); return false;">Video 4</a>

I need it to upload the following div located on index.php

  <div id="playercontainer" class="playercontainer">
      <a id="player" class="player" href="#">This DIV needs to get updated</a>
    </div>

Sign In

Help with iframes and divs

Recommended Posts

Dustin013

Link to comment

Share on other sites

Dustin013

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information