embeding flash menu

**walshy** · 09-15-2006, 04:06 AM

g'day
i have a menu that i have created in flash and i would like to make it float on my website. so it will follow the user when they scroll up and down.

also wondering if it is possible in css would it be compatible with all browsers

regards Walshy

**BLiZZaRD** · 09-15-2006, 02:00 PM

Meh. I told him to post here about this. He has the menu in a separate file and needs to make this file float. I know you can float items using CSS, just not sure how.

I know Twey helped me with a similar problem a while back, I just don't know CSS well enough to even start with this one.

**sandman** · 09-17-2006, 03:13 PM

While I've never done this, I would assume you set a #div to the dimensions of your flash movie. embed your flash as you would notmally, but set it in the flow of the document.

simplified html & css:

Code:

<html>
<head><title>My Page</title></head>
<body>
<div id="wrapper">My Header
<div id="flashmenu"><object src="flashmenu.swf"></div>
My Content
</div>
</body>
</html>

#wrapper {
width: 800px;
margin: 0 auto;
background-color: gray;
}

#flashmenu {
width: 400px;
height: 200px;
}

I am not sure if CSS will clip if drop menu exceeds height set, or if content reflows. My gut tells me it wont, but I haven't ever done this. Hope this helps anyway.
Rich

**walshy** · 09-18-2006, 12:00 PM

nah mate didn't have any luck with that

regards walshy

**BLiZZaRD** · 09-19-2006, 08:31 PM

I mentioned I am not good at this stuff... but I did some research and came up with at least a starting point for you...

You will need to utilize JS and CSS to get this to work in all (most) browsers.

In the <head> section put this:

Code:

<script type="text/javascript"><!--
 function floatMenu(){
  if(!document.getElementById) return;
  var menu = document.getElementById('menu');
      menu.style.top = ((!document.all)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:  document.body.scrollTop)+"px";
 }
window.onscroll = floatMenu;
//--></script>
<style type="text/css"><!--
#menu {
 position:fixed;
 top: 0px;
 left:0px;
}
--></style>

In the <body> section put this:

Code:

<div id="menu">
//Here you will need to embed your menu swf file...
<OBJECT classid="clsid:Q768KL98E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="600" HEIGHT="600" id="SWFname" ALIGN="">
 <PARAM NAME=movie VALUE="SWFname.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED src="SWFname.swf" loop=false quality=high bgcolor=#000000  WIDTH="600" HEIGHT="600" NAME="SWFname" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>
</div>

Not sure how this will work, if at all... but it should be a starting point at least.

NOTE: When you publish your menu swf the HTML page will have the <OBJECT>.......</OBJECT> crap you see above. Copy yours and paste it over this one of mine...
Also note, all files MUST be uploaded into the same directory, a little security feature of Flash...

**walshy** · 09-19-2006, 11:29 PM

thanks for the help, but i managed to find a way to do it css. you tell the object to have an absolute position and a overflow of 100% and the object will scroll nicely down the page no jerky action like with javascript.
ill give you the code cause i don't know what i'm talking about

Code:

html {background:rgb(123,187,221);}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:rgb(123,187,221);}
body {font-family: georgia, serif; font-size:16px;}

and

Code:

#menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#aaa; color:#fff;}

just bung those two sucks in your css sheet. you can custimize it i think all you need is the

Code:

height:100%; overflow-y:auto

in the body and then

Code:

* html #menu {position:absolute;}

for what ever you want to stay still

anyway you go to my site and have a gander at www.hubla.memebot.com
just a warning it is no where near finished yet but ill get there
so thanks goes out to everyone that helped

regards Walshy

**blm126** · 09-20-2006, 01:17 AM

Code:

* html #menu {position:absolute;}

The above will NOT work in IE7, nor will the position fixed. Conditional comments are the only safe route here.

Code:

<!--[if IE]>
<style type="text/css">
#menu {position:absolute;}
</style>
<![endif]-->

**walshy** · 09-20-2006, 01:57 AM

where does that peice of code go

regard Walshy

**jscheuer1** · 09-20-2006, 04:08 AM

Originally Posted by walshy

where does that peice of code go

regard Walshy

In the head of the page.

**BLiZZaRD** · 09-20-2006, 07:14 AM

Nice job! Site looks good too, going to bookmark it to look again when it is complete!

Thread: embeding flash menu

Thread Tools

Search Thread

embeding flash menu

its right

ok

Bookmarks

Bookmarks

Posting Permissions