javascript drop down menu dosent line up correctly in Google Chrome

Started by ReadmanHill, Jan 31 2012, 16:34

javascript google chrome drop down

You cannot reply to this topic

2 replies to this topic

#1 ReadmanHill

Community Member
9 posts

Real Name:Readman Hill

@Mention

Posted 31 January 2012, 16:34

any help guys would be much appriciated.

i am having a problem where my dropdown menu is not aligned correctly with its category when the website first loads up and it is only happening in Google Chrome.

the drop down section is not being displayed underneath the correct category, instead they are being displayed "out of sync" and not underneath the correct category.

however, if i mouseover a category and click one of the links in the drop down menu, they all work perfectly, being displayed under the correct category.

if i leave the website and go back to it, the problem returns and the drop down menu goes back to not being aligned correctly. also the problem returns if i hit F5 at any time when on the site and refresh the page.

i am very confused as the problem only happens when you either first visit the website or refresh the page but then corrects itself once one of the links in the drop down menu is clicked.

i have attached my code underneath so hopefully someone can figure this out as i cannot.

many thanks in advance.

This is the code in my includes/header.php file

<link rel="stylesheet" type="text/css" href="includes/example1.css" />
    <script type="text/javascript" src="../ie5.js"></script>
    <script type="text/javascript" src="includes/DropMenu1.js"></script>
<table cellspacing="0" cellpadding="0" id="menu1" class="dm1" align="center">
    <tr>
	    <td>
		    <a class="item1 left" <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">
