Luke Litherland Luke Litherland - 21 days ago 5
CSS Question

JQuery not running in PHP Document

I am having an issue getting some JQuery to run, i have a PHP file name index.php which is running on my server hosted by a hosting company.

in the script tag i have

<!DOCTYPE html>
<html>
<head>
<title>Juan</title>
<script type="text/javascript" src="scripts/scripts.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="igotswag.css" type="text/css">

<script type="text/javascript">
$(document).ready(function)
{
$("jquerytest").html("Hello Everyone");
}
</script>

</head>
<body>


The part in the script tag is a test because i could even get it to read from my scripts.js file where i have used code from code academy for a pull down div.

However even the simple Hello everyone isn't working

The HTML:

<!-- Header Area -->
<table style="width: 100%; border-bottom: 1px solid black">
<tr>
<td style="width: 40%; text-align: left;"><img src="Images/TEAMS_Logo.png"></td>
<td style="width: 10%;" class="custom-header">TEAMS Wiki</td>
<td style="width: 40%;"></td>
</tr>
</table>

<div class="panel">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Now you see me!</p>
</div>
<p class="slide">
<div class="pull-me">Slide Up/Down</div>
</p>
<!-- End Header Area -->




<!-- Main Body Area -->

<div class="mainContainer" align="center">
<div class="noteSelectionBoxContainer">
<div class="noteSelectionBox hvr-bounce-to-top1">
<div class="vertical-align-content">
<div class="noSelect"><div class="noteboxText">GENERAL NOTES</div></div>
</div>
</div>
<div class="noteSelectionBox hvr-bounce-to-top2">
<div class="vertical-align-content">
<div class="noSelect"><div class="noteboxText">TEMPLATE NOTES</div></div>
</div>
</div>
<div class="noteSelectionBox hvr-bounce-to-top3">
<div class="vertical-align-content">
<div class="noSelect"><div class="noteboxText">REPLACE VARIABLES</div></div>
</div>
</div>
</div>
</div>


<div id="jquerytest"></div>

<!-- End Main Body Area -->


<!-- Footer Area -->

<!-- End Footer Area -->

</body>
</html>


The CSS:

/* Pull down menu */


.pull-me
{
cursor:pointer;
}
.panel
{
background: #ffffbd;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond,times-new-roman,serif;
text-align: center;
}
.panel p
{
text-align:center;
}
.slide
{
margin:0;
padding:0;
border-top:solid 2px #A4A4A4;
text-align: center;
}
.pull-me
{
text-align: center;
display:block;
position:relative;
right:-25px;
width:150px;
height:25px;
font-family:"customFontTwo",sans-serif;
font-size:18px;
color: #FFFFFF;
background:#A4A4A4;
text-decoration:none;
}
.pull-me p
{
text-align:center;
}


The JS:

$(document).ready(function()
{
$('.pull-me').click(function()
{
$('.panel').slideToggle('slow')
});
});


So basically nothing JS/Jquery related is working and im not sure why.

If you have an account on Code Acedemy its this im trying to achieve.

So in short, both using Jquery in script tag isnt working AND linking from another file doesnt seem to be working either

Answer

Simple, the first javascript file that you are including is scripts.js, that have a $(document)..... When the browser engine reads $ browser tell you that is not a function (see your console errors before ask!!!)

So, if you move jQuery inclusion before scripts.js inclusion, it works perfectly.

<!DOCTYPE html>
<html>
<head>
<title>Juan</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="igotswag.css" type="text/css">

The other problem is that jquerytest is not an element in your html. So you need to make some changes:

 $("#jquerytest").html("Hello Everyone");
 ---^ // select by id with #

And include in your html:

 <div id="jquerytest"></div>