YAHOO.ext.Element Display

[ojintoad]

I am just posting this in case anyone else has a similar issue.

In the implementation of the YAHOO.ext.Element, there are two choices for how element Visibility is managed: using the Visibility style property or the Display style property. You can select which property gets changed by the classes' methods by calling the YAHOO.ext.Element.setVisibilityMode method with either of the two constants YAHOO.ext.Element.DISPLAY or YAHOO.ext.Element.VISIBILITY.

Visiblity is an easy style property to handle since it just toggles between the visible and hidden values. However, if you choose to use the Display property, the class has to determine what possible Display property values you want to use (block, inline, inline-block, etc.). To handle this, it detects the initial display property of your element at object creation time, rather than assume you want all your items displayed as either block or inline elements.

But what if you want your elements want to start out with display of none? You go to your style sheet, write "display:none" , use getEl to get your element, and call .show, but nothing shows up! Well, the methods to toggle visibilty actually use the initial display property when showing the element, so show is setting your element's display to none, just like it should.

To work around this, all you need to do is use your CSS to show elements using whichever display style property you want, then write a page load event function to hide all the elements using the YAHOO.ext.Element functions.

The additional benefit of this is the YAHOO.ext.Element class automagically caches each element to prevent lookups later.

Alternately, you can avoid all this by using the Visibility Mode and visibility style property.

[jack.slocum]

Very nice post. I actually run into this myself from time to time. Most recently while creating the editors in the grid. The undocumented property originalDisplay on Element can also be manipulated in this situation.

Also, it's worth noting that using visibility over display in most situations is preferred because in IE visibility is significantly faster.

Jack

[schoterson]

I've followed the instructions outlined so that my css is set to display:block, I have the global flag setting the YAHOO.ext.Element.prototype.autoDisplayMode = true; This is redundant though since the latest ext package has it set to true. I have an onload function which does a getEl("someId").hide();. Looking at my page the div which should now have its diplay set to none is visibilitiy:hidden. Meaning I have the space reserved for this element.

Can someone let me know what I'm doing wrong. I would really prefer to use the global flag because onload I plan on hiding numerous elements and it is painful to do

getEl("someId).setDisplayMode(YAHOO.ext.Element.Display);
getEl("someId").hide();


for each one.

[jack.slocum]

autoDisplayMode can only detect display mode if the element starts with display:none. There's no other way for it to know that it should use display mode.

A couple other ways:
getEl("someId).setDisplayed(false);

getEl('someId').enableDisplayMode().hide();

But the easiest way is to just start it in display:none now that autoDetect exists.

[schoterson]

Thanks for the reply Jack. I've actually tried this with the css setting the element to display:none, however when I do getEl("someId").toggle(); it only changes the visibility of the element not the display. Assuming that the autoDisplayMode=true by default and my css says display:none is there another reason why my getEl("someId").toggle(); is adjusting the visibilty attribute and not the display?

Also, can you enlighten my co-worker and I as to why you have a conditional statement ofif (this.orginalDisplay == 'none') inside :


this.originalDisplay = YAHOO.util.Dom.getStyle(this.dom, 'display') || '';
if(this.autoDisplayMode){
if(this.originalDisplay == 'none'){
this.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
}
}
It seem to us that when autoDisplayMode=true it doesn't matter what the originalDisplay is, I'll always want to affect the display attribute of an element.

[jack.slocum]

Yeah, I forgot this was turned off due to Safari crashes and FireFox lockups (table elements). I plan on putting some time into it again version soon.

[schoterson]

Thanks again for the reply, your extension and assistance is invaluable. Good luck in the New Year, I/we look forward to your innovations.