www.webdeveloper.com
Results 1 to 8 of 8

Thread: the navigation is not working correctly

  1. #1
    Join Date
    Dec 2013
    Posts
    13

    Angry the navigation is not working correctly

    this one's is easy.
    the thing is the script page is not being made use. have i linked it correctly.
    html page is displayed along with css.
    but there is no effect of script even though i have linked it in my html page:

    this is my code:

    nav.html

    Code:
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    
    <div id="accordian">
    	<ul>
    		<li>
    			<h3><span class="icon-dashboard"></span>Dashboard</h3>
    			<ul>
    				<li><a href="#">Reports</a></li>
    				<li><a href="#">Search</a></li>
    				<li><a href="#">Graphs</a></li>
    				<li><a href="#">Settings</a></li>
    			</ul>
    		</li>
    		<!-- we will keep this LI open by default -->
    		<li class="active">
    			<h3><span class="icon-tasks"></span>Tasks</h3>
    			<ul>
    				<li><a href="#">Today's tasks</a></li>
    				<li><a href="#">Urgent</a></li>
    				<li><a href="#">Overdues</a></li>
    				<li><a href="#">Recurring</a></li>
    				<li><a href="#">Settings</a></li>
    			</ul>
    		</li>
    		<li>
    			<h3><span class="icon-calendar"></span>Calendar</h3>
    			<ul>
    				<li><a href="#">Current Month</a></li>
    				<li><a href="#">Current Week</a></li>
    				<li><a href="#">Previous Month</a></li>
    				<li><a href="#">Previous Week</a></li>
    				<li><a href="#">Next Month</a></li>
    				<li><a href="#">Next Week</a></li>
    				<li><a href="#">Team Calendar</a></li>
    				<li><a href="#">Private Calendar</a></li>
    				<li><a href="#">Settings</a></li>
    			</ul>
    		</li>
    		<li>
    			<h3><span class="icon-heart"></span>Favourites</h3>
    			<ul>
    				<li><a href="#">Global favs</a></li>
    				<li><a href="#">My favs</a></li>
    				<li><a href="#">Team favs</a></li>
    				<li><a href="#">Settings</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    </body>
    </html>
    style.css:

    Code:
    /*custom font for text*/
    @import url(http://fonts.googleapis.com/css?family=Nunito);
    /*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: http://fortawesome.github.io/Font-Awesome/ */
    @import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
    
    /*Basic reset*/
    * {margin: 0; padding: 0;}
    
    body {
    	background: #4EB889;
    	font-family: Nunito, arial, verdana;
    }
    #accordian {
    	background: #004050;
    	width: 250px;
    	margin: 100px auto 0 auto;
    	color: white;
    	/*Some cool shadow and glow effect*/
    	box-shadow: 
    		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
    		0 0 200px 1px rgba(255, 255, 255, 0.5);
    }
    /*heading styles*/
    #accordian h3 {
    	font-size: 12px;
    	line-height: 34px;
    	padding: 0 10px;
    	cursor: pointer;
    	/*fallback for browsers not supporting gradients*/
    	background: #003040; 
    	background: linear-gradient(#003040, #002535);
    }
    /*heading hover effect*/
    #accordian h3:hover {
    	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    }
    /*iconfont styles*/
    #accordian h3 span {
    	font-size: 16px;
    	margin-right: 10px;
    }
    /*list items*/
    #accordian li {
    	list-style-type: none;
    }
    /*links*/
    #accordian ul ul li a {
    	color: white;
    	text-decoration: none;
    	font-size: 11px;
    	line-height: 27px;
    	display: block;
    	padding: 0 15px;
    	/*transition for smooth hover animation*/
    	transition: all 0.15s;
    }
    /*hover effect on links*/
    #accordian ul ul li a:hover {
    	background: #003545;
    	border-left: 5px solid lightgreen;
    }
    /*Lets hide the non active LIs by default*/
    #accordian ul ul {
    	display: none;
    }
    #accordian li.active ul {
    	display: block;
    }

    script.js:

    Code:
    /*jQuery time*/
    $(document).ready(function(){
    	$("#accordian h3").click(function(){
    		//slide up all the link lists
    		$("#accordian ul ul").slideUp();
    		//slide down the link list below the h3 clicked - only if its closed
    		if(!$(this).next().is(":visible"))
    		{
    			$(this).next().slideDown();
    		}
    	})
    })

  2. #2
    Join Date
    Oct 2013
    Posts
    373
    You don't link to a JQuery library. Your "script" won't work without it.

  3. #3
    Join Date
    Dec 2013
    Posts
    13
    how do i do it

  4. #4
    Join Date
    Oct 2013
    Posts
    373

  5. #5
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    163
    Quote Originally Posted by rajshekar90 View Post
    how do i do it
    kevin is correct just add a jQuery CDN as shown below

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Grab CloudFlare CDN's jQuery -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script type="text/javascript" src="script.js"></script>
    </head>

  6. #6
    Join Date
    Dec 2013
    Posts
    13
    Quote Originally Posted by kralcx View Post
    kevin is correct just add a jQuery CDN as shown below

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Grab CloudFlare CDN's jQuery -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script type="text/javascript" src="script.js"></script>
    </head>
    thanks kralcx. i followed Kevin's suggestion for running the file locally. it works. thanks

  7. #7
    Join Date
    Oct 2013
    Posts
    373
    Actually that was not my suggestion. The page I linked to shows how to call a library locally (installed on your server) or via a CDN. The point was to show you both methods and let you choose what's best for your situation. Most people choose the CDN method (like kralcx demonstrates) as it offers a lot of advantages over serving the file locally. If you chose to "run" jQuery locally after seeing the advantages and disadvantages of both methods, that's fine. IMO, and in the vast majority of cases, you are much better off using a CDN.

  8. #8
    Join Date
    Dec 2013
    Posts
    13
    Quote Originally Posted by Kevin2 View Post
    Actually that was not my suggestion. The page I linked to shows how to call a library locally (installed on your server) or via a CDN. The point was to show you both methods and let you choose what's best for your situation. Most people choose the CDN method (like kralcx demonstrates) as it offers a lot of advantages over serving the file locally. If you chose to "run" jQuery locally after seeing the advantages and disadvantages of both methods, that's fine. IMO, and in the vast majority of cases, you are much better off using a CDN.
    thanks for the information. yes of course the link you provided had both option available. great.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles