I am attempting to use the hoverIntent plugin to delay some animation effects on progress bars. However, for some reason hoverIntent doesn't seem to be functioning at all.
I have the following in my page header (all paths have been verified):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="campaign-resources/_js/jquery.hoverintent.js"></script>
<script type="text/javascript" src="campaign-resources/_js/sitewide.js"></script>
In sitewide.js I run the following:
$(".cause-block").hoverIntent(function() {
var originalWidth = $(this).find(".cause-chart-achieved").css("width");
var chartParams = { width: originalWidth };
$(this).find(".cause-chart-achieved").css("width", "0");
$(this).find(".cause-chart-achieved").animate(chartParams, "slow", "easeInOutSine");
});
But when I hover over the relevant div, nothing happens in the browser, and the console displays the following errors:
"cfg.over is undefined" and "cfg.out is undefined"
I've tested using jQuery's built-in "hover" and it works just fine. I also thought it might be a conflict with the easing plugin, but after removing references to the easing plugin in the HTML and JS files I still have the same issue. Finally, to be safe I removed all other custom JS, yet the issue persists.
Any ideas? Thanks!
hoverIntent takes 2 parammeters,
do
$(".cause-block").hoverIntent(function() {
var originalWidth = $(this).find(".cause-chart-achieved").css("width");
var chartParams = { width: originalWidth };
$(this).find(".cause-chart-achieved").css("width", "0");
$(this).find(".cause-chart-achieved").animate(chartParams, "slow", "easeInOutSine");
},
function(){});
Related
My website used to use jQuery 1.3.2, now I got courage and time to update it to jQuery 1.11.1 but still I have some problems.
The function bellow used to work but not anymore.
Anyone could help with it?
In scroll down when -user or admin- write a message.
I have added the jquery-migrate-1.2.1.min.js file also already.
The scroll did not run at all. It is halted on top.
<script type="text/javascript" src="'+PATH_xxx+'js/jquery.min.1.11.1.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-ui-11.js"></script>
function ajax_message() {
$.post(BASE_URL+'chat/ajax_message', {}, function(result){
$("#mydiv").empty().append(result);
var count_p = $("#mydiv p").length
if ($('#roll-auto').attr('checked')) {
$("#mydiv").attr('scrollTop', count_p * 1500)
}
});
}
In jQuery 1.11.1 scrollTop isn't an attribute instead it's used as a function $().scrollTop(positionOnPageToMoveTo);
So just change:
$("#mydiv").attr('scrollTop', (count_p*1500))
To:
$("#mydiv").scrollTop(count_p*1500);
I have a couple jQuery functions that are working properly - A fadeIn of a fixed logo and navigation menu bound to a page scroll, as well as a lightbox and scrollbar fix for Firefox tied to (document).ready.
I'm trying to add the ability to hide and/or show a couple of div's tied to a click.
As a stand-alone function, I have it working properly as a fiddle...
Working JSFiddle Here
The problem is I'm a learning my way through jQuery as I go and I'm not sure of what the proper order is to call the functions in my script at the bottom of my page.
My logic tells me to include it under the (document).ready piece, but when I insert the working script from the fiddle, it not only doesn't work but also screws up the rest of my functions.
Current working script without hide/show function (Updated per comments):
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
});
</script>
The way I've tried inserting the additional function is like this:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').on('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').on('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
</script>
When I do this, the toggle doesn't work like it does in my fiddle, it kills my scroll-pane2 and adds a horizontal scroll that shouldn't be there on .scroll-pane1.
Is there something obvious that I'm overlooking because of my shitty knowledge of jQuery?
HTML Section (inventory of scripts?):
<script src="js/nivo-lightbox.min.js"></script>
<link href="css/nivo-lightbox.css" rel="stylesheet" type="text/css" media="screen">
<link href="themes/default/default.css" rel="stylesheet" type="text/css" media="screen">
<!-- jScrollPane CSS for Firefox scrollbar fix (applied to all browsers) -->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="screen">
<!-- Mousewheel support for jScrollPane scrollbar fix for FireFox and IE -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
Firstly, there is a syntax error in your example when you added the click handlers for #menu-switch. You need to close the function and the call to live, like below. Notice the extra }) closing each call to live().
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').live('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').live('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
});
And there are a couple more things you might want to consider. You will want to wrap everything inside the $(document).ready() call, because that will ensure that jQuery and the DOM are ready for action. And as charlietfl mentioned in a comment above, the live() method was deprecated in version 1.7. If you are using a version > 1.7, then you'll want to use on() instead. Here's an updated version of the whole thing.
$(document).ready(function(){
// Cache the items you need to use inside different functions.
// This is so that you don't have to call the jQuery method
// on every user action.
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessertTastingMenu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');
// Setup your plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
// Setup your event handlers
$menuSwitch_1.on('click', function(event) {
$mainTastingMenu.toggle('show');
$dessertTastingMenu.toggle('hide');
});
$menuSwitch_2.on('click', function(event) {
$mainTastingMenu.toggle('hide');
$dessertTastingMenu.toggle('show');
});
// I made this handler match the ones above for consistency
$(window).on('scroll', function(event) {
if ($(this).scrollTop() > 200) {
$mainLinks.fadeIn();
$headerLogo.fadeIn();
} else {
$mainLinks.hide();
$headerLogo.hide();
}
});
});
I've seen the posts about the no conflict but I'm not very code savvy and can't figure it out alone. I'm having trouble making two libraries work together.
At the top I have the 1.9.1 library which controls a news ticker, and a carousel. Near the bottom there is a library 1.6.1, which controls a Dribbble feed. If I remove 1.6.1 everything but the dribbble feed works, and if I remove the 1.9.1 the dribbble feed is the only thing that works. I uploaded the website for you guys to check out. If you could edit my code to make it work that would be amazing, I don't have much knowledge of jquery.
This version has a working dribbble feed at the very bottom
http://michaelcullenbenson.com/MichaelCullenBenson.com/index.html
and this version has a broken feed and everything else works.
http://michaelcullenbenson.com/MichaelCullenBenson.com/index2.html
Help would be AMAZING as the dribbble feed is the last element I'm trying to finish on my homepage and I'll be able to move on.
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 600,
timeout: 6000,
type: 'random',
containerheight: '1em'
});
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="utilcarousel-files/utilcarousel/jquery.utilcarousel.min.js"></script>
<script src="utilcarousel-files/magnific-popup/jquery.magnific-popup.js"></script>
<script src="js/responsive-nav.js"></script>
<script>
$(function() {
$('#fullwidth').utilCarousel({
breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
mouseWheel : false,
rewind : true,
autoPlay : true,
pagination : false
});
$('#fullwidth2').utilCarousel({
breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
mouseWheel : false,
rewind : true,
autoPlay : true,
pagination : false
});
});
</script>
<script>
$(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#aboutarea").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#aboutarea').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dribbble.js"></script>
<script type="text/javascript">
$(function () {
$('#user').dribbble({
player: 'MCBDesign',
total: 1
});
});
</script>
First and foremost, remember that it is never recommended to use two seperate versions of jQuery on the same page. However, if you absolutely have to, you can use the method below to make it work.
On to the explanation:
It looks like you do not quite grasp how jQuery no-conflict works.
The idea of no conflict is not as simple as loading one version of jQuery along with its scripts, then including another version of jQuery and its scripts.. its easiest to assign the older version its own "namespace" (which is really just a huge function) while letting the newer version use the default "namespace" (which is jQuery or $)
NOTE: jQuery normally takes on the "namespace" of $, which is why you see lines of code like this: $.each or $("#selector") instead of jQuery.each or jQuery("selector")
NOTE: remove the spaces in < script > in the code below (SO does not like script tags apparently)
To dive into your specific case, you need to load jQuery version 1.9.1 first as you would normally:
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script > (You should really load this from google cdn, here is why)
Then, include the older version of jQuery, 1.6.1.
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >< /script >
After that comes the noconflict part. Include a one line script as follows:
< script > var $j6 = jQuery.noConflict(); < /script >
This will set the 1.6.1 version to the $j6 "namespace" and hold the 1.9.1 version in the normal $ "namespace" which will allow you to target the specific version like so:
$j6('#user').dribble() and $('#news').innerfade()
Now you should have 2 seperate versions of jquery running side by side.
You may need to do a mass find/replace on the dribble plugin (and any other plugins using the 1.6.1 library).. replacing all instances of jQuery (or $) with $j6.
Note this may not be the absolute best solution.. and I am no expert in no-conflict, but it has always worked for me.
My code of my Script is given below.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
alert('init function called');
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
var verticalAdjuster = .30;
var backgroundSpeed = .15;
var childrenSpeed = .05;
var dogSpeed = -.03;
var ground = -.00;
jQuery(document).ready( function(){
alert('other function called');
$("#painting").mousemove( function(e){
var x = 750 - (e.pageX - this.offsetLeft);
var y = 435 - (e.pageY - this.offsetTop);
//$("#city").css("background-position", (backgroundSpeed*x) + " " + (backgroundSpeed*verticalAdjuster*y));
$("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
$("#city").css("left", (backgroundSpeed*x));
//$("#city").css("right", (backgroundSpeed*x*(-10)) );
$("#tree").css("top", (childrenSpeed*verticalAdjuster*y) + "px");
$("#tree").css("left", (childrenSpeed*x) + "px");
$("#boyAndBitch").css("top", (dogSpeed*verticalAdjuster*y) + "px");
$("#boyAndBitch").css("left", (dogSpeed*x) + "px");
});
});
</script>
The issue is that only the later script is running right now. But if I remove the <script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script> from where it is, and place it on the top, then only the init() function works and not the later.
Can you please explain me how can I solve this issue.
Regards
Zeeshan
You're including jQuery up at the very top, then Prototype right after that, then jQuery again at the bottom. The higher of the two script blocks appears to exclusively use Prototype, the lower of the two, exclusively jQuery.
Each of those includes is going to re-define $. By moving the initially-lower jQuery 1.3.2 inclusion to "the top", I assume you're placing it above your Prototype script tag.
So, down in your jQuery(document).ready callback, the $ has been hijacked by Prototype and you get errors because your code is written expecting that $ is jQuery.
What you should do is:
Only use one version of jQuery on this page. Pick one and go with it.
Call jQuery.noConflict(). Given the ordering you have now, things may work fine without it, but it's a good idea anyway, and will keep things from breaking if you change the order you include your libraries in.
Change the beginning of your jQuery code to:
jQuery(document).ready(function($) {
Adding that $ as a parameter to the ready callback will let you use the $ shortcut within the callback.
Or, if you control all this code, just stick with either Prototype or jQuery, whichever you prefer.
If it is a requirement to use different versions of jQuery and also other javascript frameworks then it is possible using no-conflict mode to distinguish between them and also different the jQuery versions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jq162 = jQuery.noConflict(true);
</script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
<script>
jq132 = jQuery.noConflict(true);
</script>
Instead of $("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
You should use jq132("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
It seems odd that you are both linking to a google jquery version and local copy. I would recommend only linking to one. Also, you're going to want to do all of your imports before you actually write any scripts in the HTML file, unless you are using a noConflict() jQuery call. In that case you should use noConflict() before you import Prototype.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
These are different versions of jquery. Because the second call is the last one, only that version is being used. I would say that removing that call completely would fix your problem.
inside <head> tag i declare a jQuery function as follows (menu animation function) ;
<script type="text/javascript">
$(function() {
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
and inside <body> tag i use javascript function as follows (slideshow function) ;
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
the problem is only slideshow function excuting while loading not menu animation; if i remove the slideshow function, menu animation script is working!
kindly guide me to sort of the problem
Try to wrap your javascript code in $() in the body tag like this. Since this code inline in the markup it will be executed right away before even all the resources on the page are loaded. May its causing a js error on the page. You and check the console log if you find any js error on the page.
$(function(){
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
After lot of days research I got a fix for the conflict with jquery;
I have replace all $$( with dbl( and $( with sgl( in the javascript file (slideshow.js).
then in the html file i have modified first two lines of my code, as follows;
sgl('slideshow').style.display='none';
sgl('wrapper').style.display='block';
Now both (javascript & jquery) working smoothly. Thank you so much #ShankarSangoli - for your effort.