<img src="includes/languages/english/images/buttons/homebutton.png" border="0"/></a>'; ?>
	    </td>
	    <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/piecesbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_28&osCsid=3p7vtt1kd96sh2pjj6b46ce947">100 and Under</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_29&osCsid=3p7vtt1kd96sh2pjj6b46ce947">300 and Under</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_30&osCsid=3p7vtt1kd96sh2pjj6b46ce947">500 and Under</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_31&osCsid=3p7vtt1kd96sh2pjj6b46ce947">501 - 749</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_32&osCsid=3p7vtt1kd96sh2pjj6b46ce947">750 - 999</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_33&osCsid=3p7vtt1kd96sh2pjj6b46ce947">1000</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_34&osCsid=3p7vtt1kd96sh2pjj6b46ce947">1500</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_35&osCsid=3p7vtt1kd96sh2pjj6b46ce947">2000</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_36&osCsid=3p7vtt1kd96sh2pjj6b46ce947">3000</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_37&osCsid=3p7vtt1kd96sh2pjj6b46ce947">4000</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_38&osCsid=3p7vtt1kd96sh2pjj6b46ce947">5000+</a>
		    </div>
	    </td>
	    <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/manufacturerbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_39&osCsid=3p7vtt1kd96sh2pjj6b46ce947">BV Leisure</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_40&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Ceaco</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_41&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Cheatwell</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_42&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Citadel</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_136&osCsid=7rjlmumoj450nn4gj82qmm77m3">Classic Deluxe</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_43&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Clementoni</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_44&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Crown & Andrews</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_45&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Educa</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_46&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Falcon-Jumbo</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_47&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Gibson</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_48&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Heye</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_137&osCsid=7rjlmumoj450nn4gj82qmm77m3">James Hamilton-Grovely</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_49&osCsid=3p7vtt1kd96sh2pjj6b46ce947">JR Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_50&osCsid=3p7vtt1kd96sh2pjj6b46ce947">King</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_51&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Otter House</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_52&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Paul Lamond</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_53&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Purrfect</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_54&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Ravensburger</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_55&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Schmidt</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_56&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Susan Prescot</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_138&osCsid=7rjlmumoj450nn4gj82qmm77m3">This England</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_57&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Wasgij</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=22_58&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Wentworth Wooden</a>
		    </div>
	    </td>
	    <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/picturebutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_59&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Animals</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_60&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Buildings & Locations</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_61&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Cartoon</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_62&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Christmas</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_63&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Disney</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_64&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Fantasy</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_65&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Fine Art</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_66&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Landscape</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_67&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Nostalgia</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_68&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Planes & Boats</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=23_69&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Trains & Other Transport</a>
		    </div>
	    </td>
  <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/agebutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_70&osCsid=3p7vtt1kd96sh2pjj6b46ce947">1+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_71&osCsid=3p7vtt1kd96sh2pjj6b46ce947">2+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_72&osCsid=3p7vtt1kd96sh2pjj6b46ce947">3+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_73&osCsid=3p7vtt1kd96sh2pjj6b46ce947">4+</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_74&osCsid=3p7vtt1kd96sh2pjj6b46ce947">5+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_75&osCsid=3p7vtt1kd96sh2pjj6b46ce947">6+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_76&osCsid=3p7vtt1kd96sh2pjj6b46ce947">7+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_77&osCsid=3p7vtt1kd96sh2pjj6b46ce947">8+</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_78&osCsid=3p7vtt1kd96sh2pjj6b46ce947">9+</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=24_79&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Adult</a>
		    </div>
	    </td>
  <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/artistbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_94&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Anne Geddes</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_95&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Barry Freeman</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_96&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Christian Riese Lassen</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_147&osCsid=474nuvu8i0k7u7pselbfjvr4i0">Colin Thompson</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_140&osCsid=6tuo9j0p99u35ig2g4ej3c2084">Derek Roberts</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_97&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Escher</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_98&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Gale Pitt</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_99&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Graham Thompson</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_142&osCsid=9f99dele9n5tqgsc4dg5tmagh4">Howard Robinson</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_141&osCsid=h518l21r7pu34090olndktd3g5">James Alexander</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_100&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Jan Van Haasteren</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_139&osCsid=1b58kcbrgvc3ki2emrl1cngc42">Jim Mitchell</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_148&osCsid=cuh6qkinpfm08he37am3nkutk2">Joh Naito</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_101&osCsid=3p7vtt1kd96sh2pjj6b46ce947">John P. O'Brien</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_102&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Ken Duncan</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_103&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Kevin Walsh</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_104&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Linda Jane Smith</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_105&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Luis Royo</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_106&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Malcolm Root</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_107&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Michael Herring</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_108&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Mike Jupp</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_146&osCsid=109prvhnd56lt33abba1s4sn91">Nene Thomas</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_109&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Susan Brabeau</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_110&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Terry Harrison</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_111&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Thomas Kinkade</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_112&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Trevor Mitchell</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=25_113&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Victoria Frances</a>
		    </div>
	    </td>
  <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/characterbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_115&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Ben & Holly's Little Kingdom</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_116&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Bob the Builder</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_117&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Cars</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_118&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Charlie & Lola</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_119&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Chuggington</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_120&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Disney</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_145&osCsid=pp3ci2mm9emklpekg1k95v65i4">Disney Princess</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_121&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Doctor Who</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_122&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Dora the Explorer</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_123&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Fireman Sam</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_124&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Guess with Jess</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_125&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Hello Kitty</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_144&osCsid=5c2o04iiv57tb0chb33sgnbj94">Me to You</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_126&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Noddy</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_127&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Peppa Pig</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_128&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Postman Pat</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_129&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Scooby Doo</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_130&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Simpsons</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_131&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Spongebob Squarepants</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_132&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Star Wars</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_133&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Thomas the Tank</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_134&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Winnie the Pooh</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=114_135&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Where's Wally</a>
		    </div>
	    </td>
  <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/specialistpuzzlesbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_80&osCsid=3p7vtt1kd96sh2pjj6b46ce947">3D Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_81&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Extra Large Pieces</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_82&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Glow in the Dark Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_83&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Impossipuzzles</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_84&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Look & Find Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_85&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Metallic Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_143&osCsid=ivaa7eek62khsc7vpvm8eqghr6">Multipacks</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_86&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Panoramic Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_87&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Photomosaic Puzzles</a>
  <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_88&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Shaped Puzzles</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_89&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Wasgij</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=26_90&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Wooden Puzzles</a>
		    </div>
	    </td>
  <td>
		    <a class="item1" href="javascript:void(0)"><img src="includes/languages/english/images/buttons/accessoriesbutton.png" border="0"/></a>
		    <div class="section">
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=27_91&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Puzzle Fixative</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=27_92&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Puzzle Boards</a>
			    <a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=27_93&osCsid=3p7vtt1kd96sh2pjj6b46ce947">Puzzle Rolls</a>
		    </div>
	    </td>
	   
    </tr>
    </table>
<script type="text/javascript">
    var dm1 = new DropMenu1('menu1');
    dm1.position.top = -1;
    dm1.init();
    </script>

This is the code that is in my includes/DropMenu1.js file

