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,348
    JQuery in the JavaScript Frameworks forum please...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Oct 2013
    Posts
    484
    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,348
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  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