Tuesday, September 28, 2010

IE7 ghost text

This week we ran into an odd problem with Ghost text showing up in our application  Google turned up a lot of similar problems with no clear cause or solution,  I used the development tools to help me figure out a way to solve the problem.  The scenario that it appears to cause it is if there is a div that is floating, it has a width of 100%, and a margin, then the text inside of it may cause ghost text.   Oddly, the same html did not cause the same problem everywhere on the page.


This is setup like this.
PRODUCT DETAILS


Unfortunately, I’m not sure if that is the only thing required to cause this problem.   While I tried to fix the problem it went away with several different things. 
  • When I removed float: left, the ghost text disappeared.
  • When I set margin-left: 0px; the ghost text disappeared.
  • When I changed the structure to the following the ghost text disappeared.
    PRODUCT DETAILS

I went with the last option.  It kept the integrity of the rest of the CSS in place, and made the end result look the way that I wanted it to look.  I’ve seen lots of blog posts about the same problem.  Nobody, including Microsoft, seems to have a clear understanding of what the official cause is.  It only happened in some places in tye application and not in others, even though they were set up the exact same way.   For safety I changed them all to option 3.  IE7 had the problem, but IE8 did not.

A quick note on IE7 vs. IE8,  If you have IE8 installed, you can use the developer tools (F12) to change how the page displays and view it as if it were IE7.  I frequently do this while testing applications because IE7 and IE8 do not show everything the same way, sometimes you have to handle things a little bit differently.

Monday, September 27, 2010

jQuery UI Autocomplete extensions

Scott Gonzalez posted a blog post August 24th about some auto-complete extensions that he wrote.  

One of these is the ability to automatically select the item that is highlighted, so once it’s highlighted the user can hit enter, click it, or just tab off of the field and it will select that item.  There are also some other nice advanced features here, I encourage you to read this post.  http://blog.jqueryui.com/2010/08/extensible-autocomplete/

Saturday, September 25, 2010

jQuery UI 1.8.5 released

jQuery 1.8.5 was release September 17th  http://blog.jqueryui.com/2010/09/jquery-ui-1-8-5/
This is a bug fix release mostly, but it has one powerful new feature that I've been waiting for.  We now have more power over the buttons on the dialog.  We can set them to primary and secondary buttons, as well as disabled.  The styles of these buttons are built into the theme.  There is ui-priority-primary, ui-priority-secondary, and ui-state-disabled.

Also the text on the button is no longer limited to a string, we can now include html, so if we wanted to bold a single word on a multiword button we could have something like “Find account” 

Here’s an example of how to use the new functionality,  
el = $("
").dialog({
                buttons: [
                                {
                                                text: "a button 1",
                                                "class": "ui-priority-primary",
                                                id: "my-button-id-1",
                                                click: function() {
                                                                alert("button 1 clicked");
                                                }
                                },
                                {
                                                text: "a button 2",
                                                "class": "ui-priority-secondary",
                                                id: "my-button-id-2",
                                                click: function() {
                                                                alert("button 2 clicked");
                                                }
                                }
                ]
});