Results 1 to 8 of 8

Thread: Slashdot incompatibility?

  1. #1
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slashdot incompatibility?

    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.

    Code:
    <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.

  2. #2
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone able to help?

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Hi Dariune,
    Could you include in the codes your CSS...it will play a vital role in the fix..or better a link!
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  4. #4
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    /* 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

    Code:
    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

    Code:
    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

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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

    ....and on what browser is this problem going on?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Feb 2008
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have finally solved the problem.

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

Bookmarks

Posting Permissions

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