[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Where do I insert Javascript superfish to enhance my nav bars?

Posted on 2009-05-03
9
Medium Priority
?
249 Views
Last Modified: 2012-05-06
Hello experts,
I am very new to building web pages, and have tried to insert the superfish code into my html file to enable the javascript, without success.

I am under the impression that I have to have the superfish.js file in the same folder as all the other files for the webpage.  

Can anyone tell me exactly where to put the script that goes near the ul to enable superfish?  I don't know why I am struggling with this so, but here I am.

Thank you in advance for any assistance.
jill

      
* { 
	margin : 0; 
	padding : 0; 
	} 
body { 
	background-image : url(burlap.gif); 
	font-family : tahoma, verdana, sans-serif; 
	} 
#wrapper { 
	width : 50em; 
	height : 60em; 
	background-color : #669933; 
	margin : 1.5em auto; 
	} 
 
#header{
	display:block;
	}
 
#branding1 { 
		width : 50em; 
		height : 0.5em; 
		background-color : #669933; 
	} 
 
#branding2 { 
		width : 50em; 
		height : 6em; 
		background-image : url(paper2.gif); 
	} 
 
#branding2 img { 
		padding : 1em; 
	} 
 
 
#navbar { 
		background-image:url(navbartint2.gif); 
		height:1.5em;
		
		
	
	} 
 
#navbar img { 
	visibility : visible; 
	} 
#navbar img:hover { 
	visibility : visible; 
	} 
#navbar ul { 
	list-style-type : none; 
	} 
#navbar li { 
	float : left; 
	position : relative; 
	padding-bottom : 0.3em; 
	padding-left : 1.3em; 
	padding-right : 1.3em; 
	padding-top : 0.2em; 
	} 
 
#navbar li.about { 
	float : left; 
	position : relative; 
	background-color:#669933;
	width:6em; 
	display:block;
	font-size:95%;
	padding-left:.5em;
	padding-right:.2em;	
	
	
	
	}
 
#navbar li.departments { 
	float : left; 
	position : relative; 
	background-color:#669933;
	width:9em; 
	display:block;
	font-size:95%;
	padding-left:.5em;
	padding-right:.2em;	
	
	
	
	}
 
#navbar li.specialties { 
	float : left; 
	position : relative; 
	background-color:#669933;
	width:11em; 
	display:block;
	font-size:95%;
	padding-left:.5em;
	padding-right:.2em;	
	
	
	
	}
 
 
#navbar a, #navbar a:link, #navbar a:visited { 
	text-decoration : none; 
	font-family : verdana, tahoma, sans-serif; 
	font-size : 95%; 
	color : #cccc99; 
	display : block; 
	height : 1.5em; 
	} 
#navbar a:hover { 
	color : #cc9933;
	  
	} 
#navbar li ul { 
	position : absolute; 
	z-index : 100; 
	visibility : hidden;
	
	} 
#navbar li:hover ul { 
	visibility : visible; 
	} 
 
	}
#navbar li:hover ul li a { 
	background-color : #669933; 
	color : #cc9933; 
	text-align : left; 
	display : block; 
	width : 6em; 
	padding : 0; 
	height : auto;
 
	
	} 
#navbar li:hover ul li a:hover { 
	background-color : #669933; 
	color : #000000;
	
	} 
#left { 
	width : 12.5em; 
	height : 50em; 
	background-color : #cc9933; 
	float : left; 
	} 
 
 
 
#right{
	width:11em;
	height:30em;
	background-color:#cc6600;
	color:#ffffff;
	float:right;
	clear:right;
	}
#bulk{
	background-color:#ffffff;
	width:26.5em;
	height:25em;
	float:left;
	}
	
***************************
	<!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 name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
 
  <title>Fresh and Wholesome</title>
  <link href="freshandwholesomerebuild1.css" rel="stylesheet" type="text/css" 
 
/>
 
 
 
 
 
 
</head>
 
<body>
  <!-- Wrapper sets the layout width -->
 
  <div id="wrapper">
 
      <div id="branding1"></div>
 
      <div id="branding2"><img src="fwlogo.png" alt="Fresh and Wholesome 
 
Logo" style=
      "width:25%" />
 
</div>
 
      <div id="navbar">
        <ul>
 
		
          <li class="selected"><a href="index.html">Home</a></li>
 
          <li>
            <a href="about.html">About Us</a>
 
            <ul>

Open in new window

0
Comment
Question by:jilljill1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 24291446
It doesn't matter where you put the .js file as long as the path to it is correct. Just put the <script> element after the <link> element.
0
 

Author Comment

by:jilljill1
ID: 24291479
I'm glad that it was you that responded.  I didn't get to say thanks for the response about the CSS gap, I thought that I had deleted that question.

I think I have the part that I put this in the <head>
<script type="text/javascript" src="superfish.js"></script>

Then, is the only thing that I have to do is put this with the <ul> element that it applies to?

