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

Archived

Browse

Activity

Important Information