Results 1 to 10 of 10

Thread: Sucker Fish style drops

  1. #1
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default Sucker Fish style drops

    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
    Last edited by nate51; 03-24-2008 at 03:20 PM. Reason: One problem solved

  2. #2
    Join Date
    Apr 2006
    Posts
    190
    Thanks
    3
    Thanked 7 Times in 7 Posts

    Default

    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]-->
    Ryan
    Sevierville, TN

  3. #3
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Apr 2006
    Posts
    190
    Thanks
    3
    Thanked 7 Times in 7 Posts

    Default

    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.
    Ryan
    Sevierville, TN

  5. #5
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    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.
    HTML 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.

  6. #6
    Join Date
    Apr 2006
    Posts
    190
    Thanks
    3
    Thanked 7 Times in 7 Posts

    Default

    Whats with the

    Code:
    <!-- -->
    In the style code around all of it

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

    Code:
    <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.
    Ryan
    Sevierville, TN

  7. #7
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Anyone else able to bring any insight as to where things are going wrong?

  9. #9
    Join Date
    Apr 2006
    Posts
    190
    Thanks
    3
    Thanked 7 Times in 7 Posts

    Default

    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:

    Code:
    <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.
    Last edited by NXArmada; 04-04-2008 at 08:32 PM. Reason: Fixed a glitch in code.
    Ryan
    Sevierville, TN

  10. The Following User Says Thank You to NXArmada For This Useful Post:

    nate51 (04-10-2008)

  11. #10
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    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

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
  •