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">Home</li>
<li id="teamm">Team</li>
<li id="menuu">Menu</li>
<li id="contactt">Contact</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">
<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:
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'
. 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.
remember that php is a server-side language that helps you build dynamic HTML. so make sure that you pre-include all the JavaScript you need for anything that happens on the client-side. see my example below, I assumed that your jquery selector is correct.
<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>
<script type="text/javascript">
$(document).ready(function() {
$('#indexx,#teamm,#menuu,#contactt').mouseenter(function() {
$(this).animate(borderRadius(300),200);
});
});
</script>
</head>
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 >Home</li>
<li >Team</li>
<li >Menu</li>
<li >Contact</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">
<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>
Related
I'm pretty new to JQuery and I may be missing a few things about it.
I have created a .php file which contains the header of my website. I included it into my main .php file. The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php".
I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".
Hope you'll be able to help me about what I'm missing.
The main homepage in which I load the JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>DSI Welcome</title>
<link rel="stylesheet" href="../css/homepage.css" />
</head>
<body>
<header>
<?php include 'header.php';?>
</header>
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/homepage_script.js"></script>
</html>
The "header.php" file which I include into the main "homepage.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Header</title>
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<header>
<div class="userbox_rectangle_full_header"> </div>
</header>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/header_animation.js"></script>
</html>
Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php":
$(document).ready(function() {
$('#homepage_work_space').on('click', function(){
alert('hi');
});
});
Thank you in advance !
There is some points in your code thats better to know .
Your html structure is wrong! simple html5 structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Your JQuery Main File -->
</head>
<body>
Content of the document......
</body>
</html>
Define your main jquery file in head of your body.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!
It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.
here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ...
file index.php:
<html>
<head>
<script src="../js/jquery-3.3.1.js"/>
<script src="../js/jquery_color_animation.js"/>
<script src="../js/script/homepage_script.js"/>
</head>
<body>
<?php include 'header.php'; ?>
<!-- further content goes here -->
</body>
</html>
file header.php:
<div class="userbox_rectangle_full_header">
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>
file homepage_script.js:
$(document).ready(function() {
$('.work_space').on('click', function(){
alert('hi');
});
});
I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc.
I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
I have been looking for a way to get the same navigation bar on every page. Right now, I have a jQuery script that is loaded onto every page, that should replace a div placeholder; however, when I run the program, the navigation bar is simply not there.
JQuery code:
$(function() {
$("#dropdown").hover(function() {
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$("#submenu").hover(function()
{
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
});
Navigation file:
<nav>
CV Game Development
<div class="menu">
<div id="dropdown">Tutorials</div>
<div id="submenu">
Beginner
Intermediate
Advanced
</div>
</div>
</div>
</nav>
Actual HTML file to be used:
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
<title>CV Game Development</title>
<div id = "nav-placeholder"></div>
</head>
<body>
<h1 id = "intro">Welcome</h1>
<h3 id = "subintro">to the CV Game Development website</h3>
<p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
It seems like it should work, and yet, it doesn't. Any help is much appreciated, thank you!
As Mohamed-Yousef noticed in comments you have placed your nav-placeholder div element in head tag, which is wrong place for it.
It should be inside body element.
Also your meta, css and script tags must be in head element.
<html>
<head>
<title>CV Game Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="nav-placeholder"></div>
<h1 id="intro">Welcome</h1>
<h3 id="subintro">to the CV Game Development website</h3>
<p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
1st: give <nav> an id to be
<nav id="nav">
2nd: you can use .load() instead of .get() .. And the.load() code should looks like
$('#nav-placeholder').load("navigation.html #nav");
The above code will wrap <nav id="nav"> into <div id="nav-placeholder">
3rd: if you need to replace with you can use unwrap() instead .. so your code should be like this
$('#nav-placeholder').load("navigation.html #nav" , function(){
$('#nav').unwrap();
});
4th: I don't know yet Why your <div id = "nav-placeholder"></div> inside <head> but any way I tested it and the code will work even if its wrapped to <head> ..
This question already has answers here:
jquery fadeIn not working
(4 answers)
Closed 6 years ago.
I know this probably seems repetitive, but I can't get jQuery working on my site. I have looked through a lot of posts on here, but still can't seem to find the answer.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Rodeo Rich's Steakhouse</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Holtwood+One+SC" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header>
<img src="img/logo.png" id="logo" alt="Rodeo Rich's Steakhouse">
</header>
<nav>
<ul>
<li>MENU</li>
<li>OUR STORY</li>
<li>GIFT CARDS</li>
<li>CONTACT US</li>
<ul>
</nav>
<img src="img/logo.png" id="pic" alt="Rodeo Rich's Steakhouse">
</body>
</html>
Here is the code from my JavaScript file that isn't doing anything to "#pic":
$(document).ready(function(){
$("#pic").fadeIn("slow");
});
I know that my path name to the .js file is correct
I have the Google CDN in my section as well.
All help will be greatly appreciated! :)
Your image has to be hidden before it can fade in, so for example you can do:
$(document).ready(function(){
$("#pic").hide().fadeIn("slow");
});
You have to hide your image in first (with CSS display:none or with jQuery .hide).
This works:
$('#pic').hide();
$('button').click(function () {
$('#pic').fadeIn('slow');
});
DEMO
Ok,
I'm at my wit's end here. I've read the questions around anchor tags, base url's and the usage of / in a href. Yet no matter what I do, I still seem to get an anchor tag and base url added to the link.
Example below:
When I hover over the Link, it shows
http://www.localhost:8080/view/login.php
but when I click on the a href tag I get this below
http://www.localhost:8080/view/register.php#/view/login.php
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Food Loginator</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="../Javascript/gen_validatorv4.js" type="text/javascript"></script>
<script src="../Javascript/pwdwidget.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="home">
<header data-role="header">
<h1>Food Loginator</h1>
<div data-role="navbar">
<ul>
<li><a href="http://www.localhost:8080/index.php" data-icon="home" data-theme="b" >Home</a></li>
<li><a href="http://www.localhost:8080/view/login.php" data-icon="star" data-theme="b" >Login</a></li>
<li>Register</li>
</ul>
</div>
</header>
Any ideas are appreciated.
It seems this is a default part of the JQuery mobile functionality. Apparently, JQuery does an Ajax call to the object with the #tag in the a tag. It then dynamically add's that object to the DOM. In order to remove it i had to add rel="external" to my a tags.
https://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
set the links href='#'
and add an onclick event call that uses changePage
function pagechange () {
$.mobile.changePage('index.php');
}