Develop Reference

Ignore jquery call if nothing matched

Hi I have a wired issue which I really dont know how can I explain to you guys. But I will try my best. Here is a jquery script I'm using on my site for calling different jquery functions or plugins like typed.js, flexislider etc etc.
(function ($) {
//Typed JS
$(".element").typed({
strings: ["Saumya Majumder.", "a geek.", "an Engineer.", "a Code Lover.", "a Google fan.", "an Apple fan.", "an Android fan.", "a WordPress fan.", "an Inventor.", "a Coffee lover.", "a Tea lover."],
typeSpeed: 100,
backDelay: 3000,
loop: true
});
// Flixislider
$('.flexslider').flexslider();
/* TOOLTIPS */
$('.tooltip').each(function(index, element) {
$(this).tooltipster({
position: $(this).attr('data-tooltip-pos'),
fixedWidth : 300,
offsetX : 8,
animation : "grow",
delay : 50
});
});
$('.bar').each(function() {
var bar = $(this);
bar.find('.progress').css('width', bar.attr('data-percent') + '%' );
});
})(jQuery);
Now 1st I must tell that this is working fine with chrome and opera but creating issue on firefox.
Here is the issue:
In firefox when a user is visiting my page where I have the typed element to triger, but no flixislider to trigger and again a bar element to trigger. Whats happening is firefox 1st triggers the typed element as there is a call for that on the same page, and then it see that the page does not have any flexslider call, so it thwos and error and dont even read the below calls whether or not is there any more thing that might have used on that page.
But in chrome and opera, it just ignores the calls which are not present in that page. Sleek and exactly the thing I need.
Now suppose in a page where I dont have the typed element, it thwos error for the very 1st call and dont even check the rest. So none of my plugin calls will work.
What I'm looking for
As this is a firefox specific issue can anyone tell me how can I update my script code so that firefox just ignores the calls that are not ment for that page and execute the calls which are present on that page, like chrome, firefox.

You could check if there is any .flexslider before call the function :
if ($(".flexslider")[0]){
$('.flexslider').flexslider();
}

Getting Uncaught TypeError: undefined is not a function in nivo slider.js

I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.
"Uncaught TypeError: undefined is not a function"
My nivo-slider.js code is-
(function ($) {
Drupal.behaviors.nivoSlider = {
attach: function (context, settings) {
// Initialize the slider
$('#slider').nivoSlider({ *//here I am getting error mentioned above*
'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
'slices': Drupal.settings.nivo_slider.slices, // For slice animations
'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
});
}
};
}(jQuery));
Help me to sought out this error..thanks!!

Include jquery.js main file in header before any js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
When you use two different versions of jquery (which is not recommended), you can use
jQuery.noConflict
api.jquery.com/jQuery.noConflict/

I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.
Do let me know in case of any doubts

Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.
When you try to add a jquery.js in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
There will be 2 jquery libraries now & which will conflict.
So we need to use jquery update module to upgrade the library

Another likely candidate is referring to jQuery with $ (dollar):
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#main-content").fitVids();
});
If you instead use the no-conflict reference in your script, as below, this may fix the error
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery("#main-content").fitVids();
});

I just ran into some issues configuring Nivo View Slider on Drupal 7.
I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server.
Here is the documentation : https://www.drupal.org/project/views_nivo_slider
To sum it up :
install/enable Library API
download Nivo Slider libs from https://github.com/gilbitron/Nivo-Slider/downloads
unzip the archive to sites/all/libraries/nivo-slider
At step 2, you'll have to choose between version 2.x or 3.x
On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...

fraction slider not working

I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!

A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>

You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593

FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!

MouseOver-Event on SVG-Path doesn't fire properly in Firefox

Edit: It's not only a ExtJs-issue; it doesn't work on pure SVGs with pure Javascript either.
I have an Ext.draw.Sprite that is defined like
Ext.create('Ext.draw.Sprite', {
type : 'path',
stroke : 'lightgrey',
'stroke-width' : 8,
path : path,
listeners : {
mouseover : Handler.clickZoneMouseOver,
mouseout : Handler.clickZoneMouseOut,
click : Handler.clickZoneClick,
mousedown : Handler.clickZoneMouseDown,
mouseup : Handler.clickZoneMouseUp
}
});
The Handler simply says
console.log('mouseover')
On Google Chrome it works perfect and without any problems. Unfortunately, on Firefox the mouseover- and the mouseout-Events are only fired "sometimes". So when I perform 10 mouseovers and mouseouts, the event is fired like once or twice.
I wanted to create a jsfiddle that shows the problem, but there it works without any problems... http://jsfiddle.net/P6Ny3/
So it may be a Problem with the ExtJS-Listener classes...
Does someboy know, what may be the problem in this case?
Thank you for your help!
EDIT:
I managed to create a jsfiddle, that shows exactly my problem!
http://jsfiddle.net/8r327/2/
There is - also in pure javascript - a strange behaviour on firing the events!

I think you are hitting the following FF bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=676001
It's been reported 2 years ago, has multiple duplicates, but as of now have not been fixed yet. :(

Object doesn't support this property or method error in IE7 jQuery

IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!

What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js

I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.