Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to display a child element while hiding a parent

Reply
Thread Tools

How to display a child element while hiding a parent

 
 
dweeti@gmail.com
Guest
Posts: n/a
 
      06-04-2008
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.
 
Reply With Quote
 
 
 
 
Captain Paralytic
Guest
Posts: n/a
 
      06-04-2008
On 4 Jun, 12:16, (E-Mail Removed) 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?

 
Reply With Quote
 
 
 
 
dweeti@gmail.com
Guest
Posts: n/a
 
      06-04-2008
On 4 Jun, 15:54, Captain Paralytic <(E-Mail Removed)> wrote:
> On 4 Jun, 12:16, (E-Mail Removed) 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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      06-05-2008
On 4 Jun., 13:16, (E-Mail Removed) 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...def-visibility

You might have to do the equivalent of

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

to get rid of then-unnecessary scrollbars, too.


HTH

PointedEars
 
Reply With Quote
 
dweeti@gmail.com
Guest
Posts: n/a
 
      06-16-2008
On 4 Jun, 23:27, Dan Rumney <(E-Mail Removed)> 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.
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      06-16-2008
http://www.velocityreviews.com/forums/(E-Mail Removed) 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
If a class Child inherits from Parent, how to implementChild.some_method if Parent.some_method() returns Parent instance ? metal Python 8 10-30-2009 10:31 AM
Remove parent element with a child element matching a given rule patrizio.trinchini@googlemail.com XML 4 08-22-2006 11:31 AM
Parent - Child back to parent javascript thingybob mark ASP .Net 1 03-10-2005 02:20 PM
Pass from parent to child, then update parent with child value... Noel Dolan Javascript 0 07-18-2004 05:52 PM



Advertisments