PDA

View Full Version : javascript dropdown over flash??



JayStang
Jun 11th, 2006, 07:19 AM
Hi guys,

I'm having a little trouble. I'm in the middle of developing a site that has a flash title bar with buttons included. I need to make the buttons also have a drop down menu, but i couldn't do this in flash do to the fact the rest of the site (right below the title bar) is just HTML which the flash would expand if i had the extra drop downs in the movie.

What i have come up with is a absolute positioned div tag that floats over the flash movie to the proper location where the button is. I used javascript to fill the div tag with a drop down menu when rolled over (basic drop down stuff). I didn't have much faith in this working due to the flash, but in fact it worked great...... but only in firefox. When displayed in IE it freaks out a little when the div is over any piece of the flash.

Attached below is a link to view what the exact problem is. As you will see the div has a red border around it just for testing purposes. Also if you try to view it in firefox the red div will be slightly miss aligned due to compatability issues between the two browsers and absolute div tags (no worries that will be fixed later on). Other then that it works flawlessly in firefox.

http://jamisondulude.com/Non_Site/pet_site/
(ignore the plan unformatted version of the drop down.. just testing right now)

Thanks guys... any help would be great. And if you have any suggestions to making this work or a completely different method let me know. I'm open to suggestions right now.

~Jamie

vwphillips
Jun 11th, 2006, 07:46 AM
see that you are using some of my code

the reason that IE has problem is that the mse over div has no content

easiest fill with blank.gif

or even use single image with map for menu hot spots, only single position required for image

JayStang
Jun 11th, 2006, 04:38 PM
Well that did work with the exception of not displaying the rollover image in the flash. But now i just realized the enitire setup with an absolute div will not work do to the fact that the site is aligned center which will move the absolute div on different resolutions. Does anyone have any suggestions here since it seems like i'll have to start from scratch?? I wonder if i could possibly call the javascript drop down in the actionscript for the rollover affect. Not sure if thats even possible.

PS. yep yep that is your code vwphillips. It seems to work the best out of what i've found. One of these day's i'll get around to writting my own but right now i'm very new to javascript. Thanks though it was a big help!

vwphillips
Jun 11th, 2006, 04:43 PM
nitire setup with an absolute div will not work do

one of the scripts you are using 'zxcPos'

is designed to return the absolute position of an object whether positioned static, relative or absolute.

so should not be a problem.

The Question is, Why Flash??

JayStang
Jun 11th, 2006, 06:50 PM
I'll give that a shot.

The reason i was saying flash is because the whole title bar including the buttons is in flash... so i was thinking if i could actually call the drop down menu from the rollover of the button itself in flash.. that would solve all problems. Before i bother messing with that thought i'm gonna work a bit with your zxcPos like you recommended.

Thanks again for the help.

vwphillips
Jun 11th, 2006, 10:21 PM
not sure how large the flash file is

but the onlt 'clever' thing I noticed was the button mouseover gradient

so did this

many of the functions are required for the menu


<!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>
<script type="text/javascript">
<!--
// Button Color Change (11-June-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk


var zxcOOPCnt=0;

function zxcFillButton(zxcid,zxccol1,zxccol2,zxcspd){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj){ return; }
if (!zxcobj.oopbut){ zxcobj.oopbut=new zxcOOPBut(zxcobj,zxccol1,zxccol2,zxcspd); }
zxcAddEvt(zxcobj,'zxcButMseOver','mouseover');
zxcAddEvt(zxcobj,'zxcButMseOut','mouseout');
zxcobj.set=true;
}

function zxcButMseOver(zxce){
if (zxcCkEventObj(zxce)){ clearTimeout(this.oopbut.to); this.oopbut.over(); }
}

function zxcButMseOut(zxce){
if (zxcCkEventObj(zxce)){ clearTimeout(this.oopbut.to); this.oopbut.out(); }
}

function zxcOOPBut(zxcobj,zxccol1,zxccol2,zxcspd){
zxcspd=zxcspd||2;
this.ary=[zxccol1,zxccol2];
zxcdiv=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:zxcspd+'px', height:'100%',backgroundColor:zxccol1});
zxcobj.appendChild(zxcdiv);
for (var zxc0=0;zxc0<zxcobj.offsetWidth/zxcspd;zxc0++){
this.ary[zxc0+2]=zxcdiv.cloneNode(true);
zxcobj.appendChild(this.ary[zxc0+2]);
zxcStyle(this.ary[zxc0+2],{left:(zxc0*zxcspd)+'px'});
}
this.ref='zxcOOPBut'+zxcOOPCnt++;
window[this.ref]=this;
this.to=null;
this.cnt=2;
}

zxcOOPBut.prototype.over=function(){
if (this.cnt<this.ary.length){
this.ary[this.cnt].style.backgroundColor=this.ary[1];
this.cnt++;
this.setTimeOut('over();',10);
}
}

zxcOOPBut.prototype.out=function(){
if (this.cnt>2){
this.cnt--;
this.ary[this.cnt].style.backgroundColor=this.ary[0];
this.setTimeOut('out();',10);
}
}

zxcOOPBut.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}


function zxcStyle(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

function zxcCkEventObj(zxce){
var zxceobj;
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.type=='mouseout'){ if (zxce.relatedTarget) zxceobj=zxce.relatedTarget; else if (zxce.toElement) zxceobj=zxce.toElement; }
if (zxce.type=='mouseover'){ if (zxce.relatedTarget) zxceobj=zxce.relatedTarget; else if (zxce.fromElement) zxceobj=zxce.fromElement; }
while (zxceobj.parentNode){
if (zxceobj.set){ return false; }
zxceobj=zxceobj.parentNode;
}
return zxceobj;
}

//-->
</script></head>

<body onload="zxcFillButton('Tst1','#FFFFCC','#FFCC66',1);zxcFillButton('Tst2','#CCFFFF','#66FFFF',5);">
<div id="Tst1" style="position:relative;overflow:hidden;width:100px;height:30px;border:solid black 1px;" >
<div style="position:absolute;z-index:1;width:100%;left:0px;top:5px;height:30px;text-align:center;" >Button One</div>
</div>

<div id="Tst2" style="position:relative;overflow:hidden;top:5px;width:100px;height:30px;border:solid black 1px;text-align:center;" >
<div style="position:absolute;z-index:1;width:100%;left:0px;top:5px;height:30px;text-align:center;" >Button Two</div>

</div>




</body>

</html>

felgall
Jun 12th, 2006, 12:41 AM
The following are effectively assigned a z-index of infinity and therefore always appear in front of everything else when they are visible at all.

Select lists in Internet Explorer
Iframes in Opera
Flash in most browsers.

The only way to get something to appear in front of any of those things is to hide them while the overlay is displayed.

vwphillips
Jun 12th, 2006, 08:33 AM
Select lists in Internet Explorer
see ToolTipMessageClip/ToolTipMessageClip.htm (http://www.vicsjavascripts.org.uk/ToolTipMessageClip/ToolTipMessageClip.htm)

Iframes in Opera
if you say so

Flash in most browsers.
not including IE 6 + Moz FF and others

& the point is that there is no need for flash in this application