First of all I'm a newbie at Javascript/JQuery
I'm trying to make a bxslider. I'm not being able to work with it, I did all the steps from bxslider website and still can't, been searching and nothing. Instead of working, it's just working as a normal ul, showing all photos vertically.
The libraries
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script language="javascript" src="css/libraries/jqueryBxslider/jquery.bxslider.js" ></script>
<!-- bxSlider CSS file -->
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
The ul that contains the photos.
<div class="container">
<ul id="slider">
<li><img src="css/libraries/images/test1.PNG"/></li>
<li><img src="css/libraries/images/test2.PNG"/></li>
</ul>
</div>
Code at my javascript file.
$(document).ready(function() {
$('#slider').bxSlider({
auto: true,
autoControls: true
});
});
Thank you.
When testing locally, you need to use a full URL (including protocol) in any libraries you link to that use protocol-relative URLs (e.g. src="//ajax.googleapis.com).
Change:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Otherwise the browser's default behavior is to use the file:// protocol to search your local file system for jQuery.
firstly, make sure your bxslider libraries path src on <script></script> and href on <link>is correct.
and then change this line :
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet" type="javascript">
to
<link href="css/libraries/jqueryBxslider/jquery.bxslider.css" rel="stylesheet">
without type="javascript" because the type is CSS.
So the answer was to make a before the where it contained the JQuery code.
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>
<a class="glyphicon glyphicon-question-sign" title="tooltip" data-original-title="title" href="#" id="ttip"></a>
the part: 'data-original-title=' appears grey in notepad++ has if something is wrong. It doesnt work. any help? I'm pretty sure I have installed bootstrap java script correctly with the code below:
<script type="text/javascript"src="js/bootstrap.min.js"></script>
If the tooltip isn't showing, try to initialize it:
<script>
$(document).ready(function()
{
$('#ttip').tooltip();
});
</script>
please have a look at this example. http://jsfiddle.net/shail/vstlu/2/
Also, please be sure to load css/js in the correct oreder as:
bootstrap.min.css
bootstrap-theme.min.css
jquery.min.js"
bootstrap.min.js
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Try these for example (not local files, but to be sure you're loading things correctly, and you can discard external files issues and focus in the code.
Hope that helps!
<script>
$(document).ready(function()
{
$('[data-toggle="tooltip"]').tooltip("enable");
});
</script>
try this block ,if you set field value in a page method ,you should use this code snippet after you setting value to initialize tooltip
I can not connect an external JavaScript file to my html page.
When I put the script in the page with the tag it all works
but when I insert it in an external file is not working, what is wrong?
<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>
<body>
<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>
<div id="info">
<ul class="infomenu">
<li class="newsletter">NEWSLETTER</li>
<li>PRIVACY</li>
<li>CONTACT</li>
<li>FOLLOW US</li>
</ul>
</div>
</body>
</html>
Javascript
//Jquery Info
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Welcome</title>
<link type="text/css" href="styles/default.css">
</head>
<body>
<!-- HTML Content -->
<script type="text/javascript" src=".."></script>
<script>
// Javascript inside this file
</script>
</body>
</html>
The link- and script part is not necessary, but you mostly will need it so I put it in the right order in.
Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.
If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.
But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.
<script>
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
</script>
I'm trying to apply Fancybox 2.1.5 to a website and am only able to get it to partly work. The navigation buttons and close button will not show up at all. This is the coding for the html page that contains the website's images:
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"><img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"></a></div>
<div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"><img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578" height="800"></a></div>
</body>
And this is the basic Fancybox jQuery script that I want to use:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
When the Fancybox jQuery script is inserted into the HTML document and I click on look1.jpg, a grey translucent overlay appears, but no image.
When the Fancybox jQuery script is completely removed from the HTML document and I click on look1.jpg, the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
There are some other posts on the same issue that I have used to try and problem solve my issue. From those posts I've double checked the following and everything seems to be set up correctly: The Fancybox sprite and overlay png files are located in the same folder as the Fancybox CSS document, the Fancybox jQuery source code and stylesheet are linked up correctly, and the anchor tags for the 2 images both have "rel=group" applied to them.
I am wondering if the way the site is coded overall has something to do with it? The site is also built with AJAX and bootstrap. The HTML page referenced above that contains the website's images is loaded into the website index page via AJAX. As a test I put the coding for that page in a standalone HTML file and fancybox worked perfectly, which makes me think that my guess is correct. If this is the case though, I have no idea how to fix the problem. For reference, this is the code for the website index page:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/galleryPrototype3.css">
<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
<!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above-->
<nav id="mainNav" data-follow="location" data-type="navigation">
<ul>
<li>people</li>
</ul>
</nav>
<div class="_cover"></div>
<!-- gallery holder: this holds the website's image gallery -->
<section id="galleryPrototype3"></section>
<!-- content holder -->
<div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"></div>
<!-- category pages: This has been simplified to include only the line that refers to the html page referenced above -->
<div id="category_pages" data-follow="location" data-type="switcher">
<div data-id="people" data-source="peopleCategory.html"></div>
</div>
</div>
</body>
</html>
I also tried placing the Fancybox jQuery script in the website index page rather than in the html page that contains the website's images. In that case as well when I click on an image the browser window turns an opaque dark grey with look1_lg.jpg displayed in the center, but no navigation arrows or close button.
I'm at a loss, so any help will be appreciated!
I am a complete newbie when it comes to jQuery, but I'm trying to run a simple accordion() code on my HTML page.
This is the link I've used, I included the compressed production jQuery 2.1.0
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
The piece of code I'm trying to accordion() is a series of tags with tags in them, which contain paragraphs, like this:
<div id="content">
<h3>This is the first heading</h3>
<div><p>First paragraph</p></div>
<h3>This is the second heading</h3>
<div><p>Second paragraph</p></div>
</div>
scriptkomik2.js contains nothing other than the following code:
$(document).ready(function(){
$("#content").accordion();
})
Is there something wrong in my code or is the linking wrong?
Thank you
You need to add jQuery UI
Accordion is a widget from jQuery UI and this library works on top of jQuery. So you need to add both js to your project.
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.js"></script>
jQueryUI is missing. You have to add jQueryUI as well for accordian widget.
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
.accordion isn't a valid jQuery method. I think you're looking for jquery UI: https://jqueryui.com/accordion/
Try implementing that and see what happens.
Add the following script tag. Accordion is part of jQuery UI
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>