(Yes, I know there is a similar question on SO, but it's 8 months old -- since then IE8 RTM has come out -- and not very illuminating)
Is it possible to disable IE8's 'Accelerators' on my site? When highlighting text, I have a small popup box that appears beside the cursor (similar to Office 2007) which is being obstructed by them.
I understand there's a method of disabling highlighting on specific elements of the site using jQuery, but this isn't ideal as I need to preserve the highlighting.
Note: I am not asking how to disable IE8 accelerators on my local copy of Internet Explorer. Instead, I would like accelerators to not appear when anyone visits my site using IE8.
Sorry, this is deliberately not supported.
Please see http://blogs.msdn.com/ieinternals/archive/2009/06/03/slowing-down-disabling-accelerators.aspx for discussion on this topic.
You can mark the parent element as either contentEditable (http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx) or as unselectable (http://msdn.microsoft.com/en-us/library/ms537840(VS.85).aspx)
Either one should prevent the accelerator button from appearing.
You could prevent highlighting on the section. Then wrap the selection that would have been highlighted in a span that has some CSS applied to it, mimicking the highlight. It might take a bit of work, but it would achieve your goals.
As someone says, wrap around selection with some span (ex. span class='selected' - to retrive it latter), and delete the selection with:
if (document.selection)//ie -> prevent showing the accelerator menu
{
document.selection.empty();
}
Related
In Chrome and as for now the Datalist only appears when typing or double clicking on the input element, e.g. http://jsfiddle.net/r7Y4v/
I'm trying to make the datalist appear sooner. Ideally I would put a little "dropdown arrow" next to the input that when clicked would make the Datalist appear.
I'm looking for a webkit solution.
I can't find anything in the specification how to do this.
Also I noticed that the implementation in current browsers seem to vary quite a bit (click vs dbl-click, arrow-key's, full versus filtered list and how filters match the partial input, etc).
To me, it seems that for now there is still no properly working combo-box and the data-list seems to be in it's infancy.
So it appears you'd currently be better of to roll your own or use a ready library.
It seems to me the 'minimul datalist' library is rather popular (good link to read to).
On that page is a link to it's GitHub code and a demo page.
Side-note: I'd love that some-one gives a better answer! Also, at first I thought it was a good idea to leave out the arrow-button so people could have better styling-options for a drop-down button if they wanted one that they could hook-up to the datalist/autocomplete/combobox. I'm surprised all this still seems unspecified and not natively supported. Please, spec-writers, give us the simple native combo-box (that is overdue for so long) and then add spice like filters!
Edit: There is an open Feature request since August 2012 on the Chromium project that asks for a drop-down functionality:
Issue 152375: Add drop down toggle on input tag with datalist
How about something like this? Since Chrome does place an icon on hover I placed this image so that it would be in the same spot.
input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}
If you drag-and-drop around an image in Firefox in a contenteditable area, sometimes the images will end up being selected like this:
Fiddle here: http://jsfiddle.net/zupa/qg5Qh/
You may need to drag-drop it a few times, I have this bug in like 20+% of the time.
I am using Firefox 13.0.1 on Windows 7
How to remove that selection? Any help is appreciated.
Ps:
It is not available as a range via document.getselection().getRangeAt(..)
Firefox does NOT add any HTML attributes, still if I hit save (custom CMS), and reload the page in contenteditable mode, the selection comes back. Seems to be an annoying bug.
It does it reliably when the image is within a word that is marked by Firefox as a spelling error. For example, here's your jsFiddle with the image moved into the middle of the word "Lorem": http://jsfiddle.net/timdown/qg5Qh/1/
It seems to be something to do with the styling applied to misspelled words. Add the word "Lorem" to the browser's dictionary and the image styling goes away.
You could switch spellchecking off using the spellcheck attribute. From what I can gather, you have to do this at the <body> level in Firefox because it doesn't seem to work on single contenteditable elements as it does for textareas.
Demo: http://jsfiddle.net/timdown/qg5Qh/2/
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.
I am developing Javascript app that will wrap every line of text entered inside iframe (designmode) with P (or div) like it happens by default in IE.
For now I am not pasting my code because I just started, the first problem is when i type some text in firefox and even before I click enter or calling any function firebug inserts
<br _moz_dirty="">
under the entered text.
Why? How can I prevent it?
If you still need my code please tell.
As the _moz_-prefix suggests, this is a Mozilla-internal property. It isn't inserted by Firebug, but rather by the core editor functionality in Gecko. You can't prevent it; ignore it or work around it.
#myEditableDiv br {display:none;}
It's something Mozilla uses to prevent empty containers collapsing and occasionally inserts at seemingly random times too.
The question is, if they knew it was a dirty hack then why did they do it?
The _moz_dirty attribute is used to indicate that the node needs to be pretty-printed when the document is saved, although it shouldn't appear in web pages, only in SeaMonkey Composer and SeaMonkey and Thunderbird's HTML Message Compose.
The Gecko editor used to put it there because it needed it to give it somewhere to put the cursor. I believe this is fixed in Firefox 4.
Uhm I'm not sure if anyone has encountered this problem
a brief description is on IE6 any <select> objects get displayed over any other item, even div's... meaning if you have a fancy javascript effect that displays a div that's supposed to be on top of everything (e.g: lightbox, multibox etc..) onclick of a certain element and that div overlaps a <select> your div get's to be displayed as if it's under the <select> [on this case a max and minimum z-index doesn't work ]
I've tried googling and found the iframe shim solution
but I wanted some pretty clean alternatives
or better yet has anyone found a better solution?
since the method using iframes uses around 130mb of ram might slow down poor people's machines
You don't have to hide every select using a loop. All you need is a CSS rule like:
* html .hideSelects select { visibility: hidden; }
And the following JavaScript:
//hide:
document.body.className +=' hideSelects'
//show:
document.body.className = document.body.className.replace(' hideSelects', '');
(Or, you can use your favourite addClass / removeClass implementation).
There is a plugin for jquery called bgiframe that makes the iframe method quite easy to implement.
Personally, as a web developer, I'm to the point where I no longer care about the user experience in IE6. I'll make it render as close to "correct" as possible, and make sure it's functional, but as far as speed goes, too bad. They can upgrade. IE7 (though still quite slow, compared to every other browser) has been out for 2 years (almost to the day!). IE8 is going to be out shortly. Firefox is available for every platform. Safari is also an option (and super fast). Opera is available for most/every platform.
IE6 was released in over 7 years ago. IMHO, there is no reason to still be using it, other than lazy users and incompetent IT departments (or if you're a web developer).
in case anyone is interested, here's some IE shimming code.
* html .shimmed {
_azimuth: expression(
this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
'inherit');
}
ref: this gist by subtleGradient and this post by Zach Leatherman
Prior to IE7 the drop down list was a "windowed" control meaning that it was rendered as a control directly by Windows rather than the browser synthesizing it. As such, it wasn't possible for it to support z-indexing against other synthesized controls.
In order to appear over a DDL, you must use another windowed control, like IFRAME. You can also use a little known IE-only feature called window.createPopup() which essentially makes a chromeless popup. It has limitations, like unstoppable click-out, but they are actually kinda helpful if you are building a hover menu system.
The simplest and most elegant solution to that annoying IE bug is found at: http://docs.jquery.com/Plugins/bgiframe using jQuery.
I reached that conclusion after trying for 2 days to make it work with WebSphere Portal / Portal Applications where everything is dynamic, including the fly-over menu.
There's also the activex method, which I'm starting to explore. It requires creating conditional code to use an activex control instead of a select box for ie6. There's a demo script showing the technique, which is discussed in more detail here.
Update: it appears that MS Office is required for the active-x control to be on the user's machine. In theory, it might be possible to include that somewhere, somehow, but that's getting a lot messier.
I know many people suggested their own tips, but in my case, I just simply hide select using jquery like the below.
$(':date').dateinput({
format: 'dd/mm/yyyy',
onBeforeShow: function(event) {
$('select').hide();
},
onHide: function(event) {
$('select').show();
}
});