Log in

View Full Version : Sucker Fish style drops



nate51
03-24-2008, 01:38 PM
I have been getting help all over this forum with this one but I am stuck on 1 major problem with this drop down.

Drop down tutorial
http://qrayg.com/learn/code/cssmenus/

I used this tutorial but did some visual changes to it. Now for some reason it does not want to display the drop downs in FireFox but the tutorial does work in FireFox.
http://ne-media.com/test/hometest.html

Can anyone help steer me in the right direction? I really am new to drop downs, trying to learn as I go, and am desperate for help here.

-- Nate

NXArmada
03-26-2008, 03:32 PM
ur missing the

<!--[if gte IE 5.5]>
<![endif]-->

Around

<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>

For this

1. <!--[if gte IE 5.5]>
2. <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
3. <![endif]-->

nate51
03-30-2008, 10:42 PM
I dropped those parts in before, but it didn't change anything.

This is a stupid question but where can I get the dhtml.js file? I don't have one on my server and I would imagine it's looking for a file that doesnt exsist.

NXArmada
03-31-2008, 06:23 PM
Re-Read the tutorial at http://qrayg.com/learn/code/cssmenus/ when you view the example it gives you links to download the .js files.

nate51
04-03-2008, 08:13 PM
Ok I figured out what I was doing wrong. I was looking for a file actually called 'dhtml.js' I didn't realize that was the 'nav-v.js' file

I have dropped in the lines

<!--[if gte IE 5.5]>
<![endif]-->

And it still does not run in firefox.

I have looked over my code and cannot figure out where things are going wrong.

Here is my page code.

<!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; charset=utf-8" />
<title>Custom Art Concepts</title>
<style type="text/css">
<!--
@import"nav-v.css";
body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
-->
</style>
<script type="text/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;
}
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_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;
}
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];}
}
//-->
</script>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="nav-v.js" type="text/JavaScript"></script>
<![endif]-->
</head>

<body>
<table width="1009" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td width="1009"><img src="images/cac_header.jpg" width="1009" height="133" /></td>
</tr>
<tr>
<td><img src="images/cac_topbreak.jpg" width="1009" height="36" /></td>
</tr>
<tr>
<td><table width="1009" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="13" height="596"><img src="images/left_shdw.jpg" width="13" height="596" /></td>
<td width="981" valign="top"><table width="981" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="981" height="415" valign="top" bgcolor="#86ABC5"><table width="981" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="119" height="402" align="left" valign="top" bgcolor="#86ABC5"><table width="119" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="159"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav/home_btno.jpg',1)"><img src="images/nav/home_btn.jpg" name="home" width="119" height="42" border="0" id="home" /></a></td>
</tr>
<tr>
<td><ul id="navmenu-v">
<li><a href=""><img src="images/nav/awards_btn.jpg" name="awards" width="119" height="38" border="0"></a></li>
<ul>
<li><a href="">Acrylics</a>
<ul>
<li><a href="">Our Patented Process</a></li>
<li><a href="">Embedments</a></li>
</ul>
<li><a href="#">Glass</a></li>
<ul>
<li><a href="#">Our Patented Process</a></li>
<li><a href="#">Etched, Sandblasted, Filled</a></li>
</ul>
<li><a href="#">Metal Plate Awards</a></li>
<ul>
<li><a href="#">Our Patented Process with Photos Colour</a></li>
<li><a href="#">Photo Etch/Silkscreen Perpetual</a></li>
</ul>
<li><a href="#">Achievement + Recognition Programs</a></li>
<ul>
<li><a href="#">Certificate Programs</a></li>
<li><a href="#">Plaques and Frames</a></li>
</ul>
<li><a href="#">Lapel Pins, Jewelry, Gavel, Cups</a></li>
</ul></ul></td>
</tr>
<tr>
<td><ul id="navmenu-v">
<li><a href="#"><img src="images/nav/frames_btn.jpg" name="frames" width="119" height="53" border="0"></a></li>
<ul>
<li><a href="#">Custom</a></li>
<ul>
<li><a href="#">Wide Variety, Custom Mats, Etc.</a></li>
</ul>
<li><a href="#">Volume</a></li>
<ul>
<li><a href="#">Price Estimate Sensitive</a></li>
</ul>
<li><a href="#">Shadow Boxes</a></li>
<li><a href="#">Hindged Display Cases</a></li>
<li><a href="#">Canvas Transfer</a></li>
<li><a href="#">Variety of Print and Art Sources</a></li>
</ul></ul></td>
</tr>
<tr>
<td><ul id="navmenu-v">
<li><a href="#"><img src="images/nav/plaques_btn.jpg" name="plaques" width="119" height="72" border="0"></a></li>
<ul>
<li><a href="#">Mounting and Laminate</a></li>
<li><a href="#">Plaques</a></li>
</ul></ul></td>
</tr>
<tr>
<td><ul id="navmenu-v">
<li><a href="#"><img src="images/nav/mirrors_btn.jpg" name="mirrors" width="119" height="33" border="0"></a></li>
<ul>
<li><a href="#">Our Own Unique Designs</a></li>
<ul>
<li><a href="#">Cambridge, Newhaven, Sandblasted</a></li>
</ul>
<li><a href="#">1,000's of Moulding</a></li>
</ul></ul></td>
</tr>
<tr>
<td><ul id="navmenu-v">
<li><a href="#"><img src="images/nav/photo_btn.jpg" name="photo" width="119" height="39" border="0" id="photo"></a></li>
<ul>
<li><a href="#">Framed B&amp;W, Sephia&amp;Colour, 8x10's, Customized Coloured</a></li>
<li><a href="#">Canvas Prints</a></li>
<li><a href="#">Browse Our Collection</a></li>
<ul>
<li><a href="#">Architectural B&amp;W, Sepias</a></li>
<li><a href="#">Cuba</a></li>
<li><a href="#">Flowers and Leaves</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Textures</a></li>
</ul>
</ul></ul></td>
</tr>
<tr>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/nav/contact_btno.jpg',1)"><img src="images/nav/contact_btn.jpg" name="contact" width="119" height="33" border="0" id="contact" /></a></td>
</tr>

