|
HTML - Pop-up/ Drop Down Problem
Hey everyone,
I want to create a menu that drops down from a button on my site. But I was hoping to be able to use button images, rather then just text for the menu. Is there any way to do this? I can make the menu like it shows in image one, I want to make it like it is in image two (I just used a graphic program to fake it) Similar TutorialsHello i have a simple problem, i am wanting to make a drop down box which selects a value automatically: <select size="1" name="decision" value="<?php if(isset($results[0]['decision'])){ echo validHTML($results[0]['decision']);} ?>"> <option selected value="">-</option> <option value="1">Yes</option> <option value="0">No</option> </select> As you can see, the drop box options are fixed but i want it to select the value which has already been selected by the user in the database but it seams the value attribute dosnt work. How do you do this? Thanks, Curver I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread. On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button. However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why. Any help would be gratefully received. You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm Here's the script: <table border="0" cellpadding="0" cellspacing="0"> <form method="get" action="" tabindex="3" target="_top"> <tbody> <tr> <td height="16"> <select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value"> <option value="#"> Choose a topic </option> <option value="MainFeaturesIndex.htm"> British Isles </option> </select> <input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16"> </td> </tr> </tbody></form> </table> i have this particular drop down menu in a wordpress PHP sidebar template, but i cant get it to execute once an option is selected. when i had this in another PHP page through a DW library item, it would execute just fine. here is the code... Code: <form name="guideform" id="guideform" action="#"> <select name="guidelinks" id="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <option selected value="#">default</option> <option value="option 1 url">option 1</option> <option value="option 2 url">option 2</option> <option value="option 3 url">option 3</option> </select> </form> can someone tell me why this would work on one PHP page and not another? heres where i have the element in place on the page... http://flyerflies.com/blog also, another question...how can i adjust the width of the display pane once the menu is opened? in FF, it opens to show all of the contents, but in IE (surprise, surprise) it only opens to the same width as the default text display in the unopened drop down box. Hello, I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; I'm trying to center the drop menu x horizontal code from the following url: http://www.gosu.pl/MyGosuMenu/ The problem is every time I center it all browsers except Internet Explorer mess up when you try to resize the window. For example in Firefox if you center the drop down menu and hover your mouse over the drop down menu it will line up but then if resize the Firefox window and hover your mouse over the drop down menu again the drop down options will not line up. For centering I've tried centering with CSS and using the <center> tag and both ways cause this same problem. Any help with this would be appreciated. Thanks, Jeff Hi, I was wondering if someone could help me... I made a drop down menu using fireworks for the site http://www.lakehillsca.org/ and the menu works perfectly in IE. But when viewing the site in firefox, the menu positioning isn't right. The menu uses javascript, but I'm pretty sure it isn't a javascript issue. Is there anyone out there that can figure this out??? Thanks for your time. -Chris Please help. This is what I have so far http://bartletagency.com/m/x2.php Now, obviously with business cards there many different options. I need something to calculate on the side the total after picking each drop box option, or if easier, after hitting "calculate total." (preferably with the numbers in a table so I can make it appear by itself right underwear the send button) . Example: 1000 business cards in blue, say, would need to come up at 50 dollars if they pick 3-1, but if they pick 3-22 it needs to come up 60 dollars if they pick the other color, green, and pick 3-1, the label would need to turn to $55.00, if they pick 3-2 with the color green the label would need to say $65.00 how can i do this please? here is the code I have which made up the PHP file i linked you to above. code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Lesson 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php if ($_SERVER['REQUEST_METHOD'] != 'POST'){ $me = $_SERVER['PHP_SELF']; ?> <h1 align="center">Business Cards</h1> <form name="form1" method="post" action="<?=$me?>"> <table border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td align="right" valign="middle">Quantity:</td> <td><select name="Quantity: "> <option value="1000">1000</option> <option value="2500">2500</option> <option value="5000">5000</option> <option value="10,000">10,000</option> </select> </td> </tr> <tr> <td align="right" valign="middle">color</td> <td><select name="color"> <option value="blue">blue</option> <option value="green">green</option> </select> </td> </tr> <tr> <td align="right" valign="middle">3</td> <td><select name="3"> <option value="small">3-1</option> <option value="medium">3-2</option> </select> </td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Send"> </td> </tr> </table> </form> <?php } else { error_reporting(0); // initialize a array to //hold any errors we encounter $errors = array(); // test to see if the form was actually // posted from our form $page = $_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; if (!ereg($page, $_SERVER['HTTP_REFERER'])) $errors[] = "Invalid referer<br>\n"; // check to see if a name was entered if (count($errors)>0) { foreach($errors as $err) echo "$err<br>\n"; echo "<br>Please use your browser's Back button to fix."; } else { // no errors, so we build our message switch($_POST['color']){ case 'red': $recipient = 'mathew420@gmail.com'; break; case 'green': $recipient = 'mathew420@gmail.com'; break; case 'blue': $recipient = 'mathew420@gmail.com'; break; default: $recipient = 'mathew420@gmail.com'; } $subject = "Widget On Line Order"; $from = stripslashes($_POST['Name']); $msg = "Message sent by $from\n"; $msg.="\nSize: ".$_POST['size']; $options=$_POST['options']; $msg.="\nOptions:"; if ($options) for ($i=0;$i<count($options);$i++) $msg.= "\n- $options[$i]"; else $msg.="\n- None"; $msg.="\nColor: ".$_POST['color']; $extension=($_POST['extension'])?"Extension: Yes":"Extension: No"; $wallmount=($_POST['wallmount'])?"Wallmount: Yes":"Wallmount: No"; $deskmount=($_POST['deskmount'])?"Deskmount: Yes":"Deskmount: No"; $msg.="\n$extension\n$wallmount\n$deskmount"; $msg.="\n".stripslashes($_POST['MsgBody'])."\n"; if (mail($recipient,$subject,$msg)){ echo "<p>Thanks for your order!</p>"; echo nl2br($msg); } else echo "An unknown error occurred."; } } ?> </body> </html> thanks so much I have two pages both have drop down. On the 1st page the user selects an option on the drop down, after the user choose an option it will go to the next page and I want the option showing on drop down on the 2nd page to be the option the user choose on the 1st page example: 1st page option:blue,orange,red so when I pick orange on the 2nd page the drop down will have initial value of orange I hope this is clear I am trying to make a form that submits info to Paypal. This is a drop box form that selects one of two things. Depending on the item selected, I want paypal to charge a different amount. Here is code that I thought should work, but apparently I don't know the ins and outs of drop boxes. Could I get some help? <select name="type of service" id="type of service"> <option selected>Select One... <option> I will format the Pix myself <input type="hidden" name="item_name_1" value="format myself"> <input type="hidden" name="amount_1" value="1.00"> </option> <option> You can format the pix for me <input type="hidden" name="item_name_2" value="you format"> <input type="hidden" name="amount_2" value="3.00"> </option> </select> Thanks! Hi guys, When you first launch Livestream's websites (http://www.livestream.com/), a drop down slides down from the top of the window which you can then close. Is this some sort of dynamic HTML? Does anyone know where I can find a tutorial on this?? A I want a drop down with about 10 items. The 10th being "other", if people select "other" a text box appears and people can then write in what "other" means. Any suggestions on the best code for this? Here is the code I have so far: HTML Code: <form id="form1" name="form1" method="post" action="">
<label>How did you hear about us?
<select name="select">
<option selected="selected">Please Select</option>
<option>Search Engine</option>
<option>Friends & Family</option>
<option>Word of Mouth</option>
<option>Newsletter</option>
<option>TV</option>
<option>Newspaper</option>
<option>Magazine</option>
<option>Blog</option>
<option>Other</option>
</select>
</label>
</form>
Ok... the code below works fine in everything but IE, this is a known deficiency in IE, and I need a workaround. The tricky part is... I'm generating the form with a php loop and so it needs to basically be a workaround that I can use easily in my script. Thanks in advance. <form action=""> <select name="test"> <option value="t2" disabled="disabled">Test1</option> <option value="t1">Test2</option> </select> </form> is it possible to get a drop down menu which then has tick boxs next to each category for multiple selection? I'm trying to incorporate drop down menus into a template to clean things up a bit but I can't figure out how. Here's the code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bayside Baptist Church</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> <!-- .style1 {font-weight: bold} .style2 { color: #94A652; font-size: 19px; } .style5 {font-size: 18px; color: #94A652; } .style6 { font-size: 11px } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1>Bayside Baptist Church</h1> </div> <div id="nav"> <div id="menu"> <li><a href="index.html">Home</a></li> <li><a href="index.html">Ministries</a></li> <li><a href="index.html">Calendar</a></li> <li><a href="index.html">Connect</a></li> <li><a href="index.html">FAQ</a></li> <li><a href="index.html">Pictures</a></li> <li><a href="index.html">Contact</a></li> </div> </div> </div> <div id="headline"> <div id="photo"><div> <img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1"> </div></div> <div id="search-news"> <h2 class="downcast">Sermons</h2> <div id="news-box"> <p class="style1"> 01.11.09</p> <p><strong>01.04.09</strong></p> <p><strong>12.28.08</strong></p> </div> <h2 class="downcast">News & Events</h2> <div id="news-box"> <h3><a href="#">12.21.08</a></h3> <p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p> <p class="more"><a href="#">more</a></p> <h3><a href="#">12.24.08</a></h3> <p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p> <p class="more"><a href="#">more</a></p> </div> </div> <div class="clear"></div> </div> <div id="body"> <div id="body-left"> <h2 class="style2">Welcome to Bayside</h2> <p class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</p> <p class="more"> </p> <h2 class="style5">Services</h2> <img src="images/welcome.gif" alt="" width="150" height="114" class="left" /> <p class="style6">Our <strong>9:15 service</strong> combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience.* We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives.**</p> <ul class="plussbullets"> <li><a href="#">Kids Corner</a></li> <li><a href="#">Teen Studies</a></li> <li><a href="#">Christian Education Hour</a></li> </ul> </div> <div id="body-right"> <h2 class="style5">Sermon Series</h2> <p><img src="images/3129504889_fcc5646ba4.jpg" alt="" width="321" height="56" /><span class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</span></p> <p> </p> <p class="more"> </p> <h2 class="style5">Pictures</h2> <div id="gallery"> <a href="#"><img src="images/gal_1.jpg" width="101" height="96" alt="Gal 1"></a> <a href="#"><img src="images/gal_2.jpg" width="114" height="96" alt="Gal 2"></a> <a href="#"><img src="images/gal_3.jpg" width="112" height="96" alt="Gal 3"></a> </div> </div> <div class="clear"> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer"> <p>Bayside Baptist Church - 3915 N 16th Street - Superior, Wisconsin 54880 - 715.394.6002</p> </div> </body> </html> And here's a live sample: http://www.baysidesuperior.org/Bayside I'm using Dreamweaver cs3, looked at some tutorials but can't figure it out. What would you guys suggest? Id like to do a drop down menu similar to there's... is there any simple way of doing this?! Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! Right...I'm in the process of creating a sample website, which takes in date data and number data...and I was wondering...as I have the option of using drop downs or textboxes....if the site does go onto a server...would it be easier (as the developer) to use drop downs or text inboxes..? I mean..when it comes to the user choosing things using the drop down or inputting into the textbox..and sending it to search in a database...which would be easier to play around with..and less complicated..? *thinks Am I making sense?* I've created a drop down list with 4000 options on it which I did from an example I found on line. This is fine - loads quite quickly! I then had to add another 9 fields with the same 4000 options on and now the page doesn't load as quicky as I'd like. I was wondering if there was a way of defining the list of 4000 options once and then asking the ten drop down lists to reference it? This is the code that works than I'm trying to use.. It is a horizontal css popup menu. Code:
HTML
<div id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
</div>
CSS
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
My listing categories/hierarchy is controlled by word press so I can't really control that. I would like to know if I can modify the css to get this working. I'm trying to get the 'children' Appearance category to pop up under Automotive. Here is my NON working code: Code:
HTML
<div id="dropmenu">
<ul>
<li class="cat-item cat-item-3"><a href="http://www.diysrc.com/category/automotive/" title="View all posts filed under Automotive">Automotive</a>
<ul class='children'>
<li class="cat-item cat-item-7"><a href="http://www.diysrc.com/category/automotive/appearance/" title="View all posts filed under Appearance">Appearance</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-14"><a href="http://www.diysrc.com/category/featured-articles/" title="View all posts filed under Featured Articles">Featured Articles</a>
</li>
<li class="cat-item cat-item-1"><a href="http://www.diysrc.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
</ul>
</div>
CSS
#dropmenu ul .children{display:none;}
#dropmenu ul:hover .children{display:block;}
#dropmenu{position:inline;}
Hi, I have finally managed to create the drop down that I want and placed the code into my page after testing. However I have a table of 24 teams, and only 9 of them are showing. I have tried to add <tr> breaks and show 4 across but the mouseover box then appears at the bottom of the table even when I mouseover at the top. Ideallly I would like to place these links in the table I created here; http://www.freewebs.com/jonnibravo/l...forumsmain.htm Here is the test page where my code exsists; http://www.freewebs.com/jonnibravo/testpage.htm sorrted |
|||||||