Remove The Menu In JQuery WebSite

Question

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 16-Dec-15 22:01pm

BladeLogan

Add a Solution

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..

Ebenezar John Paul 18-Dec-15 0:05am

Your first try did not work. This could be why:
After copy pasting the code into the notepad you might have missed to select the Save As type, by default it will create a txt file no matter what extension you give it in the File Name.

Your second try worked. This is why,
While using Save As option in the page(http://code.jquery.com/jquery-2.1.4.js) your browser automatically selects the file type as Javascript File.

BladeLogan 18-Dec-15 0:09am

Oh! That explains alot! Thankyou sir!

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ebenezar John Paul · Answer 1 · 2015-12-16T22:38:00

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.