Re: Re: Javascript + CSS + IE

The link in the previous message decided to incorporate the trailing
period into itself... here's the fixed link:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp

> Hey John (and others),
>
> I have fixed the issue, thanks to the input here! It ended up being tied
> to 'hasLayout' as suggested by Martin (thank you!). Based on what he said
> I found this page:
> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp.
> By adding "display: inline-block" to the widget class, the issue was
> resolved.
>
> I have updated the example page to reflect this - see the upper right
> corner for a link to toggle between broken and fixed:
> http://griffisweb.com/resize/
>
> John, thank you for explaining selectstart a bit more for me! I do
> actually handle that using stop event in my application, though not
> specifically using selectstart...
>
> The sample page I posted for you all is a very simplified version with
> most of the functionality cut out. For instance, the sidebar doesn't open
> (and is empty in the sample), you can't switch between tabs, add tabs,
> cols, etc. Or, as you found out, drag the widget around the page. All that
> functionality works in the real application, I just wanted to the example
> to display the problem without all the extra stuff!
>
> Anyhow, thanks again to everyone.
>
> If anyone wants to take iedebugger.js and improve on it, I would love to
> get a copy of your improvements. I put that together quickly as it was
> frustrating debugging things in IE that worked in FF... In case you didn't
> realize it, that is used when you click on "Show Debug Console (IE Only)"
> in the upper right corner...
>
> Adam
>
>> Hey Adam,
>>
>> You wrote:
>>> Could you explain a bit more about selectstart? I have never used that
>> in
>>> an event handler so I'm a bit confused about what it's supposed to do.
>> I'm
>>> not even sure what the default selection behavior is that you're
>> talking
>>> about! Please forgive my ignorance.
>> I tried to drag the element with the widgetHandle class, which also has
>> the 'move' cursor set in the style attribute.  If you try to drag it, IE
>> starts selecting text (which is not what you intend, I imagine).  It may
>> simply be that you have not added the code to allow it to move, yet.
>>
>> If you are using a third-party component, they will have probably
>> handled IE's default select behavior.  If not, then (assuming you are
>> not capturing the 'selectstart' event for any other purpose) you may do
>> the following to stop IE from selecting text when you really want to
>> drag an object.  Put one of these lines inside the 'mousedown' event on
>> the element to act as the drag handle:
>>
>> // preferred method when using prototype
>> Event.observe(document, 'selectstart', myFuncToStopSelection);
>>
>> // old way, but works well in this situation
>> document.onselectstart = myFuncToStopSelection;
>>
>> To re-enable select behavior after dragging, do the corresponding one of
>> these in the 'mouseup' event of the element to act as the drag handle:
>>
>> // preferred method when using prototype
>> Event.stopObserving(document, 'selectstart', myFuncToStopSelection);
>>
>> // old way, but works well in this situation
>> document.onselectstart = null;
>>
>> The myFuncToStopSelection function could be something like one of these:
>>
>> // preferred method when using prototype
>> function myFuncToStopSelection (event) {
>>      Event.stop(event || window.event);
>> }
>>
>> // old way, but works well in this situation
>> function myFuncToStopSelection (event) {
>>      return false;
>> }
>>
>> I hope this helps.
>>
>> -- John
>
>