i1zivkovic i1zivkovic - 2 months ago 17
HTML Question

Javascript/jquery in php document?

I just started doing some php and I followed one tutorial on udemy page on how to build some simple php website. Now I want to animate the nav bar items border-radius with Js/Jquery. But it doesn't seem to work for me.
I used php include to include navbar into header and then the header into the main php files.

This is my navbar file.

<ul>
<li id="indexx"><a href="index.php">Home</a></li>
<li id="teamm"><a href="team.php">Team</a></li>
<li id="menuu"><a href="menu.php">Menu</a></li>
<li id="contactt"><a href="contact.php">Contact</a></li>
</ul>


And I included that in my headers div id="nav" like this.

<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title><?php echo TITLE; ?></title>
<link rel="stylesheet" href="assets/styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="includes/animatioon.js"></script>
</head>

<body id="final-example">

<div class="wrapper">

<div id="banner">
<a href="index.php" title="Return to home"></a>
<img src="img/banner.png" alt="nema slike jbg." />
</div>

<div id="nav">
<?php include ('includes/nav.php'); ?>
</div>

<div class="content">


My website has main php files like index,menu,team etc. which include the header.

So how can I animate these navbar items so that their border-radius changes when I enter mouse?
Since the navbar is included in header and header in every main php file, I tried to add the source of the jquery and js file in which my code for 'animation' is into my header.php but it doesn't seem to work.

Can someone give me some tips on how should I do it?

Btw this is the code for animation:

$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});


THANK you everyone I managed to make it work. But I still have a problem.
This is what my ul and li look like:

enter image description here

Now is there way to animate the li (home,team,menu,contact) border radius since they're a li element? I added the width and the height properties.
But when I do mouseenter I get these changes but the border radius doesn't change, I mean the boxes still don't 'curved'
enter image description here. I'm sorry in advance for maybe asking stupid questions and for bad explanation but I'm only beginner in this, as I said I followed tutorial on how to build this web page.

Answer

I am suggesting to write your inline Script before close of body tag </body>.

Also suggest you one improvement in jQuery selector. if you want to effect in all <li> tag of then dont use id.

your nav.php

<ul id="my_navbar">
  <li ><a href="index.php">Home</a></li>
  <li ><a href="team.php">Team</a></li>
  <li ><a href="menu.php">Menu</a></li>
  <li ><a href="contact.php">Contact</a></li>
</ul>

Your index.php file

<?php
$companyname = "Franklin's Fine Dining";
include ('arrays.php');
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title><?php echo TITLE; ?></title>
    <link rel="stylesheet" href="assets/styles.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="includes/animatioon.js"></script>
</head>

<body id="final-example">

    <div class="wrapper">

        <div id="banner">
            <a href="index.php" title="Return to home"></a>
            <img src="img/banner.png" alt="nema slike jbg." />
        </div>

        <div id="nav">
            <?php include ('includes/nav.php'); ?>
        </div>

        <div class="content">
        </div>

<script type="text/javascript">
      $(document).ready(function() {
        $('#my_navbar li').mouseenter(function() {
          $(this).animate(borderRadius(300),200);
        });
      });
</script>
</body>
</html>