جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
میثم
4 سال پیش توسط میثم مطرح شد
15 پاسخ

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

سلام به همه دوستان.
یه سوال خدمت شما داشتم.
فرض کنید توی فایل 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 یا ....
فقط تمام مرورگرها بتونن نمایشش بدن.
ممنون.


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1
<!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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1
<!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>

میثم
تخصص : برنامه نویسی PHP خالص بدون هیچ...
@adoniya.ir 4 سال پیش مطرح شد
0

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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


میثم
تخصص : برنامه نویسی PHP خالص بدون هیچ...
@adoniya.ir 4 سال پیش مطرح شد
0

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

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

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


میثم
تخصص : برنامه نویسی PHP خالص بدون هیچ...
@adoniya.ir 4 سال پیش مطرح شد
0

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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

        <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 تا بخش درست می کنید، اولی رو در ابتدا مخفی می کنید.
بعدا در عرض خاص، اولی رو نمایش می دین و سومی رو مخفی می کنید.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

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


میثم
تخصص : برنامه نویسی PHP خالص بدون هیچ...
@adoniya.ir 4 سال پیش مطرح شد
0

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
0

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

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


فرهاد
تخصص : Javascript Developer
@cfarhad 4 سال پیش مطرح شد
1

@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';

میثم
تخصص : برنامه نویسی PHP خالص بدون هیچ...
@adoniya.ir 4 سال پیش مطرح شد
0

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


فرهاد
تخصص : Javascript Developer
@cfarhad 4 سال پیش مطرح شد
1

@adoniya.ir

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

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام