www.webdeveloper.com
Results 1 to 3 of 3

Thread: Drop down list with multiple tracks

  1. #1
    Join Date
    Feb 2006
    Posts
    50

    Drop down list with multiple tracks

    I have this code that i wrote out. Basiclly you have four selections of audio you can choose from. This works fine in FF but in IE6 initially the first track will play but if you drop down to any other track it will freeze. Any ideas on how I can fix this?

    If you're using IE7 I could use some feedback on this as well.

    Thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>drop down audio yo</title>
    </head>
    <body bgcolor="#FFFFFF">
    
    
    
    <!-- Css Menu -->
    
    <style>
    ul.cssMenu ul{display:none}
    ul.cssMenu li:hover>ul{display:block}
    ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.cssMenu,ul.cssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#ffffff;
    	background-repeat:repeat;
    	border-color:#AAAAAA;
    	border-width:1px;
    	border-style:solid;
    }
    ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.cssMenu ul{
    	width:77.7px;
    }
    ul.cssMenu li{
    	display:block;
    	margin:2px 0px 0px 2px;
    	font-size:0px;
    }
    ul.cssMenu a:active, ul.cssMenu a:focus {
    outline-style:none;
    }
    ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#ffffff;
    	border-width:0px;
    	border-color:#6655ff;
    	border-style:solid;
    	text-align:left;
    	text-decoration:none;
    	padding:4px;
    	_padding-left:0;
    	font:normal 11px Verdana;
    	color: #444444;
    	text-decoration:none;
    	cursor:default;
    }
    ul.cssMenu span{
    	overflow:hidden;
    }
    ul.cssMenu li {
    	float:left;
    }
    ul.cssMenu ul li {
    	float:none;
    }
    ul.cssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.cssMenu li.sep{
    	text-align:center;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.cssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:5;
    	height:16;
    	display:inline-block;
    	background-color:#AAAAAA;	background-image:none;}
    ul.cssMenu ul li.sep span{
    	width:80%;
    	height:3;
    }
    ul.cssMenu li:hover{
    	position:relative;
    }
    ul.cssMenu li:hover>a{
    	background-color:#4792E6;
    	border-color:#665500;
    	border-style:solid;
    	font:normal 11px Verdana;
    	color: #ffffff;
    	text-decoration:none;
    }
    ul.cssMenu li a:hover{
    	position:relative;
    	background-color:#4792E6;
    	border-color:#665500;
    	border-style:solid;
    	font:normal 11px Verdana;
    	color: #ffffff;
    	text-decoration:none;
    }
    ul.cssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
    height:16px;
    }
    ul.cssMenu ul img {width:16px;
    height:16px;
    }
    ul.cssMenu img.over{display:none}
    ul.cssMenu li.dis a:hover img.over{display:none !important}
    ul.cssMenu li.dis a:hover img.def {display:inline !important}
    ul.cssMenu li:hover > a img.def  {display:none}
    ul.cssMenu li:hover > a img.over {display:inline}
    ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline}
    ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none}
    ul.cssMenu a:hover ul{display:block}
    ul.cssMenu span{
    	display:block;
    	background-image:url(./images/arrv_anim_1.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:11px;}
    ul.cssMenu li:hover>a>span{	background-image:url(./images/arrv_anim_1o.gif);
    }
    ul.cssMenu a:hover span{	_background-image:url(./images/arrv_anim_1o.gif)}
    ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
    ul.cssMenu ul li:hover > a span{	background-image:url(./images/arr_double_1o.gif);}
    ul.cssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}
    
    #newboxes1 {
    	position:relative;
    	top:0px;
    
    	width:125px;
    	height:20px;
    	}
    #newboxes2 {
    	position:relative;
    	top:0px;
    
    	width:125px;
    	height:20px;
    	}
    #newboxes3 {
    	position:relative;
    	top:0px;
    
    	width:125px;
    	height:20px;
    	}
    #newboxes4 {
    	position:relative;
    	top:0px;
    
    	width:125px;
    	height:20px;
    	}
    
    </style>
    <script>
    function showonlyone(thechosenone) {
          var newboxes = document.getElementsByTagName("div");
                for(var x=0; x<newboxes.length; x++) {
                      name = newboxes[x].getAttribute("name");
                      if (name == 'newboxes') {
                            if (newboxes[x].id == thechosenone) {
                            newboxes[x].style.display = 'block';
                      }
                      else {
                            newboxes[x].style.display = 'none';
                      }
                }
          }
    }
    </script>
    
    <ul class="cssMenu cssMenum">
    	<li class=" cssMenui"><a class="  cssMenui" href="#"><span>Languages</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul class=" cssMenum">
    		<li class=" cssMenui"><a class="  cssMenui" href="javascript:showonlyone('newboxes1');">English</a></li>
    		<li class=" cssMenui"><a class="  cssMenui" href="javascript:showonlyone('newboxes2');">Spanish</a></li>
    		<li class=" cssMenui"><a class="  cssMenui" href="javascript:showonlyone('newboxes3');">Japanese</a></li>
    		<li class=" cssMenui"><a class="  cssMenui" href="javascript:showonlyone('newboxes4');">Mandarin</a></li>
    	</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    </ul>
    
    
    
    <div style="width:225px;">
    <div style="float:left;">
             <div name="newboxes" id="newboxes1" style="display: none; display:block; background-color:#060"><embed src="1.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div>
             
             <div name="newboxes" id="newboxes2" style="display: none; display:none; background-color:#099"><embed src="2.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div>
             
             <div name="newboxes" id="newboxes3" style="display: none; display:none; background-color:#00C"><embed src="3.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div>
    
             <div name="newboxes" id="newboxes4" style="display: none; display:none; background-color:#C96"><embed src="4.mp3" autostart="value" type="audio/mpeg" loop="value" width="150" height="20" controller="true"></div>
    </div>
    </div>         
    </body>
    </html>

  2. #2
    Join Date
    Feb 2006
    Posts
    50
    if the divs are just html like style background color you'll see the changes in IE6. but for some reason the embed mp3's will not switch.

  3. #3
    Join Date
    Feb 2006
    Posts
    50
    upon further review when i tested the divs with display block on all of them it will work in IE6 but on the load of the page all audio files show up and that looks bad. when the display is set to none ie6 will not read properly

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