احتاج كود وضع ملئ الشاشة

السلام عليكم احتاج كود وضع ملئ الشاشة في المنتدى وصفحات html
بدل الذهاب الى خيارات المتصفح وشكرأ

الديجي شات جافة كنا قبل ندخل عليها وضعية ملئ شاشة من ندخل باسم المستعار قبل

السلام عليكم  @فهد الجوهري
بعد اذن اخونا  @Mc nabulsy

نعم ممكن عمل زر عند الضغط عليه يتم وضع ملء الشاشة.
لا ادري هل يعمل على نسخة منتداك او لا

جربه
ضع الكود التالي في اي مكان يقبل الهتمل

الكود:


    <style>
button#enter-fullscreen {
    padding: 6px;
    background: #fff495;
}
    </style>

    <div id="fullscreen-container">
        <button id="enter-fullscreen">انتقل إلى وضع ملء الشاشة</button>
    </div>
    <script>
        document.getElementById('enter-fullscreen').addEventListener('click', function() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                document.documentElement.msRequestFullscreen();
            }
        });
    </script>


احاول بالصفحات h tml كونان

شنو نوع الكود هذا واين مكان وضعه

اخي ضع الكود في اي مكان يقبل html
يعني في صفحات الhtml
في التومبيلات
في التشكيلات العامة
في العناصر المستقلة (عنصر شخصي)

اشتغل في صفحات html
بس ياريت يكون ثابت بدون ما اضغط على الزر ثابق عند فتح الصفحة ياطريقة تنصف فيها

فهد الجوهري كتب:اشتغل في صفحات html
بس ياريت يكون ثابت بدون ما اضغط على الزر ثابق عند فتح الصفحة  ياطريقة تنصف فيها

هل تقصد ان يتم تشغيل ملء الشاشة مباشره بعد دخول الصفحة وبدون ارادت الاعضاء

اي ياريت

مرحبًا فهد الجوهري

تشغيل وضع ملء الشاشة تلقائيًا قد يكون مزعجًا لبعض المستخدمين  ومعظم المستخدمين يفضلون التحكم في وضع الشاشة بأنفسهم.
و قد يواجهون صعوبة في التنقل إذا كانت الصفحة تدخل وضع ملء الشاشة تلقائيًا.

وايضا يجب ان تعلم ان العديد من المتصفحات تمنع تشغيل وضع ملء الشاشة تلقائيًا دون تدخل المستخدم كإجراء للحماية.  
لذا، قد لا يعمل الكود الذي يشغل ملء الشاشة تلقائيًا في جميع المتصفحات.

الكود:

  <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (event) => {
    let elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
    }
});
    </script>

تحياتي،

مومشكلة لازم انحط معاها الاكواد المربعات الثلاثة  الي فوق حتى ماتشكل اعاقة

التلقائي قد لا يعمل بسبب اعدادات المتصفح
اليك الكود التالي
ينقل وضع ملء الشاشة عند النقرة الأولى، وينهي وضع ملء الشاشة عند النقرة الثانية،

الكود:

  <style>
        button#enter-fullscreen {
            padding: 6px;
            background: #fff495;
        }
    </style>   
<div id="fullscreen-container">
            
   <button id="enter-fullscreen">
       انتقل إلى وضع ملء الشاشة
   </button>
        
</div>
    <script>
        document.getElementById('enter-fullscreen').addEventListener('click', function() {
            if (document.fullscreenElement) {
             
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { /* Firefox */
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE/Edge */
                    document.msExitFullscreen();
                }
                this.textContent = "انتقل إلى وضع ملء الشاشة";
            } else {
             
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                    document.documentElement.msRequestFullscreen();
                }
                this.textContent = "الخروج من وضع ملء الشاشة";
            }
        });
    </script>

كود الاخر  احتاج

سلام عليكم اخ فهد لانك طلبت
وضع ملئ الشاشه اكيد حيختفي
عندك المربعات عليك الخروج
من وضع ملئ الشاشه لارجاع
ضهور ما طلبت لا يمكن التلاعب
كثيرا في وضع الاعدادات
لان هذه المربعات هيه
ملك للمتصفح لا اعرف
انه بالامكان نقلها لمكان اخر
اولا

تم تعديل الكود بحيث تظهر ثلاثة أزرار بعد تفعيل ملء الشاشة، كل زر سيؤدي وظيفة مختلفة مثل إغلاق المتصفح، تصغيره، أو طيّه.
ولكن تأكد من التحقق من الدعم على المتصفحات المختلفة.،
قد لا تعمل بعض الازرار .

اضف الكود التالي في الهتمل

الكود:

      <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>وضع ملء الشاشة</title>    <style>
        button#enter-fullscreen {
            padding: 6px;
            background: #fff495;
        }
        #fullscreen-controls {
            display: none; /* إخفاء الأزرار في البداية */
            margin-top: 10px;
        }
        #fullscreen-controls button {
            padding: 6px;
            margin: 5px;
        }
        #fullscreen-controls button.close {
            background: #ff6961;
            color: white;
        }
        #fullscreen-controls button.minimize {
            background: #77dd77;
            color: white;
        }
        #fullscreen-controls button.restore {
            background: #fdfd96;
            color: black;
        }
div#fullscreen-controls {
    z-index: 9999999999999999999;
    position: fixed;
    background: #000000;
    left: 0;
    right: 0;
    top: 0;
    padding: 6px;
}

    </style>    
<div id="fullscreen-container">
              
 <button id="enter-fullscreen">
               انتقل إلى وضع ملء الشاشة            
 </button>
              
 <div id="fullscreen-controls">
                  
 <button class="close">
   إغلاق المتصفح  
 </button>
                  
 <button class="minimize">
   تصغير المتصفح  
 </button>
                  
 <button class="restore">
   طوي المتصفح  
 </button>
              
 </div>
          
</div>
     <script>
        const enterFullscreenButton = document.getElementById('enter-fullscreen');
        const fullscreenControls = document.getElementById('fullscreen-controls');

        function enterFullscreen() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                document.documentElement.msRequestFullscreen();
            }
        }

        function exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) { /* Firefox */
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE/Edge */
                document.msExitFullscreen();
            }
        }

        enterFullscreenButton.addEventListener('click', function() {
            if (document.fullscreenElement) {
                exitFullscreen();
                enterFullscreenButton.textContent = "انتقل إلى وضع ملء الشاشة";
                fullscreenControls.style.display = 'none';
            } else {
                enterFullscreen();
                enterFullscreenButton.textContent = "الخروج من وضع ملء الشاشة";
                fullscreenControls.style.display = 'block';
            }
        });

        document.querySelector('#fullscreen-controls .close').addEventListener('click', function() {
            window.close();
        });

        document.querySelector('#fullscreen-controls .minimize').addEventListener('click', function() {
            window.minimize();
        });

        document.querySelector('#fullscreen-controls .restore').addEventListener('click', function() {
            window.resizeTo(screen.availWidth, screen.availHeight);
        });


    </script>