How to display a child element while hiding a parent

#1

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.

#2

On 4 Jun, 12:16, dwe... (AT) gmail (DOT) com wrote:

Quote:

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?

#3

On 4 Jun, 15:54, Captain Paralytic <paul_laut... (AT) yahoo (DOT) com> wrote:

Quote:

On 4 Jun, 12:16, dwe... (AT) gmail (DOT) com 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

#4

Quote:

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

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

#5

On 4 Jun., 13:16, dwe... (AT) gmail (DOT) com wrote:

Quote:

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.

Quote:

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).

Quote:

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...def-visibility

You might have to do the equivalent of

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

to get rid of then-unnecessary scrollbars, too.

HTH

PointedEars

#6

On 4 Jun, 23:27, Dan Rumney <danrum... (AT) 77617270mail (DOT) net> wrote:

Quote:

* > 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.

#7

dweeti (AT) gmail (DOT) com a écrit :

Quote:

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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

How to display a child element while hiding a parent

Javascript JavaScript language (comp.lang.javascript)

How to display a child element while hiding a parent - 06-04-2008 , 06:16 AM

Re: How to display a child element while hiding a parent - 06-04-2008 , 09:54 AM

Re: How to display a child element while hiding a parent - 06-04-2008 , 10:10 AM

Re: How to display a child element while hiding a parent - 06-04-2008 , 05:27 PM

Re: How to display a child element while hiding a parent - 06-05-2008 , 05:55 AM

Re: How to display a child element while hiding a parent - 06-16-2008 , 06:12 AM

Re: How to display a child element while hiding a parent - 06-16-2008 , 07:54 AM