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. 7  12327 
On 4 Jun, 12:16, dwe...@gmail.com 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?
On 4 Jun, 15:54, Captain Paralytic <paul_laut...@yahoo.comwrote:
On 4 Jun, 12:16, dwe...@gmail.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
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
On 4 Jun., 13:16, dwe...@gmail.com 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
On 4 Jun, 23:27, Dan Rumney <danrum...@77617270mail.netwrote:
* 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. dw****@gmail.com 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
The goal:
Need to hide a parent <div> (or any object, just using div as an example here), but display its children.
The example html code: -
<div id="parent-div">
-
<div id="child-div-01">Child Div 01</div>
-
<div id="child-div-02">Child Div 02</div>
-
</div>
-
The css code that accomplishes this (using jQuery): -
$('#parent-div').css('visibility','hidden'); //selects the parent-div and sets it to invisible
-
$('#parent-div > div').css('visibility','visible'); //selects all children of parent-div that are also of type div and sets them to visible
NOTE:
If you're using this, and trying to hide a "styled" parent-div, you may notice that (as it should) the parent-div still takes up space on the screen...
In my case, I was hiding a div that was part of a vertical menu on a webpage, because I wanted to re-use those links in a menu that followed the user as she scrolled down the page, however I wanted to make sure that without javascript, the menu would still show up as a vertical menu. So I changed the firs tline to the following to "reclaim" the space taken up by the div. -
$('#parent-div').css({'visibility':'hidden','width':'0px','height':'0px','margin':'0','padding':'0'});
This effectively hid the parent-div and neutralized its usage of space.
You could also do this with straight CSS (probably better to do by class for the children instead of by id: -
#parent-div{ //by id
-
visibility:hidden
-
width:0px;
-
height:0px;
-
margin:0;
-
padding:0;
-
}
-
#parent-div div.child-div{ //by class
-
visibility:visible;
-
}
I hope someone finds this to be useful!
~Xomby
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Rob T. |
last post by:
Given the following in a stylesheet:
#parent
{
width: 50px;
height: 50px;
}
#child
{
|
by: Chandru |
last post by:
hi
I want to know how to pass values from different forms.
That is, i created one parent form. from there i opened
child form modeless way. Once i close the child form i
need some value from...
|
by: Sean Connery |
last post by:
I know I can merge a child forms menu into the MDI parent's mainmenu, but I
would also like to listen for common events fired from the mainmenu that
might be of interest to any child forms.
Is...
|
by: lotus |
last post by:
HI All..
I'm realtively new to C#.
I have MainForm which includes Parent usercontol, and this parent
usercontrol also contains child usercontrol.
MainForm --> Parent usercontrol --> child...
|
by: William Krick |
last post by:
Given this XML
<parent>
<child name="billy">
<child name="sue">
</parent>
I can use this to process each child...
<xsl:for-each select="child">
|
by: patrizio.trinchini |
last post by:
Hi all,
I'm new to XSLT and maybe my problem have a very trivial answer, but I
need an expert that point me in the right direction.
What I would obtain is to remove all the elements that have a...
|
by: rlueneberg |
last post by:
I want to change the color of an "a" child element inside a table cell
via javascript. Is there any way to do that? Ps: there is no id
assigned to child elements. I would like to discover the child...
|
by: kumuda v |
last post by:
Hello all,
I am new to web programming.I have an issue that has to done using javascript and php.
How can I pass the data from child window to parent window. I have already written the...
|
by: BibhuAshish |
last post by:
Hello,
I have one child window. in child window i am selecting one radio button.
i want to return that selected value to parent window.
To open child window in parent window, i have written like...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
