Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 343
  • Last Modified:

Javascript Slashdot style menu with Safari issues

Hi Experts,

I have downloaded and installed the Slashdot style menu from Dynamic Drive. http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

The script is functioning in Firefox, IE AND Safari when it is either in a plain test template page or on the DD site.
Here is the URL to the working 'test' page on my server:
http://www.randomlychallenged.com/SiteMapTEST2.php

However when I come to embed the script in the page I intend to use it in I lose functionality in Safari. Both FF and IE seem unaffected.
I have tried both Transitional and Strict XHTML 1.0 but it doesn't seem to work with either.

Here is the target page:
http://www.randomlychallenged.com/SiteMap.php

I am not very familiar with Javascript and so there may just be a syntax error that I have failed to spot.

Thank you for your expert advise.
0
RowdyBurns
Asked:
RowdyBurns
  • 5
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
I get a syntax error here:

Too many commas

onload= "MM_preloadImages('images/LogoutBtnDOWN.gif',
'images/NewsHubBtnDOWN.gif',
'images/ProSearchBtnDOWN.gif',
'images/MyProfileBtnDOWN.gif',,,
'images/InfoBtnDOWN.gif',
'images/ChronicleHubBtnDOWN.gif',
'images/FreestyleChallComBtnDOWN.gif',
'images/ChronicleSearchBtnDOWN.gif',,
'images/ChallengeHubBtnDOWN.gif',
'images/MailHubBtnDOWN.gif',
'images/TrophyCabBtnDOWN.gif')"
0
 
Michel PlungjanIT ExpertCommented:
And on the second page, your menu is in a table... So most likely it is a CSS problem
0
 
RowdyBurnsAuthor Commented:
I will amend the commas now to see if that works.
Here is the CSS the page references. Can you see anything obviously wrong with this?



div.sdmenu {
	width: 570px;
	font-family: Helvetica;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat  right bottom;
	color: #ffffff;
}
div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}
div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
	height: 25px;
}
div.sdmenu div span {
	display: block;
	padding: 5px 35px;
	font-style:italic;
	color: #027AC6;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: default;
	border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}
div.sdmenu div a {
	padding: 5px 10px;
	background: #ffffff;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #666666;
}
div.sdmenu div a.current {
	background : #027AC6;
}
div.sdmenu div a:hover {
	background : #027AC6 url(linkarrow.gif) no-repeat right top;
	color: #fff;
	text-decoration: none;
}

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
RowdyBurnsAuthor Commented:
I tried to remove the errors that you highlighted above but when I did so FF stopped working as well!!?
I have also tried to remove the nested table that contains the menu. This did not effect the functionality in either browser.

Any more suggestions?
0
 
Michel PlungjanIT ExpertCommented:
Sorry.
Forget what I was mumbling about

You have a simple onLoad conflict

      // <![CDATA[
      var myMenu;
      window.onload = function() {
            myMenu = new SDMenu("my_menu");
            myMenu.init();
      };
      // ]]>

is conflicting with

if(window.addEventListener){window.addEventListener("load", preloadimgsrc, false);}
else{
      if(window.attachEvent){window.attachEvent("onload", preloadimgsrc);}
      else{if(document.getElementById){window.onload=preloadimgsrc;}}
}

from the oodomimagerollover.js

you can change



      // <![CDATA[
      var myMenu;
      window.onload = function() {
            myMenu = new SDMenu("my_menu");
            myMenu.init();
      };
      // ]]>

to add this just before the </body> (end body) tag:

<script type="text/javascript">
var myMenu = new SDMenu("my_menu");
myMenu.init();
</script>
0
 
RowdyBurnsAuthor Commented:
Do you think I should re-post this as a CSS question?
0
 
RowdyBurnsAuthor Commented:
Sorry I posted that before I got your response. I'll try your suggestion now....
0
 
RowdyBurnsAuthor Commented:
BINGO!!! Well done, and thanks for spotting the conflict. Not knowing anything about Javascript I would never have solved it.
Have a good day.
0
 
Michel PlungjanIT ExpertCommented:
You too :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now