Use Jquery with php and html

Question

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>

Something has to be hidden in order to show it. Is there CSS that you're using to do that that you forgot to post? — j08691
– j08691, Commented Sep 17, 2013 at 18:25

Liam Allan · Accepted Answer · 2013-09-17 18:26:22Z

3

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>

answered Sep 17, 2013 at 18:26

Liam Allan

1,1151 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1829823 Over a year ago

There is no CSS currently at the moment. Is this something that is needed ?

David Over a year ago

@user1829823: It's not technically needed, but it would be good practice to have a CSS file separate from the HTML markup instead of in-line in the element itself.

Liam Allan Over a year ago

@user1829823: David is right, it is alot cleaner to have external files for likes of js/css

David · Accepted Answer · 2013-09-17 18:28:10Z

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.

Hassan Sardar · Accepted Answer · 2013-09-18 05:55:32Z

0

[Solved] Try this:

http://jsfiddle.net/F6mUn/1/

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);
});

answered Sep 18, 2013 at 5:55

Hassan Sardar

4,53317 gold badges61 silver badges92 bronze badges

Collectives™ on Stack Overflow

Use Jquery with php and html

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related