How to show and hide element using display attribute?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • oranoos3000
    New Member
    • Jan 2009
    • 107

    How to show and hide element using display attribute?

    i read below text that say about initial state display in css and relate with show and hide dom element

    do the below text describe this meaning that if we dont write display for element and hide that , it's display convert to hide and if again show that do convert display that to block or initial value related to html? for example for span if we hide span and again show that it's display convert to block or inline?

    if for the same span i has writen display to block in initial css how about?

    text i write about that is as follow as
    " if an element starts as hidden by having its display style property value
    explicitly set to none, the show() command will always set its display style prop-
    erty value to block. That’s even if the element would typically default to inline
    for its display value—as would a <span> element, for example. If the element
    starts out without an explicitly declared display value, and we use the jQuery
    hide() command to hide it, the show() command will remember the original
    value and restore it to that original display state.
    So it’s usually a good idea not to use style attributes on the elements we want
    initially hidden, but to apply the hide() command to them in the page’s ready
    handler. This prevents them from being displayed on the client, and also makes
    sure everything is in a known initial state and will behave as expected during sub-
    sequent hide and show operations
    "
    thanks alot
  • gits
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    what it really does depends on the implementation of the hide() and show() methods ... so what ist the context of all that? jQuery or whatever?

    Comment

    • oranoos3000
      New Member
      • Jan 2009
      • 107

      #3
      hi
      i'm sorry ,i forget say i use hide and show jquery method

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5388

        #4
        the jQuery-show() method executes:
        Code:
        show: function( speed, easing, callback ) {
        		if ( speed || speed === 0 ) {
        			return this.animate( genFx("show", 3), speed, easing, callback);
        		} else {
        			for ( var i = 0, j = this.length; i < j; i++ ) {
        				// Reset the inline display of this element to learn if it is
        				// being hidden by cascaded rules or not
        				if ( !jQuery.data(this[i], "olddisplay") && this[i].style.display === "none" ) {
        					this[i].style.display = "";
        				}
        
        				// Set elements which have been overridden with display: none
        				// in a stylesheet to whatever the default browser style is
        				// for such an element
        				if ( this[i].style.display === "" && jQuery.css( this[i], "display" ) === "none" ) {
        					jQuery.data(this[i], "olddisplay", defaultDisplay(this[i].nodeName));
        				}
        			}
        
        			// Set the display of most of the elements in a second loop
        			// to avoid the constant reflow
        			for ( i = 0; i < j; i++ ) {
        				this[i].style.display = jQuery.data(this[i], "olddisplay") || "";
        			}
        
        			return this;
        		}
        so if there was a display attribute before using hide() which stores that as olddisplay-attribute then this old value will be restored on show() otherwise it will set display to an empty string.
        Last edited by gits; Nov 7 '10, 04:04 PM.

        Comment

        • oranoos3000
          New Member
          • Jan 2009
          • 107

          #5
          hi
          if i dont set display in css as explicit for example i have a span and dont identify display in css , now hide that then show that , do it's display become inline(because this is inline element) or block(for this is default is jquery)?

          thanks alot for your help

          Comment

          • oranoos3000
            New Member
            • Jan 2009
            • 107

            #6
            hi

            i found my answer that is as follow as
            if element is hidden via jquery earn previous display that it can be default value for display(that is inline or block)
            but if element is hidden other than jquery it's display is set to block
            be successful

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388

              #7
              added the entire function in question - it seems to check the parent nodes for any old display property - if there was none then it should applies the default browser display property ... the hide() method stores the current property so that it can be restored by the show() method from the olddisplay property.

              glad that you found your answer :) ...
              Last edited by gits; Nov 7 '10, 05:26 PM.

              Comment

              Working...