How best to fix Chrome datalist rendering - javascript

You may be aware that Chrome has problems with datalist/option autocompletes.
Essentially whilst it works in IE, Chrome doesn't allow you to scroll through the list and the list runs out of the browser into the main window.
My question is whether someone can suggest a good method of overriding the Chrome implementation, and what to override it with. Solution has to work in main modern browsers and mobiles

I had the exact same problem. I searched for 2 days and ended up using https://jqueryui.com/autocomplete/
It is far better than datalist.

Related

window.sidebar.addPanel is not working on firefox no more

Actually I am trying to add bookmark by javascrip.previously this window.sidebar.addPanel was working with old browser versions. But with the recent browser versions it is not working any more.
And
BooMark this
is working in firefox but not in chrome.So I need a complete crossbrowser solution for adding bookmark.
To answer the problem of adding bookmarks cross-browser, this answer should help you. The various browsers use different methods for this, and you need to try them all.

Site is reacting bizarre on a netbook (divs not completely displayed)

When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?

How to speed up application running time in IE7?

We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.
From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.
IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.

Object Focus problem with Safari and Chrome browsers

I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.

What is the most stable modal dialog implementation across browsers to use from javascript for a web app?

I'm using a lot of JQuery in a web application that I am building for a client and I want to find an javascript implementation of a modal dialog that is reasonably stable across the following browser set.
IE 7+
FF 2+
Chrome and Safari
I've tried a couple of jQuery plugins but there always seems to be artifacts in one of these browsers.
--- Edit
jqModal seems to be more stable but I have an issue in IE7 where the dialog immediately disappears after popping up. I suspect a js event isn't being canceled or something. I'll have a bit more of a play.
I used jqModal few times and I'm very satisfied. It is pretty configurable yet very light weight.
Have you tried YUI? I'm not sure what the support is for Chrome but I've had good luck with it for IE and Firefox and allegedly it works with Safari.
We currently use BlockUI. It's awesome, in word. Can be styled via css (of course), blocks any element and seems stable, certainly in block IE and Firefox....
If you need a hand with it, post and I'll lend a hand...
http://www.malsup.com/jquery/block/
I went through a similar exercise, tried most of the plugins I could find. I used YUI for quite a while with good results; the only issue I ran into was resizing centered modals, which is quite an obscure use case.
I ended up with http://dev.iceburg.net/jquery/jqModal/ , I'm pretty happy with it.

Categories