CODEWITHSUNDEEP
jqueryhtml
Baburo
Baburo

Reputation: 55

jquery not working on specific html-file

I'm new to jquery and having a weird problem with it. Somehow jquery is not working on my html-file which I've created as the website's frontpage. The same jquery-code is working if I use it on a blank html-file, so there shouldn't be anything wrong with that or the server that I'm trying it on(000webhost.com).

I've been trying to debug this for couple of days now, so any help would be SO appreciated.

Here's my 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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>MG</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>
</head>
<body>
<div id="content">
    <div id="header">
        <div id="logo"><button>test</button></div>
        <div id="sitehistory"> History:<br />Samu added [PIC] (30min ago)</div>
    </div>

    <div id="container">
        <div id="wall">
            <div id="navi"><a id="showlatest" title="Latest">Latest</a> | <a id="showmostpopular" title="MostPopular">Most Popular</a> | <a id="showsearchbox" title="Search">Search</a> </div>
            <?php include("latest.php");?>
        </div>
        <div id="profilebar"><?php include("login-form.php"); ?></div>
        </div>
    <div id="footer">
        <a href="index.html" class="lefty">Home</a>|
        <a href="index.html" class="lefty">Profile</a>|
        <a href="index.html" class="lefty">FAQ</a>|
        <a href="index.html" class="lefty">Contact</a>
    </div>
</div>

</body>
</html>

Upvotes: 1

Views: 467

Answers (4)

Dhruva Sagar
Dhruva Sagar

Reputation: 7307

This works fine - http://jsfiddle.net/dhruvasagar/HKR4X/1/

Baburo, actually the answer with the most votes (by @Scott Brown) does answer it. The thing is, that there needs to be a separate tag for loading jquery and a separate one for defining your javascript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){
        $('button').click(function(){ $('#logo').hide(); });
    });
</script>

Upvotes: 0

samy
samy

Reputation: 14962

You are mixing a link to the jquery script and your own. Try replacing

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

by (edited after comment)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
<script type="text/javascript" >
jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

See sample here ( in this fiddle, jQuery is loaded by the tool )

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

You are missing a script tag 

<script>

before

jQuery.noConflict();

Upvotes: 0

user527892
user527892

Reputation:

You need a

<script type="text/javascript">

before

jQuery.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
      $("#logo").hide();
    });
});
</script>

Upvotes: 6

Related Questions