function DropMenu1(id) {
    this.type = "horizontal";
    this.delay = {
	    "show": 300,
	    "hide": 300
    }
    this.position = {
	    "top": 1,
	    "left": -1
    }
    this.zIndex = {
	    "visible": 0,
	    "hidden": 0
    };
    // Browser detection
    this.browser = {
	    "ie": Boolean(document.body.currentStyle),
	    "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
    };
    if (!this.browser.ie) { this.browser.ie5 = false; }
    this.init = function() {
	    if (!document.getElementById(this.id)) { return alert("DropMenu1.init() failed. Element '"+ this.id +"' does not exist."); }
	    if (this.type != "horizontal" && this.type != "vertical") { return alert("DropMenu1.init() failed. Unknown menu type: '"+this.type+"'"); }
	    if (this.browser.ie && this.browser.ie5) { fixWrap(); }
	    fixSections();
	    parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    }
    function fixSections() {
	    var arr = document.getElementById(self.id).getElementsByTagName("div");
	    var sections = new Array();
	    var widths = new Array();
	    for (var i = 0; i < arr.length; i++) {
		    if (arr[i].className == "section") {
			    sections.push(arr[i]);
		    }
	    }
	    for (var i = 0; i < sections.length; i++) {
		    widths.push(getMaxWidth(sections[i].childNodes));
	    }
	    for (var i = 0; i < sections.length; i++) {
		    sections[i].style.width = (widths[i]) + "px";
	    }
	    if (self.browser.ie) {
		    for (var i = 0; i < sections.length; i++) {
			    setMaxWidth(sections[i].childNodes, widths[i]);
		    }
	    }
    }
    function fixWrap() {
	    var elements = document.getElementById(self.id).getElementsByTagName("a");
	    for (var i = 0; i < elements.length; i++) {
		    if (/item2/.test(elements[i].className)) {
			    elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
		    }
	    }
    }
    function getMaxWidth(nodes) {
	    var maxWidth = 0;
	    for (var i = 0; i < nodes.length; i++) {
		    if (nodes[i].nodeType != 1) { continue; }
		    if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
	    }
	    return maxWidth;
    }
    /* Set width for item2 elements */
    function setMaxWidth(nodes, maxWidth) {
	    for (var i = 0; i < nodes.length; i++) {
		    if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
			    if (self.browser.ie5) {
				    nodes[i].style.width = (maxWidth) + "px";
			    } else {
				    nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
			    }
		    }
	    }
    }
    function parse(nodes, tree, id) {
	    for (var i = 0; i < nodes.length; i++) {
		    if (1 != nodes[i].nodeType) {
			    continue;
		    }
		    switch (true) {
			    // .item1
			    case /\bitem1\b/.test(nodes[i].className):
				    nodes[i].id = id + "-" + tree.length;
				    tree.push(new Array());
				    nodes[i].onmouseover = item1over;
				    nodes[i].onmouseout = item1out;
				    break;
			    // .item2
			    case /\bitem2\b/.test(nodes[i].className):
				    nodes[i].id = id + "-" + tree.length;
				    tree.push(new Array());
				    break;
			    // .section
			    case /\bsection\b/.test(nodes[i].className):
				    // id, events
				    nodes[i].id = id + "-" + (tree.length - 1) + "-section";
				    nodes[i].onmouseover = sectionOver;
				    nodes[i].onmouseout = sectionOut;
				    // position
				    var box1 = document.getElementById(id + "-" + (tree.length - 1));
				    var box2 = document.getElementById(nodes[i].id);
				    if ("horizontal" == self.type) {
					    box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.top + "px";
					    if (self.browser.ie5) {
						    box2.style.left = self.position.left + "px";
					    } else {
						    box2.style.left = box1.offsetLeft + self.position.left + "px";
					    }
				    } else if ("vertical" == self.type) {
					    box2.style.top = box1.offsetTop + self.position.top + "px";
					    if (self.browser.ie5) {
						    box2.style.left = box1.offsetWidth + self.position.left + "px";
					    } else {
						    box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.left + "px";
					    }
				    }
				    // sections, sectionsShowCnt, sectionsHideCnt
				    self.sections.push(nodes[i].id);
				    self.sectionsShowCnt.push(0);
				    self.sectionsHideCnt.push(0);
				    break;
		    }
		    if (nodes[i].childNodes) {
			    if (/\bsection\b/.test(nodes[i].className)) {
				    parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
			    } else {
				    parse(nodes[i].childNodes, tree, id);
			    }
		    }
	    }
    }
    function item1over() {
	    var id_section = this.id + "-section";
	    if (self.visible) {
		    var el = new Element(self.visible);
		    el = document.getElementById(el.getParent().id);
		    if (/item1-active/.test(el.className)) {
			    el.className = el.className.replace(/item1-active/, "item1");
		    }
	    }
	    if (self.sections.contains(id_section)) {
		    self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
		    var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
		    setTimeout(function(a, B) { return function() { self.showSection(a, B); } } (id_section, cnt), self.delay.show);
	    } else {
		    if (self.visible) {
			    var cnt = self.sectionsHideCnt[self.sections.indexOf(self.visible)];
			    setTimeout(function(a, B) { return function() { self.hideSection(a, B); } } (self.visible, cnt), self.delay.show);
		    }
	    }
    }
    function item1out() {
	    var id_section = this.id + "-section";
	    if (self.sections.contains(id_section)) {
		    self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
		    if (id_section == self.visible) {
			    var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
			    setTimeout(function(a, B) { return function() { self.hideSection(a, B); } }(id_section, cnt), self.delay.hide);
		    }
	    }
    }
    function sectionOver() {
	    self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
	    var el = new Element(this.id);
	    el = document.getElementById(el.getParent().id);
	    if (!/item1-active/.test(el.className)) {
		    el.className = el.className.replace(/item1/, "item1-active");
	    }
    }
    function sectionOut() {
	    self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
	    var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
	    setTimeout(function(a, B) { return function() { self.hideSection(a, B); } }(this.id, cnt), self.delay.hide);
    }
    this.showSection = function(id, cnt) {
	    if (typeof cnt != "undefined") {
		    if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
	    }
	    this.sectionsShowCnt[this.sections.indexOf(id)]++;
	    var el = new Element(id);
	    var parent = document.getElementById(el.getParent().id);
	    if (!/item1-active/.test(parent.className)) {
		    parent.className = parent.className.replace(/item1/, "item1-active");
	    }
	    if (this.visible) {
		    if (id == this.visible) { return; }
		    this.hideSection(this.visible);
	    }
	    //document.getElementById(id).style.display = "block";
	    document.getElementById(id).style.visibility = "visible";
	    document.getElementById(id).style.zIndex = this.zIndex.visible;
	    this.visible = id;
    }
    this.hideSection = function(id, cnt) {
	    if (typeof cnt != "undefined") {
		    if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
	    }
	    var el = new Element(id);
	    var parent = document.getElementById(el.getParent().id);
	    parent.className = parent.className.replace(/item1-active/, "item1");
	    document.getElementById(id).style.zIndex = this.zIndex.hidden;
	    document.getElementById(id).style.visibility = "hidden";
	    //document.getElementById(id).style.display = "none";
	    if (id == this.visible) { this.visible = ""; }
	    else {
		    //throw "DropMenu1.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
		    return;
	    }
	    this.sectionsHideCnt[this.sections.indexOf(id)]++;
    }
    this.hideSelf = function(cnt) {
	    if (this.visible && cnt == this.sectionsHideCnt[this.sections.indexOf(this.visible)]) {
		    this.hideSection(this.visible);
	    }
    }
    function Element(id) {
	    this.getParent = function() {
		    var s = this.id.substr(this.menu.id.length);
		    var a = s.split("-");
		    a.pop();
		    return new Element(this.menu.id + a.join("-"));
	    }
	    this.menu = self;
	    this.id = id;
    }
    var self = this;
    this.id = id;
    this.tree = [];
    this.sections = [];
    this.sectionsShowCnt = [];
    this.sectionsHideCnt = [];
    this.visible = "";
}
if (typeof Array.prototype.indexOf == "undefined") {
    Array.prototype.indexOf = function(item) {
	    for (var i = 0; i < this.length; i++) {
		    if ((typeof this[i] == typeof item) && (this[i] == item)) {
			    return i;
		    }
	    }
	    return -1;
    }
}
if (typeof Array.prototype.contains == "undefined") {
    Array.prototype.contains = function(s) {
	    for (var i = 0; i < this.length; i++) {
		    if (this[i] === s) {
			    return true;
		    }
	    }
	    return false;
    }
}

