PDA

View Full Version : Slashdot Menu - Issues



Malatest
08-31-2012, 01:22 PM
1) Script Title: Slashdot menu

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

3) Describe problem: I am currently using Dreamweaver MX. I downloaded the code, js and css files and added it to a dreamweaver html file. I modified the code by adding more menu items, changing the length of the graphic for longer menu titles, and collapsing the menu upon loading the page. This works great and I love this menu. Thanks for creating it.

I have a few issues that I've researched and researched but couldn't find any answers. I'm a "seasoned" newbie, in that I've created about a dozen websites in the past. I'm now trying to overhaul my company's website to improve the look and functionality of it, add a flash element etc.

here are my issues:

I created a website using fireworks MX. It's pretty basic with simple rollover behaviours (swap image). I exported this to html so I can work with it in Dreamweaver MX. The site on its own works fabulous. I added the menu system coding and inserted the menu exactly where I wanted it.

a) The opening line from the slashdot menu is this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> - these lines of code actually distorts the website look and moves the graphics all around. When I remove the code, and just add <html> to the beginning, the look of the website is perfect. Do I absolutely need those two lines of code in order for the menu system to work?

b) The menu system does not work when added to my website. It doesn't expand, it's basically a lonely graphic sitting there. (It works on it's own in it's own file) I know I'm breaking some forum rules, likely, because there is a conflict with pre-load images or something along those lines. I know I have to somehow combine the pre-load for the menu with the pre-load for the images for website and after researching the issue for 3 days, I'm throwing in the towel and begging for help as I'm on a deadline.

Can anyone please please please help me with this?

Malatest
09-11-2012, 04:54 PM
I resolved Issue a) but I'm really desperate about the second issue. I just can't get the menu to work and I can't tell what the code is conflicting with. I tried putting the scripts in the same _onload command and doing things that were suggested through google searches but I just can't seem to get this menu to work properly. It won't expand on mouse click. If I change the code to expand each menu, i.e. <div style="float: left" id="my_menu" class="sdmenu">
<div class="expand">, then when I run the website, those menu categories are expanded and I'm able to click on the subcategory links. It's just the function () code that I can't get to work with the scripts, here's the coding in a nutshell:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;">
<meta name="description" content="FW MX DW MX HTML">
<title>nbica-1.gif</title>
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamkkic 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();
};
// ]]>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#myslideshow{ /*sample CSS for demo*/
border:0px solid black;
}
</style>
<script src="javascript/translucentslideshow.js" type="text/javascript">
/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">
var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [202, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["PD.gif", "courses.asp", "_new"], //["image_path", "optional_link", "optional_target"]
["e-learning.gif", "pd/e-learning.asp", "_new"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:12, pauseonmouseover:true},
orientation: "v", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 400 //transition duration (milliseconds)
})
</script>

<!-- Fireworks MX Dreamweaver MX target. Created Mon Sep 10 11:32:40 GMT-0300 (Atlantic Daylight Time) 2012-->
<script language="JavaScript">
<!--
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;
}
/* Functions that swaps images. */
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

/* Functions that handle preload. */
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];}}
}

//-->
</script>
</head>
<body bgcolor="#EAE4DA" onLoad="MM_preloadImages('images/nbica-1_r1_c15_f2.gif','images/nbica-1_r1_c22_f2.gif','images/nbica-swap_r3_c13.gif','images/nbica-swap_r3_c16.gif','images/nbica-swap_r3_c21.gif','images/nbica-swap_r3_c24.gif');">