I downloaded two scripts from the net,
one looks like this
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
and the other
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$("#mybook").booklet();
});
</script>
When I place both in one page only the latter works, however individually they work fine.
I understand you can't call jQuery twice within the same page, but when I remove all the jQuery additions and just use /jquery.js none of them work. This is the scripts as I downloaded them, I figured the HTML between them is not needed to post here.
How can I make both work on one page?
You are adding 2 js libraries in first script and 4 to the second script. All the libraries essential to run their respective scripts.
One problem here is, you are adding jQuery twice which is 1.6 and 2.1. Which is unnecessary.
Try doing like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
//required for first script
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
//-------------
<script>
$(function () {
//this is your second script
$("#mybook").booklet();
//this is your first script
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
This should keep your second script running. And if first doesn't run then it means 'jqzoom' plugin is not compatible with jquery 2.1
Most problems from older jQuery versions are solved in their Migrate Plugin, you should check that out.
Just add the newest version and that plugin and your scripts should theoretically work.
with all other library include j query standard librery at once.
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
$("#mybook").booklet();
});
</script>
Related
I have a problem loading jQuery into laravel app. I tried checking if it's installed in the first place and I get success. Using this:
if (typeof jQuery == "undefined") {
alert("JQuery is not installed");
} else {
alert("JQuery is installed correctly!");
}
But then I tried checking if it's loading with code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("jQuery has loaded!");
} else {
// jQuery is not loaded
console.log("jQuery has not loaded!");
}
}
I get no response at all. What could be the problem?
This is my scripts in file (last 2 lines):
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/4-Col-Small-Slider.js"></script>
<script src="assets/js/A-working-Rating-option-for-Contact-Forms.js"></script>
<script src="assets/js/Add%20an%20upsell.js"></script>
<script src="assets/js/add%20to%20cart%20button.js"></script>
<script src="assets/js/ask%20payment%20method.js"></script>
<script src="assets/js/cheque.js"></script>
<script src="assets/js/currency.js"></script>
<script src="assets/js/easings.js"></script>
<script src="assets/js/flickity%20pkgd.js"></script>
<script src="assets/js/flickity.js"></script>
<script src="assets/js/meals%20sizes.js"></script>
<script src="assets/js/menu.js"></script>
<script src="assets/js/modal.js"></script>
<script src="assets/js/plans.js"></script>
<script src="assets/js/realtime%20typing%20card%20expires.js"></script>
<script src="assets/js/realtime%20typing%20card%20number.js"></script>
<script src="assets/js/realtime%20typing%20cardholder%20cvc.js"></script>
<script src="assets/js/realtime%20typing%20cardholder.js"></script>
<script src="assets/js/realtime%20typing.js"></script>
<script src="assets/js/remove%20product%20from%20cart.js"></script>
<script src="assets/js/section%20click.js"></script>
<script src="assets/js/SlideShow.js"></script>
<script src="assets/js/Swiper-Slider-Card-For-Blog-Or-Product.js"></script>
<script src="assets/js/Swiper-Slider.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/swipermin.js"></script>
<script src="assets/js/switches%20on%20add%20a%20meal%20page.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/time.js"></script>
<script src="assets/js/upsell.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="assets/js/jquery.min.js"></script>
I'm using Laravel mix, it seems there's problem somewhere in app.js I suppose.
I managed to load jQuery, I get success message, but it still doesn't work. For example:
$(document).ready(function () {
$("#category_image").on("change", function () {
var image = $("#category_image");
var preview = $("#preview-image");
var objectURL = URL.createObjectURL(e.target.files[0]);
preview).css("background-image", 'url('+objectURL+')');
})
});
This code doesn't work, unless I messed something up. If I use plain javascript onchange and I use jQuery id selector it works. Am I doing this function wrong?
When I incorporate the Scrollorama plugin into my webpage, the Cycle plugin stops functioning. I tried incorporating jQuery.noConflict but it still doesn't work. Am I implementing the jQuery.noConflict() wrong or is it something else?:
Links:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Scrollorama Plugin:
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
</script>
Cycle Plugin:
<script>
$(function(){
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
});
</script>
I've tried doing different options from different questions in the past but none of them work. Could this be an issue with the plugins and not how I implement them into my site?
I had the same problem with superscrollorama and for weeks I could not crack it, until I discovered console. Console allowed me to track all the JS errors.
If you embed the files in this order:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Then put all your code in:
(function($){
})(jQuery);
Example:
(function($){
$(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
})(jQuery);
It should work fine.
For superscrollorama, the example has the jQuery is embedded in the body. For extra jQuery plugins on the page, TweenMax and jquery.min need to be moved into the head in the following sequence:
<head>
... Your Meta, CSS files, ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
... Your other jQuery files, mootools, ...
</head>
Your CSS files may appear above or below the jQuery.noConflict(); but all your jQuery MUST appear after TweenMax.
jquery.lettering-0.6.1.min.js and jquery.superscrollorama.js may remain in the body. Just remember to add (function($){ ... })(jQuery); around all your code:
(function($){
$(document).ready(function() {
// set rotation of flash
TweenMax.set("#newversion", {rotation: 15});
... and so on ...
})(jQuery);
How do I use multiple jquery version on a single page? I have two different jquery version and both are necessary for different functions but both versions are conflicting each other.if i will use jquery noconflict then products scripts won't be work?
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
oldjq = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Jquery 1.9.1 Need To Run This Script
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
Jquery 1.4.2 Need To Run These Scripts
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Problem is Solved Now Here THe Final COde
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
});
})(jQuery);
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Since it's only a few lines of code, I would suggest amending the chunk which requires jQuery 1.9.1 so that it works with jQuery 1.4.2
I've updated it below to work with jQuery 1.4.2. I use the attr method rather than prop to manipulate the disabled property (you can check the docs here to see if this is likely to cause any issues). This solution avoids running two instances of jquery and avoids having to find updated versions of all the libraries / plug-ins you're already using.
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).attr('disabled',true);
}else{
$inputs.attr('disabled',false);
}
})
})
See fiddle here.
Yes, after you load your first version, do this
var $j = jQuery.noConflict();
Load your second version of jQuery.
Refer to the first version with $j and the second as $
OK, here is one possible solution - you could bind new version of jQuery to the closure.
But my advice is DON'T DO THAT, it is like shooting yourself to your own leg.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Jquery 1.9.1 Need To Run This Script:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
// code that uses jQuery 1.9.1
});
})(jQuery);
</script>
// ...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
//Jquery 1.4.2 Need To Run These Scripts:
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
// ...
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.
I use BBC carousel http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/. Here is my script code
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
it generates Error: glow.widgets is undefined. What am I doing wrong?
Ok, I figured out the problem: You're not including the widgets script or css, per the Widgets section of http://www.bbc.co.uk/glow/docs/articles/getting_started.shtml
So, to resolve your error, you need to modify your script so that it looks like this:
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script src="/themes/javascript/glow/1.7.7/widgets/widgets.js" type="text/javascript"></script>
<link href="/themes/javascript/glow/1.7.7/widgets/widgets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>