</table></td>
<td width="806" valign="top" bgcolor="#86ABC5"><table width="806" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="807" valign="top" bgcolor="#86ABC5"><img src="images/home_img.jpg" width="833" height="387" /></td>
</tr>

</table></td>
<td width="56" bgcolor="#86ABC5">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><table width="981" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="199"></td>
<td width="193"></td>
<td width="193"></td>
<td width="194"></td>
<td width="202"></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="10"><img src="images/right_shdw.jpg" width="15" height="596" /></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/site_bttm.jpg" width="1009" height="29" /></td>
</tr>
</table>
</body>
</html>


The CSS and java are strait from the example page, so nothing has been changed.

*note some of the html near the bottom has been edited to fit post.

NXArmada
04-03-2008, 08:43 PM
Whats with the



<!-- -->


In the style code around all of it



<style type="text/css">
<!--
@import"nav-v.css";
body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
-->
</style>


Should be this



<style type="text/css">
<!--
@import"nav-v.css";
-->

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>


Also nav-v.css and nav-v.js need to be in the same folder as the page.

nate51
04-04-2008, 02:01 AM
The

<!-- -->
Dreamweaver puts in automatically to start off and end my css code.

As for the nav-v.js and nav-v.css yes they are both in the same folder as the page.

nate51
04-04-2008, 05:20 PM
Anyone else able to bring any insight as to where things are going wrong?

NXArmada
04-04-2008, 08:26 PM
I had some more time to look through your code. All the UL and LI where messed missing closing tags or to many closing tags.

Below is your fixed menus, hope this fix your problems:



<ul id="navmenu-v">
<li><a href=""><img src="images/nav/awards_btn.jpg" name="awards" width="119" height="38" border="0"></a>
<ul>
<li><a href="">Acrylics</a>
<ul>
<li><a href="">Our Patented Process</a></li>
<li><a href="">Embedments</a></li>
</ul>
</li>
<li><a href="#">Glass</a>
<ul>
<li><a href="#">Our Patented Process</a></li>
<li><a href="#">Etched, Sandblasted, Filled</a></li>
</ul>
</li>
<li><a href="#">Metal Plate Awards</a>
<ul>
<li><a href="#">Our Patented Process with Photos Colour</a></li>
<li><a href="#">Photo Etch/Silkscreen Perpetual</a></li>
</ul>
</li>
<li><a href="#">Achievement + Recognition Programs</a>
<ul>
<li><a href="#">Certificate Programs</a></li>
<li><a href="#">Plaques and Frames</a></li>
</ul>
</li>
<li><a href="#">Lapel Pins, Jewelry, Gavel, Cups</a></li>
</ul>
</li>
</ul>


<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/frames_btn.jpg" name="frames" width="119" height="53" border="0"></a>
<ul>
<li><a href="#">Custom</a></li>
</ul>
</li>
<li><a href="#">Wide Variety, Custom Mats, Etc.</a></li>
<li><a href="#">Volume</a>
<ul>
<li><a href="#">Price Estimate Sensitive</a></li>
</ul>
</li>
<li><a href="#">Shadow Boxes</a></li>
<li><a href="#">Hindged Display Cases</a></li>
<li><a href="#">Canvas Transfer</a></li>
<li><a href="#">Variety of Print and Art Sources</a></li>
</ul>


<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/plaques_btn.jpg" name="plaques" width="119" height="72" border="0"></a>
<ul>
<li><a href="#">Mounting and Laminate</a></li>
<li><a href="#">Plaques</a></li>
</ul>
</li>
</ul>


<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/mirrors_btn.jpg" name="mirrors" width="119" height="33" border="0"></a>
<ul>
<li><a href="#">Our Own Unique Designs</a></li>
</ul>
</li>
<li><a href="#">Cambridge, Newhaven, Sandblasted</a></li>
<li><a href="#">1,000's of Moulding</a></li>
</ul>


<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/photo_btn.jpg" name="photo" width="119" height="39" border="0" id="photo"></a>
<ul>
<li><a href="#">Framed B&amp;W, Sephia&amp;Colour, 8x10's, Customized Coloured</a></li>
<li><a href="#">Canvas Prints</a></li>
<li><a href="#">Browse Our Collection</a>
<ul>
<li><a href="#">Architectural B&amp;W, Sepias</a></li>
<li><a href="#">Cuba</a></li>
<li><a href="#">Flowers and Leaves</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Textures</a></li>
</ul>
</li>
</ul>
</li>
</ul>


I have tested the above localy and all works perfectly.

nate51
04-10-2008, 07:41 PM
NXArmada!

You the man!

It now works in FireFox!

Wow thanks so much for sticking with it.

Now I just gotta figure out how to put this whole navagation info an external js file.

But consider this post done, thanks NXArmada. :)

-- Nate