How to display a child element while hiding a parent
dwe...@gmail.com
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.
Captain Paralytic
Just hide all the child elements that you do not want?
dwe...@gmail.com
> On 4 Jun, 12:16, dwe...@gmail.com wrote:
>
>
>
>
>
> > Hi,
>
> >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?
>
>
> - 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
Dan Rumney
> 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
You could create a sibling to the parent element and place it directly
after that parent element.
Then move the child you want to save to the new parent
Then make the old parent invisible
Might need some refinement, but the principle is there
Thomas 'PointedEars' Lahn
> <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
dwe...@gmail.com
> > Its not quite that simple, as this is a small example the one i'm
>
> > 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 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.
SAM
>
> 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