How to remove parent div without removing the inherited css properites?

Question

This is what i am trying to do,

<div id="table">
<div id="user"></div>
<div id="user1"></div>
</div>

When i click a button,this happens

$("#body").append("<div id=\"user-wrap\"></div>");
$('#user').appendTo($('#user-wrap'));
$('#user1').appendTo($('#user-wrap'));
$('#user-wrap').appendTo($('#table'));

Then I apply moz-transform on user-wrap. Before I apply another transform, I have to remove this userwrap div. when I append the children of user-wrap to body again and remove the user-wrap. My transforms are not preserved. I solved this problem by storing the value in a separate variable and applying it again after removing. But the problem is when I applied the scale transforms with user-wrap on the two divs actually looked more closer. Now since I removed the user-wrap the individual user divs are apart even though I applied the transforms again. The inter-distance between children are lost.How do I solve this problem?

I am rephrasing the entire thing again, I want to apply transforms to a group of children in div and then remove the div while preserving the scale/rotate and inter-distance value between the children?

I know it is a complex question, help will be appreciated. I am hoping all the javascript samurai's and CSS ninjas could help me out here ;)

do you have semi working example of what you are trying to do? that would be very helpful.. — Jose Vega, Nov 21 '11 at 21:23
Without having much insight on your actual code or goal, I would treat your `#user...` divs as separate elements from the start and apply the transformations accordingly. — DarthJDG, Nov 21 '11 at 21:27
@DarthJDG, Yes you can do that but what about the distance between #user divs? they wont be transformed ? i mean the #user divs will be reduced in size but the distance between them will be still remain the same, so they will look further apart. — Sai, Nov 21 '11 at 21:33
@JoseVega, I am actually doing it using touch events instead of click. For the simplicity of people understanding the question, i have made it a click event. May be i will post a fiddle for the click event as well in some time. — Sai, Nov 21 '11 at 21:35
@Sai: You can just do some simple math, pick an anchor point and change their position as well as scaling them. — DarthJDG, Nov 21 '11 at 21:38
@DarthJDG, Alright, i will try the anchor point method but i doubt the effect will be same as the actual transform :-| — Sai, Nov 21 '11 at 21:58
@DarthJDG, Worked fine, choosing the anchor point was a very good idea. I couldn't entirely create/replicate the same effect but it is something close to that. Thanks for the help, if you had given the idea as answer instead of comment, i could have accepted it and given you more points :) cheers! — Sai, Nov 23 '11 at 06:53
As I didn't write any code just threw you a one liner, it wouldn't be fair. You have the honour of posting your solution with some code, and award yourself.:) — DarthJDG, Nov 23 '11 at 08:17

zequinha-bsb · Answer 1 · 2011-11-21T22:24:32.097

Against all odds:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

    function screwItUp() {
        //EDIT: or if ($('#table div:first-child').attr('id') == 'user')
        if ($('#table div:first-child').html() == 'USER') {
            $('body').append('<div id=\'userWrap\'>USER-WRAP</div>');
            $('#user').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
            $('#user1').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
            $('#userWrap').appendTo($('#table'));
        } else { 
            $('#user').appendTo($('#table'));
            $('#user1').appendTo($('#table'));
            $('#userWrap').remove();
        }
    }

</script>

</head>

<body>
<div id="table">
    TABLE
    <div id="user">USER</div>
    <div id="user1">USER1</div>
</div>
<button onClick='screwItUp(); ' >TOGGLE</button>
</body>
</html>

Sample: http://zequinha-bsb.int-domains.com/togglewrap.html

How to remove parent div without removing the inherited css properites?

1 Answers1