<script type="text/javascript">
 
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
 
</script>

I am confused about where below this code should go.  I have looked at many tutorials, and perhaps in this area, I am learning impaired. Ugh.

<div id="navbar">
        <ul>

            
          <li class="selected"><a href="index.html">Home</a></li>

          <li>
            <a href="about.html">About Us</a>

            <ul>

              <li class="about"><a href="history.html">Our History</a></li>

              <li class="about"><a href="mission.html">Our Mission</a></li>

              <li class="about"><a href="team.html">Our Team</a></li>
            </ul>
          </li>

          <li>
            <a href="departments.html">Departments</a>

            <ul>
              <li class="departments"><a href="produce.html">Produce</a></li>

              <li class="departments"><a href="dairy.html">Dairy</a></li>

              <li class="departments"><a href="frozen.html">Frozen</a></li>

              <li class="departments"><a href="meat.html">Meat and

Cheese</a></li>

              <li class="departments"><a href="ecofriendly.html">Eco

Friendly</a></li>

              <li class="departments"><a href="grocery.html">Grocery</a></li>

              <li class="departments"><a href="haba.html">Health and

Beauty</a></li>
            </ul>
          </li>

          <li>
            <a href="specialities.html">Specialties</a>

            <ul>
              <li class="specialties"><a href="supplement.html">Supplement

Specialist</a></li>

              <li class="specialties"><a href="glutenfree.html">Gluten Free

Products</a></li>

              <li class="specialties"><a href="vegetarian.html">Vegetarian

and Vegan</a></li>

              <li class="specialties"><a href="smoothie.html">Smoothie and

Juice Bar</a></li>
            </ul>
          </li>

          <li><a href="menus.html">Menus</a></li>

          <li><a href="directions.html">Directions</a></li>

          <li><a href="contact.html">Contact Us</a></li>
        </ul>


Thanks for your help so far.
Jill
0
 
LVL 43

Expert Comment

by:David S.
ID: 24291488
Either put that after the <ul> or after the other <script> element.  And don't forget that you need to load jQuery as well for it to work.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:jilljill1
ID: 24291518
Do I put that code under each <ul> that has drop down categories?  Like below?  Or just once?   Then where do I put the jquery file?

<div id="navbar">
        <ul>

           
          <li class="selected"><a href="index.html">Home</a></li>

          <li>
            <a href="about.html">About Us</a>

            <ul>
<script type="text/javascript">
 
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
 
</script>

              <li class="about"><a href="history.html">Our History</a></li>

              <li class="about"><a href="mission.html">Our Mission</a></li>

              <li class="about"><a href="team.html">Our Team</a></li>
            </ul>
          </li>

          <li>
            <a href="departments.html">Departments</a>

            <ul>
              <li class="departments"><a href="produce.html">Produce</a></li>

              <li class="departments"><a href="dairy.html">Dairy</a></li>

              <li class="departments"><a href="frozen.html">Frozen</a></li>

              <li class="departments"><a href="meat.html">Meat and

Cheese</a></li>

              <li class="departments"><a href="ecofriendly.html">Eco

Friendly</a></li>

              <li class="departments"><a href="grocery.html">Grocery</a></li>

              <li class="departments"><a href="haba.html">Health and

Beauty</a></li>
            </ul>
          </li>

          <li>
            <a href="specialities.html">Specialties</a>

            <ul>
              <li class="specialties"><a href="supplement.html">Supplement

Specialist</a></li>

              <li class="specialties"><a href="glutenfree.html">Gluten Free

Products</a></li>

              <li class="specialties"><a href="vegetarian.html">Vegetarian

and Vegan</a></li>

              <li class="specialties"><a href="smoothie.html">Smoothie and

Juice Bar</a></li>
            </ul>
          </li>

          <li><a href="menus.html">Menus</a></li>

          <li><a href="directions.html">Directions</a></li>

          <li><a href="contact.html">Contact Us</a></li>
        </ul>

0
 
LVL 43

Expert Comment

by:David S.
ID: 24291714
I meant the outer <ul>. Don't add it in more than one place.

The <script> element to load jQuery should be the first <script> element in the page.
0
 

Author Comment

by:jilljill1
ID: 24291813
So I insert the jquery file in the beginning.  I am not sure which file it is.  I went to download  on jQuery, is it jquery1.2.3.js  It's a pretty long page of script, I wasn't sure it was the right one?
0
 
LVL 43

Accepted Solution

by:
David S. earned 1500 total points
ID: 24291921
jQuery is a full JS library. It is smaller than some of the other libraries though.  Be sure to use the "minified" version. Here's the latest: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
0
 
LVL 16

Expert Comment

by:hankknight
ID: 24293625
If you use this URL to load jquery it will autmotatically always use the most recent stable version:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
0
 

Author Closing Comment

by:jilljill1
ID: 31577382
thank you.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question