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>
Related
I need to have a jquery countdown, carousal and responsive menu on my site, but can't get all of them to work together.. I have tried using the google libraries but then one, two or all of the scripts stop working all together.
Here is the code without the noconflict as it was not working...
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery().orion({
speed: 500
});
});
</script>
Any suggestions?
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jq142 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jq142('#mycarousel').jcarousel();
jQuery().orion({
speed: 500
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
<!-- bxslider -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
You're including jQuery twice. Don't do that; including jQuery a second time will overwrite the jQuery object and any plugins that have been attached to it. Include jQuery only once and then include your plugins.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('.datepicker').datepicker({
showOn: 'button',
buttonImage: 'images/dp.png',
buttonImageOnly: true,
});
});
</script>
</body>
I have three items on my web site using two different versions of jquery. I have tried using no conflict, I don't completely understand the code though so everything I've tried hasn't worked and I know I'm probably missing something or adding something wrong. I'm running a slider, photo gallery and mobile(responsive) nav. I have version 1.10.1 for the gallery and slider but once I add 1.7.2 with the correct script, the nav works but the other two plugins do not.
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<!--photo gallery js-->
<script src="js/vendor/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8">
</script>
<!--boiler plate js-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type='text/javascript' src='js/vendor/jquery.min.js'></script>
<script type='text/javascript' src='js/vendor/jquery.mobile.customized.min.js'></script>
<!--slider js-->
<script type='text/javascript' src='js/vendor/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/vendor/camera.min.js'></script>
<!--mobile nav js-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.mmenu.js"></script>
<!--mobile nav script-->
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu({
slidingSubmenus: false
});
});
</script>
<!--slider script-->
<script>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
thumbnails: true,
loader: 'none',
playPause: false,
navigation: false,
fx: 'scrollLeft',
time: 1500
});
});
</script>
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 ()
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.