جا به جا کردن نمایش تگ DIV با هر روشی

3 روز پیش
توسط میثم آپدیت شد
میثم ( 1680 تجربه )
3 روز پیش

سلام به همه دوستان.
یه سوال خدمت شما داشتم.
فرض کنید توی فایل HTML خودمون سه تا تگ DIV به ترتیب زیر داریم.

<div id="A">۱</div>
<div id="B">۲</div>
<div id="C">۳</div>

حالا میخوام کاری کنم که فرضا اگه

@media (max-width: ۸۸۰px)

شد سه تا تگ به این صورت نمایش داده بشه.

<div id="B">۲</div>
<div id="A">۱</div>
<div id="C">۳</div>

حالا با هر روشی!!! جاوا یا CSS یا ....
فقط تمام مرورگرها بتونن نمایشش بدن.
ممنون.

بهترین پاسخ انتخاب شده توسط میثم
میلاد
3 روز پیش
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }

            @media only screen and (max-width: 880px) {

                .content__2 {
                    order: -1;
                }
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1">1</div>
            <div class="content__2">2</div>
            <div class="content__3">3</div>
        </div>
    </body>
</html>
میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

بکمک flexbox و دادن order: -1 به div دوم، هنگام نمایش جاش با اولی عوض میشه.

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                direction: rtl;
            }
            .content {
                display: flex;
                flex-direction: column;
            }

            .content__1,
            .content__2,
            .content__3 {
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
            .content__1 {
                background-color: rgb(118, 218, 118);
            }
            .content__2 {
                background-color: rgb(149, 149, 247);
            }
            .content__3 {
                background-color: rgb(247, 195, 100);
            }

            @media only screen and (max-width: 880px) {

                .content__2 {
                    order: -1;
                }
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="content__1">1</div>
            <div class="content__2">2</div>
            <div class="content__3">3</div>
        </div>
    </body>
</html>
میثم ( 1680 تجربه )
3 روز پیش

جناب @milad ممنونم.
خیلی با فلس باکس حال نمیکنم.
چون تا جایی که اطلاع دارم توی نسخه های جدید ie درست کار نمیکنه.
غیر از این راه دیگه ای نیست؟
جاوا یا جی کوئری؟

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

الان کی از ie استفاده میکنه؟
اصلا ie رو بحساب نیارید شما.

میثم ( 1680 تجربه )
3 روز پیش

احتمالا با جاوا بشه. @milad
فرضا id و محتوای دو div با ای دی a و b با هم عوض بشن‌.
ولی کدش رو نمی‌دونم.
شاید هم با خاصیت خاصی غیر از فلکس باکس در css

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

1) در نسخه های جدید ie خصوصیت فلکس باکس اجرا میشه:
https://caniuse.com/#feat=flexbox

2) کاربران ie در حال حاضر کمتر از 2 درصد هستند، اصلا ارزش نداره که واسه طراحی سایت خودتون بخواید برای کمتر از 2 درصد نفرات، هم کار خودتون رو سخت کنید و هم اینکه کدهای اضافه براش بزارید و کار بقیه کاربران رو هم سخت کنید:
https://gs.statcounter.com/browser-market-share

میثم ( 1680 تجربه )
3 روز پیش

https://api.jquery.com/replaceWith/
نظرتون در مورد تابع چیه؟
میشه ازش استفاده کرد؟
@milad

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

راه حل flexbox خیلی ساده هستش، وگرنه راه حل های دیگه ای هم می تونه داشته باشه.

این شبیه ساز flexbox با جاوااسکریپت هستش:
https://github.com/jonathantneal/flexibility

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

یک راه حل خیلی ساده دیگه هم داره:

        <div class="content">
            <div class="content__2 d-none">2</div>
            <div class="content__1">1</div>
            <div class="content__2">2</div>
            <div class="content__3">3</div>
        </div>

4 تا بخش درست می کنید، اولی رو در ابتدا مخفی می کنید.
بعدا در عرض خاص، اولی رو نمایش می دین و سومی رو مخفی می کنید.

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

https://api.jquery.com/replaceWith/
با توجه به توضیحاتی که خوندم ازش، باید بشه. این هم یک راه حل هستش.
البته با پیچیدگی بیشتر نسبت به راه حل اولی که گفتم براتون.

میثم ( 1680 تجربه )
3 روز پیش

@milad آره درسته.
قبلا خودم این راه به ذهنم رسید اما حرفه ای نیست چون باعث این میشه که محتوای صفحه بیخودی سنگین بشه و اطلاعات تکراری باشند.
احتمالا توی جاوا یه راه خیلی آسان داشته باشه.
یه چیزی مثل تغییرکلاس فلان تگ.
اما چطوری نمی‌دونم!!!!

میلاد ( 140060 تجربه )
3 روز پیش
تخصص : طراح رابط کاربری - Front-End

بله راه حل قشنگی نیستش قطعا.

شما همین راه حل فلکس باکس رو با ie هم امتحان کنید، کار می کنه.
مگر اینکه نسخه های قدیمی از ie باشه (نسخه 9 و ماقبل آن که به قبل از 2011 برمیگرده)، که احتمالا کمتر کسی ازش استفاده کنه. کسی که از همچین نسخه ی قدیمی استفاده کنه، احتمالا اصلا به اینترنت وصل نشه درین ایام : ))

فرهاد ( 22270 تجربه )
3 روز پیش
تخصص : برنامه نویس

@adoniya.ir

سلام ، راهی که پیشنهاد دادن خیلی خوب بود شما میتونی حتی از flex هم استفاده نکنی

به این شکل استفاده کنی ، همشون رو بزاری توی یه دیو و بهشون position:relative بدین

#root-div{
    position: relative;
}

.div1{
    position: relative;
    top: 100px;
}

.div2{
    position: relative;
    top: -100px;
}

استفاده از margin و position ساده ترین راهه که همه مرورگر ها ساپورت میکنه

اینم روش عوض کردنشون با جاوااسکریپت با استفاده از classList و textContent

var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');

div1.classList.add('div2');
div1.classList.remove('div1');
div1.textContent = 'DIV2';

div2.classList.add('div1');
div2.classList.add('div2');
div2.textContent = 'DIV1';
میثم ( 1680 تجربه )
3 روز پیش

سلام @cfarhad
من جاوا نتونستم کاری کنم. توی textContent مشکل وجود داره.
توی هر سه تا تگ a , b , c کلی کد html هست.
حالا چطور تگ a , b رو توی نسخه زیر 800 پیکسل جا به جا کنیم.
ممنون میشم مثل @milad عزیز کد کاملشو قرار بدین.
اگه نشه مجبوریم از flexbox استفاده کنیم.

فرهاد ( 22270 تجربه )
3 روز پیش
تخصص : برنامه نویس

@adoniya.ir

اینم چیزی که میخواستید بدون flexBox

http://s6.picofile.com/file/8392046050/responsiv.zip.html

برای ارسال پاسخ باید وارد سایت شوید