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();
}

dojo ValuePickerDatePicker on Android device

The Dojo mobile DatePicker - dojox.mobile.ValuePickerDatePicker - is behaving incorrectly:
Clicking on the plus(+) and minus(-) buttons for the year updates the day value and the otherway around.
This only appears on the device and never in a browser during development. Have reproduced on multiple Android devices.
This is also somewhat intermittent in that the steps to reproduce are not exactly the same every time. However once it starts to go wrong it continues to be wrong...
To reproduce: in the Date Picker widget, repeatedly and randomly click on the plus(+) and minus(-) buttons and on the editable fields. Eventually the fields will start to update incorrectly. (I would like it to be more predictable)
Have never reproduced the error on my PC/MAC.
I have a suspicion that the predictive text on the device is interfering, but I have no proof of that.
You can reproduce the error with the widget/Date Picker on its own. Tested with Dojo version 1.9.4 and 1.10.1. The Date Picker is created declaratively:
<div id="dateSelectorDatePicker" data-dojo-type="dojox.mobile.ValuePickerDatePicker" data-dojo-props="slotOrder:[2,1,0]"></div>
Try this example in your browser on a Android device http://jsfiddle.net/sport_johan/q943mbrs/1/

We fixed the problem by creating a new versions of the dojox.mobile.ValuePickerSlot
class and the dojox.mobile.ValuePickerDatePicker class.
In the MyValuePickerSlot which is a copy of ValuePickerSlot we are using click events instead touch events.
So first copy ValuePickerSlot.js and then inside MyValuePickerSlot.js you remove the following handlers:
// this.connect(this.plusBtnNode, touch.press, "_onTouchStart"),
// this.connect(this.minusBtnNode, touch.press, "_onTouchStart"),
and instead add
this.connect(this.plusBtnNode, "onclick", "_onClick"),
this.connect(this.minusBtnNode, "onclick", "_onClick"),
You can also remove the functions _onTouchStart, _onTouchMove and _onTouchEnd since you wont be using them anymore.
You now have to create a new class MyValuePickerDatePicker which inherits all functionality from the original class but you override the constructor that creates the slot classes which now are the new MyValuePickerSlot.
define(["dojo/_base/declare",
"dojo/_base/lang",
"dojox/mobile/ValuePickerDatePicker",
"myApp/dojox-fix/MyValuePickerSlot"],
function (declare, lang, ValuePickerDatePicker, MyValuePickerSlot) {
return declare("myApp.dojox-fix.MyValuePickerDatePicker",[ValuePickerDatePicker], {
// Override of the ValuePickerDatePicker to fix a touch event bug
// on Android device
constructor: function (args) {
this.slotClasses = [
MyValuePickerSlot,
MyValuePickerSlot,
MyValuePickerSlot
];
lang.mixin(this, args);
}
});
});
You can now use the MyValuePickerDatePicker in your code instead of the broken ValuePickerDatePicker.
<div id="dateSelectorDatePicker" data-dojo-type="myApp.dojox-fix.MyValuePickerDatePicker" data-dojo-props="slotOrder:[2,1,0]"></div>
A side effect is that you can't press and hold the +/- buttons if you want to scroll far; you will have to repeatedly press the button(s), but you can still type in a value, so it is not big a problem.

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.

FancyBox 1.3.4 jquery issue in IE8 and IE7

I was hoping that someone can help me with this fancybox plugin issue.
Problem is in the IE7 and IE8.
Error - SCRIPT87: Could not get the display property. Invalid argument.
As I noticed scripts break on this line:
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I'm using jquery version 1.4.2
live example and issue on this link:
http://goo.gl/x0rF7

You are adding 3 instances of jQuery when you only need one (ideally the latest version): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://www.crystalhotel-belgrade.rs/test/plugins/content/simplepopup/jquery-1.4.3.min.js
and an empty call to
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-1.4.2.min.js
.....Also you are loading jQuery UI twice
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-ui-1.8.5.custom.min.js
IE is more susceptible to this kind of conflicts/errors than other browsers. Try reducing your calls to a single instance of each script and beware of the order (jQuery first and jQuery plugins after)
Additionally, make sure that the DOCTYPE is the very first line of your html document (not preceding spaces or comments), otherwise IE will fail to run in standards mode hence fancybox won't work properly.

Problem fixed.
Not the best way but it working
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I removed all animation and just wrote
_finish();
Thanks for the answer JFK, I tryed with that but no

IE7 Ext JS problem: Unspecified JS error on window.close()

I am using Ext JS to make a popup window, here is the code:
function popupImage(term, imageNumber){
if(currentPopupWindow!=null){
currentPopupWindow.close();
}
currentPopupWindow = new Ext.Window({
layout : 'fit',
closeAction :'hide',
plain : true,
constrain : true,
width: 300,
border: false,
html: "Blah blah content"<span onclick=\"currentPopupWindow.close();\">cerrar</span>"
});
currentPopupWindow.show(false, function(){
var el = Ext.get("termimage");
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
currentPopupWindow.anchorTo(Ext.get("dictionarycontainer"), "tl");
}
In firefox this works fine. In IE7 it works, but always produces a javascript error saying "unspecified error".
What am I doing wrong?
EDIT
Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!

This is the solution, dumb as it is:
Have the same window creation, then instead of the calls to show and anchor to:
currentPopupWindow.render(document.body);
currentPopupWindow.alignTo(diccon, "tl", [40, 80]);
currentPopupWindow.show(false, function() {
var el = Ext.get(termim);
currentPopupWindow.setWidth(el.getWidth(true)+150);
});

A quick Google search tells me that you're not the only extJS user that is experiencing this. (See here and here and here for three examples.) Best would be to post in their forums so they can either fix their bug or work around an IE7 bug, whichever is the case.

This looks like it has something to do with it, not that I understand..
http://weblogs.asp.net/rajbk/archive/2006/11/29/ie-6-7-unspecified-error-when-accessing-offsetparent-javascript.aspx

qui is right. The problem lies in anchorTo. Use alignTo and the exception goes away.
Sorry qui, tried to "up" your response but were not able to. I don't have any reputation.:)
Athele

To your second question: Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
Use alignTo and monitor scroll and mousewheel event and update the position accordingly and it is the same as anchorTo. That is the workaround I have found.
Athele

Try to add:
shim: false
to popup window parameter list.