اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

3 مشترك

اذهب الى الأسفل

تم الحل اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف نزار السعيد الأربعاء 28 أبريل 2021 - 10:02

اصدقائي الكرام لدي الكود التالي من وضع شريط اخبار اخر المواضيع بشكل افقى
كما بالصورة التالية
اريد ان يظهر ايضا بنسخة الجوال ( المنتدى يعمل على نسخة Modern BB
يعني فقط يعمل فقط بنسخة الحاسوب
اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال Aoa15

الكود
الكود:
$(function getNews() {
        var lastNewsTitle = 'آخر المواضيع',
        forumNumper = '', // رقم القسم
        numberOfNews = '20', // عدد المواضيع
        speedOfNews = '120', // سرعة التتالي
        separateImg = 'https://i.servimg.com/u/f29/20/07/03/20/person10.png',  // الصورة الفاصلة بين كل موضوع
        newsTitleBg = '#369FCF',    // لون خلفية نص آخر الأخبار
        newsBg = '#FFF',    // لون خلفية شريط آخر الأخبار
           
        newsLocation = '.newsLocation',
        lastNewsContainer = document.createElement("DIV");
    lastNewsContainer.className = "lastNewsContainer";
    lastNewsContainer.innerHTML =
        '<div class="lastNewsTitle">' + lastNewsTitle + '</div><div class="lastNewsItems-wrap"><div class="lastNewsItems marquee"></div></div>';
    if (document.querySelector(newsLocation)) {
        document.querySelector(newsLocation).appendChild(lastNewsContainer);
 
        function loadDoc(f, c) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var parser = new DOMParser(),
                        newsResult = parser.parseFromString(this.responseText, "text/xml");
                    for (i = 0; i < c; i++) {
                        var lastNewsBlock = document.createElement('SPAN');
                        lastNewsBlock.className = 'lastNewsBlock';
                        lastNewsBlock.innerHTML = '<a href="' + newsResult.querySelectorAll('item')[i].querySelector('link').innerHTML + '" class="lastNews">' + newsResult.querySelectorAll('item')[i].querySelector('title').innerHTML + '</a><img src="' + separateImg + '" class="separateImg" alt="" />';
                        document.querySelector('.lastNewsItems').append(lastNewsBlock);
                    }
                }
            };
            xhttp.open("GET", "/feed?f=" + f, true);
            xhttp.send();
        }
        loadDoc(forumNumper, numberOfNews);
        var newsStyle = document.createElement('STYLE');
      // newsStyle.innerHTML = '.marquee { padding-right: 100%; white-space: nowrap; animation: marquee ' + speedOfNews + 's linear infinite; } .separateImg, .lastNews { display: inline-block; vertical-align: middle; } .separateImg { margin: 0 40px; max-width: 30px; max-height: 30px; } .lastNewsBlock:last-child .separateImg { display: none; } .lastNewsItems-wrap:hover .marquee { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .lastNewsContainer { display: inline-flex; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: calc(100% - 100px); background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
      newsStyle.innerHTML = '.marquee { display: inline-block; padding-right: 100%; white-space: nowrap; animation: marquee ' + speedOfNews + 's linear infinite; }.separateImg, .lastNews { display: inline-block; vertical-align: middle; } .separateImg { margin: 0 40px; max-width: 30px; max-height: 30px; } .lastNewsBlock:last-child .separateImg { display: none; } .lastNewsItems-wrap:hover .marquee { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } .lastNewsContainer { display: inline-flex; width: 100%; align-items: center; background: ' + newsTitleBg + '; color: #FFF; margin: 20px 0; box-sizing: border-box; } .lastNewsTitle { min-width: 100px; text-align: center; } .lastNewsItems-wrap { width: 100%; background: ' + newsBg + '; border: 1px solid ' + newsTitleBg + '; overflow: hidden; }';
     
      document.head.appendChild(newsStyle);
        setInterval(function() {
            var marqueeW = document.querySelector('.lastNewsItems').scrollWidth;
            document.querySelector('.lastNewsItems').style.minWidth = '' + marqueeW + 'px';
        }, 500);
    }
});
// by omarpop23

شكرا لكم سلفا
نزار السعيد
نزار السعيد
 
 

ذكر
عدد المساهمات : 88
معدل النشاط : 2479
السُمعة : 1

http://mo7it.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف omarpop23 الأربعاء 28 أبريل 2021 - 22:47

فقط ضع في نهاية قالب الـ overall_header الخاص بنسخة الجوال
الكود:
<div class="newsLocation"></div>
omarpop23
omarpop23
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 1492
معدل النشاط : 5828
السُمعة : 218

http://www.best-devs.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف نزار السعيد الخميس 29 أبريل 2021 - 2:46

لم تظهر المواضيع ضمن الشريط
فقط ظهر الشريط مع الصورة الرمزية المتحركة الفاصلة
مع الشكر يلفا
نزار السعيد
نزار السعيد
 
 

ذكر
عدد المساهمات : 88
معدل النشاط : 2479
السُمعة : 1

http://mo7it.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف omarpop23 الخميس 29 أبريل 2021 - 12:46

ضع اكواد الـ CSS التالية في ورقة الـ CSS
الكود:
#mpage-body-modern a.lastNews {
    color: #39c;
    font-size: 12px;
}
omarpop23
omarpop23
احلى مساعد
احلى مساعد

ذكر
عدد المساهمات : 1492
معدل النشاط : 5828
السُمعة : 218

http://www.best-devs.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف نزار السعيد الخميس 29 أبريل 2021 - 14:00

كل الشكر صديقي عمر
تمام
نزار السعيد
نزار السعيد
 
 

ذكر
عدد المساهمات : 88
معدل النشاط : 2479
السُمعة : 1

http://mo7it.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تم الحل رد: اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال

مُساهمة من طرف H3RO السبت 15 مايو 2021 - 16:01

تم حل المشكلة & ينقل للأرشيف.
يرجى مراجعة : قوانين منتدى الدعم



اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال 31010
اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال 410 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سرقائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال 410 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
اريد تعديل شريط الاخبار الافقي بحيث يظهر بنسخة الجوال 410 لا يتم المساعدة على الخاص!
H3RO
H3RO
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1404
معدل النشاط : 6283
السُمعة : 112

https://www.picasso-des.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى