<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="ASHLEYSIMONE/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="ASHLEYSIMONE/lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
I've checked others users answers regarding this issue but I still can't figure it out. I have no idea what I'm doing wrong. Please help. This part is preventing me from finishing my site.
Try specifying to http:// for your first library.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Related
I am trying to initialize the jQuery bxSlider but for some reason, even adding the same resources as shown on the website examples I can't intialize the plugin.
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
What am I doing wrong?
JSFiddle: https://jsfiddle.net/rcymj0s0/2/
Use this cdn path it will work.
$('.bxslider').bxSlider({
captions: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css">
<div id="slider-section">
<ul class="bxslider">
<li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li>
<li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li>
</ul>
</div>
You're creating your own build of jQuery in /javascripts/application.js. This is after you have already included jQuery earlier in the DOM and tried to add the bxSlider plugin. To fix the issue, include the bxSlider javascript after the line that has the following:
<script src="/javascripts/application.js"></script>
The result will be the following (remember to remove the original bxSlider script tag before making this change)
<script src="/javascripts/application.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>
i would like to use ResponsiveSlides.js with jimdo;
how should i modify the header of my jimdo-page that it will work?
First link files:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
Then add markup
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
And then you can modify css accordingly.
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 making a site with a carousal with this tutorial:
www.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
I just copied and pasted the code, saved it as a JavaScript file, and copied the script source line from the tutorial to my HTML file. This is it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
However, the carousal isn't working for me (I tried to test the site using one image). Dreamweaver says that "script.js is not defined on a local disk." What does that mean and how do I fix it? I've searched Google but I can't find the answer.
Here is my html5 code:
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="author" content"" />
<meta name="copyright" content="2013" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<h1><img src="img\logo.gif" alt="print-and-copy-logo"></h1>
</header>
<nav>
<ul>
<li class="header-about">about</li>
<li class="header-prints">the prints</li>
</ul>
</nav>
<div id="slideshow">
<ul class="slides">
<li><img src="img\photos\wedding-invitation.jpg" alt="wedding-invitation"></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<footer>
<ul id="footer-text">
<li class="footer-president"> THE PRES</li>
<li class="footer-about"> ABOUT</li>
<li class="footer-press"> PRESS</li>
</ul>
<ul id="footer-social">
<li id="footer-twitter"><img src="img\icons\twitter-icon.png" alt=""></li>
<li id="footer-facebook"><img src="img\icons\facebook-icon.png" alt=""></li>
<li id="footer-tumblr"><img src="img\icons\tumblr-icon.png" alt=""></li>
</ul>
<ul id="footer-contact">
<li class="footer-phone">ph: 773.488.2626</li>
<br>
<li class="footer-hours">hrs: mon-fri 11am-5pm</li>
</ul>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Thank you!
I was using the Dreamweaver tutorial and the same message happened. I found out that my CSS folder needed to have a styles.css and a print.css file to be attached and the page showed up. All of the coding had been done I was just getting the error message that the local disk did not have my folder.
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.