|
HTML - Drop Down Menu Not Visible While Using Flash
Hi All,
I have one problem in HTML, I have a HTML file with drop down menu and a flash banner in bottom , while mouse over the menu the drop down is not visible in the top of the flash banner its going back side, can any one help me out how to bring the drop down menu top of the flash banner. Here is the sample link where I have the problem http://vivek192.5gbfree.com/index.html ____________________________________ sport book betting steroid Similar TutorialsI have a youtube video on front of the school website and a horizontal dropdown menu just slightly above it. What is happening is when i hover over a menu item the drop down menu is going under the youtube video. But this is only happening on IE but not firefox http://www.rosebridge.wigan.sch.uk Does anyone have a idea? Where I have a flash drop down nav bar on top of html it is disabling the links that are underneath the flash nav bar. In firefox even the links in the nav bar do not work where they overlap. HELP!!!! Much appreciative ...Cory Here is the link... http://209.40.102.3/cory/PSBrokerage.asp I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hey guys I'm really stumped I'm just starting this project and so far all I have is a javascript/css drop down menu I'm tweaking and a flash slide show. Right now I'm having 2 problems. #1 my menus are getting overlapped by the flash, I keep trying a z-index on the div I have in the flash, but it isn't working. #2 I'm having problems positioning the div which the flash is contained by. For example I tried centering the div with css and it was to no avail. I had to put <center></center> around the whole div to achieve this. If anyone could help that would be amazing, check out www.atlanta-web.com Thanks, ive currently built an html website with a flash menu and would like to use it with iframes so that the menu doesn't have to refresh with page.. unfortunatelly this is my first time working with iframes and i am not sure what code to put into my flash buttons to call the page into the frame. I pretty much understand how to use iframes altogether, just not with flash as well! you can view the website he www.exsystems.co.uk (mind the flash embed, im still working on that too!) if someone would share some knowledge on this i would be very greatful! Hello, I would like to get the website menu to appear above the flash object. http://www.greekconcierge.com/weddings.php Currently when you click on "Our Services" this is hidden below the flash image object. many thanks, andy I have a menu with coffie cup flash menu builder. And i have frames HTML. I know this question as be asked 10000 Times. How do i get the flash menu to go to my main frame page. It keeps opening in its own window a new window or taken up the hole window with out the frames. I tryed eveything including (release) { getURL ("main.html", "main"); } But it still doesnt work but i have no idear how to get this to work I have a Flash menu in a top frame, with a bottom frame that holds the content. Some of the content is large and needs to be scrolled. I would like the site to appear frameless, so the menu scrolls along with the content (so if you scrolled all the way down, you wouldn't see the menu). I initially tried putting it all into another frame, but didn't have much luck with that. I'm open to any suggestions. Let me know if I need to clarify anything. Thanks. Website: http://the1337arcade.com/pt/ Problems: I Got the Dropdown Menu Fixed like i want it, The only problem is the 1px at the end of the navigation, if i add a extra px to the padding it drops that and makes the last button go down to the next row... i want it all to be in the same line HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Pine Tree High School - Theatre Department</title>
<meta name="description" content="The Homepage for the Pine Tree High School Theatre Department.">
<meta name="keywords" content="Pine Tree High School,Pine Tree High School Theater,Theatre,Anup Patel,The1337Arcade">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body style="background-image: url('bg.jpg')">
<table align="center" cellpadding="0" cellspacing="0" class="container">
<tr><td><div id="header"><a href=index.htm><img border=0 src="logo.jpg" class="logo" alt="PTHS Theatre"></a></div></td></tr>
<tr><td>
<table align="center" cellpadding="0" cellspacing="0" class="main">
<tr><td>
<ul id="sddm">
<li><a target=I1 href="home.htm">Home</a></li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Theatre Productions</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a target=I1 href="#">2008-2009</a>
<a target=I1 href="#">2007-2008</a>
<a target=I1 href="#">2006-2007</a>
<a target=I1 href="#">2005-2006</a>
</div>
</li>
<li><a target=I1 href="about.htm">About The Director</a></li>
<li><a target=I1 href="contact.htm">Contact The Theatre </a></li>
<li><a target=I1 href="contact.htm">Links</a></li>
<li><a target=_blank href="http://ptisd.org">District Home Page</a></li>
</ul>
<div style="clear:both"></div>
</td></tr>
<tr><td>
<center><DIV STYLE="margin-top:10px;">
<iframe name="I1" width="100%" height="400" src="home.htm" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<br>
</p>
</td></tr><tr><td>
<div id="blackfooter">
<span style="float:right;">
p: 903.295.5031. e: <a href=mailto:mgoodding@ptisd.org>
<span style="text-decoration: none"><font color="#FFFFFF">mgoodding@ptisd.org</font></span></a><font color="#FFFFFF"> </font>
</span>
1001 Fairmont Street | Longview, Texas 75605</div>
</td></tr>
</table>
</td></tr>
<tr><td>
</td></tr>
</table>
</body>
</html>
CSS: Code: /* CSS */
html { height: 100%; margin-bottom: 1px;
}
body {
margin: 15px 0px 15px 0px;
background: url(/images/bg.jpg);
}
table.container {
width: 750px;
background: #FFFFFF;
border: solid 1px #000000;
}
table.main {
width: 700px;
background: #FFFFFF;
border: solid 1px #000000;
}
ul { margin-top: 5px; }
/* header */
#header img.logo {
margin: 20px 0px 0px 20px;
border: 0;
}
#header .login {
margin: 20px 25px 0px 0px;
width: 198px;
height: 20px;
float: right;
font-size: 13px;
}
#header .login form {
margin: 0px;
}
/* main nav */
#nav {
width: 100%;
background: #000000;
color: #000000;
text-align: center;
line-height: 25px;
}
#nav a {
margin: 0px 15px 0px 15px;
color: #FFFFFF;
text-decoration: none;
}
#nav a:hover {
margin: 0px 15px 0px 15px;
color: #0026b9;
text-decoration: none;
}
/* footer */
#blackfooter {
width: 100%;
background: #000000;
font-size: 13px;
color: #FFFFFF;
text-align: left;
line-height: 23px;
}
#footer {
width: 700px;
background: #FFFFFF;
margin: 10px 0px 10px 25px;
font-size: 11px;
color: #444444;
text-align: center;
}
#footer a {
margin: 0px 3px 0px 3px;
color: #444444;
text-decoration: underline;
}
#sddm
{ margin: 0;
padding: 0;
z-index: 10}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 00px 0 0;
padding: 4px 17px 4px 16px;
width: auto;
background: #000000;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #0026b9}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
border: 0px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 0px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #000000;
color: #FFFFFF;
font: 11px arial}
#sddm div a:hover
{ background: #0026b9;
color: #000}
Thanks for all Help.. Hello, this is my first message here and I hope it will be for all you experts a serious one. This is my page I am developing right now: http://www.travelevros.gr/main.htm The page has one IFrame that loads its subpage of the flash menu. Please dont tell me to get rid of it, I need that IFrame. The flash menu it is placed outside of that IFrame of course, its container is the main page main.htm. In IE, everything works ok and the menu (as transparent) drops down nicely and the user can click the submenus alright, even if they are above the IFrame area. But with Firefox Mozilla, even though the menu drops down nicely too, the user cannot click the submenus, not even the links inside the IFrame page (that covered from the swf rectangular region). So there is a confusion in the Mozilla browser, where to send the click events: to the flash menu or the html page located in the IFrame. What should I do to make this work with Firefox Mozilla? I've tried some solutions i've found in Google, like entering the "z-index" property, placing the flash menu and/or IFrame inside a DIV layer, but I couldnt make it to work. The submenus still cannot be clicked when they drop over the IFrame content. As I said, in IE works fine. I've found somewhere else that the tip for this problem is to place the menu in a DIV and make that DIV load AFTER the IFrame is displayed, at the end of the page, thing that I dont have the knowledge to do. If this is right solution, can somebody help me doing this? On the other hand, if there is some other solution then I am ready to listen. Thank you very much for your time. p/s Check the first menu on the left, it works in Mozilla too, but thats because this region its outside the IFrame. The other menu choices falls down to the IFrame region, so the problem is with the layer placement. I have the following drop down menu. HTML Code: <form> <select name="menu" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="no link no action">title of menu</option> <option value="url 1">link 1</option> <option value="url 2">link 2</option> <option value="url 3">link 3</option> <option value="url 4">link 4</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> Here is a screen capture of what the menu looks like. It's at this point I want no action to take place when "go" is clicked. As it is now (above code) it refreshes current page. My question is how do I change this so that the first "option" has no action when chosen and then "go" is clicked. As is is right now it refreshes the current page being that between the quotes <option value=" HERE ">title of menu</option> there isn't a link because I don't want this option to do anything. Basically when the drop down menu shows "title of menu" and I click on "go" I want nothing to happen instead of a refresh. I want to create a drop down bar using images, like the one on this page: http://www.teamtalk.com/ I already have the images which I want to use. I have scoured the internet for how to do it and tried many, many tutorials but I don't understand how to do it. Please help! Dear HTML Experts, I need your help, I would love to have a dropdown menu. Which drop out of a image? Like when your mouse is at the image, the menu shows up vertically? Thanks Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array Hey, Kinda new to this so bare with me. Im using Trellian web page to do some updating on our companies' website and they just asked me to make up a sort of parts catalog for our inventory we have here. I thought the best way for the person visiting the website to find the parts they need is to have drop down menus.Ive been trying so hard to make this but i just keep failing. This is what i want to do. The first one would ask "Make..." they would click that and scroll down the list to find the Make of their machine. Once they click their machine, another drop down menu would appear underneath of that asking the model and the menu would contain all the models associated with the make of the machine. And i want to have another one appear under that once they click on the model. Is there anything or any place where i can find a nice tutorial on how to make this dream come true.....? something like this http://www.wengers.com/Parts/TractorParts.aspx Hi, Basically i have an index page with two frame, a navigation frame for the top and a main frame for the information, i have a drop down menu in the navigation frame. But the problem is, the drop down menu cant all bee seen when it drops over the main frame. Does anyone know a solution to this problem, i tried using an Iframe instead of normal frames, but that leaves a big gap between the end of the drop down menu and the start of the information. I have also tried using the <div> tags this also didnt help, i was wondering if there is a way to set the order in which the frames are displayed,so the navigation frame is displayed over the main frame. Any help would be great. Thanks for your time. mmarab. Id like to do a drop down menu similar to there's... is there any simple way of doing this?! I have a drop down menu on my page, and I want to change the background color of the box from white to match the rest of the page, how do I do this. Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Welcome to my Home Page</title>
<script language="JavaScript" type="text/javascript">
////The source for this script came from http://allwebco-templates.com/support/S_menus_dropdown.htm////
///For the Game,I changed the back ground picture. I realize it's not JS///
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
<!--
/// The JS below is for the date and time. and i got the sorce from http://www.re-es.org/ ///
var day_names = new Array(7)
day_names[0] = "Sunday"
day_names[1] = "Monday"
day_names[2] = "Tuesday"
day_names[3] = "Wednesday"
day_names[4] = "Thursday"
day_names[5] = "Friday"
day_names[6] = "Saturday"
var month_names = new Array(12)
month_names[0] = "January"
month_names[1] = "February"
month_names[2] = "March"
month_names[3] = "April"
month_names[4] = "May"
month_names[5] = "June"
month_names[6] = "July"
month_names[7] = "August"
month_names[8] = "September"
month_names[9] = "October"
month_names[10] = "November"
month_names[11] = "December"
date_now = new Date()
day_value = date_now.getDay()
date_text = day_names[day_value]
month_value = date_now.getMonth()
date_text += " " + month_names[month_value]
date_text += " " + date_now.getDate()
date_text += ", " + date_now.getFullYear()
minute_value = date_now.getMinutes()
if (minute_value < 10) {
minute_value = "0" + minute_value
}
hour_value = date_now.getHours()
if (hour_value == 0) {
greeting = "Good Morning "
time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM"
}
else if (hour_value < 12) {
greeting = "Good Morning "
time_text = " at " + hour_value + ":" + minute_value + " AM"
}
else if (hour_value == 12) {
greeting = "Good Afternoon "
time_text = " at " + hour_value + ":" + minute_value + " PM"
}
else if (hour_value < 17) {
greeting = "Good Afternoon "
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
else {
greeting = "Good Evening"
time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
document.write(greeting + " Today is " + date_text + time_text)
//-->
</script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p>
<ul id="nav">
<li><form action="#" method="post">
<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">
<option value="index.html" selected>Home</option>
<option value="scripts_developed.html">Scripts Developed</option>
<option value="best_practices.html">Best practices for JavaScript coding</option>
<option value="ajax.html">AJAX</option>
<option value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option>
</select>
</form>
</li>
</ul>
<div id="content"></div>
</div>
<table width="1050" border="0" align="center">
<tr>
<td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p>
<p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
So, I am new to html, but I want my site to have a drop down menu, much like that of IBM's. http://www.ibm.com/us/en/sandbox/ver2/ Is this even possible with HTML? If so, where do I start? Regards, YahtzeeFish Hi all, I can't for the life of me get the submenus to work. Here is my basic code and style sheet. How and where do I get a sub menu working on the navigation to display when you hover over it. I.E. hovering over 'News' displays sub menu of 'today', 'tomorrow'... |
|||||||