Back to top

#2 NodsDorf

Community Member
1,233 posts

Real Name:Don Ford
Gender:Male
Location:ohio usa

@Mention

Posted 01 February 2012, 23:33

You're not explictly declaring the session on for you menu items are you?

Example:

<a class="item2" href="http://theasteriskjigsawpuzzles.com/index.php?cPath=21_28&osCsid=3p7vtt1kd96sh2pjj6b46ce947">100 and Under</a>

Should be written as:

<a class="item2" href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=21_28'); ?>">100 and Under</a>

Now, I'm not sure if the session thing is the issue or not, but should be fixed unless you're doing something I am not familar with.

Since your site requires a user name & pass that is the best I can do. I will say that when I trouble shoot browser issues I use the the debuging tools to see what isn't
getting called correctly. Firefox/firebug, Chrome & IE /Developer Tools

Back to top

#3 ReadmanHill

Community Member
9 posts

Real Name:Readman Hill

@Mention

Posted 09 February 2012, 16:47

thanks for the reply.

i didnt realise you could simply have 'cPath=21_28' without having the full address of the url.

this is a much easier and quicker way.

thanks alot for than.

however the problem is not resolved.

each time the site is first visited the drop down boxes are still unaligned untill a link is clicked, then for some reason they align themselves up and work perfectly.

any other ideas?

sorry about the password protection on the site. the person i am doing the site for does not want this removed untill the site is completely finished.

Back to top

Back to General Support · Next Unread Topic →