Internet Explorer 7+8 jQuery Error with infiniteCarousel - javascript

Hai guise! I am having a spot of trouble with some jQuery I am using, this was previously working but I have made many developments since then and tried to track back to find out what the issue was, but I am unsuccessful - hence, my presence on here. Anyway, I am getting some JS errors in both IE7 and IE8 with the catch my frame jQuery infiniteCarousel plugin, I am literally pulling my hair out over this as when you remove any reference to this everything works beautifully.
Here is a link to the page.
If anyone can shed any light on the matter you would be a life saver!

The problem is that the jQuery infinite carousel plugin is poorly written and the minifaction process requires well formed JavaScript. If you take his code and run it through JSLint you'll see it needs dozens of fixes before it's likely to minimize properly. This is something the author of the plugin needs to rectify.

Although it isn't throwing any errors, it seems that the plugin is loosing track of the elements. A possible solution would be to hook into the start and complete events and stop all the button events until it has completed the animation.
Alternatively, use this plugin instead: http://sorgalla.com/jcarousel/

Related

Simple Ajax Uploader Plugin Stopped Working

We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?
Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');
UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.
I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

View all open events on html node - Javascript

I still consider myself a novice with javascript...so be gentle :)
Is there a way to view all open events listeners on a page and perhaps to see any inifinte loops that may be running?
What is happening, is a page I'm trying to debug works fine. Nodes get added to the page dynamically via a drag and drop method. All works well, but as time goes on, it seems to get increasingly slower - meaning the mouse starts skipping and the such.
I don't know if this is because javascript stores stuff in memory and my memory is getting used up, or if because of the constant checking of elements on mousemove slows things down as more elements are added to the page.
So I thought I would ask what I thought to be the obvious of maybe eventListeners are piling up and I'm not realizing it, or maybe there is an inifinte loop that is not being closed out.
I have firebug, and feel like I've looked at everything. I've put in console.debug statements in the loops and they all seem to end fine.
Any debugging tips would be appreciated.
I would say definitely be careful of memory leaks, especially in IE.
Here's a good resource for learning Javascript:
www.javascriptkit.com
Specifically here are some useful articles:
http://www.javascriptkit.com/jsref/events.shtml
http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
What you need is a JavaScript profiler. Google chrome has a built in under ctrl-shift-j > profiles. There is one available in firebug for firefox as well.

IE 8 Frameset / Javascript error

Ok here's the problem. I have a page that works in FF3 and Safari4 no problem. It's IE8 that's causing the issue, go figure. I remember in the Netscape days when it was the opposite.
Anyways,
So i'm building a website for a friend - i have three pages. the first two work fine on their own, but when they are combined in a frameset in the third (main.html) in IE8 all hell breaks loose. here are the pages:
www.wither.org/Karoline/navigation.html
www.wither.org/Karoline/portfolio.html
http://www.wither.org/Karoline/main.html
& my CSS if you want it: www.wither.org/Karoline/css/styles.css
if anyone can figure out how to fix this, i'd be eternally grateful. It's completely baffling to me and i've tried all kinds of options. i upgraded jquery to the latest version but then my scroller didn't work and i can't dive too much into the javascript code right now.
Please if you could help out, it would mean a lot to me. this has to go live sometime tomorrow.
There is a JS error when executing the following line of code document.getElementById("loading").style.display = 'none';
in the portfolio page.
Apparently, the element with id 'loading' is not being found. However, if I continue execution of the JavaScript on the page (from within the debugger), there are no issues, and the behavior is the same as in Firefox. This is indicative of a concurrency issue - the element 'loading' is not present in the DOM yet, but the script is attempting to change the element's style.
In order to fix this issue, you will have to ensure that the 'loading' element is present in the DOM before its style is being changed. In fact, you could delay the execution of the onload event handler (using window.setTimeout), until a point where the element is present in the DOM.
What's the actual javascript error?
And IE does have an issue in regards to invalid/broken markup inside of frames, I would try
a) commenting out each script and see which causes the js error
b) if commenting out all the js did nothing it might be related to the invalid markup inside of a frame issue, in which case I'd ditch frames alltogether.
yeah....
so thanks so much for your help. problem solved and i figured the other CSS error. should have picked up on that one earlier.
so site is working and if you want to see what happened with your help,
http://www.wither.org/Karoline
it works perfectly cross platform. made the deadline with hours to spare. thanks SO much. can't believe how well this worked.

Scroll with no backward with IE

I am using the Mootools Fx.Scroll effect to navigate horizontally through my website sections. Everything is working properly with Firefox, but Internet Explorer gives me some trouble. First the section were a big mess, but after adding one line in the Mootools core file thanks to a lighthouseapp.com patch, the sections are now well displayed.
My problem is that I can not go backward (to the left), only going to the right (again, it is only with IE...). The working demo is here.
After days of unsuccessful research, I am asking for your help, for any advice. I will provide any needed details.
Thanks a lot ;)
erm - couple of things.
you have commented out mootools 1.2.3.1 and gone back to 1.2.1, any reason for this?
you run to patch the framework using some code from the ticketing system, seems rather dubious to me and it most certainly should not be how you approach solving this. I am far from saying that mootools is free of errors but my point is that for such a simple transition, there can be a million other solutions than to look at the framework's ticketing system. all things being equal, it is safe to assume the problem will lie elsewhere... (and yes, I know of an error to do with Fx.Scroll that is still not patched but I don't think it would affect your setup).
for starters, my debugger on IE7 reports a JS exception on line 57 of your code:
if($('prog')) { // error somewhere here.
progBrowser = new ProgBrowser('prog',{
topX: '50px',
topY: '100px',
mouseOnColor: '#ffe400',
mouseOutColor: '#ffffff'
});
}
subsequently, a lot of code breaks and you get an utter mess on your screen. but there is nothing wrong with your instantiation - the problem is elsewhere: you have actually removed methods of the ProgBrowser class and left a trailing comma, check the bottom of the prog-browser.js file
}, // this comma will always break IE.
});
as for the scrolling problem, you can try using element.scrollTo(x,y) - but in any case, you have totally rewritten the normal event handlers for the class (replacing the click event with a onclick assignment etc) - fix the exceptions and post back your error-free page and we can look at doing scrollback again. good luck :)

Categories

Resources