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.
Related
My initial question is a direct dupe of this question, trying to put the cursor at the end of a textarea.
one
two
three|<-- ideal position
It worked fine on all browsers except Firefox (I'm currently using version 18.0). Even the jsfiddle that Tim provided in the link above (for convenience: http://jsfiddle.net/DqtVK/40/) is not working.
It seems it's not highlighting or placing the cursor at all anymore.
I understand jquery is an alternative option (as found here) but did something happen on firefox's side that makes this method no longer reliable? Anyone have any insight? Is there a way to avoid the jquery route?
Thanks!
Looks like there was an uncaught exception that was preventing my piece of code from finishing. It seems firefox really doesn't like focusing on a hidden piece of HTML. Lesson learned, make sure your target is visible!
Though why the jsfiddle is not working properly is still a mystery to me...
but my base issue has been solved.
If anyone can explain the jsfiddle mystery, please keep respondin' I'll be on the lookout.
I have created a little tooltip framework, which works fine in all modern browsers. There's one thing that really bugs me: in Firefox this seems to disable displaying a regular title (from the title attribute).
I can't find a cause for this. It's not the mouseover handler that I assign for certain elements, because on regular (non handled) elements, titles are not displayed either. Furthermore, I experimented with this (see this JSFiddle, and it was not replicable).
Can this be some known Firefox bug (I searched the Internet for that, but I didn't find anything relevant) or am I doing something wrong in my scripting, HTML, or CSS?
I've put the whole thing in this JSFiddle.
[edit april 2022] This is a very old question. Do disregard it.
title is displayed in my Firefox, and Firefox doesn’t have any bug regarding the same. Try updating your Firefox, or maybe some plugin in your browser may be causing the tooltip to hide.
For the life of me, I can't figure out why Cufon isn't working for me in IE7 & 8 (it probably doesn't with IE6 or lower either, but I'm not concerned about that).
So far I've tried:
Adding the function Cufon.now();.
Placing $(document).ready( function() {}); around my Cufon.replace(); function.
Re-generating the font-name.js file with the official Cufon website.
Isolating the text I want replaced and relevant CSS/JS into a separate file to see if it makes a difference.
Adding the font-family: [NAME] self assigned in the Cufon font generator to the font-family: property of the element I want replaced.
For the life of me, I can't figure out why it's not working.
Here's a link to my isolated script on jsFiddle: http://jsfiddle.net/Xzv2X/1/
Does anyone know of any other common errors that could possibly be the issue here?
Just a note, I'm using Adobe Browser Labs as my IE7 & IE8 previewer.
Any comments would be greatly appreciated :) :) :), as this is really starting to get to me, as I've read at least 5 different webpages (including Cufon's own GitHub FAQ) that says it's compatible with IE5+.
Try
Removing type="application/javascript"
Not nesting head inside of <body>
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?
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.