Log in

View Full Version : Slashdot incompatibility?


Dariune
02-13-2008, 09:50 AM
1) Script Title: Slashdot Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

3) Describe problem:

Hi guys, this is hopefully going to be a quick question.
I am using the Slashdot Menu script (i think its fantastic) and am now trying to create a secondary horizontal navigation bar with roll over images. I am using the Dreamweaver 8 navigation bar creator (its easier) but when ever i create the navigation bar the Slashdot menu stops working.
I have tried using it with both Divs and Tables and both have the same affect on the slashdot menu.

Below is the page code. I have created just one button so you can see what might be going wrong. When i do create the navigation bar it will look a lot more buttons to it.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>MH Systems</title>
<!-- TemplateEndEditable -->
<link href="../CSS/MHSCSS.css" rel="stylesheet" type="text/css" />
<link href="../sdmenu/sdmenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
<!--
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<style type="text/css">
<!--
.style1 {color: #2c2d96}
.style2 {font-size: x-small}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body onload="MM_preloadImages('../website_bits/buttons/button_Home_over.png')">
<div id="outer">
<div id="Header"><div id="Menu"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','../website_bits/buttons/button_Home_over.png',1)" onmouseover="MM_nbGroup('over','Home','../website_bits/buttons/button_Home_over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="../website_bits/buttons/button_Home.png" alt="" name="Home" width="100" height="30" border="0" id="Home" onload="" /></a></div>
</div>
<div id="links">

<div id="my_menu" class="sdmenu">
<div> <span>Products</span>
<div> <span>Golf</span>
<a href="http://www.gcgold.co.uk" class="style1">GCGold</a>
<a href="http://tools.dynamicdrive.com/favicon/">Chips</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Tee Bookings</a>
<a href="../WebServices.html">Web Services</a>
<a href="http://tools.dynamicdrive.com/gradient/">Point of Sale</a>
<a href="http://tools.dynamicdrive.com/button/">Nominal Legders</a></div>
<div> <span>Schools</span>
<a href="http://www.dynamicdrive.com/recommendit/">Dont know</a>
<a href="http://www.dynamicdrive.com/link.htm">what to</a>
<a href="http://www.dynamicdrive.com/resources/">put here</a></div>
<div> <span>About Us</span>
<a href="http://www.javascriptkit.com">Contact</a>
<a href="http://www.cssdrive.com">Meet The Team</a>
<a href="http://www.codingforums.com">News</a>
<a href="http://www.dynamicdrive.com/style/">Who We Are</a></div>
<div> <span>Partners</span> <a href="../?foo=bar">Dragons Touch</a>
<a href="../.">Misco</a> <a href="../index.html">Toshiba Tec</a>
<a href="../index.html?query">Web Creative</a></div>
</div></div>
</div>
<div id="Main"><!-- TemplateBeginEditable name="Main Content" -->Content<!-- TemplateEndEditable --></div>
<div id="Footer"><br />
</div>
</div>
</body>

Any help would be greatly apreciated.
Dariune
02-14-2008, 09:05 AM
Anyone able to help?
rangana
02-14-2008, 09:11 AM
Hi Dariune,
Could you include in the codes your CSS...it will play a vital role in the fix..or better a link! :D
Dariune
02-14-2008, 12:48 PM
Hi there Rangana

I cant give a url because it is currently only on my machine locally. (im still building it you see)

However i will gladly put the Css and the JS here if it will help you help me :)

CSS for the template page


/* CSS Document */

body {
font-family: "Times New Roman", Times, serif;
font-size: medium;
width: 100%;
margin: 30px auto;
text-align:center;
background-color: #9FB9FA;
}

#outer {
padding: 0px;
position: relative;
text-align:center;
background-color: #bbd2f6;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #000000;
overflow: auto;
width: 800px;
}

#Header {
display:block;
height: 107px;
width: 800px;
margin: 0px auto;
background-image: url(../website_bits/worldwithwhiteboarder.gif);
background-repeat: no-repeat;
background-position: center center;

}



#links {
min-height: 400px;
width: 150px;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: large;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: center;
list-style-position: inside;
margin: 0px;
background-color: #bbd2f6;
border-right-width: thin;
border-left-width: thin;
border-right-style: none;

}

#Main {
min-height: 400px;
font-family: "Times New Roman", Times, serif;
float:left;
Width: 626px;
background-color: #bbd2f6;
background-repeat: no-repeat;
border-top-style: none;
border-left-color: #bcc5d2;
padding: 10px;
border-left-width: 1px;
border-left-style: solid;
}

#Footer {
display:block;
width: 800px;
height: 80px;
background-image: url(../website_bits/Company%20Fonts_Logos/Footer.jpg);
background-repeat: no-repeat;
background-position: center center;
float: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

.bl {
background-image: url(../website_bits/corner.gif);
background-color:#FFFFFF;
background-repeat: no-repeat;
background-position: 0 100%;
height: 100%;
width: 100%;
}

.br {
background-image: url(../website_bits/cornerbr.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
}

.tl {
background-image: url(../website_bits/cornertl.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}

.tr {
background-image: url(../website_bits/cornertr.gif);
background-repeat: no-repeat;
background-position: 100% 0%;
padding-right: 10px;
padding-left: 10px;
}
#Menu {
height: 20px;
bottom: 0px;
top: 76px;
position: relative;
padding-left: 160px;
text-align: left;
}

This is the CSS for the left hand Navigation bar


div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #2c2d96;
background: #489fcb;
}
div.sdmenu div {
background: url(title2.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle2.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
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: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #2c2d96;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}

This is the JS for the left hand Navigation bar


function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 3;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);

var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 30);
this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};

Any help your able to give me, i would greatly apreciate it.

If there is anything else you need me to do, just let me know.

Dariune
rangana
02-15-2008, 12:39 AM
Hi Dariune,
Sorry if this takes long, but where is the problem?..I have your codes on my pc already...just can' figure out what's wrong :D

....and on what browser is this problem going on?
Dariune
02-16-2008, 02:50 PM
Hello there

Well when i create a menu at the top making it a rollover menu that changes when the mouse hovers over it everythign works except the slashdot menu stops moving. You can no longer clock to retract or expand the menus. When i remove my second navigation it starts working again.

This occurs on Firefox and IE
Dariune
02-21-2008, 02:24 PM
Hmmm this is very strange.

I have been playing around with this and it seems as soon as i post any kind of roll over image in dreamweaver it seems to stop the slashdot from working. By not working i mean it wont move, as if its not connecting to the JS page.

Anyone have any ideas? It works fine if there are no roll over images.
Dariune
02-21-2008, 10:38 PM
I have finally solved the problem.

Im not sure why but it seems having preloaded images disrupts the Slashdot script.
Any ideas why?