CODEWITHSUNDEEP
javascript
Andrew Buikema
Andrew Buikema

Reputation: 153

How do you move a div into another using javascript?

I have two divs of the same size, and when I click a button on one of the divs, it will get larger. I want to move the smaller div into the bottom-right corner of the larger div, and when I click the button again the divs will return to their original size and position.

Before:

 ---   ---
| 1 | | 2 |
 ---   ---

After:

    ---------
   |    2    |
   |      ---|
   |     | 1 |
    ---------

Here's my javascript for resizing so far:

function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
    subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
    subscriberPanel.setAttribute('class', 'col-xl-4');
}
}

here is my asp code

    <div id="dvOtherPerson" class="col-xl-4">
        <div>
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Rachel Hawkins
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <ul class="m-portlet__nav">
                        <li class="m-portlet__nav-item">
                            <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-volume-up text-success"></i>
                            </a>&nbsp;&nbsp;
                            <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-refresh"></i>
                            </a>&nbsp;&nbsp;
                            <a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-expand"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="m-portlet__body">
                <img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
            </div>
        </div>
<%--        <div id="videos">
            <div id="subscriber"></div>
        </div>--%>
    </div>
            <div id="dvYou" class="col-xl-4">
                <div class="m-portlet m-portlet--fit">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Me
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item">
                                    <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                        <i class="fa fa-microphone-slash text-danger"></i>
                                    </a>&nbsp;&nbsp;
                                    <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div id="publisher"></div>
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 165

Answers (2)

Asons
Asons

Reputation: 87191

Use appendChild, and it will move the source element to a target element, e.g.

target_element.appendChild(source_element)

As commented, to apply different CSS style, do like this and the source_element will automatically change when inside the target_element

source_element {...}

target_element source_element {...}

Upvotes: 2

Luca C.
Luca C.

Reputation: 12574

If you can use jQuery, you can use the method append():

$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));

Upvotes: 0

Related Questions