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();
}
Related
I can't believe it but I found some JS code that works perfectly in IE 11 but does not work in Chrome (version 81).
I am updating one multi select from another, keeping the options sorted. So I have a function for it:
/**
* Move the options defined by <sel> from select tag <from> to select tag <to>
* #param from The source SELECT tag jQuery object
* #param to The destination SELECT tag jQuery object
* #param sel Either: "option" for all, or "option:selected"
*/
function moveOpt(from, to, sel) {
var opts = from.children(sel).removeAttr('selected').remove().get();
opts = opts.concat(to.children('option').remove().get());
opts.sort(function (a, b) {
return a.value.localeCompare(b.value);
});
to.append(opts);
/*
// Chrome doesn't re-render the opts until they are selected and then focus is lost ???
window.setTimeout(function() {
to.children('option').attr('selected', 'selected').trigger('click');
from.trigger('focus');
to.children('option').removeAttr('selected');
}, 1);
*/
}
This works perfectly in IE 11, but in chrome, the options get moved, but you can't see them in the browser. They are there because if you "inspect" the SELECT element, all the OPTION tags are there, and also doing $(to).children().length shows the correct number.
If I uncomment the ugly HACK (the window.setTimeout() call) then Chrome finally will show the options correctly. But it is NUTS to have to do this. I must be doing something wrong. Anyone know what that something is?
Here is a JS fiddle showing the issue - Running it in IE (read-only mode) shows it working, Chrome does not.
UPDATE
I tried upgrading jQuery from 1.10.2 to 3.5.0 and still did not work.
Also as #ZacharyYaro points out it works in Chrome 80 but not 81.
Changing this:
to.append(opts);
To this:
var toElm = to.get()[0];
$.each(opts, function(i,v) { toElm.appendChild(v); });
Fixes the problem.
(Resubmitting my comment as an answer since it worked for you)
It appears your Fiddle also works in Chrome 80, and then breaks in Chrome 81. It appears using the built-in selectElement.add function instead of jQuery (JSFiddle) works in Chrome 81, so it seems Chrome 81 just broke something used by jQuery's $element.append(arrayOfElements) function.
I am developing a web-application for IE8.
The Problem is: My JavaScript/JQuery Code shows a popup "Stackoverflow at line 3":
$(new Array(
new Array(/\xE4/g, "ä"), //ä
new Array(/\xF6/g, "ö"), //ö
new Array(/\xFC/g, "ü"), //ü
new Array(/\xC4/g, "Ä"), //Ä
new Array(/\xD6/g, "Ö"), //Ö
new Array(/\xDC/g, "Ü") //Ü
)).each(function(){
$("textarea[name=remarks]").val($("textarea[name=remarks]").val().replace(this[0], this[1]));
$("input[name=firstname]").val($("input[name=firstname]").val().replace(this[0], this[1]));
$("input[name=lastname]").val($("input[name=lastname]").val().replace(this[0], this[1]));
alert("1"); //after popup "1" ==> stackoverflow popup appears...
});
alert("2"); //is not executed
This error does only appear in IE8, in no other browsers, not in IE 10, nor in its Compatibility mode...
Does anyone has a solution in mind?
As far as I know there also are no recursions, right?
edit:
The error message doesn't appear after the first loop. It appears aktually after the 6th "1"-popup...
I am really ashamed...
First I noticed that the error consisted even when I deleted the code which I thought was the cause.
Then I found the real source of the error:
My application uses a jQuery plugin which creates a watermark to inputs & textareas.
A few weeks ago i changed something in it as a bugfix - and also wrote something like this:
$(...).submit(function(){
...
$(...).submit();
...
});
==> nice recursion... >_<
#Yury Tarabanko
Thank you for that code snippet.
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.
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
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.