We Keep Coding

jQuery next() and/or remove() breaking in IE?

I've got this silly problem (called Internet Explorer) that keeps breaking on something that no other browser has a problem with. Since this is pretty common ground, I thought I'd ask.
If I try to run this line through IE8:
$('#map').next('.point').remove();
I get nothing. If I completely remove the line, my little popups show up and begin to stack their contents together in the box (which is why I need to remove a div with a class called point.
I know IE has a history of off behavior with both .next() and .remove(), and I figure it has to do with .point not existing on first click (Perhaps IE is hung up on removing something that doesn't exist?). I've tried setting conditions for that to even be called, and it still breaks. Any clue what I can do?

Looks like the problem is not the JavaScript but the CSS. If you inspect the page in IE, the div.point is being created correctly but not being displayed. In FireFox the div.point element gets an inline style of display:block but that inline style is not applied in IE. You can use Firebug to see that in Firefox and the IE developer tools (F12).
Change the .point style in your css from display:none to display: block and you should see the box.

Playing around with your site, it looks to me like your problem is that .fadeIn() is not working, for whatever reason. If you call .show() instead, it works. If I load a newer version of jQuery on your site, .fadeIn() works as well. Are you stuck with 1.4.2, or can you upgrade?

Why is this jQuery animation so SLOW on Firefox 4/5?

EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular complex CSS is applied. See the video at the bottom for an example of the problem.
I think is hard to copy and paste the whole code here. So I've create a fiddle for this.
To be honest, CSS is not so important on this (I putted it for have a decent grid). I also removed many functions from my original version, in fact they aren't so important.
The only one that works is by clicking on the buttons + Tracks (which call addTrack()) that adds a new track/line in the grid. Tested on Chrome, IE, and Firefox < 4 version. There isn't much problem. It's really rapid and fluid.
The problem is on Firefox 4 or 5. It's really slow to add the new track/line. It's fast like a turtle.
What the function done is to clone (copy with handler) an element trackOn, which is already written in a hidden field (tracklistOff) and add it (insertAfter) applying a fade effect. (thats means a new line in the grid).
Why this behaviour on Firefox? Too many elements to browse on the DOM I suppose. I need to get rid about this slow attitude... so what can I do?
EDIT
You can hear the difference about Chrome and Firefox (5, last version) on this video. Try to hear/see the difference between clicking on mouse and add new line (with the effect). It's too frozen (also when I try to add more tracks quicly).
Still a problem for me, any suggestion will be appreciate :)

This is not very slow for me. On my computer running Firefox 5 I can add many tracks in less than a second. What performance are you seeing? ("Fast like a turtle" is not a very quantitative measurement. :)
When you have trouble with JavaScript speed, profile it, using the Developer tools for Chrome/Safari/IE or Firebug for Firefox. Here's what I see when I run the profiler on your JSFiddle and click on the +Track button twice:
From this we can see that most of the time is spent in some set function from a mootools library. Since I don't see this library included in your code, I'm assuming the profile is tainted by JSFiddle.
So, we create a standalone test case without the unnecessary CSS and profile that. Now we see this (for several presses of the +Track button):
Almost all of your time is spent in the clone() function.
So what can you do about it? You could try pre-creating the HTML string (in JS) for a template row, and instead of using 'clone' try creating that with:
$(templateString).hide().insertAfter(...).fadeIn(600);

would it be ok if you get just the last element?
something like:
$('.tracklistOff div:last-of-type')
.clone()
.hide()
.insertAfter(($(param).parents('.trackOn')))
.fadeIn(600);
or you could addClass(last) to the last element to get only one

I just tested your fiddle on the following browsers and they all worked well: FireFox 5, Opera, Google Chrome, Safari & IE9.
There were no speed issues but each browser handled the fade slightly differently however everything else seemed to work fine. Not sure what the problem is here. It could be your computer speed but as you're on this site I presume it's decent.

Strange Javascript Behavior IE8 with Jquery and Animations

I am working on a project right now that uses an accordion style menu, but I think this is more of a general question reguarding IE8 and Jquery .animate(). For some reason, even though the animations seem like the are completed (tested with callback functions) what is showing on the screen is incomplete. It seems like it's completing because whenever I use the browser zoom in and out, try highlighting the region, or other similar things to cause a change in appearence it corrects itself (ie the end result of the animation is shown). I have tested in the latest version of Chrome and the animation looks perfect, so it is an IE issue.
I am animating the property "margin-top" for the next element a certain distance when a element is clicked using .animate(), reveiling the submenu underneath. When a element is "opened" in this manner and another is clicked, a function is called to check all elements for being opened and closes the one that is using .animate() also.
I've only typed a description of the code because I feel like the is an issue with browser performance (possibly just on this machine?). Has anyone heard of this happening in IE8 or below in regaurds to the animations or just Jquery/Javascript and IE8 in general?

In IE8 I sometimes have to manually cause the parent element to reflow in order to get other elements to move correctly after an animation.
function repaint(jElement) {
if (!$.browser.msie) return;
for (var i = 0; i < jElement.length; i++) {
jElement[i].className = jElement[i].className;
}
}
Try running this function on the parent of the animated element after the animation is complete and see if it fixes the issue.

jQuery event handlers not firing in IE

I have a list of items on a page with a set of controls to MoveUp, MoveDown and Delete.
The controls sit at the top of list hidden by default. As you mouseover an item row, I select the controls with jquery
//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
$(this).prepend(tools);
});
This works great in Firefox .. the tools move into the current row, and the click events call the ajax functions. However, in IE6 and IE7 .. no click occurs. I tried unbinding on mouseout and rebinding on each mouseover .. to no avail.
I also looked into various reasons outside of javascript (e.g. transparent png conflicts, z-index, position:absolute) .. also no solution found.
I eventually needed to add a tools row to each item and show/hide on mouse over/out. Works just as well -- the only downer is that I have much more 'tools' markup on my page.
Does anyone know why IE ignores/drops/kills the mouse events once the objects are moved (using prepend)? And why rebinding the event afterwards also has no effect? Kept me annoyed for almost 2 hours before I gave up.

