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?
Related
I'm messing around with porting an image selection tool into jQuery. I'm having a couple little issues that are annoying me--
First, the sortable placeholder appears to be stuck at the top of the UL-- it doesn't move down to show the proposed new position if the item were dropped.
Second, the click events attached to the buttons don't fire reliably-- sometimes they work fine, other times it takes 2, 3 or 4 clicks before they fire.
I have been reading a ton of tutorials and the jQuery docs, and I believe I've done this properly, but I'm sure there's better ways to handle what I've attempted.
Here's a jsfiddle showing the behaviour. Any help appreciated!
http://jsfiddle.net/Y2tRW/9/
tested the first problem with
ie9 (the placeholder work as expected if the document is loaded in ie8 compatibility mode)
chromium21 (on a pc works and on another doesn't, i'm disappointed)
opera11
the placeholder works as expected, the second problem is that you need to click exactly on the <i> element, if you click on the button but not on the image it just scroll to the top of the page.
this will fix the problem, change
$("#sortable").on("click", "i.icon-pencil", function(e) {
to
$("#sortable").on("click", "a.btn:has(i.icon-pencil)", function(e) {
EDIT:
FOUND IT
you have float:left; (it's in the bootstrap-combined.min.css for .span12) for all your li element but not for the highlight
add it in your fiddle and it will work.
it worked at home on ie cause i have the compatibility always set to IE8 now i get rid of that setting and it doesn't work. by the way ie8 doesn't apply float:left to display:list-item;
I'm having an issue where, periodically, I am unable to type into any input/textareas on Internet Explorer. I'm working primarily with IE9 at the moment.
When I click on an input, the JS click handler (which empties placeholder text) runs, and the active css is applied. However, the cursor does not appear and I can't type. If I tab to an input field, and start typing, everything starts working again.
I have a fair bit of JS running, but no errors running. I suspected TinyMCE had something to do with it, but it also happens when there are no editors on the page, so that doesn't seem to be it either. If you don't have an answer, I'd love an idea of what could be happening here that I could look into more, since I'm a bit stumped.
I eventually solved this. It was a strange and nasty issue with TinyMCE, where TinyMCE was being destroyed while the cursor was inside the main window. Fix was to explicitly focus out before it gets destroyed.
I had a similar issue once with I.E. where I was using .split to make sure the input box was not empty when gaining focus. However, I.E. did not support .split and would crash my js. I had to write my own and it ended up working out. Not sure if this in any way applies to what you are doing, but I thought I would just throw it out there.
Since you have lots of javascript on the page, a likely reason would be either a naming conflict or even more likely a js crash. Traverse your code for the 200th time.
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.
HTML markup:
<ul id="portfolio"><li class="web">
<span class="info">August 2007 visit</span>
<a href="/assets/image.jpg" class="fancybox" rel="web">
<img src="/assets/imagelarge.jpg" alt="Rising Star Ranch" />
<span class="title">Some Title</span> Some other text...
</a>
</li>
</ul>
jQuery:
$("ul#portfolio li").fadeTo("slow", 0.3);
In Firefox 3 and 3.5 as well as IE7, this behaves as expected and fades out all elements within the 'li'. In IE8, nothing is faded at all, and no Javascript errors show up when debugging.
The page is located at
http://joecoledesign.com/portfolio
Thanks!
Have you tried putting quotes around ul#portfolio li ? The selector is just a string, so it needs quotes. Without quotes doesn't work even in my Firefox.
$("ul#portfolio li").fadeTo("slow", 0.3);
Edit: OK, try to apply the fade to all subelements: span and img one by one for starters. It could indeed be an IE bug.
Edit: you are also missing a closing quote on the id="portfolio". Come on, man, try to work these things out before you post.
Edit: btw, the above works fine in IE8 - I just put it together and threw it up into a blank IE8 page - the whole thing faded.
Edit: It's quite possible something else on your page is doing it as it works fine standalone.
Very cool page Joe! The only thing that comes to mind WRT IE8 is that jQuery may not have caught up to it, or that something may be funny with your browser (such as your javascript settings may be tweaked).
I was having the same problem with the transparency in IE8. Apparently IE8 has a different method of setting transparency than IE6/7. And unfortunately jquery has no way of animating transparency for IE8 yet. Why Microsoft, why?!?
http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/
That is what I found on the subject and after reading it I gave up on trying to get it to work since it confirmed what I suspected. Hopefully jquery will have this fixed in their next release.
I experienced the same thing and discovered thanks to Artem's posts that the child elements of the table were not receiving the opacity change in IE8. Therefore it appeared at first glance that nothing was happening. I believe the reason that Artem's blank page example worked and the original poster's example did not is because there were no children in Artem's sample.
Adding the fadeTo on the child elements solved the problem for me. Old post, but it resolved my issue, so figured it's still relevant.
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');