www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Can you have more than one pull-down menu?

  1. #1
    Join Date
    May 2014
    Posts
    5

    Can you have more than one pull-down menu?

    Hi: I'm trying to redesign my pages to a more contemporary format. In designing a catalog, I thought I'd put a JAVA pull-down menu under my six product categories (violin, viola, cello, bass, bows & cases):

    http://beststudentviolins.com/catalog.html

    The first one, under violins, works beautifully. But when I put the second one in, under violas, I can't see where my code is wrong -- but it's not working. It pops over to something entirely different.

    Can anyone look at this and tell me what I'm doing wrong? If I can't get the second one right I certainly can't do the other four.

    TIA!!

  2. #2
    Join Date
    Oct 2013
    Posts
    610
    Each of the scripts is named the same -- go(). So every time go() is called it goes to the first go() script, the one for violins. Rename them to violin(), viola(), etc., make appropriate changes to the menus and it should work.

    edit-- You'll probably have to do the same with your buildArray() functions and vars. There's better ways to deal with this such that you aren't writing and running basically the same function over and over, but for the sake of getting you up and running...
    Last edited by Kevin2; 05-16-2014 at 01:03 PM.

  3. #3
    Join Date
    Oct 2013
    Posts
    610
    Much less code and makes go() reusable:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>String Instruments</title>
    <script type="text/javascript">
    	function go(el){
    		window.location = el.value;
    	}
    </script>
    </head>
    <body>
    <form action="#">
    
    <label for="violins"><a href="http://beststudentviolins.com/violins.html">Violins:</a></label> <select id="violins" onChange="go(this)">
    
    <option value="">Violins:::</option>
    <option value="">-----------</option>
    <option value="http://beststudentviolins.com/violins.html#Peccard">Peccard Outfit   $395</option>
    <option value="http://beststudentviolins.com/violins.html#K500">K500 Outfit  $445</option>
    <option value="http://beststudentviolins.com/violins.html#K525">K525   $545</option>
    <option value="http://beststudentviolins.com/violins.html#Rosalia">Rosalia Outfit $560</option>
    <option value="http://beststudentviolins.com/violins.html#K550">K550   $579</option>
    <option value="http://beststudentviolins.com/violins.html#K555">K555   $648</option>
    <option value="http://beststudentviolins.com/violins.html#K575">K575   $785</option>
    <option value="http://beststudentviolins.com/RomanianViolins.html#Violins">Romanian Violins $810-$1,858</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Lorenzo">Lorenzo   $915</option>
    <option value="http://beststudentviolins.com/Dragon.html">Dragon Violins  $975-$1,325</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Kauffman">Kauffman   $1,150</option>
    <option value="http://beststudentviolins.com/violins.html#HC602">HC602   $1,200</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Luciano">Luciano   $1,600</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#5string">Aldo Romano 5 String $2,100</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Giovanni">Giovanni   $2,280</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Bassi">Bassi   $2,400</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Bartalli">Bartalli   $3,600</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Hellier">Hellier   $3,800</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Patini">Patini   $4,000</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Zhu">Mingjiang Zhu   $4,500.00</option>
    <option value="">-----------</option>
    </select>
    
    <br>
    
    <label for="violas"><a href="http://beststudentviolins.com/violas.html">Violas:</a></label> <select id="violias" onChange="go(this)">
    <option value="">Violas:::</option>
    <option value="">-----------</option>
    <option value="http://beststudentviolins.com/violas.html#PeccardVLA">Peccard Outfit  $485</option>
    <option value="http://beststudentviolins.com/RomanianViolins.html#Violas">Romanian Violas $724-$1,086</option>
    <option value="http://beststudentviolins.com/violas.html#RosaliaVLA">Rosalia Outfit  $840</option>
    <option value="http://beststudentviolins.com/violas.html#LorenzoVLA">Lorenzo  $1,152</option>
    <option value="http://beststudentviolins.com/violas.html#KauffmanVLA">Kauffman $1,400</option>
    <option value="http://beststudentviolins.com/violas.html#LucianoVLA">Luciano  $1,870</option>
    <option value="http://beststudentviolins.com/violas.html#MagginiVLA">Maggini  $1,900</option>
    <option value="http://beststudentviolins.com/violas.html#GiovanniVLA">Giovanni $2,500</option>
    <option value="http://beststudentviolins.com/violas.html#BassiVLA">Bassi    $3,000</option>
    <option value="http://beststudentviolins.com/violas.html#HellierVLA">Hellier  $4,500</option>
    <option value="">-----------</option>
    </select>
    
    </form>
    </body>
    </html>

  4. #4
    Join Date
    May 2014
    Posts
    5
    Quote Originally Posted by Kevin2 View Post
    Each of the scripts is named the same -- go(). So every time go() is called it goes to the first go() script, the one for violins. Rename them to violin(), viola(), etc., make appropriate changes to the menus and it should work.

    edit-- You'll probably have to do the same with your buildArray() functions and vars. There's better ways to deal with this such that you aren't writing and running basically the same function over and over, but for the sake of getting you up and running...

    Thank you for your response. Instead of go(), I put violin() in the violin one, and it worked. But putting viola() in the second one didn't change the error.

  5. #5
    Join Date
    May 2014
    Posts
    5
    I'm about to try it. But I did not know I could put a body/header construction in the middle of my document like that...

    I'm putting these pull-down menus on each of the product pages--and they work fine--so not all is lost if I can't get this to work.

  6. #6
    Join Date
    May 2014
    Posts
    5
    You put violins and violas together and added an extra line, Violins. When I took that out, and removed the viola bit, the violin menu doesn't work.

  7. #7
    Join Date
    Oct 2013
    Posts
    610
    NO NO NO!

    That was just an example!

    Put the script in your existing head section, then replace all the other scripts/selects with something similar to the ones I provide. You'll have to manually add the URLs in the value="" attributes of the options. Also, you only need one (1) <form></form> tagset in the page.

    For example, replace this:
    HTML Code:
    <div align="center">
    <b><font size="5"><a href="http://beststudentviolins.com/violins.html">Violins</a></font></b><br><br>
    
    <script language="JavaScript">
    <!--
    function buildArray() {
      var a = buildArray.arguments;
      for (i=0; i<a.length; i++) {
        this[i] = a[i];
      }
      this.length = a.length;
    }
    var urls1 = new buildArray("",
    "do_nothing",
    "http://beststudentviolins.com/violins.html#Peccard",
    "http://beststudentviolins.com/violins.html#K500",
    "http://beststudentviolins.com/violins.html#K525",
    "http://beststudentviolins.com/violins.html#Rosalia",
    "http://beststudentviolins.com/violins.html#K550",
    "http://beststudentviolins.com/violins.html#K555",
    "http://beststudentviolins.com/violins.html#K575",
    "http://beststudentviolins.com/RomanianViolins.html#Violins",
    "http://beststudentviolins.com/OldWorldViolins.html#Lorenzo",
    "http://beststudentviolins.com/Dragon.html",
    "http://beststudentviolins.com/OldWorldViolins.html#Kauffman",
    "http://beststudentviolins.com/violins.html#HC602",
    "http://beststudentviolins.com/OldWorldViolins.html#Luciano",
    "http://beststudentviolins.com/OldWorldViolins.html#5string",
    "http://beststudentviolins.com/OldWorldViolins.html#Giovanni",
    "http://beststudentviolins.com/OldWorldViolins.html#Bassi",
    "http://beststudentviolins.com/OldWorldViolins.html#Bartalli",
    "http://beststudentviolins.com/OldWorldViolins.html#Hellier",
    "http://beststudentviolins.com/OldWorldViolins.html#Patini",
    "http://beststudentviolins.com/OldWorldViolins.html#Zhu",
    
    "do_nothing");
    function go(which, num, win) {
      n = which.selectedIndex;
      if (n != 0) {
        var url = eval("urls" + num + "[n]")
        if (win) {
          openWindow(url);
        } else {
          location.href = url;
        }
      }
    }
    // --></script><form name="form1"><select name="menu1" onChange="go(this, 1,
    false)">
    
    <option>Violins:::  
    <option>-----------
    <option>Peccard Outfit   $395
    <option>K500 Outfit  $445
    <option>K525   $545
    <option>Rosalia Outfit $560
    <option>K550   $579
    <option>K555   $648
    <option>K575   $785
    <option>Romanian Violins $810-$1,858
    <option>Lorenzo   $915
    <option>Dragon Violins  $975-$1,325
    <option>Kauffman   $1,150
    <option>HC602   $1,200
    <option>Luciano   $1,600
    <option>Aldo Romano 5 String $2,100
    <option>Giovanni   $2,280
    <option>Bassi   $2,400
    <option>Bartalli   $3,600
    <option>Hellier   $3,800
    <option>Patini   $4,000
    <option>Mingjiang Zhu   $4,500.00
    </font>
    <option>-----------
    
    </select></form>
    
    </div></td><td width="20"></td><td>
    with this:
    HTML Code:
    <div align="center">
    <b><font size="5"><a href="http://beststudentviolins.com/violins.html">Violins</a></font></b><br><br>
    <select id="violins" onChange="go(this)">
    
    <option value="">Violins:::</option>
    <option value="">-----------</option>
    <option value="http://beststudentviolins.com/violins.html#Peccard">Peccard Outfit   $395</option>
    <option value="http://beststudentviolins.com/violins.html#K500">K500 Outfit  $445</option>
    <option value="http://beststudentviolins.com/violins.html#K525">K525   $545</option>
    <option value="http://beststudentviolins.com/violins.html#Rosalia">Rosalia Outfit $560</option>
    <option value="http://beststudentviolins.com/violins.html#K550">K550   $579</option>
    <option value="http://beststudentviolins.com/violins.html#K555">K555   $648</option>
    <option value="http://beststudentviolins.com/violins.html#K575">K575   $785</option>
    <option value="http://beststudentviolins.com/RomanianViolins.html#Violins">Romanian Violins $810-$1,858</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Lorenzo">Lorenzo   $915</option>
    <option value="http://beststudentviolins.com/Dragon.html">Dragon Violins  $975-$1,325</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Kauffman">Kauffman   $1,150</option>
    <option value="http://beststudentviolins.com/violins.html#HC602">HC602   $1,200</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Luciano">Luciano   $1,600</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#5string">Aldo Romano 5 String $2,100</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Giovanni">Giovanni   $2,280</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Bassi">Bassi   $2,400</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Bartalli">Bartalli   $3,600</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Hellier">Hellier   $3,800</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Patini">Patini   $4,000</option>
    <option value="http://beststudentviolins.com/OldWorldViolins.html#Zhu">Mingjiang Zhu   $4,500.00</option>
    <option value="">-----------</option>
    </select>
    </div></td><td width="20"></td><td>

  8. #8
    Uhm... I have a stupid question...

    Why on earth are you using non-graceful degrading SELECT + SCRIPTING to do anchors and CSS' job? I mean, I've seen these types of stunts before, I still don't get why people do it... It's EXACTLY what I mean by "JS for nothing" and "pissing away accessibility"

    Even if I provided scripting assistance to it, I'd first have semantic markup for those links, and SELECT/OPTION isn't it! IF I was to implement that using CSS 2.1's :target property (that people call CSS3 or HTML 5 because they have no clue what they are talking about) the markup would be:

    Code:
    <div class="dropDown" id="dropDownViolins">
    
    	<div>
    		Violins
    		<a href="#dropDownViolins" class="open"></a>
    		<a href="#" class="close"></a>
    	</div>
    	
    	<ul>
    		<li><a href="/violins.html#Peccard">Peccard Outfit $395</a></li>
    		<li><a href="/violins.html#K500">K500 Outfit $445</a></li>
    		<li><a href="/violins.html#K525">K525 $545</a></li>
    		<li><a href="/violins.html#Rosalia">Rosalia Outfit $560</a></li>
    		<li><a href="/violins.html#K550">K550 $579</a></li>
    		<li><a href="/violins.html#K555">K555 $648</a></li>
    		<li><a href="/violins.html#K575">K575 $785</a></li>
    		<li><a href="/RomanianViolins.html#Violins">Romanian Violins $810-$1,858</a></li>
    		<li><a href="/OldWorldViolins.html#Lorenzo">Lorenzo $915</a></li>
    		<li><a href="/Dragon.html">Dragon Violins  $975-$1,325</a></li>
    		<li><a href="/OldWorldViolins.html#Kauffman">Kauffman $1,150</a></li>
    		<li><a href="/violins.html#HC602">HC602 $1,200</a></li>
    		<li><a href="/OldWorldViolins.html#Luciano">Luciano $1,600</a></li>
    		<li><a href="/OldWorldViolins.html#5string">Aldo Romano 5 String $2,100</a></li>
    		<li><a href="/OldWorldViolins.html#Giovanni">Giovanni $2,280</a></li>
    		<li><a href="/OldWorldViolins.html#Bassi">Bassi $2,400</a></li>
    		<li><a href="/OldWorldViolins.html#Bartalli">Bartalli $3,600</a></li>
    		<li><a href="/OldWorldViolins.html#Hellier">Hellier $3,800</a></li>
    		<li><a href="/OldWorldViolins.html#Patini">Patini $4,000</a></li>
    		<li><a href="/OldWorldViolins.html#Zhu">Mingjiang Zhu $4,500.00</a></li>
    	</ul>
    	
    <!-- .dropDown --></div>
    Then the CSS just uses :target to show/hide the UL, just like you would with a normal :hover type menu... though it takes a bit of styling to make it purty, because it's all CSS you can make it look however you like.

    Code:
    .dropDown {
    	overflow:hidden;
    	position:relative;
    	width:15em;
    	line-height:1.5em;
    }
    
    .dropDown div {
    	position:relative;
    	zoom:1; /* trip haslayout, fix positioning bugs */
    	padding:0 2em 0 0.5em;
    	border:2px solid #000;
    }
    
    .dropDown div a {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:1.5em;
    }
    
    .dropDown .open:after,
    .dropDown .close:after {
    	position:absolute;
    	top:0;
    	right:0;
    	width:1.25em;
    	height:1.875em;
    	font:normal 80%/187.5% arial,helvetica,sans-serif;
    	text-align:center;
    	text-decoration:none;
    	color:#444;
    	background:#EEE;
    	border-left:1px solid #000;
    }
    
    .dropDown .open:after {
    	content:'\25BC';
    	box-shadow:inset 0.25em 0.25em 0.25em #FCFCFC;
    }
    
    .dropDown .close:after {
    	content:'\25B2';
    	box-shadow:inset 0.25em 0.25em 0.25em #E0E0E0;
    }
    
    .dropDown ul {
    	list-style:none;
    	position:absolute;
    	top:1.5em;
    	left:0;
    	right:0;
    	height:18em; /* fifteen lines */
    	overflow:auto;
    	padding:0.25em 0;
    	margin-top:2px;
    	border:2px solid #000;
    	background:#F8F8F8;
    }
    
    .dropDown ul a {
    	padding:0 0.5em;
    }
    .dropDown:target {
    	overflow:visible;
    }
    
    .dropDown .close,
    .dropDown:target a.open {
    	display:none;
    }
    
    .dropDown:target a.close {
    	display:block;
    }
    For example.

    You could probably even get 'fancy' using CSS3 transitions to animate it.

    Semantic markup, and "look ma, no javascript". Should work IE7/later. (IE6 predates CSS 2.1). If I really cared about it working in IE6 this would be one of the rare cases I'd actually say go ahead and use an IE conditional comment around that first DIV tag, the IE6 version simply lacking the .dropDown class.

    You can easily make as many of these on a page as you like, just swap the ID on the .dropDown DIV and the #id on the .open anchor.

    If I WERE to make a scripted version, the script would add those two open/close anchors, and it would class swap on the parent DIV instead of using :target, but otherwise the code would remain mostly unchanged.

  9. #9
    Join Date
    Oct 2013
    Posts
    610
    deathshadow,

    Your pedantic rants are getting very tiresome. Have you actually looked at the OP's page and its actual HTML? It is a testament to the fault tolerance of web browsers. All I'm trying to do is get him/her up and running with the least amount of work possible for the moment. I'm all for getting it to work in a more standards-compliant way but let's just get it working for the moment.
    Last edited by Kevin2; 05-16-2014 at 04:17 PM.

  10. #10
    Yeah, I looked at it, the entire thing should be pitched in the trash -- FONT tags, tables for nothing, bold on things that wouldn't be grammatically bold, align attributes, doctype AFTER the html/head tags, scripting between the head and body, pointless meta nothing actually uses, no logical document structure -- it begs the question "when was this site written, 1997?"

    Though laughably, I wouldn't waste time adding dropdowns to it, and just keep the drill-down navigation since it's already WAY too link heavy.

    Again, I'd throw the entire thing in the dumpster and start over from scratch; there's nothing worth saving from it and to be frank, silver bullet fixes aren't the answer; unless you're aiming for the head.

    BUT, you want to get them 'working', let's get them WORKING, by first fixing the markup and dragging it kicking and screaming out of the dark ages.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <meta
    	name="keywords"
    	content="catalog,violins,violas,cellos,bass,library"
    />
    
    <meta
    	name="description"
    	content="The best place to buy student string instruments"
    />
    
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	BestStudentViolins.com
    </title>
    
    
    
    </head><body>
    
    <div id="top" class="widthWrapper">
    
    	<h1>
    		<a href="\">
    			Best Studen Violins
    			<span>-</span>
    			<small>Violins, Violas, Cellos, Bass, Music Library</small>
    		</a>
    	</h1>
    
    	<ul id="mainMenu">
    		<li><a href="/">Home</a></li>
    		<li><a href="/catalog.html">Catalog</a></li>
    		<li><a href="/library.html">Library</a></li>
    		<li><a href="/about.html">About Us</a></li>
    	</ul>
    
    	<ul id="productMenu">
    		<li><a href="/violins.html">Violins</a></li>
    		<li><a href="/violas.html">Violas</a></li>
    		<li><a href="/cellos.html">Cellos</a></li>
    		<li><a href="/bass.html">Basses</a></li>
    		<li><a href="/bows.html">Bows</a></li>
    		<li><a href="/cases.html">Cases</a></li>
    	</ul>
    
    	<div id="accessoriesLinks">
    		<h2>Informational links about accessories</h2>
    		<ul>
    			<li><a href="/StringCareSpecs.html#bridge">Bridge</a></li>
    			<li><a href="/StringCareSpecs.html#13">Chinrests</a></li>
    			<li><a href="/StringCareSpecs.html#tuner">Chromatic Tuner/Metronome</a></li>
    			<li><a href="/StringCareSpecs.html#6">Dampit</a></li>
    			<li><a href="/electronics.html">Electronics</a></li>
    			<li><a href="/StringCareSpecs.html#Fiddlebrite">Fiddlebrite</a></li>
    			<li><a href="/StringCareSpecs.html#finetuners">Fine Tuners</a></li>
    		</ul><ul>
    			<li><a href="/PedagogyTech.html#33">Fingerboard Tapes</a></li>
    			<li><a href="/StringCareSpecs.html#6">Humidifier</a></li>
    			<li><a href="/StringCareSpecs.html#6">Humistat</a></li>
    			<li><a href="/StringCareSpecs.html#6">Hygrometer</a></li>
    			<li><a href="/PedagogyBookstore.html#dictionaries">Music Dictionaries</a></li>
    			<li><a href="/MusicStands.html">Music Stands, Batons, Accessories</a></li>
    			<li><a href="/totes.html">Music Tote Bags</a></li>
    		</ul><ul>
    			<li><a href="/terms.html#mute">Mutes</a></li>
    			<li><a href="/StringCareSpecs.html#12">Peg dope</a></li>
    			<li><a href="/StringCareSpecs.html#12">Peg drops</a></li>
    			<li><a href="/StringCareSpecs.html#10">Pegs</a></li>
    			<li><a href="/pinkypads.html">Pinky Pads</a></li>
    			<li><a href="/survival.html#polish">Polish</a></li>
    		</ul><ul>
    			<li><a href="/StringCareSpecs.html#rosin">Rosin</a></li>
    			<li><a href="/survival.html#shoulderrests">Shoulder Rests</a></li>
    			<li><a href="/StringCareSpecs.html#bridge">Soundpost Setter</a></li>
    			<li><a href="/StringCareSpecs.html#strings">Strings</a></li>
    			<li><a href="/StringCareSpecs.html#string_sets">String Sets</a></li>
    			<li><a href="/StringCareSpecs.html#14">Tailpieces</a></li>
    			<li><a href="/StringCareSpecs.html#5">Vio-meter</a></li>
    			<li><a href="/Teachers_Specials.html">Bulk Sales</a></li>
    		</ul>
    	<!-- #accessoriesLinks --></div>
    
    	<div id="footer">
    
    		<div class="subSection">
    			<h2>Payment options</h2>
    			<p>
    				We accept debit/credit card payments over the phone.<br />
    				Please contact Customer Service: (888) 959-0854
    			</p>
    			<ul id="paymentOptions">
    				<li><a href="/about.html#Returns">Return Policy</a></li>
    				<li><a href="/about.html#TradeIns">Trade-In Policy</a></li>
    			</ul>
    		<!-- .subSection --></div>
    
    		<div class="subSection">
    			<h2>Quick Links</h2>
    			<ul id="quickLinks">
    				<li>
    					<a href="http://search.freefind.com/find.html?id=54763373&map=0&page=0&ics=1">
    						Search/Site Map
    					</a>
    				</li><li>
    					<a href="/about.html">About Us</a>
    				</li>
    			</ul>
    		<!-- .subSection --></div>
    
    		<div class="subSection">
    			<a
    				href="http://beststudentviolins.us6.list-manage.com/subscribe?u=93886c95a5cc651bc9af1bb16&id=93282189f3"
    				class="newsLetterSignup"
    			>
    				Free Newsletter
    			</a>
    			<h2>Follow Us</h2>
    			<ul id="socialLinks">
    				<li>
    					<a href="https://www.facebook.com/urbanacousticstrings?ref=hl">
    						<img src="fb.jpg" alt="Facebook" />
    					</a>
    				</li><li>
    					<a href="https://mobile.twitter.com/AcousticsUrban">
    						<img src="twitter.jpg" alt="Follow Me on Twitter" />
    					</a>
    				</li><li>
    					<a href="http://www.pinterest.com/UrbanAcoustics/">
    						<img src="pinterest.jpg" alt="Follow Me on Pinterest" />
    					</a>
    				</li>
    			</ul>
    		<!-- .subSection --></div>
    
    		<hr />
    
    		<div class="final">
    			Copyright 2014 &copy; <i>SunMusic Strings</i>
    		<!-- .final --></div>
    
    	<!-- #footer --></div>
    
    <!-- #top.widthWrapper --></div>
    
    </body></html>
    If I have time later, I'll make the CSS to style that.

    Letting the OP continue down the garden path to failure with fifteen year out of date markup isn't the answer here; and the longer we let people be lead to the garden to gut their own bellies, the longer websites are going to suck for everyone.

    You're tired of my posts? I'm tired of sleazeball development where everyone still has their head wedged up 1997's backside! DEAL WITH IT! TBL forbid we try and encourage people to learn something or do things properly; pedantic? Better than slapping the rose coloured glasses on everyone's head and pretending everything is hunky-dory around the drum circle when things quite plainly aren't. We have a decade and a half of good practices, multiple specifications full of instructions on how things should be done -- I have an idea, HOW ABOUT WE USE THEM?!?

    pe·dan·tic - adjective

    1) Excuse used by ivy league college twits who had life paid for by mommy and daddy until they actually hit adulthood somewhere in their late 20's, to cover up their ignorance, incompetence, and generally having no clue about anything they are allegedly supposed to know about, or miraculously ended up in charge of because of a piece of paper instead of actual knowledge or experience.

    2) Defense used by scam artists, lazy developers, and the "cheap out now, who cares what it costs later" nudniks to explain their sleazy shortcuts and laissez-faire attitude.
    Last edited by deathshadow; 05-16-2014 at 05:15 PM.

  11. #11
    Join Date
    Oct 2013
    Posts
    610
    From my print Webster Dictionary (how 19th century!):
    pe·dant n -- one who parades his learning [...] one who unduly emphasizes minutiae in the presentation or use of knowledge.

    But for those who no longer have real books:
    http://www.merriam-webster.com/dictionary/pedantic

    That's without the pedantic comments in your definitions .

    On to other things.

    Just to tweak your nose, your markup/code doesn't validate. I'll leave it to you to find out why, but here's a hint:
    http://www.htmlhelp.com/tools/valida...blems.html#amp
    To be fair, you probably copy/pasted the URL. But, in the interest of minutiae, how did you not see that?

    Also, you only move the OP ("kicking and screaming") from 1997 to 1999:
    Code:
    xmlns="http://www.w3.org/1999/xhtml"
    So let's bring your code forward kicking and screaming another 15 years and make it validate:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0">
    	<meta name="description" content="The best place to buy student string instruments">
    	<link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv">
    	<title>Best Student Violins</title>
    </head>
    <body>
    
    	<header id="top">
    		<h1>Best Student Violins <span>-</span> <small>Violins, Violas, Cellos, Bass, Music Library</small></h1>
    	</header>
    	
    	<nav>
            <ul id="mainMenu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/catalog.html">Catalog</a></li>
                    <li><a href="/library.html">Library</a></li>
                    <li><a href="/about.html">About Us</a></li>
            </ul>
    
            <ul id="productMenu">
                    <li><a href="/violins.html">Violins</a></li>
                    <li><a href="/violas.html">Violas</a></li>
                    <li><a href="/cellos.html">Cellos</a></li>
                    <li><a href="/bass.html">Basses</a></li>
                    <li><a href="/bows.html">Bows</a></li>
                    <li><a href="/cases.html">Cases</a></li>
            </ul>
    	</nav>
    
    	<section id="accessoriesLinks">
                    <h2>Informational links about accessories</h2>
                    <ul>
                            <li><a href="/StringCareSpecs.html#bridge">Bridge</a></li>
                            <li><a href="/StringCareSpecs.html#13">Chinrests</a></li>
                            <li><a href="/StringCareSpecs.html#tuner">Chromatic Tuner/Metronome</a></li>
                            <li><a href="/StringCareSpecs.html#6">Dampit</a></li>
                            <li><a href="/electronics.html">Electronics</a></li>
                            <li><a href="/StringCareSpecs.html#Fiddlebrite">Fiddlebrite</a></li>
                            <li><a href="/StringCareSpecs.html#finetuners">Fine Tuners</a></li>
                    </ul>
    		<ul>
                            <li><a href="/PedagogyTech.html#33">Fingerboard Tapes</a></li>
                            <li><a href="/StringCareSpecs.html#6">Humidifier</a></li>
                            <li><a href="/StringCareSpecs.html#6">Humistat</a></li>
                            <li><a href="/StringCareSpecs.html#6">Hygrometer</a></li>
                            <li><a href="/PedagogyBookstore.html#dictionaries">Music Dictionaries</a></li>
                            <li><a href="/MusicStands.html">Music Stands, Batons, Accessories</a></li>
                            <li><a href="/totes.html">Music Tote Bags</a></li>
                    </ul>
    		<ul>
                            <li><a href="/terms.html#mute">Mutes</a></li>
                            <li><a href="/StringCareSpecs.html#12">Peg dope</a></li>
                            <li><a href="/StringCareSpecs.html#12">Peg drops</a></li>
                            <li><a href="/StringCareSpecs.html#10">Pegs</a></li>
                            <li><a href="/pinkypads.html">Pinky Pads</a></li>
                            <li><a href="/survival.html#polish">Polish</a></li>
                    </ul>
    		<ul>
                            <li><a href="/StringCareSpecs.html#rosin">Rosin</a></li>
                            <li><a href="/survival.html#shoulderrests">Shoulder Rests</a></li>
                            <li><a href="/StringCareSpecs.html#bridge">Soundpost Setter</a></li>
                            <li><a href="/StringCareSpecs.html#strings">Strings</a></li>
                            <li><a href="/StringCareSpecs.html#string_sets">String Sets</a></li>
                            <li><a href="/StringCareSpecs.html#14">Tailpieces</a></li>
                            <li><a href="/StringCareSpecs.html#5">Vio-meter</a></li>
                            <li><a href="/Teachers_Specials.html">Bulk Sales</a></li>
                    </ul>
            </section>
    
            <footer>
    
                    <section class="subSection">
                            <h2>Payment options</h2>
                            <p>We accept debit/credit card payments over the phone.<br>
                             Please contact Customer Service: (888) 959-0854</p>
    			 
                            <ul id="paymentOptions">
                                    <li><a href="/about.html#Returns">Return Policy</a></li>
                                    <li><a href="/about.html#TradeIns">Trade-In Policy</a></li>
                            </ul>
                    </section>
    
                    <section class="subSection">
                            <h2>Quick Links</h2>
                            <ul id="quickLinks">
                                    <li><a href="http://search.freefind.com/find.html?id=54763373&amp;map=0&amp;page=0&amp;ics=1">Search/Site Map</a></li>
    				<li><a href="/about.html">About Us</a></li>
                            </ul>
                    </section>
    
                    <section class="subSection">
                            <a href="http://beststudentviolins.us6.list-manage.com/subscribe?u=93886c95a5cc651bc9af1bb16&amp;id=93282189f3" class="newsLetterSignup">Free Newsletter</a>
    			
                            <h2>Follow Us</h2>
                            <ul id="socialLinks">
                                    <li><a href="https://www.facebook.com/urbanacousticstrings?ref=hl"><img src="fb.jpg" alt="Facebook"></a></li>
                                    <li><a href="https://mobile.twitter.com/AcousticsUrban"><img src="twitter.jpg" alt="Follow Me on Twitter"></a></li>
    				<li><a href="http://www.pinterest.com/UrbanAcoustics/"><img src="pinterest.jpg" alt="Follow Me on Pinterest"></a></li>
                            </ul>
                    </section>
    
                    <hr>
    
                    <section class="final">
                            Copyright 2014 &copy; <i>SunMusic Strings</i>
                    </section>
    
            </footer>
    
    </body></html>
    [/nose-tweak]


    To be honest, you can out-code me any day of the week. You have proven it over and over -- even in this thread. You provide absolutely amazing solutions. My problem is with the wrapper in which those solutions are enclosed. For example, if you had originally posted:
    Here's another idea:
    [[your code here]]
    I would have said, "Wow! Nice!"
    Instead, your initial comment, "Uhm... I have a stupid question..." instantly pissed me off. And it only got worse from there:
    CSS 2.1's :target property (that people call CSS3 or HTML 5 because they have no clue what they are talking about)
    Huh??? "target property"? Whiskey Tango Foxtrot does that have to do with the issue at hand?? It appears nowhere in the OP's code nor mine. That's what I mean by "pedantic comments"

    As far as the OP's code goes, I recognized instantly that most of it is copy/paste junk (no offense). BUT it also looks like the OP is trying to do this as an aside to his/her true business -- selling stuff related to stringed instruments. All you have to do is read the response to my first couple of posts to recognize that this person is kind of in over his/her head. Now, how the heck are you gonna get this person to understand that you have to do things in a certain way? Baby steps. Learn one thing at a time and then move on. Therefore:

    1) Let's get the existing code working
    2) Let's get it to validate as-is (getting rid of <font> etc. tags and using CSS)
    3) Let's move forward to a really sexy dropdown (as you posted)
    4) Let's get the rest of the site to use the same methods and standards

    There's probably more, but this is the point: You didn't learn all you know about HTML/CSS/JS/PHP/etc. in 24 hours. IIRC from another post you've been doing this for 17-ish years. It takes a bit to absorb new knowledge and skills -- especially if it's not your main job.

    Look, if you do a complete rewrite of that page it will be an absolutely wonderful work of art (OK, work of deathshadow). My intent was to let the OP learn a bit along the way, not to dump an entirely new way of doing things on him/her and leave his/her head spinning with a bunch of swirling, misunderstood code.

    My other issue with your snide side-comments on "PSD jockeys" and HTML5, etc. is that, as with this thread, they tend to take things way, way, way off-topic. Now, you can argue that "standards" and "proper coding" are on-topic. To a degree they are, but the OP in any thread is looking for a solution, not your opinion on PSD jockeys.

    Anyway...

  12. #12
    Quote Originally Posted by Kevin2 View Post
    To be fair, you probably copy/pasted the URL. But, in the interest of minutiae, how did you not see that?
    Because I just copy/pasted the URL and didn't bother running it past validation since I was doing so in the quick reply box? (normally in real testing I hit ctrl-alt-v since I'm a Opera 12 user)

    Good catch actually, also a simple search-replace...

    Quote Originally Posted by Kevin2 View Post
    Also, you only move the OP ("kicking and screaming") from 1997 to 1999
    Which is STILL the current recommendation doctype, since the steaming pile of manure designed to drive coding BACK to the words of 1997 known as HTML 5 is still in DRAFT... hence why it's not even listed on the W3C wiki article on choosing a DTD and has the big "NOT A STANDARD YET" text next to it on the valid DTD list...

    ... and at least a STRICT recommendation document doesn't encourage the code bloat (much less difficulties in maintaining width) and pointless semantic redundancies like HEADER, NAV, SECTION and ARTICLE do... since if browser makers got off their backsides and finished their HTML 4.01 implementations (instead of dialing the clock back on functionality -- yes ChrOpera, I'm looking at you! Or sticking their heads in the sand... yes FF, I'm looking at you!) those new tags serve no legitimate purpose...

    But then when I apply DIV for things like subsections, it's as semantically neutral hooks for style (without saying what that style is), as those nice H2 and HR already SAY a new section is starting.

    ... which of course just contributes to why when people call HTML 5 "the future" I respond with "really?!? looks like the worst of HTML 3.2 to me!" -- which seems to go with it's target audience, again the people who until a couple years ago were sleazing out 3.2 and slapping 4 tranny on it. Now they just slap 5 lip-service around the same decade and a half out of date methodologies and get to slap each-other on the back over how 'modern' they are. It's like the W3C looked at Strict, looked at actual semantic markup, looked at good coding practices, shrugged their shoulders and went "OH well, screw it. Go ahead and just crap out sites any old way."

    Of course, nobody seems to remember this, but isn't implementing and deploying DRAFT's of specifications during their browser testing phases on websites what bit us all in the ass back with HTML 4 and CSS2? I am of course referring to IE 5, 5.5 and 6... which laughably were the most standards compliant browsers of their time. (well, other than Amaya, and who actually used that?) -- in fact, aren't we STILL paying for that to this day? Sure, let's all hop on the 'let's deploy a draft specification on production sites' bandwagon, it couldn't possibly ever bite us in the backside or generate more work in the long term...

    Quote Originally Posted by Kevin2 View Post
    Instead, your initial comment, "Uhm... I have a stupid question..." instantly pissed me off.
    REALLY? Mein gott... grow a skin pal. (that's a joke)

    I know I can be an acerbic ass -- it comes from the frustration of seeing people year after year led to failure by broken practices for at least a decade, and now those buggy, broken, garbage practices being advocated by halfwit BS like jQuery, BootStrap, HTML 5 and fifteen years of web-rot tutorials.

    Makes me wonder how the blazes most of the people out there making websites got their jobs, much less keep them.

    Quote Originally Posted by Kevin2 View Post
    Huh??? "target property"? Whiskey Tango Foxtrot does that have to do with the issue at hand?? It appears nowhere in the OP's code nor mine. That's what I mean by "pedantic comments"
    Uhm... :target would replace ALL the javascript? No joke, ALL OF IT!

    See this:
    Code:
    <div class="dropDown" id="dropDownViolins">
    
    	<div>
    		Violins
    		<a href="#dropDownViolins" class="open"></a>
    		<a href="#" class="close"></a>
    This would be "simpler" than how I'd really handle it, but:

    Code:
    .dropDown {
    	position:relative;
    	zoom:1; /* trip haslayout, fix legacy IE positioning bugs */
    	overflow:hidden;
    	line-height:1.5em;
    }
    
    .dropDown:target {
    	overflow:visible;
    }
    
    .dropDown ul {
    	position:absolute;
    	top:1.5em;
    	left:0;
    	background:#CCC;
    }
    Boom, no Javascript needed or abuse of a form element for a dropdown. THAT'S what :target has to do with it! Again, JavaScript doing markup and CSS' job; Again, the unwritten rule of JavaScript:

    "If you can't make the page work without scripting FIRST, you likely have no business adding JavaScript to it."

    Quote Originally Posted by Kevin2 View Post
    As far as the OP's code goes, I recognized instantly that most of it is copy/paste junk (no offense). BUT it also looks like the OP is trying to do this as an aside to his/her true business -- selling stuff related to stringed instruments. All you have to do is read the response to my first couple of posts to recognize that this person is kind of in over his/her head. Now, how the heck are you gonna get this person to understand that you have to do things in a certain way? Baby steps. Learn one thing at a time and then move on.
    Unfortunately when it's that out of date, it's better to toss it and start over from scratch -- unlearning bad habits can't be done piecemeal.

    Quote Originally Posted by Kevin2 View Post
    You didn't learn all you know about HTML/CSS/JS/PHP/etc. in 24 hours. IIRC from another post you've been doing this for 17-ish years. It takes a bit to absorb new knowledge and skills -- especially if it's not your main job.
    You've got me on that -- to the tune of programming computers for some three and a half DECADES now... But again much of my ... brusque approach stems from the frustration of watching the same mistakes over and over and over again for a decade and a half. The endless stream of people still sleazing out HTML 3.2 and slapping 4 tranny on it, or now the HTML 5 bull dialing the clock back as if STRICT never existed? There's a reason I look out upon the entire web development community of the past... well, three to four years, with disgust to the point of nausea.

    Quote Originally Posted by Kevin2 View Post
    Look, if you do a complete rewrite of that page it will be an absolutely wonderful work of art (OK, work of deathshadow). My intent was to let the OP learn a bit along the way, not to dump an entirely new way of doing things on him/her and leave his/her head spinning with a bunch of swirling, misunderstood code.
    That's why when I do a full rewrite, particularly for someone green, I usually accompany it with a section by section breakdown explaining the how/what/why of the decisions made.

    Because you're right, it's a HELL of a lot to take in at once -- but if the OP has the skills to at least try and get the grammar of HTML right, it's just a matter of getting their vocabulary up to snuff.

    Quote Originally Posted by Kevin2 View Post
    My other issue with your snide side-comments on "PSD jockeys" and HTML5, etc. is that, as with this thread, they tend to take things way, way, way off-topic. Now, you can argue that "standards" and "proper coding" are on-topic. To a degree they are, but the OP in any thread is looking for a solution, not your opinion on PSD jockeys.
    The problem is there's just so much broken bull being advocated right now that crappy site development is reaching epidemic proportions; when just four or five years ago it FINALLY looked like we were making headway -- and so many people -- like the OP in this thread, is suffering for it... So I'm going to take every pot shot I can to try to make sure people understand JUST HOW STUPID that type of nonsense is.

    I find it very hard not to be snide or rude when I encounter stupidity; I can forgive ignorance -- which is why I feel bad for people starting out who get bad advice from the endless stream of stupidity that is decade and a half out of date methodologies; that now HTML 5 and a host of other things seem to now want to make an acceptable norm.
    Last edited by deathshadow; 05-16-2014 at 09:58 PM.

  13. #13
    Join Date
    Feb 2013
    Posts
    110
    I agree HTML5 can lead to bad practices and I have even seen video tutorials where the person states all the bad practices at the beginning of the video. Then goes on to say you should write your code this way. I don't know why on Earth they have develop HTML5 this way, but like it or not it looks like HTML5 is here to stay with a few people who aren't willing to give up without a fight (Deathshadow). I for one don't understand why he just doesn't show people how to code in HTML5 as does with:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    I mean you can still use the same HTML markup in the earlier version (for the most part) and still get the same results, plus you can take advantage the new HTML5 capabilities if so desired. It would lead to better coding in my opinion, but for some reason Deathshadow doesn't want to do something like that. However, I guess can see his point or what he is trying to do (accomplish), for he's just trying to get beginners to write better code to begin with. If the newbie sees they can get away with writing sloppy code in HTML5 they unfortunately will, for most programmers are lazy (specially when they are just beginning). OK, I know I am not feeling good this, for this is the second time I have sided with DS.
    Last edited by Strider64; 05-17-2014 at 08:25 AM.

  14. #14
    Quote Originally Posted by Strider64 View Post
    I mean you can still use the same HTML markup in the earlier version (for the most part) and still get the same results, plus you can take advantage the new HTML5 capabilities if so desired.
    Mostly the loosening (did I say loosening? I mean elimination) of the structural rules make validation a joke. It's why I say that if you MUST use HTML 5, write it as HTML 4.01 STRICT or XHTML 1.0 STRICT and either live with the validation errors of the unrecognized tags, or swap the doctype on deployment.

    Though right now there are only THREE legitimate reasons to use HTML 5 that I can see:

    1) Browser makers promoting vendor lock-in of their favorite pet audio and video codecs so it you want embedded media and crApple users to be able to even get at it, you're stuck with the pointlessly and idiotically redundant AUDIO, VIDEO and EMBED.

    2) MANIFEST if making web apps.

    3) Eastern language support via ruby character arrangement... which as someone who only deals with western languages means jack **** to me.

    ... and that's it. Those are the only things 5 actually offers as improvements or would 'require' the use of it's doctype.

    The rest of it? Garbage -- and even that first one is garbage since that was SUPPOSED to be OBJECT's job. Hell, even IMG was supposed to be going away to FIGHT vendor lock in; now they add a bunch of extra tags that CREATE vendor lock-in, and then have the giant set of brass to call it fighting same? I don't think so Tim...

    I mean, I've beat the allegedly semantic crap to death -- but what about CANVAS, PROGRESS and the DATA- attributes? That's crap that doesn't even belong in the markup since THEY'RE SCRIPTING ONLY! -- admittedly I think the onevent attributes should also be deprecated. KEYGEN? That's client-siding crap that has no business client-side! MENUITEM and the return of MENU -- wasn't MENU deprecated in HTML 4 for a reason? Now it's back for use in forms? FOR WHAT? (the answer is more scripttardery in which case AGAIN, it shouldn't have a tag!)

    Some of it is cute -- DETAILS for example, but with even Firefox not supporting it yet and the webkit implementation buggy as sin, not like we can actually use it. (not that it serves a legitimate purpose semantically since that's CSS' :target attribute's job)... Same with MARK, which I want to like, but do we REALLY need a tag for that? Or DIALOG, another 'cute' idea, but again where's the browser support? (ooh, webkit nightly ALMOST supports it.. and that's it)

    FIGURE and FIGCAPTION sound nice, right up until you realize it's as restricted in semantic meaning as ADDRESS or ASIDE, relegating it to either being abused for a non-semantic purpose or -- like ADDRESS -- not being used at all.

    or BDI, which is redundant to the LANG and/or DIR global attributes.

    The handful of 'useful' bits are either redundant to existing tags, or don't even work in any real-world browsers yet! The rest of it? Garbage that serves no legitimate purpose even existing in the specification -- JUST like all the stuff that was deprecated in HTML 4 STRICT...

    Like MENU, DIR, CENTER, APPLET, BASEFONT, S, STRIKE, ISINDEX... Laughably despite most people's wild nonsensical claims, most of the deprecated tags weren't done so for being presentational, but for being redundant -- MENU and DIR to UL, APPLET to OBJECT, S and STRIKE to DEL, ISINDEX to FORM, and even the 'presentationals' are redundant to... CSS. HTML 4 STRICT was about removing pointless redundancies -- HTML 5 seems to be all about re-introducing old redundancies and making new ones. How 'modern' of them...

    I tell ya, half tempted to start my own "working group" to make up an ACTUAL specification that's authoritative instead of documentative, written for website developers instead of browser developers, in the blind hope that what we come up with is adopted by the W3C sometime in the future just like the WhatWG's train wreck of idiocy was. Who knows, could probably pare it back down to the size of the HTML 2 documentation by using plain English instead of legalese.
    Last edited by deathshadow; 05-17-2014 at 09:32 AM.

  15. #15
    Oh, BTW -- here's the working version with the CSS of making dropdowns using a list of anchors.

    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/murashikibu/

    Is open for easy access to the gooey bits.

    It relies upon :target, which (I appear to have been misled) only works in IE9/newer. I used a media target bug to nab IE8/earlier and make them show the dropdown in-flow all the time, which is pretty much the most effort I'd waste time on with legacy IE unless someone REALLY wanted to pay for it. (and THEN it would need JS)

    As the text on the demo page says, no scripting needed, relies on the :target attribute to function -- and is semantically correct instead of abusing a SELECT element with scripttardery... meaning users on screen readers aren't left out in the cold, and search engines will actually be able to spider it.

    So long as each dropdown has it's own unique ID, and you change the a.open to point at that ID with a hash, you can have as many of them on a page as you like.
    Last edited by deathshadow; 05-17-2014 at 01:22 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles