السلام عليكم ورحمة الله وبركاته
مرحباً بجميع أعضاء ذا بست
----------------------------------
مرحباً بجميع أعضاء ذا بست
----------------------------------
تظهر الرسالة فور انقطاع اتصال الإنترنت فجأة، وتختفي الرسالة فور استعادة اتصال الإنترنت
قد ينقطع الاتصال قبل الانتهاء من كتابة المساهمة في المحرر، وقد يتم الضغط على زر الإرسال دون معرفة أن الاتصال قد انقطع.
وهذا ربما قد يسبب ازعاج لأعضاء المنتدى
ولذا قد يكون من المفيد عرض رسالة تنبيه للأعضاء في حالة فقدهم اتصالهم بالإنترنت
-----
طريقة التثبيت
__________
تثبيت JavaScript
--------------------------
العنوان: كما تريد
المكان: في جميع الصفحات
أضف كود Javascript
الكود:
window.addEventListener('DOMContentLoaded', function() {
var messageElement = document.createElement('div');
messageElement.id = 'connection-message';
messageElement.innerHTML = 'أنتبه: تم قطع الاتصال بالإنترنت';
messageElement.style.cssText = `
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #9f180f;
color: #fffdeb;
font-size: 24px;
font-weight: bold;
padding: 10px;
text-align: center;
z-index: 9999;
display: none;
`;
document.body.appendChild(messageElement);
function showMessage() {
messageElement.style.display = 'block';
messageElement.style.animation = 'slideIn 0.5s ease-in-out';
}
function hideMessage() {
messageElement.style.animation = 'slideOut 0.5s ease-in-out';
setTimeout(function() {
messageElement.style.display = 'none';
}, 500);
}
window.addEventListener('offline', showMessage);
window.addEventListener('online', hideMessage);
function animate(element, animationName) {
element.style.animationName = animationName;
setTimeout(function() {
element.style.animationName = '';
}, 1000);
}
var slideInAnimation = `
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
`;
var slideOutAnimation = `
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
`;
messageElement.addEventListener('animationstart', function() {
if (messageElement.style.animationName === slideInAnimation) {
animate(messageElement, slideOutAnimation);
}
});
});لا تنسى الضغط على زر قدّم
يمكنك تعديل محتوى الرسالة وخلفيتها ولون النص من كود JavaScript
من خلال تعديل الجزء المشار اليه في الصورة التالية
وفي الختام. وفقكم الله جميعا
______________________________
تمت كتابة هذا البرنامج بواسطة كونان2000
باستخدام AI
,
