Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Macclesfield, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Basic jQuery linking?

    I'm trying to add jQuery into my design, but none of it is working. Below is my HTML code and jQuery. Thanks.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>WebDesignProject</title>
    <link type="text/css" rel="stylesheet" href="WebDesign1.css"/>
    <script>
    $(document).ready(function(){
    	$(.bar).mouseenter(function(){
    		$(this).hide();
    		});
    	});
    </script>
    </head>
    <body>
    <script>
    </script>
    <div id="header">
    Home Page
    </div>
    
    <div id="navigationbar">
    <div id="test" class="bar">Page1</div>
    <div class="bar">Page2</div>
    <div class="bar">Page3</div>
    <div class="bar">Page4</div>
    <div class="bar">Page5</div>
    <div class="bar">Page6</div>
    </div>
    
    <div id="content">
    
    </div>
    
    <div id="footer">
    <a><p class="bottomrow">About Us</p></a>
    <a><p class="bottomrow">Contact Us</p></a>
    <a><p class="bottomrow">Careers</p></a>
    <a><p class="bottomrow">Help</p></a>
    <a><p class="bottomrow">Terms and Conditions</p></a>
    </div>
    
    </body>
    </html>
    Here is my CSS too, but I dont think that is the problem

    Code:
    div {
    	font-family:Garamond;
    	font-size:20px;
    }
    
    #header {
    	z-index:1;
    	height:60px;
    	width:1320px;
    	background-color:blue;
    	text-align:center;
    	margin:auto;
    	font-weight:bold;
    	font-size:40px;
    	border-radius:5px;
    }
    
    #content {
    	height:500px;
    	width:1000px;
    	background-color:green;
    	float:right;
    	margin:10px;
    	border-radius:100px;
    }
    
    #navigationbar {
    	height:500px;
    	width:300px;
    	background-color:red;
    	float:left;
    	margin-top:10px;
    	border-radius:5px;
    }
    
    #footer {
    	clear:both;
    	height:50px;
    	width:1320px;
    	background-color:yellow;
    	border-radius:5px;
    }
    
    body {
    	background-color:#FFC0C0;
    }
    
    .bar {
    	padding:20px;
    	font-weight:bold;
    	font-size:32px;
    	text-align:center;
    	border:3px solid black;
    }
    #test {
    	border:3px solid black;
    }
    
    .bottomrow {
    	display:inline-block;
    	text-align:center;
    	margin:auto;
    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You left out the script tag to link the JQuery JavaScript code into the page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    TomSimpson (06-24-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Macclesfield, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    What should the tag be and why haha
    Thanks

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    You have not referenced the jQuery library anywhere.

    you need to add this to the page, before your current script block

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>">
    </script>
    references: http://www.codeproject.com/Articles/...t-using-jQuery ( little out of date but it covers teh basics nicely)

    http://learn.jquery.com/about-jquery/

  • Users who have thanked DanInMa for this post:

    TomSimpson (06-24-2013)

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Macclesfield, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've added a little bit to my code, including the reference, but it still doesnt work; this is the <head> section
    Thanks for the help
    Code:
    <head>
    <title>WebDesignProject</title>
    <link type="text/css" rel="stylesheet" href="WebDesign1.css"/>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
    prompt("Enter password.");
    setTimeout(function() { alert("Get off my webpage!"); }, 5000);
    setTimeout(function() { alert("This is your final warning!"); }, 75000);
    setTimeout(function() { alert("5"); }, 11000);
    setTimeout(function() { alert("4"); }, 12000);
    setTimeout(function() { alert("3"); }, 13000);
    setTimeout(function() { alert("2"); }, 14000);
    setTimeout(function() { alert("1"); }, 15000);
    
    $(document).ready(function(){
    	$('.bar').mouseenter(function(){
    		$(this).hide();
    		});
    	});
    </script>
    </head>

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    woops, sorry
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>">
    </script>

  • Users who have thanked DanInMa for this post:

    TomSimpson (06-24-2013)


  •  

    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
    •