IE will lose events depending on how you are adding things to the DOM.
var ele = $("#itemtocopy");
$("#someotheritem").append( ele ); // Will not work and will lose events
$("#someotheritem").append( ele.clone(true) );
I would also recommend using .live() on the click events to simplify your code a little. Mouseover/out is not supported by live yet. http://docs.jquery.com/Events/live

I just spent the whole day troubleshooting events not triggering on items appended to the DOM, (IE7, jQuery 1.4.1) and it wasn't because I needed to use live() (though, good to know, Chad), nor was it because I needed to clone the items.
It was because I was selecting anchor tags that had a "#" in them like so:
var myitem = $('a[href=#top]');
My solution was to use the "Attribute Contains Selector" like so:
var myitem = $('a[href*=top]');
Fortunately I have enough control over everything that it won't likely break in the future. This isn't technically related to appended objects, but hopefully it saves someone some time.

i had a similar problem. trying to use .ready to load a div on the initial page load.
works well in FF , but not ie7.
i have found a hack that seems to get around this.
I have load call a callback, divLoaded().
In divLoaded i check the $('#targetdiv').innerText.length < 50 or whatever you think will indicate that it didnt load. If I detect that case, i simply call the function taht loads that div again.
Oddly enough, i also add a '.' to the innerText before i recall the ajax function. It seems taht sometimes we go through 3 or 4 loops before the ajax load finally takes.
This leads me to think that document.ready works pretty flawlessly in IE7, which seems to dispel a bit of a myth that it is unreliable. What really 'seems' to be happening is that .load is a little bit flakey and doesnt work well when the page is just loaded.
I am still a bit green w/ all the jQuery stuff, so take this w/ a grain of salt. Interested to hear anyone's take on my little hypothesis.
cheers
greg

Div not properly hiding in IE

I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.

You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..

Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.

Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.

Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.

try
$("#divToHide").css('display:none');