Jump to content

Search the Community

Showing results for tags 'Dropdown'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. I am new to Javascript so please be patient. Here I have two dropdown lists each with an alert to display the list selection. My code is a duplicated adaptation of a w3schools example.Both alert messages show selections from the "keyName" list because (I assume) both alert messages use getElementsByTagName("option").if I put the variables keyN and keyT alone in the alert functions they display the expected selection index numbers. Is there a way to link 'option' to 'select id' that forces the correct list to be read? Or perhaps another way to approach the task?Thanks in advance for any advice.codeblock<!DOCTYPE html><html><body>//List#1<select id="keyName"><option value="C">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option></select>//List#2<select id="keyType"><option value="major">major</option><option value="minor">minor</option></select><button type="button" onclick="getKey()">Get Key</button> //displays C/D/E/F<button type="button" onclick="getType()">Get Type</button> //displays C/D<script>function getKey() { var keyN = document.getElementById("keyName").selectedIndex; alert(document.getElementsByTagName("option")[keyN].value);}function getType() { var keyT = document.getElementById("keyType").selectedIndex; alert(document.getElementsByTagName("option")[keyT].value);}</script></body></html>/codeblock
  2. I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; }
  3. HTML <!DOCTYPE html><html><head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/style_v2.css"> <title>Far Far Away - A folktale at Faraway Island</title></head><body> <header> <div id="logonslogan"> <a href="#">Well-Designed Blog</a> <p id="slogan">Created by Terry</p> </div> <div id="navnsearch"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Wordpress Theme</a></li> <li><a href="#">Blogger Theme</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <section id="search"> <form action="#"> <input type="search" name="search" id="site_search" placeholder="Enter keywords"> <input type="submit" class="button" id="submit_search"> </form> </section> </div> </header> <section id="categories"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> </section> <section id="blog_posts"> <article> <header> <h1>Far far away</h1> <p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p> </header> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p> <section id="comments"> <h2>Comments</h2> <a class="count">1 comment</a> <ul class="commentlist"> <li class="comment" id="comment_id1"> <div class="thiscomment"> <div class="box"> <img src="images/ava.gif" alt="user1avatar" class="ava"> <h3>User1</h3> <p class="datetime_comment"> <time datetime="2013-12-27" class="date"> December 27, 2013 </time> <span class="time"> 11:33 </span> </p> <div class="commentcontent"> <p>I really enjoyed seeing stories in this site. Keep up the good work !<br> Regards, <br> User1 </p> </div> </div> <div class="toolbar"> <a href="#">Vote Up</a> <a href="#">Vote Down</a> <a href="#">Share</a> </div> </div> </li> </ul> </section> </article> </section> <div id="rightcontent"> <section id="popularPosts"> <hgroup> <h2>Popular posts</h2> <h3>See popular post</h3> </hgroup> <ul class="popularpostslist"> <li class="popularpost"> <img src="images/ava.gif" alt="Lorem Ipsum's post image"> <h4>Lorem Ipsum</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> <li class="popularpost"> <img src="images/ava.gif" alt="postimg"> <h4>Lurem Ipsam</h4> <p class="datetime"> <time datetime="2013-12-27">December 27, 2013</time> <span class="time">11:46</span> </p> <p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span> </p> </li> </ul> </section> <section id="trendingtopics"> <hgroup> <h2>Trending Topics</h2> <h3>See what's booming now</h3> </hgroup> <ul id="trendinglist"> <li class="trending"><a href="#">#LoremIpsum</a></li> <li class="trending"><a href="#">#FarFarAway</a></li> <li class="trending"><a href="#">#KingKnights</a></li> <li class="trending"><a href="#">#DummyMummy</a></li> <li class="trending"><a href="#">#Wallball</a></li> </ul> </section> </div> <footer class="clear" id="footer"> <p>All contents are hand-wroten by <a href="mailto:terrydjony@gmail.com">Terry DS</a></p> <small>All Rights Reserved, 2013 Terry DS©</small> </footer></body></html> CSS /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}/* The author stylesheet */body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; background-color: #E8E8E8;}a { color: inherit; text-decoration: none;}h1 { font-size: 200%;}h2 { font-size: 150%;}h3 { font-size: 133%;}h4 { font-size: 120%;}h5 { font-size: 110%;}body > header { background-color: #333333; position: relative; overflow: hidden;}body > header a, body > header p { color: #FFFFFF;}#logonslogan { float: left;}#navnsearch { background-color: #990100; float: right; width: 55%; overflow: hidden; position: relative;}#navnsearch nav ul { list-style: none; padding: 0 3%; display: inline-table;}#navnsearch nav ul:after { content: ""; clear: both; display: block;}#navnsearch nav ul li { float: left;}#navnsearch nav ul li a { display: block; padding: 1em; margin: 1em; text-align: center;}#navnsearch nav ul li:hover { background-color: #B90504; background-color: rgba(0,0,0,.3);}#navnsearch nav ul li:hover a { box-shadow: 0 0 3px 2px; -webkit-box-shadow: 0 0 3px 2px; -moz-box-shadow: 0 0 3px 2px; border-radius: 50%;}#navnsearch nav ul ul { display: none;}#navnsearch nav ul li:hover > ul { display: block;}#navnsearch nav ul ul { position: absolute; top: 100%;}#navnsearch nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}#navnsearch nav ul ul li a { padding: 15px 40px; color: #fff;} #navnsearch nav ul ul li a:hover { background: #4b545f;}#navnsearch nav ul ul ul { position: absolute; left: 100%; top:0;}#navnsearch #search { position: absolute; bottom: 0; right: 2em;}#navnsearch #site_search { padding: .5em;} I made the second unordered list not displayed (display: none), then when i hover the list item of the first unordered list, i want the second unordered list to be display so i give nav ul li:hover > ul { display:block; } But, it doesn't work... The second ul is not displayed when i hover the list item of the first unordered list... Please help me solve the problem...
  4. Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
  5. Hey I've got a problem with fireing a change-event manually.So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button: <p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices"oncomplete="fireChange()"/> For the fireChange()-function, i tried a few different things: function fireChange() { var element = document.getElementById("createEvent:EventSeatingPlan_input");element.onchange();} function fireChange() {var element = document.getElementById("createEvent:EventSeatingPlan_input");$(element).trigger("change");} function fireChange() {if ("fireEvent" in element) element.fireEvent("onchange");else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); element.dispatchEvent(evt);} But none of these work :(Can you please tell me how I can achieve this?Thanks, Xera
  6. I'm trying to create a dropdown menu effect here http://cbd-alpha.com/ideal/But I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS: #mainNav { margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li { float: left; padding-left: 21px;}#mainNav li:first-child { padding-left: 80px; background: none;}#mainNav a { text-decoration: none; padding: 0px 10px; font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif; color: #FFF;}#mainNav ul ul { display: none;}#mainNav ul ul li { padding-left: 0 !important; z-index: 999 !important;}#mainNav ul ul ul { }#mainNav ul ul a { }#mainNav li:hover > a,#mainNav ul ul :hover > a { color: #afc2d1;}#mainNav ul ul a:hover { }#mainNav ul li:hover > ul { display: block;} And here's the css of a similar menu: #mainNav { margin: 0 auto; position: relative; width: 1000px; z-index: 101; } #mainNav ul { border-left: 1px solid #CCCCCC; border-right: 1px solid #FFFFFF; float: left; height: 37px; list-style: none outside none; margin: 0 auto; padding-left: 0; position: relative; z-index: 100; } #mainNav li { border-left: 1px solid #FFFFFF; border-right: 1px solid #CCCCCC; float: left; position: relative; } #mainNav a { color: #8D8C8C; display: block; font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif; height: 37px; padding: 0 11px; text-decoration: none; text-transform: uppercase; } #mainNav ul ul { border: medium none; display: none; float: left; left: 0; position: absolute; top: 38px; width: 260px; z-index: 99; } #mainNav ul ul li { background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent; border: medium none !important; float: none; padding: 0 !important; } #mainNav ul ul ul { left: 100%; top: 0; } #mainNav ul ul a { background-image: none !important; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; font-weight: normal; height: auto; line-height: normal; overflow: hidden; padding: 10px !important; position: relative; text-transform: capitalize; width: 240px; z-index: 99; } #mainNav li:hover { color: #6A99C8; } #mainNav li:hover { background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent; } #mainNav li:hover li { color: #FFFFFF; } #mainNav ul ul li:hover a { background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important; } #mainNav ul li:hover > ul { display: block; } How do I stack them vertically?
  7. Hi, i wanna ask how to make a dropdown menu using bootstrap ?Tell me how to make it step by step ( coz i'm a newbie in javascript hehe..)Thanks for any helps
  8. Does anyone know what event is fired when a Dropdown entry is selected for an input of type Textbox? I am using the AutoComplete Widget of the jQuery UI and I am attempting to perform some functions on the style of the Textbox when a user selects one of the entries. P.S. I'm also wondering is there a way a can track which events are being triggered as I use controls on the page perhaps maybe Google Chrome Developer Tools or FireFox Develpor Tools have this functionality?
  9. Hi there, I have 10 drop down boxes on a page where people can select some units they wish to study. Obviously people can pick more than one unit and so i want to avoid them from picking the same unit twice in each of the drop down boxes. I have looked into the disable function on drop down boxes but cannot figure out how i would go about disabling a drop down selection entry using Javascript. So far i have looked at the following jquery function below but it will not work on my php page as i do not have access to the head of the document on the platform i am on and just the body: $('select').change(function() { var ary = new Array(); $('select option:selected').each(function() { if ($(this).val().length > 0) { ary.push($(this).val()); } }); $('select option').each(function() { if ($.inArray($(this).val(), ary) > -1) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } });}); The example above is the sort of thing i am after but having studied the code, without it being in the head of the document it will not work and so it does not work when i change entry in the dropdown list. Does anybody have any modifications to the code or examples i can use to find out the values of all other dropdown's on a form and to then disable an index in the others where one is already selected on that index? Obviously i would need something to enable selections again. Even an alert box stating that the unit has already been picked and resetting back to original value would do. Many thanks, Mark
  10. Hey there. I just recently started to use Bootstrap and was wondering why this dropdown is not working, I have exactly what they have on their example site. <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script href="js/jquery.js" type="text/javascript" ></script><script href="js/jquery-ui.js" type="text/javascript" ></script> <script href="js/bootstrapjs" type="text/javascript" ></script><script href="js/bootstrap-dropdown.js" type="text/javascript" ></script><link href="css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><!-- <script href="js/document.js" type="text/javascript" ></script> --><script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script></head> <body><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><ul class="nav pull-left"> <a class="brand" href="#">Project name</a></ul><div class="nav-collapse"><ul class="nav pull-right"> <li><a href="#">Blog</a></li> <li class="divider-vertical"></li><li><a href="#">Facebook</a></li> <li class="divider-vertical"></li><li><a href="#">Twitter</a></li> <li class="divider-vertical"></li><li><a href="#">Flickr</a></li> <li class="divider-vertical"></li><li><a href="#">YouTube</a></li><li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Another link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div></div> </body> </html>
  11. Hello everyone.There is a small problem with a drop-down form field I am trying to get work. I've this peace of code: <select name="pot"> <option value="0" selected="selected">1</option> <?php for($p=0.12; $p<=5; $p++){ ?> <option value="<?php echo $p ?>"></option> <?php } ?> </select> and what I get is this: <select name="pot"> <option value="0" selected="selected">1</option> <option value="0.12"></option> <option value="1.12"></option> <option value="2.12"></option> <option value="3.12"></option> <option value="4.12"></option> </select> but it should be like this: <select name="pot"> <option value="0" selected="selected">1</option> <option value="0.12">2</option> <option value="0.24">3</option> <option value="0.36">4</option> <option value="0.48">5</option> <option value="0.60">6</option> </select> please notice, first option is selected and it's value is 0.
  12. so you can see it live here - http://intentionally...m/wt/Page2.html but basically I'm curious as to why this page isn't validating. the fieldset tag is supposed to be used like this http://www.w3schools...dset.asp In the form I have here one of my elements is a dropdown menu. I'm not married to it but I like the box w/caption around the dropdown. As far as I can tell this is the only reason my page isn't validating. <td> <fieldset> <legend>My Student ID</legend> <select id="studentid"> <option value="nine">Nine</option> <option value="one">One</option> <option value="six">Six</option> <option value="two">Two</option> <option value="three">Three</option> <option value="six">Six</option> </select></td> </fieldset> <td>[/size][/font][/color]
  13. Hi guys, i have a bit of a PHP problem and would appreciate a bit of help. I am currently doing a project in college and it involves PHP, which i am a bit dodgy on. Basically we have to create a HTML page, with a drop box menu showing 5 music albums, and a Submit button. Here is what i have to show up the Deopdown menu in HTML: [/color]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">[/color]<html> <head><title>Album List</title></head> <form action="chosen_album.php" method="post"> <select name="albums"><option value="1">Appetite For Destruction</option><option value="2">Out Of Exile</option><option value="3">West Ryder Pauper Lunatic Asylum</option><option value="4">One By One</option><option value="5">Master Of Puppets</option> <p><input type="submit" name="submit" value="Submi" </p></select></form> </body></html> Now, when you pick an album name and hit submit, it should bring you to a page showing all the album info, track list, etc. (I have all this info from a previous project). But where im stuck is for the PHP code needed to link the HTML drop box page. This is my PHP code so far, but doesnt seem to work properly. I am using a Wamp server for my loclahost which is up and running ok, so dont think thats the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head><title>Chosen Album</title></head> <?php$chosen_album = $_POST['albums'];$album_info = ''; if ($chosen_album== 1) {//appetite for destruction$album_info ='<p class="album_title">Appetite For Destruction</p><p class="artist">Artist: Guns N Roses</p><p class="track_list">Track List:</p><ol class="list"><li>Welcome to the jungle</li><li>Its so easy</li><li>Nightrain</li><li>Out ta get me</li><li>Mr Brownstone</li><li>Paradise city</li><li>My Michelle</li><li>Think about you</li><li>Sweet Child o mine</li><li>Youre crazy</li><li>Anything goes</li><li>Rocket queen</li> </ol> <iframe width="420" height="315" src="http://www.youtube.com/embed/i_gQOfF0Ymo" frameborder="0" ';}if($chosen_album==2) {//out of exile$album_info = '<p class="album_title">Out Of Exile</p><p class="artist">Artist: Audioslave</p><p class="track_list">Track List:</p><ol class="list"><li>Your Time Has Come</li><li>Out Of Exile</li><li>Be Yourself</li><li>Doesnt Remind Me</li><li>Drown Me Slowly</li><li>Heavens Dead</li><li>The Worm</li><li>Man Or Animal</li><li>Yesterday To Tomorrow</li><li>Dandelion</li><li>#1 Zero</li><li>The Curse</li><li>Like A Stone</li></ol><iframe width="420" height="315" src="http://www.youtube.com/embed/f_4MBuxMBN4" frameborder="0" allowfullscreen></iframe>';}if($chosen_album== 3) {//west ryder.......$album_info = '<p class="album_title">West Ryder Pauper Lunatic Asylum</p><p class="artist">Artist: Kasabian</p><p class="track_list">Track List:</p><ol class="list"><li>Underdog</li><li>Where Did All The Love Go?</li><li>Swarfiga</li><li>Fast Fuse</li><li>Take Aim</li><li>Thick As Thieves</li><li>West Ryder Silver Bullet</li><li>Vlad The Impaler</li><li>Ladies & Gentlemen (Roll The Dice)</li><li>Secret Alphabets</li><li>Fire</li><li>Happiness</li></ol><iframe width="560" height="315" src="http://www.youtube.com/embed/tjMnhiCUnr0" frameborder="0" allowfullscreen></iframe>';}?> (NOTE: I have only filled info for the first 3 items on the drop box to test it out)Basically, at the end i should have 1 HTML file (dropbox), 1 PHP file (album info) and 1 CSS file for styles (which im ok with.) Any help would be appreciated.
  14. Hello all, I developed pop-out slider menu that builds itself from the CSS rules and HTML content. Unfortunately I designed it around a $('.menuElement .uniqueMenuClass') strategy. Basically I have a handful of menus that do the same thing but with multiple copies of the pop-out menu script plugin with renamed '.uniqueMenuClass' for the respective menus. Example: $('.sliderMenu .menuOne').ready(function buildSlider(){ var sliderWidth = $('.sliderMenuElement .menuOne').width(); // A series of CSS dependent variables... $('.sliderMenuElement .menuOne').mouseenter(function animatedStuff(){ //series of animations triggered });} I'd then go back and copy/paste the whole thing with .menuTwo. Stupid, I know. Now, I'm trying to do something like this... $('.sliderMenu').ready(function buildSlider(){ var sliderWidth = $(this).find('.sliderMenuElement').width(); //Series of CSS dependencies... $(this).find('sliderMenuElement').mouseenter(function animatedStuff(){ //series of animations triggered });}); The problem is that .find() runs through ALL of the menuSlider's. Should I assign a unique ID to the menus and all their descendants and store the ID in all the variables and functions? Is there a way to traverse just within the $(this) element? or clear all the variables so the next menu starts clean-slate? Is this why I should have structured with lists instead of nested divs? Children aren't practical because I'm accessing a number of elements at different levels in the tree; the examples above are very simplified. Appreciate the help! Here's a link to a test version... which takes a while to load because of the multiple script references: www.jaredadradtke.com/testersite/index.html And please no comments on the reel labeled 'webdesign' Also... here's an example of the HTML: <div class="autoSlider"> <div class="slideCont" style="top:0px;"> <div class="sliderName">Reels</div> <div class="sliderInitial"> <div class="slideEndCap leftCap"></div> <div class="slideEndCap rightCap"></div> <div class="thumbCont reels"> <div class="slideThumb reels"> <span class="thumbCaption">Motion Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Cinematography</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Web Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Color Grading</span> </div> </div> </div> </div></div>
  • Create New...