How to display a child element while hiding a parent

Discussion in 'Javascript' started by dweeti@gmail.com, Jun 4, 2008.

  1. Guest

    Hi,

    I am trying to display the child element in the DOM, while hiding the
    parent using JS and CSS, however I cannot find a way to do this.

    So for example:

    <body>
    <div id="Parent">
    <div id="child_1"></div>
    <p id="child_2"></p>
    </div>
    </body>

    I am trying to hide "Parent", and "child_1" and show "child_2". I
    cannot change the possition in the actual mark up so i need script to
    do this.

    and so far hiding Parent using:

    $("Parent").style.display="none";

    Hides all the child elements.

    Do anyone know how I can do this? or an alternative method to achive
    the same result?

    Thanks in advance.
    , Jun 4, 2008
    #1
    1. Advertising

  2. On 4 Jun, 12:16, wrote:
    > Hi,
    >
    > I am trying to display the child element in the DOM, while hiding the
    > parent using JS and CSS, however I cannot find a way to do this.
    >
    > So for example:
    >
    > <body>
    > <div id="Parent">
    > <div id="child_1"></div>
    > <p id="child_2"></p>
    > </div>
    > </body>
    >
    > I am trying to hide "Parent", and "child_1" and show "child_2". I
    > cannot change the possition in the actual mark up so i need script to
    > do this.
    >
    > and so far hiding Parent using:
    >
    > $("Parent").style.display="none";
    >
    > Hides all the child elements.
    >
    > Do anyone know how I can do this? or an alternative method to achive
    > the same result?


    Just hide all the child elements that you do not want?
    Captain Paralytic, Jun 4, 2008
    #2
    1. Advertising

  3. Guest

    On 4 Jun, 15:54, Captain Paralytic <> wrote:
    > On 4 Jun, 12:16, wrote:
    >
    >
    >
    >
    >
    > > Hi,

    >
    > > I am trying to display thechildelement in the DOM, while hiding the
    > >parentusing JS and CSS, however I cannot find a way to do this.

    >
    > > So for example:

    >
    > > <body>
    > > <div id="Parent">
    > >    <div id="child_1"></div>
    > >    <p id="child_2"></p>
    > > </div>
    > > </body>

    >
    > > I am trying to hide "Parent", and "child_1" and show "child_2".  I
    > > cannot change the possition in the actual mark up so i need script to
    > > do this.

    >
    > > and so far hidingParentusing:

    >
    > > $("Parent").style.display="none";

    >
    > > Hides all thechildelements.

    >
    > > Do anyone know how I can do this?  or an alternative method to achive
    > > the same result?

    >
    > Just hide all thechildelements that you do not want?- Hide quoted text -
    >
    > - Show quoted text -


    Its not quite that simple, as this is a small example the one i'm
    using has hundreds, also the parent does formatting which i want to
    remove, so hiding parent would take care of all of this in one hit.
    Hididng and changing styles for all would mean lines and lines of
    code. Thanks
    , Jun 4, 2008
    #3
  4. On 4 Jun., 13:16, wrote:
    > <body>
    > <div id="Parent">
    > <div id="child_1"></div>
    > <p id="child_2"></p>
    > </div>
    > </body>
    >
    > I am trying to hide "Parent", and "child_1" and show "child_2". I
    > cannot change the possition in the actual mark up so i need script to
    > do this.


    Not necessarily, and not here. If scripting CSS can do this, plain
    CSS can do it as well.

    > and so far hiding Parent using:
    >
    > $("Parent").style.display="none";
    >
    > Hides all the child elements.


    Works as designed. Setting the `display' property to `none' renders
    the respective element as if it never existed, so not at all. If you
    accomplished time-travel and rendered your parents non-existing before
    the time you were conceived, you would not exist (at least that is the
    known paradox).

    > Do anyone know how I can do this? or an alternative method to achive
    > the same result?


    The equivalent of

    $("Parent").style.visibility = "hidden";
    $("child_2").style.visibility = "visible";

    works in Firefox 2.0.0.14, IE 6.0.2900.2180.xpsp_sp2_gdr.070227-2254,
    IE 7.0.5730.11, Opera 9.27.8841, and Safari 3.1.1 (525.17) on Windows
    XP SP2. The CSS2 Specification, section 11.2, suggests that this is
    compliant behavior:

    http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-visibility

    You might have to do the equivalent of

    $("Parent").style.overflow = "hidden";

    to get rid of then-unnecessary scrollbars, too.


    HTH

    PointedEars
    Thomas 'PointedEars' Lahn, Jun 5, 2008
    #4
  5. Guest

    On 4 Jun, 23:27, Dan Rumney <> wrote:
    >   > Its not quite that simple, as this is a small example the one i'm
    >
    > > using has hundreds, also theparentdoes formatting which i want to
    > > remove, sohidingparentwould take care of all of this in one hit.
    > > Hididng and changing styles for all would mean lines and lines of
    > > code.  Thanks

    >
    > You could create a sibling to theparentelementand place it directly
    > after thatparentelement.
    >
    > Then move thechildyou want to save to the newparent
    >
    > Then make the oldparentinvisible
    >
    > Might need some refinement, but the principle is there


    Thank you all for your help.

    Dan, I've played around with scripting the concept you've mentioned,
    it's quite abit of manipulation but its the best method I've seen so
    far and it does exactly what I need.

    Thanks again.
    , Jun 16, 2008
    #5
  6. SAM Guest

    a écrit :
    >
    > Dan, I've played around with scripting the concept you've mentioned,
    > it's quite abit of manipulation


    not so much

    function $(id) { return document.getElementById(id); }
    function childSchow(parent, child) {
    child = $(child).cloneNode(true);
    child.className = '';
    child.id += 'c';
    var parent = $(parent);
    parent.parentNode.insertBefore(child, parent);
    child.memory = parent.parentNode.removeChild(parent);
    }
    function parentSchow(child) {
    child = $(child+'c');
    var parent = child.memory
    child.memory = null;
    child.parentNode.insertBefore(parent, child);
    child.parentNode.removeChild(child);
    }


    not tested with IE
    --
    sm
    SAM, Jun 16, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. davout
    Replies:
    0
    Views:
    539
    davout
    Apr 18, 2004
  2. Jeff Rodriguez
    Replies:
    23
    Views:
    1,084
    David Schwartz
    Dec 9, 2003
  3. Replies:
    4
    Views:
    2,511
  4. Noel Dolan
    Replies:
    0
    Views:
    215
    Noel Dolan
    Jul 18, 2004
  5. Bitswapper
    Replies:
    5
    Views:
    119
    Prasad, Ramit
    Aug 27, 2013
Loading...

Share This Page