dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Help with jQuery, please.

  1. #1
    Join Date
    Jan 2014
    Posts
    10

    Unhappy Help with jQuery, please.

    Hey all,
    I am teaching myself web programming and I have ran into a problem. It should be easy for all of you but I have tried everything I can think of. I am trying to start with jquery but it seems I have done something wrong. It doesn't want to work no matter what I do. It works when I use it "inline" inside my HTML file, but when I try and use external files... it fails.

    Ill paste my HTML, I don't have anything for jquery because I can't get anything to work. Am I doing something wrong with my HTML? my directory is only two folders... the root folder that everthing is in and then a js folder that all the jquery is in.

    I hope this isn't too confusing to understand. Any help will be very much appreciated. Thank you. P.S. Any tips on my HTML would be cool too.


    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>Illusive Minds Media</title>
    
    <script src="js/jquery.js"></script><!-- jQuery Library -->
    
    
    <link rel="stylesheet" href="footer.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    <link rel="stylesheet" href="head.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    
    
    <!-- The following code targets IE6 only and enables mouse hover on non-anchor tags -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="htc/ie6.css" />
    <![endif]-->
    
    </head>
    
    <body>
    
    	<div id="header"><!-- BEGIN HEADER -->
    
    		<div id="headerLogo">
    			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
    		</div>
    		
    		<nav id="navBar">
    			<a id="navPhoto" href="#">Photography</a>
    			<a id="navCinema" href="#">Cinematography</a>
    			<a id="navWeb" href="#">Web</a>
    			<a id="navDesign" href="#">Design</a>
    			<a id="navConnect" href="#">Connect</a>
    			<a id="navTheMinds" href="#">The Minds</a>
    		</nav>
    		
    		<div id="slider"></div>
    		
    	</div><!-- END HEADER -->
    	
    <!-- _____________________________________________________________________________________________________-->
    
    	
    
    <div id="footer"><!-- BEGIN FOOTER CONTAINER -->
    
    
        <ul id="footer_menu"><!-- Begin Footer Menu -->
        
        
            <li class="imgmenu"><a href="#"></a></li><!-- This Item is an Image -->
            
            
            <li><a href="#">My Account</a><!-- Begin Second Menu Item -->
            
                <ul class="dropup"><!-- Default Drop Up List -->
    				
    				<li><form id="login">
    					<h1>Log In</h1>
    						<fieldset id="inputs">
    							<input id="username" type="text" placeholder="Username" autofocus required>   
    							<input id="password" type="password" placeholder="Password" required>
    						</fieldset>
    						
    						<fieldset id="actions">
    							<input type="submit" id="submit" value="Log in">
    							<a href="">Forgot your password?</a><a href="">Register</a>
    						</fieldset>
    				</form></li>
    				
                </ul><!-- End Drop Up List -->
                
            </li><!-- End Second Menu Item -->
    
    
            <li class="right"><a href="#" class="drop">Logout</a><!-- Begin Right Aligned Item -->
                
            </li><!-- End Right Aligned  Item -->
    
    
        
        </ul><!-- End Footer Menu -->
    
    
    
    
        <ul id="social"><!-- Social Icons -->
        
        	<!-- The span is the text appearing on hover, use the tooltip class in the link -->
            <li><a href="#" class="tooltip"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/rss.png' alt="" /><span>RSS</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
            
        </ul><!-- End Social Icons -->
    
    
    
    </div><!-- END FOOTER CONTAINER -->
    
    
    <script src="js/nav.js"/></script><!-- NavBar Animations -->
    
    </body>
    </html>

  2. #2
    Join Date
    Jan 2014
    Posts
    11
    HTML: use HTML5 instead of XHTML.
    Now as for your question:
    Since it runs fine inline but not as an external, I would first check folder structure/file names.
    You say you only have two folders, but I see references to "img" and "htc".
    If your "js" folder is not inside of your root folder, then that is the problem, as you have referenced "js/jquery.js", which points to a folder named "js" that is within the same folder as this HTML document.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,589
    JQuery in the JavaScript Frameworks forum please...
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Oct 2013
    Posts
    645
    Code:
    <script src="js/nav.js"/></script>
    Umm. No. Use this instead:
    Code:
    <script src="js/nav.js"></script>

  5. #5
    Join Date
    Jan 2014
    Posts
    10
    Yes, sorry, There are two other folders. I didn't mention them because I have checked both folders for the file and it is is the correct one. Here is the directory:

    Root:
    index.html
    head.css
    footer.css
    /js
    jquery.js
    nav.js
    /img
    /htc

    I have changed the code like Kevin2 said, I noticed I had am extra slash for some reason. Still doesn't work. Maybe I'm not doing my jquery right? Like I said, I am totally new to this. The only programming experience I have is in AS3. noob status. haha


    jQuery:
    Code:
    $(document).ready(function(){
      $("#navPhoto").hide(function(){
    
    });
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Illusive Minds Media</title>
    
    <script src="js/jquery.js"></script><!-- jQuery Library -->
    
    
    <link rel="stylesheet" href="footer.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    <link rel="stylesheet" href="head.css" type="text/css" media="screen" /><!-- Footer Stylings -->
    
    
    <!-- The following code targets IE6 only and enables mouse hover on non-anchor tags -->
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="htc/ie6.css" />
    <![endif]-->
    
    </head>
    
    <body>
    
    	<div id="header"><!-- BEGIN HEADER -->
    
    		<div id="headerLogo">
    			<img  id="headerImage" class="center" src="img/headerLogo.png" alt="Illusive Minds Media"> 
    		</div>
    		
    		<nav id="navBar">
    			<a id="navPhoto" href="#">Photography</a>
    			<a id="navCinema" href="#">Cinematography</a>
    			<a id="navWeb" href="#">Web</a>
    			<a id="navDesign" href="#">Design</a>
    			<a id="navConnect" href="#">Connect</a>
    			<a id="navTheMinds" href="#">The Minds</a>
    		</nav>
    		
    		<div id="slider"></div>
    		
    	</div><!-- END HEADER -->
    	
    <!-- _____________________________________________________________________________________________________-->
    
    	
    
    	
    	
    	
    
    
    
    <div id="footer"><!-- BEGIN FOOTER CONTAINER -->
    
    
        <ul id="footer_menu"><!-- Begin Footer Menu -->
        
        
            <li class="imgmenu"><a href="#"></a></li><!-- This Item is an Image -->
            
            
            <li><a href="#">My Account</a><!-- Begin Second Menu Item -->
            
                <ul class="dropup"><!-- Default Drop Up List -->
    				
    				<li><form id="login">
    					<h1>Log In</h1>
    						<fieldset id="inputs">
    							<input id="username" type="text" placeholder="Username" autofocus required>   
    							<input id="password" type="password" placeholder="Password" required>
    						</fieldset>
    						
    						<fieldset id="actions">
    							<input type="submit" id="submit" value="Log in">
    							<a href="">Forgot your password?</a><a href="">Register</a>
    						</fieldset>
    				</form></li>
    				
                </ul><!-- End Drop Up List -->
                
            </li><!-- End Second Menu Item -->
    
    
            <li class="right"><a href="#" class="drop">Logout</a><!-- Begin Right Aligned Item -->
                
            </li><!-- End Right Aligned  Item -->
    
    
        
        </ul><!-- End Footer Menu -->
    
    
    
        <!--<p><a href="#">StickyFooter</a> &copy; 2010 All Rights Reserved.</p> -->
    
    
    
        <ul id="social"><!-- Social Icons -->
        
        	<!-- The span is the text appearing on hover, use the tooltip class in the link -->
            <li><a href="#" class="tooltip"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/rss.png' alt="" /><span>RSS</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
            <li><a href="#" class="tooltip"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
            
        </ul><!-- End Social Icons -->
    
    
    
    </div><!-- END FOOTER CONTAINER -->
    
    <form id="login">
        <h1>Log In</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="Username" autofocus required>   
            <input id="password" type="password" placeholder="Password" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="Log in">
            <a href="">Forgot your password?</a><a href="">Register</a>
        </fieldset>
    </form>
    
    
    <script src="js/nav.js"></script><!-- NavBar Animations -->
    
    
    </body>
    </html>

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,589
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Jan 2014
    Posts
    11
    [QUOTE=UttermostChuck;1311953]
    jQuery:
    Code:
    $(document).ready(function(){
      $("#navPhoto").hide(function(){
    
    });
    I don't know jQuery, but aren't you missing a closing parentheses and a closing brace for the first "function" call?

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