منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


كود javascript و Css لوضع دردشة في عارضة المنتدى
 

 كود javascript و Css لوضع دردشة في عارضة المنتدى

اذهب الى الأسفل 
كاتب الموضوعرسالة
annex
سوبر الإبداع
سوبر الإبداع
annex

ذكر
عدد المساهمات : 355
نقاط النشاط : 491
السٌّمعَة : 89
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Algeri10
كود javascript و Css  لوضع دردشة في عارضة المنتدى  612

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالسبت مايو 13, 2017 6:15 pm

أقدم لكم اليوم كود javascript و كود CSS لوضوع دردشة في عارضة المنتدى 

هنا سوف تظهر الإضافة 


كود javascript و Css  لوضع دردشة في عارضة المنتدى  Captur25



و عند الضغط تطلع تحت 


كود javascript و Css  لوضع دردشة في عارضة المنتدى  Captur26






الان مع الاكواد  أولا كود JAVASCRIPT

إدارة المنتدى ..... عناصر إضافية ..... إدارة أكواد Javascript .... إضافة كود جديد ( كل الصفحات)




الكود:

(function() {
    if (!window.FA) window.FA = {};
    if (FA.Chat) {
        if (window.console) console.warn('FA.Chat has already been initialized');
        return;
    }
 
    FA.Chat = {
 
        // chatbox settings
        config: {
            height: '60%',
            width: '70%',
 
            live_notif: true,
            sound_notif: {
                enabled: true,
                file: 'https://illiweb.com/fa/fdf/zelda.mono.mp3'
            },
            notifRate: 10000
        },
 
        // language settings
        lang: {
            chatbox: 'Chatbox',
            new_msg: 'Un nouveau message a été posté sur la <a href="javascript:FA.Chat.toggle();">chatbox</a>.'
        },
 
        // technical data below
        node: {}, // node cache
        users: 0, // users in chat
        messages: 'initial', // total chat messages
        actif: false, // tells us if the chatbox is opened
        notifActif: false, // tells us if the notifications are active
 
        // initial setup of the chatbox
        init: function() {
            var right = document.getElementById('fa_right'),
                container = document.createElement('DIV'),
                button = document.createElement('A'),
                audio;
 
            button.id = 'fa_chat_button';
            button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
            button.onclick = FA.Chat.toggle;
            FA.Chat.node.button = button;
 
            container.id = 'fa_chat_container';
            container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
            container.style.width = FA.Chat.config.width;
            container.style.height = FA.Chat.config.height;
            container.style.bottom = '-' + FA.Chat.config.height;
            container.style.visibility = 'hidden';
 
            if (right) {
                right.insertBefore(button, right.lastChild); // add the chat button to the right side of the toolbar
                document.body.appendChild(container);
 
                // create the notification audio element
                if (FA.Chat.config.sound_notif.enabled) {
                    audio = document.createElement('AUDIO');
                    audio.src = FA.Chat.config.sound_notif.file;
                    if (audio.canPlayType) {
                        FA.Chat.node.audio = audio;
                        document.body.appendChild(audio);
                    }
                }
 
                FA.Chat.node.container = document.getElementById('fa_chat_container');
                FA.Chat.node.chatters = document.getElementById('fa_chatters');
                FA.Chat.node.frame = document.getElementById('fa_chat');
                FA.Chat.node.frame.onload = FA.Chat.getFrame;
            }
 
            delete FA.Chat.init;
        },
 
        // get the frame window, document, and elements
        getFrame: function() {
            if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
            if (this.contentDocument || this.contentWindow) {
                FA.Chat.window = this.contentWindow;
                FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;
 
                FA.Chat.node.message = FA.Chat.document.getElementById('message');
                FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');
 
                FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // listen for changes every 0.3 seconds
            }
        },
 
        // listen for changes in the chatbox
        listen: function() {
            var users = FA.Chat.node.members.getElementsByTagName('LI').length,
                messages = FA.Chat.window.chatbox.messages.length;
 
            // update user count
            if (users > FA.Chat.users || users < FA.Chat.users) {
                FA.Chat.users = users;
                FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
            }
 
            // initial / active updates
            if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;
 
            // notify new messages while connected and the chatbox is closed
            if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
                FA.Chat.messages = messages; // update message count
                FA.Chat.notifActif = true;
 
                if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
                if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); // play sound notification
 
                // wait before notifying the user again
                window.setTimeout(function() {
                    FA.Chat.notifActif = false;
                }, FA.Chat.config.notifRate);
            }
        },
 
        // create a custom notification
        notify: function(msg) {
 
            var notif = document.createElement('DIV'),
                live = document.getElementById(Toolbar.LIVE_NOTIF);
 
            notif.className = 'fa_notification';
            notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
            notif.style.display = 'none';
 
            $(notif).mouseover(function() {
                $(this).stop(true, true)
            });
            $(notif).mouseleave(function() {
                $(this).delay(5000).fadeOut()
            });
 
            live.insertBefore(notif, live.firstChild);
            $(notif.firstChild).dotdotdot();
 
            $(notif).fadeIn(100, function() {
                $(this).delay(10000).fadeOut()
            });
        },
 
        // toggle the display state of the chatbox
        toggle: function() {
            var container = FA.Chat.node.container.style;
 
            if (/hidden/i.test(container.visibility)) {
                FA.Chat.node.button.className = 'fa_chat_active';
                FA.Chat.actif = true;
 
                container.visibility = 'visible';
                container.bottom = '3px';
 
                // auto focus the message field
                window.setTimeout(function() {
                    FA.Chat.node.message.focus();
                }, 350); // some browsers ( firefox ) need a delay
            } else {
                FA.Chat.node.button.className = '';
                FA.Chat.actif = false;
 
                container.visibility = 'hidden';
                container.bottom = '-' + FA.Chat.config.height;
            }
        }
 
    };
 
    $(function() {
        // initialize the chat when the document is ready and the user is logged in
        if (_userdata.session_logged_in) $(FA.Chat.init);
    });
})();



