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);
Related
I am working on a responsive layout using javascript, responsive-menu and javascript, responsiveslides.
When I have only one javacript at a time on the page, they work fine, but together the responsive-menu doesn't work. If I put the javascript for the responsive-menu at the bottom of the page, the menu works fine but the slide show doesn't work. Any suggestions would be appreciated.
Here is my javascript call out:
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="menu_files/responsive-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="menu_files/jquery.responsive-menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#JQResponsiveMenu1").fdResponsiveMenu({windowMinWidth:1000,autoHighlightCurrentPage:false,subMenuOpenOnClick:false,subMenuTransitionEasing:"easeOutSine",subMenuTransitionDuration:300});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="responsiveslides.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript"> // You can also use "$(window).load(function() {"
jQuery(window).load(function() {
// Slideshow 1
jQuery("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
jQuery("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
jQuery("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
jQuery("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
jQuery('.events').append("<li>before event fired.</li>");
},
after: function () {
jQuery('.events').append("<li>after event fired.</li>");
}
});
});
</script>
It's not advisable to load more than one version of jQuery on a site. I'd remove v1.8 and see how that does. If it fails, remove 1.10 instead. Some changes in 1.10 might break your plugins.
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>
I have jquery script for menu and other for gallery, how to enable both of them to work? Below is my code
I also have some expanding box problem on the li element, whit thi explanation:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
And also double float margin bug error:
When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely
It is very urgent,pls help!
SCRIPT FOR MENU BAR
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../../js/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
SCRIPT FOR GALLERY
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jStack.js"></script>
<!-- syntax -->
<link rel="stylesheet" href="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
// fadeInOut
$("#logo").fadeOut().fadeIn();
// smooth scroller
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1500, "easeInOutBounce");
return false;
});
});
var options = {
isClickAnimation: true,
isPositionRandom: true,
durationOut: 300,
durationIn: 200,
easingOut: "easeInOutBack",
easingIn: "easeOutBounce",
moveLeft: 250,
moveTop: 150,
opacityOut: 0.6,
opacityIn: 1,
delay: 10,
direction: "next",
callback: function() {}
};
$(window).bind("load", function() {
// jStack
var jstack = $("#imageBox").jStack(options);
$("#next").click(function() {
jstack.next();
});
$("#prev").click(function() {
jstack.prev();
});
$("#shuffle").click(function() {
jstack.shuffle();
});
});
</script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
if im not mistaken, both of them are jquery library?, they probably has conflict with each other if they are loaded on the same page, this problem occured to me, what i did was removed one of the library,
I have these scripts for my website but only one function works at a time, whichever code is close to head tag works fine. what is a solution to work both function with out any conflict.
CODE IS GIVEN BELOW:
<script type="text/javascript" src="demo_files/jquery.js"></script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
$.colorbox({opacity:0.3, href:"offer.html"});
});
});
</script>
Long Answer: It's because you are including jQuery twice, once right at the top, and again about half way down (a minified version).
The second time you include the library, the $ object will be redefined, overriding the existing instance. Any code attached the $ object when this happend, such as events and plugins, will be lost.
Short Answer: Remove the second copy of jQuery, it should work then.
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>