I'm new to using Jquery. What I'm trying to achieve is to fade in any element on the page. However my header and footer are being displayed by using PHP include() am I able to use Jquery with this type of formatting? I'm unable to get anything to fadeIn().
<!DOCTYPE html>
<head>
<title> <Header> </title>
enter code here
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#nav').fadeIn(3000);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Films.com</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
the element u want to fade in needs to be hidden eg
<div id="nav" style="display:none;">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
However my header and footer are being displayed by using PHP include() am I able to use Jquery with this type of formatting?
Yes. This setup is happening server-side, before jQuery even sees it. What your server-side PHP code is doing is emitting an HTML page to the browser. At that point, client-side, is when the JavaScript (including jQuery) runs. All it sees is the client-side result of the document, not how it was built server-side.
I'm unable to get anything to fadeIn()
What you're trying to fade in with that code is already displayed. It needs to be hidden in the first place before it can be faded into view. You can just style it as hidden in your page's CSS:
#nav { display: none; }
What this would do is render the #nav element has hidden by default when the page first loads. Then your JavaScript code would fade it in using jQuery.
[Solved] Try this:
In order to FadeIn you must hide that respective content.
Here is the Code:
HTML:
<div id="nav" style="display:none;">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="film.php">Film</a></li>
<li><a href="add_film.php">Add a Film</a></li>
</ul>
</div>
JQuery:
$(document).ready(function(){
$('#nav').fadeIn(5000);
});