สอบถามการทำ responsive ใช้ jquery

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

สอบถามการทำ responsive ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

สอบถามครับโดยทำ responsive ของอิลิเมนต์ตำแหน่งนักเตะ ซึ่งงอิลิเมนต์ตำแหน่งนักเตะสามารถเลื่อนย้ายจัดตำแหน่งในรูปภาพพื้นหลังของสนามได้ครับ ซึ่งจะสอบถาม responsive ของอิลิเมนต์ตำแหน่งนักเตะยังไงหรอครับเนื่องจากหน้าจอที่ขนาดความกว้าง 800 px ขึ้นไป อิลิเมนต์ตำแหน่งนักเตะอยู่ตำแหน่งปกติครับ พอขนาด 800 px ลงไป ตัวอิลิเมนต์ตำแหน่งนักเตะตำแหน่งที่แสดงล้มออกมาครับ
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (322.45 KiB) Viewed 1253 times
ซึ่งผมใช่วิธีบัญญัติไตรยางศ์ครับ ซึ่งในตัวคำนวณมันถูกต้องหรือเปล่าครับ

โค้ด: เลือกทั้งหมด

              $(window).on('resize', function() {
                    var width_drag = $('#drag-container').width();
                  
                    var divWidth_x = (width_drag * 50) / 1000;
                    var divWidth_y = (width_drag * 20) / 1000;
            
                    $.each($('.draggable'), function() {
                        let s = $(this).css('transform');
                        console.log(s)
                        let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
                        let X = (parseFloat(values[4]) * divWidth_x) / width_drag;
                        let Y = (parseFloat(values[5]) * divWidth_y) / width_drag;

                        console.log('x :'+X+' px y :'+Y+" px 700");
                        $(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
                      });
              });
:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามการทำ responsice ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ทำไมในหน้าจอมือถือหน้าเว็บไซต์ถึงไม่แสดงเต็มครับ เหมือนจะมีขอบขาวด้านขวาเยอะ ตัวภาพสนามเหมือนโดนบีบไปทางซ้ายอยู่นะครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามการทำ responsice ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

คำนวณ สัดส่วนของหน้าจอที่ใช้เทียบกับ หน้าจอที่ไม่เพี้ยนเพื่อใช้เป็นฐานในการคิด ทั้งพิกัด x,y
เมื่อได้สัดส่วนแล้วคูณกับตำแหน่งปัจจุบันของตัวฐาน
จะได้พิกัดในหน้าจอใหม่
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามการทำ responsice ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

tsukasaz เขียน: 26/01/2023 12:04 pm ทำไมในหน้าจอมือถือหน้าเว็บไซต์ถึงไม่แสดงเต็มครับ เหมือนจะมีขอบขาวด้านขวาเยอะ ตัวภาพสนามเหมือนโดนบีบไปทางซ้ายอยู่นะครับ
ตัวของตารางผู้ใช้งานล่าสุดดันมาครับ ผมปรับแล้วครับในส่วนนี้
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (30.77 KiB) Viewed 1230 times
:gfb:
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามการทำ responsice ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

mindphp เขียน: 26/01/2023 12:05 pm คำนวณ สัดส่วนของหน้าจอที่ใช้เทียบกับ หน้าจอที่ไม่เพี้ยนเพื่อใช้เป็นฐานในการคิด ทั้งพิกัด x,y
เมื่อได้สัดส่วนแล้วคูณกับตำแหน่งปัจจุบันของตัวฐาน
จะได้พิกัดในหน้าจอใหม่
ผมลองคำนวณตามคำแนะนำ ซึ่งที่ผมเข้าใจคือคำนวณสัดส่วนของพื้นหลังสนามกับขนาดจอใช่ไหมครับ แล้วมาคูณตำแหน่งค่า x กับ y ของตำแหน่งของผู้เล่นใช่ไหม

โค้ด: เลือกทั้งหมด

          
                    var Width_background = $('.drag-container').width();
                    var Height_background = $('.drag-container').height();
                    var proportion_background = Width_background / Height_background;
                    console.log(proportion_background);
                    var screenWidth  = $(window).width();
                    var screenHeight = $(window).height();
                    var proportion = screenWidth / screenHeight;
                    console.log(proportion);
                    let result = proportion_background * proportion ;
                    console.log(result);

                    $.each($('.draggable'), function() {
                        let s = $(this).css('transform');
                        console.log(s)
                        let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
                        let X = (parseFloat(values[4]) * result);
                        let Y = (parseFloat(values[5]) * result);

                        // console.log('x :'+ X +' px y :'+ Y +" px");
                        $(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
                      });
ผลที่ได้เป็นแบบนี้ครับ
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (206.95 KiB) Viewed 1186 times
:gfb:
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามการทำ responsive ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

เทียบสัดส่วนของ หน้าจอที่ใช้ได้ปกติ กับ หน้าจอขนาดใหม่ ก่อนครับ
แล้วเอาสัดส่วนนัดไปใช้ต่อกับตำแหน่ง กิกัด
เช่น สัดส่วนหน้าจอเดิม กับ หน้าจอใหม่
800x600
กับหน้าจอใหม่
400x200
สัดส่วน คือ
2:1x3:1
2:1 คือแนวแกน y
3:1 คือแนวแกน x
(การนับแกนนับ บนสุดซ้ายสุดที่ 0,0 จะต่างกับคณิตศาตร์ที่เคยเรียนมาที่เป็นล่างสุดซ้ายสุดเป็น 0,0)

พอได้สัดส่วนแล้ว เอาไปหาร ออกจาก กัดเดิม เช่นพิกันเดิม อยู่ที่ 222,30 px พิกัดใหม่คือ 222/2, 30/3 ===> 111,10 px
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามการทำ responsive ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ได้แล้วครับในส่วนคำนวณสัดส่วนครับ

โค้ด: เลือกทั้งหมด

                    let Width_background = $('.drag-container').width();
                    let Height_background = $('.drag-container').height();
                    const width = 718.4 ;
                    const height = 750 ;
                    let widthProportion = Width_background / width;
                    let heightProportion = Height_background / height;

                    $.each($('.draggable'), function() {
                        let s = $(this).css('transform');
                        console.log(s)
                        let values = s.match(/matrix\(([^\)]+)\)/)[1].split(', ');
                        let X = (parseFloat(values[4]) * widthProportion);
                        let Y = (parseFloat(values[5]) * heightProportion);

                        // console.log('x :'+ X +' px y :'+ Y +" px");
                        $(this).css({"transform": "translate("+ X +"px, "+ Y +"px)"});
                      });
ผลที่ได้
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (173.9 KiB) Viewed 1166 times
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (216.05 KiB) Viewed 1166 times
:gfb:
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามการทำ responsive ใช้ jquery

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ถูกทางแล้ว
ลองทดสอบกับจอ ที่ใหญ่ขึ้นด้วยนะครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 89