ثم نذهب إلى  ورقة CSS و نضيف الكود التالي 


الكود:



    #fa_chat_container {
          background:#FFF;
          border:1px solid #556682;
          border-radius:3px;
          position:fixed;
          right:3px;
          z-index:999;
          overflow:hidden;
          min-width:500px;
          min-height:250px;
          transition:300ms;
        }
       
        #fa_chat {
          border:none;
          width:100%;
          height:100%;
        }
       
        #fa_chat_button {
          color:#FFF;
          line-height:30px;
          margin-left:10px;
          padding:0 5px;
          cursor:pointer;
        }
       
        #fa_chat_button.fa_chat_active {
          color:#333;
          background:#FFF;
        }







و هنيئا لك الإضافة 













3(1)
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.aquarabic.com
JoryAbdallah
عضو التميز
JoryAbdallah

انثى
السمك
عدد المساهمات : 126341
نقاط النشاط : 142023
السٌّمعَة : 2980
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Saudi-10
العمر : 34
كود javascript و Css  لوضع دردشة في عارضة المنتدى  Yoo_ao11

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالسبت مايو 13, 2017 6:44 pm

ماشاء الله تبارك الله
كود جديد ورائع تم تقيمك
واستمر يابطل


كود javascript و Css  لوضع دردشة في عارضة المنتدى  Img_2010
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
annex
سوبر الإبداع
سوبر الإبداع
annex

ذكر
عدد المساهمات : 355
نقاط النشاط : 491
السٌّمعَة : 89
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Algeri10
كود javascript و Css  لوضع دردشة في عارضة المنتدى  612

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالسبت مايو 13, 2017 9:23 pm

شكرا على تشجيعك و على مرورك  كود javascript و Css  لوضع دردشة في عارضة المنتدى  1f44d


كود javascript و Css  لوضع دردشة في عارضة المنتدى  1508415341281
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.aquarabic.com
منصورة
عضو التميز
منصورة

انثى
الدلو
عدد المساهمات : 13968
نقاط النشاط : 16961
السٌّمعَة : 51
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Algeri10
العمر : 57

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالجمعة مايو 19, 2017 12:55 pm

كود مميز اخي annex

الف شكر على الإفادة
تقبل مروري وتقديري


كل القلوب إلى الحبيب تميل
ومعي بهذا شاهد ودليل
اما الدليل إذا ذكرت محمداً
صارت دموع العارفين تسيل
هذا رسول الله نبراس الهدى
هذا لكل العالمين نبيا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.manssora.com/
K!LLeR
عضو فعال
K!LLeR

ذكر
عدد المساهمات : 751
نقاط النشاط : 862
السٌّمعَة : 10
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Ioao10

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالخميس أغسطس 03, 2017 4:09 pm

أإسـ عٍ ـد الله أإأوٍقـآتَكُـ بكُـل خَ ـيرٍ دآإئمـاَ تَـبهَـرٍوٍنآآ بَمَ ـوٍآضيعكـ أإلتي تَفُـوٍح مِنهآ عَ ـطرٍ أإلآبدآع وٍأإلـتَمـيُزٍ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Derraz Boujemaa
عضو محترف
Derraz Boujemaa

ذكر
عدد المساهمات : 3399
نقاط النشاط : 6145
السٌّمعَة : 121
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Morocc10

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالإثنين ديسمبر 11, 2017 3:08 pm

يعطيك العافيه طرح رائع وانت دائما رائع في طرحك .
أنتظر جديدك بكل الشوق والود ,,,
تقبل مروري المتواضع


كود javascript و Css  لوضع دردشة في عارضة المنتدى  OhiHHcI
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
عضو التميز
Picasso-Des

ذكر
الجدي
عدد المساهمات : 10774
نقاط النشاط : 11116
السٌّمعَة : 136
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Ioao10
العمر : 36

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالسبت يونيو 16, 2018 11:50 pm

يعطيكم العافية على الطرح كود javascript و Css  لوضع دردشة في عارضة المنتدى  837876428
كل الاحترام كود javascript و Css  لوضع دردشة في عارضة المنتدى  433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
مصطفى ستيتان
عضو خبير
مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Ioao10

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالثلاثاء يوليو 24, 2018 12:46 pm

 جزاكم الله خيراً  
 كود javascript و Css  لوضع دردشة في عارضة المنتدى  1454454920 كود javascript و Css  لوضع دردشة في عارضة المنتدى  1454454920 كود javascript و Css  لوضع دردشة في عارضة المنتدى  1454454920 


سبحان الله والحمدلله ولا إله إلا الله 
 
كود javascript و Css  لوضع دردشة في عارضة المنتدى  Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
AL-SHAM5
مؤسس الإبداع
مؤسس الإبداع
AL-SHAM5

ذكر
عدد المساهمات : 92493
نقاط النشاط : 102347
السٌّمعَة : 702
بلد العضو : كود javascript و Css  لوضع دردشة في عارضة المنتدى  Ioao10

كود javascript و Css  لوضع دردشة في عارضة المنتدى  Empty
مُساهمةموضوع: رد: كود javascript و Css لوضع دردشة في عارضة المنتدى    كود javascript و Css  لوضع دردشة في عارضة المنتدى  Emptyالخميس مايو 14, 2020 10:44 pm

شكرا لك

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

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: التقنيات المتقدمة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020