...

View Full Version : help please



KevinKeegan
06-15-2006, 01:39 PM
Hi, i'm having a problem with getting my iframes and menu to work at the same time. The story's like this ;

First of all i had an iframe and mouseover menu working, there was 1 main page, 1 iframe which all the links loaded into. But some were different size's, so i decided to add the code so that the iframe would change size depending on the page it was loading. But the links on the drop down menu are in javascript in the head content of my html, and the guide
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
shows you at the bottom how to get your links to load pages up in that iframe with the adjustable size. So i did this for one of the links to test it out. Now the menu doesnt work.

To help you assist me, here are the webpages...

This one is fine, but without the resizing iframe, this is the original (put your mouse over the country's to see the menu in action) ;
http://gd-football.x82.net/
But this one is the one where i tried to get the new iframe resize to work with the menu
http://gd-football.x82.net/england2.html

and as you can see the mouseovermenu you saw in the first link doesnt appear in the 2nd.

Here are the scripts, the first one being for the dropdown menu and the 2nd so the iframe autoresizes. And as you'll see at the top of menu 1 the first link, which is changed so that it should open in that iframe and resize, but it's because that link is like that that the dropdownmenu doesnt work



<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="javascript:loadintoIframe('myframe', 'http://www.zymic.com')">Free Templates</a>'
menu1[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/premtable.html" target="myframe">League Table</a>'
menu1[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/premplayers.html" target="myframe">Player Tables</a>'
menu1[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/premfixtures.html" target="myframe">Fixtures</a>'
menu1[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/premmatches.html" target="myframe">Matches</a>'
menu1[6]='<a href="http://gd-football.ipbdatabase.co.uk/data/preminjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="/italy.html" target="myframe">Clubs</a>'
menu2[1]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieatable.html" target="myframe">League Table</a>'
menu2[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieaplayers.html" target="myframe">Player Tables</a>'
menu2[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieafixtures.html" target="myframe">Fixtures</a>'
menu2[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieamatches.html" target="myframe">Matches</a>'
menu2[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieainjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="/spain.html" target="myframe">Clubs</a>'
menu3[1]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligatable.html" target="myframe">League Table</a>'
menu3[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligaplayers.html" target="myframe">Player Tables</a>'
menu3[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligafixtures.html" target="myframe">Fixtures</a>'
menu3[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligamatches.html" target="myframe">Matches</a>'
menu3[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligainjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="/">Clubs</a>'
menu4[1]='<a href="/">League Table</a>'
menu4[2]='<a href="/">Player Tables</a>'
menu4[3]='<a href="/">Fixtures</a>'
menu4[4]='<a href="/">Matches</a>'
menu4[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 5
var menu5=new Array()
menu5[0]='<a href="/">Clubs</a>'
menu5[1]='<a href="/">League Table</a>'
menu5[2]='<a href="/">Player Tables</a>'
menu5[3]='<a href="/">Fixtures</a>'
menu5[4]='<a href="/">Matches</a>'
menu5[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 6
var menu6=new Array()
menu6[0]='<a href="/">Clubs</a>'
menu6[1]='<a href="/">League Table</a>'
menu6[2]='<a href="/">Player Tables</a>'
menu6[3]='<a href="/">Fixtures</a>'
menu6[4]='<a href="/">Matches</a>'
menu6[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 7
var menu7=new Array()
menu7[0]='<a href="/">Clubs</a>'
menu7[1]='<a href="/">League Table</a>'
menu7[2]='<a href="/">Player Tables</a>'
menu7[3]='<a href="/">Fixtures</a>'
menu7[4]='<a href="/">Matches</a>'
menu7[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 8
var menu8=new Array()
menu8[0]='<a href="/">Clubs</a>'
menu8[1]='<a href="/">League Table</a>'
menu8[2]='<a href="/">Player Tables</a>'
menu8[3]='<a href="/">Fixtures</a>'
menu8[4]='<a href="/">Matches</a>'
menu8[5]='<a href="/">Inj & Sus</a>'

var menuwidth='165px' //default menu width
var menubgcolor='gold' //menu bgcolor
var disappeardelay=50 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
<script type="text/javascript">

/***********************************************
* IFrame SSI script II- &#169; Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>



Please help me asap.

Thank you :)

vwphillips
06-15-2006, 08:45 PM
you will need to change the urls


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div style="width:100px;background-color:red;" onMouseover="dropdownmenu(this, event, menu1,100)" >bbbb</div>
<br />
<br />
<br />

<iframe name="myframe" src="PlaywithTime.htm" id="myframe" width="400" height="499" onload="LoadIFrame(this)"></iframe>
<div id="dropmenudiv" style="position:absolute;visibility:hidden;" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>


<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="javascript:loadintoIframe(\'myframe\',\'StartEndDate.htm\')">Freeee Templates</a>'
menu1[1]='<a href="http://gd-football.ipbdatabase.co.uk/data/premtable.html" target="myframe">League Table</a>'
menu1[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/premtable.html" target="myframe">League Table</a>'
menu1[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/premplayers.html" target="myframe">Player Tables</a>'
menu1[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/premfixtures.html" target="myframe">Fixtures</a>'
menu1[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/premmatches.html" target="myframe">Matches</a>'
menu1[6]='<a href="http://gd-football.ipbdatabase.co.uk/data/preminjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="/italy.html" target="myframe">Clubs</a>'
menu2[1]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieatable.html" target="myframe">League Table</a>'
menu2[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieaplayers.html" target="myframe">Player Tables</a>'
menu2[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieafixtures.html" target="myframe">Fixtures</a>'
menu2[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieamatches.html" target="myframe">Matches</a>'
menu2[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/serieainjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="/spain.html" target="myframe">Clubs</a>'
menu3[1]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligatable.html" target="myframe">League Table</a>'
menu3[2]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligaplayers.html" target="myframe">Player Tables</a>'
menu3[3]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligafixtures.html" target="myframe">Fixtures</a>'
menu3[4]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligamatches.html" target="myframe">Matches</a>'
menu3[5]='<a href="http://gd-football.ipbdatabase.co.uk/data/laligainjsus.html" target="myframe">Inj & Sus</a>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="/">Clubs</a>'
menu4[1]='<a href="/">League Table</a>'
menu4[2]='<a href="/">Player Tables</a>'
menu4[3]='<a href="/">Fixtures</a>'
menu4[4]='<a href="/">Matches</a>'
menu4[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 5
var menu5=new Array()
menu5[0]='<a href="/">Clubs</a>'
menu5[1]='<a href="/">League Table</a>'
menu5[2]='<a href="/">Player Tables</a>'
menu5[3]='<a href="/">Fixtures</a>'
menu5[4]='<a href="/">Matches</a>'
menu5[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 6
var menu6=new Array()
menu6[0]='<a href="/">Clubs</a>'
menu6[1]='<a href="/">League Table</a>'
menu6[2]='<a href="/">Player Tables</a>'
menu6[3]='<a href="/">Fixtures</a>'
menu6[4]='<a href="/">Matches</a>'
menu6[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 7
var menu7=new Array()
menu7[0]='<a href="/">Clubs</a>'
menu7[1]='<a href="/">League Table</a>'
menu7[2]='<a href="/">Player Tables</a>'
menu7[3]='<a href="/">Fixtures</a>'
menu7[4]='<a href="/">Matches</a>'
menu7[5]='<a href="/">Inj & Sus</a>'

//Contents for menu 8
var menu8=new Array()
menu8[0]='<a href="/">Clubs</a>'
menu8[1]='<a href="/">League Table</a>'
menu8[2]='<a href="/">Player Tables</a>'
menu8[3]='<a href="/">Fixtures</a>'
menu8[4]='<a href="/">Matches</a>'
menu8[5]='<a href="/">Inj & Sus</a>'

var menuwidth='165px' //default menu width
var menubgcolor='gold' //menu bgcolor
var disappeardelay=50 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
dropmenuobj.style.width=menuwidth+'px';
dropmenuobj.style.backgroundColor=menubgcolor;
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<script type="text/javascript">
function LoadIFrame(obj){
if (obj.contentDocument && obj.contentDocument.body.offsetHeight) {
obj.style.height=(obj.contentDocument.body.offsetHeight)+'px';
}
else if (obj.Document && obj.Document.body.scrollHeight){ //ie5+ syntax
obj.style.height=(obj.Document.body.scrollHeight+50)+'px';
}
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

</script>
</body>

</html>

KevinKeegan
06-15-2006, 08:51 PM
thank you very much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum