Why isn't the following piece of code working in IE8?
<select>
<option onclick="javascript: alert('test');">5</option>
Quite bizarre - no alert is shown in IE8. I do not see the error icon in the left corner as well. Of course it works in FF and Opera. Any ideas?
Putting an onclick handler on an <option> element seems.... weird to me. You might want to switch that to the more common onchange event of the <select>. You can still do whatever you want to do from there, and this is the "accepted" way of doing whatever you want to do to the select. That being said, you might want to try removing the javascript: part of it. That is only needed when you are executing Javascript in a link href for example. An onclick handler expects javascript.
Have you tried just:
onclick="alert('test');"
Pretty sure you don't need the javascript: prefix.
All versions of IE (6,7,8) do not support ANY event handlers on the option elements.
This is a (fairly) well known bug that the IE team has indicated they are in no rush to fix. :-(
Then again Opera, Safari & Chrome all have limited or no support for event handlers on options too.
Lack of events on options: bug 280
(related) Lack of styles on options: bug 281
It should be noted that "Edge" (think IE12 on Windows 10) is currently showing that this issue is fixed in preview releases.
Related
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.
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.
ok so i am stumped if you go to my site and click the right center "Take a Quick Tour >>>" ..i get this lightbox that appears and i want to close it programmatically and in firebug i can see the x is id "rokbox-close" but running this in firebug
document.getElementById('rokbox-close').click();
but i get this error
TypeError: document.getElementById("rokbox-close").click is not a function
any ideas how to do this
i can run this
document.getElementById("rokbox-close")
and get the element but the click function fails...i dont have jquery installed so i was wondering if there is a javascript thing i am missing
Not all browsers have a "click()" function associated with buttons and anchors and etc. IE does (I think), but (for example) Firefox doesn't.
edit — wow according to MDC, Firefox 5 will support this.
If you were using a framework such as jQuery, then that code might allow you to do what you want. (With jQuery you definitely can.)
(Also, strictly speaking, we're not talking about an event here. We're talking about the ability to trigger the event handling mechanism programatically.)
If you use simple JavaScript istead of 'click' use 'onclick':
document.getElementById("rokbox-close").onclick = youClickHandlerFunction
If you use jQuery use:
$('#rokbox-close').click(youClickHandlerFunction)
See more info here: http://www.quirksmode.org/js/introevents.html
Or here: http://api.jquery.com/click/
The click() function is something that is not supported by all browsers. You're probably thinking of the click handler that jQuery provides.
For a more complete view of why click() isn't universally handled, check out this link, which covers the long and twisty history of event handling across different browsers:
http://www.quirksmode.org/js/introevents.html
Code can be tested here: http://jsfiddle.net/yWUTK/3/
<textarea id='textbox'></textarea>
<span onclick="$('#textbox').text('One');">One</span>
<span onclick="$('#textbox').text('Two');">Two</span>
Behaviour for this in Chrome and Firefox is the same, you click One or Two and it changes the textarea. However, on firefox, if you then manually change the content of the textarea, it no longer updates when you click. Chrome continues to work fine.
I'm running firefox 3.6.15
Can anyone explain this behaviour? I'm not sure if I am doing something wrong, or if it's a genuine bug. My actual implementation uses proper markup and $(document).ready etc.
You are indeed correct, however, changing them to val() works.
<span onclick="$('#textbox').val('One');">One</span>
<span onclick="$('#textbox').val('Two');">Two</span>
val() is arguably the more correct method to use as well.
Also, I'm sure you are aware, you shouldn't use inline event handlers except in trivial examples like above.
I have an annoying issue with a select html element that cuts off the text in the dropdown when it is longer then the set width of the select html element.
The select elements need to be a set width to stop the page misalinging, Every browser seems to work except for IE8 running on XP. why? so random and bad compatibility.
please let me know if you need more infomation.
Thanks!
It's a how IE interprets it should render the drop downs ... Unfortunately,there's no easy fix, what you can do is create a replacement for drop downs that handles this in a different way, that can work consistently across browsers ...
Here's a solution I came up with
http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx
i'm not sure of the differences between OS, but just use conditional comments to style the select in IE. style the as well.