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
Related
This question already has answers here:
jQuery is not defined and could not find why
(2 answers)
Closed 8 months ago.
I was just trying to test out this responsive nav bar, but it seems that the javascript is not connecting. I put the script tag at the bottom of the body as I've heard that it is the best place to put it, yet it fails to work.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnii</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Omnii
</div>
<nav>
<div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Devs
</li>
<li>
Docs
</li>
<li>
Sign in
</li>
</ul>
</nav>
</div>
</section>
<section>
<center><h1>Reality, enhanced</h1></center>
</section>
<script src="index.js"></script>
</body>
</html>
index.js
(function ($) {
$(function () {
// open and close nav
$("#navbar-toggle").click(function () {
$("nav ul").slideToggle();
});
// Hamburger toggle
$("#navbar-toggle").on("click", function () {
this.classList.toggle("active");
});
});
})(jQuery);
What do I do?
I can see you are using the dollar($) sign which means jQuery needs to be included first before add the index.js file.
NB: The order should be jQuery first then follows by your custom index.js file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
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 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>
I want to create a book style page turn effect on some images so I decided to use the JQuery plugin, JFlip. The plugin seems to be doing what it is supposed to do except display the image. I have checked the Network tab and the images are being loaded. Also, I can see the Canvas element JFlip has created but it is just a blank space.
I have some code:
<ul id="g1">
<li>
<img src="img/proforma.jpg">
</li>
<li>
<img src="img/proforma2.jpg">
</li>
</ul>
And some javascript:
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
</script>
It does work, just the plugins are a bit old. See my code below :
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="g1">
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
</ul>
</body>
</html>
JS:
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
See the full solution here : http://jsbin.com/iqaran/1/edit . Remember to run with js in jsbin
Cheers !
Turns out that script is so old (2008), you need to include the jQuery migrate script.
JSFiddle
Scripts
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
HTML
<ul id="g1">
<li>
<img src="http://placehold.it/300x300"/>
</li>
<li>
<img src="http://placehold.it/300x300" />
</li>
</ul>
Also make sure to wrap your executing code in a document.ready so the images get the change to render.
JS
<script>
$(document).ready(function() {
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>
I'm new to js, so this probably is a beginners problem.
For my mobile website, I want the menu to appear with slideToggle when clicking on a menu icon on the top.
Here is my HTML:
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="styles2.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>CSI - Home</title>
</head>
<body>
<img src="img/logo.png" alt="logo"/>
<div class="menu_icon"><img src="img/menu_icon.png" alt="menu_icon"/></div>
<div class="nav">
<nav>
<ul>
<li><img src="img/home.png" alt="home"/>Home_</li>
<li><img src="img/paper.png" alt="paper"/>Story_</li>
<li><img src="img/glass.png" alt="glass"/>Course_</li>
<li><img src="img/archive.png" alt="archive"/>Archive_</li>
<li><img src="img/facebook.png" alt="facebook"/>Discuss with Facebook_</li>
<li><img src="img/twitter.png" alt="twitter"/>Discuss with Twitter_</li>
</ul>
</nav>
</div>
</body>
</html>
Here is my javascript:
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
I would like the .nav to show up with slideToggle when clicking the .menu_icon class / image.
Can anyone please help me out?
Thanks in advance!
});
assuming that <script src="script.js"></script> is the jquery library,
it looks like
you forgot to close the $(document).ready
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
});
Your forgot to add jQuery (as Jeff Shaver noticed) : add
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
in your head to load the jQuery library.
Moreover, you forgot to close the $(document).ready(function(){ with }); at the end of your code (see trajce answer).
See this fiddle for a working example.