Click here to Skip to main content
15,937,602 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello there!
So I am pretty new to JQuery, not new to HTML or CSS just the JQuery Library..

So my question is how this makes sence.

I am trying to call the function to "Hide" the menu but when I do it.. it doesnt change anything at all..

What is it that I am not seeing here?
I am not here to ask you to create my whole file for me, I am just trying to get the understanding on what I am missing.

This is the HTML File

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Kinzi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>

This is where it starts

<script src="C:\Users\User\Desktop\0781\js\jquery.js"></script>
<script>
          $(document).ready(function() {
           
          $("#menu").hide();
 
 
 
            });
 
 
 </script> 

And this is where it ends
<div id="container"> 

  <div id="header">
    <div class="headtitle">Varga Dev</div>
  </div>

  <div id="menu"> 
    <ul>
      <li><a href="#" title="">HOME</a></li>
      <li><a href="#" title="">ABOUT US</a></li>
      <li><a href="#" title="">NEWS</a></li>
      <li><a href="#" title="">CONTACT US</a></li>
      <li><a href="#" title="">LINKS</a></li>

    </ul>
  </div>

  <div id="content"> 

    <div id="insidecontent"> <br>
      <h1>Welcome</h1>

      <p>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	 <br><br>
	  </p>
	        <h1>Lorem ipsum</h1>

      <p>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	 <br><br>
	  </p>
	   <p>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	  <br><br>
	  </p>
	   
    </div>

    

    <div style="clear: both;"></div>

  </div>



  <div id="footer"> <span>Copyright © 2015 | All Rights Reserved  </span> 
  </div>

</div>
</body>
</html>






And this is the CSS

CSS
body
{
	font-size:       62.5%; 
	margin:          0;
	padding:         0;
	background-color: #000;
	font-family:     'lucida grande', arial, tahoma, sans-serif;
}

#container
{
	margin:          0 auto;
	padding-top:20px;
	width:           683px;
	position:        relative;
	background-color:  #333;
}

#header
{
	margin:          0 auto;
	width:           640px;
	height:          250px;
	background:      transparent url('header.jpg') top left no-repeat;
}


.headtitle
{
	position:        relative;
	font-family:     Times;
	font-size:       30px;
	color:           #FFF;
	top:             210px;
	left:            12px;
}

#menu
{
	margin:          0 20px;
	height:          29px;
	padding:         5px 0;
}

#menu ul
{
	margin:          0;
	padding:         7px;

	height:          29px;
}

#menu ul li
{
	list-style:      none;
	display:         inline;
}

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
	color:           #767676;	
	padding:         10px 7px 10px 7px;
	font-size:       1em;

	font-family:     'lucida grande', arial, sans-serif;
	font-weight:     bold;
	text-decoration: none;
}

#menu ul li a:hover
{
	background-color:   #6A7919;
	color:           #FDFDFD;
}


#content
{
	min-height:      390px;
	width:           640px;
	margin:          0 auto;
	background-color:#FDFDFD;
}

#insidecontent
{
	float:           left;
	padding-left:    25px;
	padding-right:    25px;
	width:           auto;
}

#insidecontent p
{
	margin:          0;
	color:           #767676;
	font-family:     Tahoma;
	font-size:       1.2em;
	line-height:     170%;
}




h1
{
	margin:          0;
	font-weight:     normal;
	color:           #6A7919;
	font-size:       2.5em;
	font-family:Times;
}

h2
{
	margin:          0;
	display:         inline;
	position:        relative;
	top:             -1.5em;
	left:            2em;
	font-size:       1.8em;
	font-weight:     normal;
	color:           #94c258;
}

h3
{
	margin:          0;
	font-size:       1.5em;
	font-weight:     normal;
	color:           #94C258;
}

#footer
{
	margin:          0 auto;
	width:           641px;
	height:          39px;

}

#footer span
{
	display:         block;
	position:        relative;
	font-family:    Tahoma;
	font-size:       1.2em;
	padding:         10px;
	color:           #767676;
}
Posted
Comments
Andy Lanng 17-Dec-15 4:16am    
it works fine for me. perhaps your jquery is out of date?

Use the google api link instead:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

That's the only thing that could be different between your page and mine
BladeLogan 17-Dec-15 4:59am    
Thank you sir! That worked perfectly! I am not sure why my jQuery file didnt work I just got it off thier website. :/
Andy Lanng 17-Dec-15 5:07am    
cool. It would be worth investigating why your version didn't work. If it's more recent then upgrading jQuery in the future may be an issue. That might not matter in your case.

Ebenezar John Paul has written up a solution with some useful extra tips. Go ahead and accept that so people can find the solution for similar questions, please ^_^
BladeLogan 17-Dec-15 14:16pm    
Okay so Im not sure that I am adding the JQuery file correct what I do is that I go on here
1). http://jquery.com/download/
2). http://code.jquery.com/jquery-2.1.4.js
3). I copy everything that appears in that window, I paste it in a notepad & save it as a jquery.js file then adding it to my DIrectory where I have all my website files then I redirect it to it with this code.
4).<script src="jquery.js"></script>

You solution worked when I implimented the Web API but I just want to know how to to the "Offline" Version aswell.
BladeLogan 17-Dec-15 14:20pm    
Okay! So it works when I do this.

1). Go To http://code.jquery.com/jquery-2.1.4.js
2). Right click the page and "Save As"
3). Saving it as a .js file

But why..

1 solution

I have tried your code and it works just fine(menu is hidden).

Only differences are that I used jquery from my machine(You can cross check your jquery file validity using @Andy Lang's suggestion) and your header image is missing(I guess that's in your local folder)

If it still did not work for you, please open the developer tool in your browser and look for logged errors/messages in your console.

For example: If you get the below error, it means that you have not defined Jquery.
Uncaught ReferenceError: $ is not defined


If the error messages doesn't help, please post them here. We will help you solve it.

Note: Best practices involve declaring the scripts you need in the head section(just like you have declared your css file) unless you have a specific need to declare them in any other part of the file.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900