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.
Related
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
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');
}
I have added flexslider js and css files, also added the slider block code as the official sample had added them. In the result, i can't see the images in any browser, but in "View Source" mode, i can see the changes has made by js file and there isn't any problem in there.
When i removed the css or the js file from images were shown properly, but when i added them again, prev, next and navigation links are added but images disapear.
What should i do?
My codes:
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="flexslider.css">
</head>
And my code for the slider block:
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
And js code to enable flexslider:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
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>