I'm developing simple website and on this website I have menu which is working with jQuery and image Slider working with jQuery too. This is my code with importing scripts and css:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.min.js"></script>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="js/slider/themes/carbono/jquery.slider.ie6.css" />
<![endif]-->
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".slider").slideshow({
width: 794,
height: 294,
transition: 'bar'
});
});
$(document).ready(function () {
$('#menu a').mouseover(function () {
$(this).switchClass('normal', 'active', 50, 'easeOutBounce', function () {});
});
});
$(document).ready(function () {
$('#menu a').mouseleave(function () {
$(this).switchClass('active', 'normal', 50, 'easeOutBounce', function () {});
});
});
</script>
In this situation, only slider is working. This script isn't work:
$(document).ready(function () {
$('#menu a').mouseover(function () {
$(this).switchClass('normal', 'active', 50, 'easeOutBounce', function () {});
});
});
$(document).ready(function () {
$('#menu a').mouseleave(function () {
$(this).switchClass('active', 'normal', 50, 'easeOutBounce', function () {});
});
});
What is the reason and what should I do with it?
I have encountered the same problem
my code was like the following
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jcobb-slider/js/bjqs-1.3.min.js"></script>
<link rel="stylesheet" href="jcobb-slider/bjqs.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
...
I wanted to use either a jQuery image slider or jqueryUI tabbed content on the same page.
And what I did is here:
<script type="text/javascript" language="javascript" class="secret-source">
$.noConflict();
jQuery(document).ready(function ($) {
$('#banner-fade').bjqs({
height: 280,
width: 570,
responsive: true
});
$("#tabs").tabs(); //jQuery UI Tabs
});
</script>
Then it works now.
Related
<!DOCTYPE html>
<html>
<head><script type="text/javascript" >
</script>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js">
$(document).ready(function () {
$('#btnContact').magnificPopup({
items: {
src: '../Documents/ContactForm.html'
},
type: 'iframe'
});
});
</script>
<section class="singlecol nosiblings" role="main">
<style>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
How to solve it? When I click the button does not work. The form does not popup but does not have any errors. Why the $(document).ready(function () does not read?
You should write your $(document).ready handler in a different <script> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js">
</script>
<script>
$(document).ready(function () {
$('#btnContact').magnificPopup({
items: {
src: '../Documents/ContactForm.html'
},
type: 'iframe'
});
});
</script>
I am using jQuery with bootstrap but its not working. Here is a jsffidle:
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-3.2.1.js"></script> <script language="JavaScript" src="http://localhost/ecommerce/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" src="http://localhost/ecommerce/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$(".fnybx").fancybox();
$("body").on("click","a.details",function(e){
e.preventDefault();
var _id = $(this).attr("id");
$("#"+_id).fancybox();
});
});
</script>
Click here
Lightslider Jquery Code and mootols not working together if i remove jquery api code, so mootools working otherwise if i put jquery api code so then lightslider working (it is using jquery) but mootools not work then.
Mootools
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
Lightslider
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="/script/lightslider.js"></script>
<script>
$(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
I got my solution i was trying myself then it is working.
Just need to change two things one api link location 2nd $ will be jQuery
Like this
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src="/script/lightslider.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
Good day! I use jQuery Tablesorter for pagination. I get this error
Uncaught TypeError: undefined is not a function viewTags:24
(anonymous function) viewTags:24
fire jquery-1.10.2.js:3048
self.fireWith jquery-1.10.2.js:3160
jQuery.extend.ready jquery-1.10.2.js:433
completed
in the browser's console. The problem is highly because of the loading of scripts. This is the code
<link rel="stylesheet" href="/assets/stylesheets/style.css" type="text/css" />
<script type="text/javascript" src="//tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Please help me figure this out. Thank you very much!
Update to this:
<link rel="stylesheet" href="/assets/stylesheets/style.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script>
jQuery(function($) {
var availableTags = #Html(Json.toJson(tagNames).toString);
$( "#tags" ).autocomplete({
source: availableTags
});
$("table").tablesorter({widthFixed: true, widgets: ['zebra'] })
.tablesorterPager({
container: $("#pager"),
size:5
});
});
</script>
You don't need to have two jQuery's doc ready block, one is enough to put those functions in it. Also you have to do a stack order of your script this way.
If still issue is there then try to inspect in network tab of inspector (chrome) to see if some library is not getting loaded properly.
You just need to include jQuery once. Currently you've loaded it twice, so you can remove:
<script type="text/javascript" src="//tablesorter.com/jquery-latest.js"></script>
After that, you need to include tablesorter plugin after core jQuery file since your jquery.tablesorter.js require jQuery to work:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
please review this code
<script type="text/javascript" src="/tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
$(document).ready(function() {
$("#myTable").tablesorter({
widthFixed : true,
widgets : ['zebra'],
headers : {
0 : {
sorter : false
},
1 : {
sorter : false
},
2 : {
sorter : false
},
3 : {
sorter : false
},
4 : {
sorter : false
}
}
}).tablesorterPager({
container : $("#pager"),
size : 5
});
});
please use only this code, remove all other things and try
hi friends my time picker is not working please some one help me
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"> </script>
<script type="text/javascript" src="../src/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.time').each(function () {
$('.time').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
});
});
You need to add timepicker library in your html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
<!-- Add this script tag -->
<script type="text/javascript" src="[timepicker_LOCATION]/jquery-ui-timepicker-addon.js">
</script>
https://github.com/trentrichardson/jQuery-Timepicker-Addon
Note: Also there is no need to loop through to each .time class
Remove the loop
$('.time').each(function ()