منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

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

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
» مشكلة
أمس في 23:37 من طرف 0marp0p23

» جعل المنتدى بطيء!!
أمس في 22:27 من طرف عبد المجيد الذكي

» اعلاني مخالف
أمس في 22:21 من طرف ahd allah

» مشكله في الرتب
أمس في 18:09 من طرف zaydoon

» طلب سلايد بسيط*
أمس في 15:50 من طرف meme.99

» ايكونه محذوفه اسفل التعليق ..
أمس في 14:59 من طرف zaydoon

»  طلب الكود
أمس في 12:53 من طرف ahd allah

» ربط المنتدى بالمدونة
أمس في 11:16 من طرف ahd allah

» شفرة اعلان فى نسجة الجوال
الإثنين 26 سبتمبر 2016 - 18:30 من طرف zeewab

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

جافا سكربت / إضافة الصورة الشخصية بجانب الإسم في علبة الدردشة

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

جافا سكربت / إضافة الصورة الشخصية بجانب الإسم في علبة الدردشة

مُساهمة من طرف Mr.TnT في الثلاثاء 21 أبريل 2015 - 2:34

السلام عليكم ورحمة الله وبركاته
موضوعنا اليوم غير موضوع الأشعار:
جديد: إمكانية إظهار صور الأعضاء في دردشة أحلى المنتديات

مقارنة بين أشعار الزعيم وبين هذا الموضوع:
لاحظ ان الموضوع الذي تم فتحه من قبل الزعيم ان الصورة الشخصية يتم وضعها فقط في الشات وليس في القائمة الجانبية
الزعيم :

http://i38.servimg.com/u/f38/19/13/54/32/13-02-19.png
انا

http://i.imgur.com/Y3Sfxh7.png

~~~~~~~~~~~~~
الأن هناك شيئان يجب ان تعرف قبل بدء العمليه.....
في حال اردت ان تظهر الصور الشخصيه على شكل صغير ومنسق كما بالأمثله التي وضعتها بالأعلى, يجب تفعيل خاصية:

http://i38.servimg.com/u/f38/19/13/54/32/13-02-18.png

الموجوده في:
لوحة الإدارة >> عناصر اضافية >> علبة الدردشة >> اعدادات علبة الدردشة:


اما لو لم تفعلها, فستظهر الصور بأحجامها الطبيعيه مما سيؤدي الى تشوه بمظهر الدردشه.
نأتي للأكواد الأن وهي عباره عن أثنان فقط.
يتم وضعه في الجافا سكربت:

الرمز:
$(window).load(function() {  var chatbox_script = function() {     var default_avatar = 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png';    var ava_in_member_list = true;    var ava_in_indirect_message = true;     var avatars = {};    var d;    var set_avatar = function(pseudo, elem_to_prepend){      var avatar = avatars[pseudo];      var el = $(this);      elem_to_prepend.find('.cb-avatar').remove();      elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');      if(!avatar) {        if(!d) {          d = $.get('/memberlist?change_version=prosilver').done(function(c){            $('.avatar-mini img', c).each(function(){              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')            })          })        }        d.done(function(){          var avatar = avatars[pseudo];          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)        })      }    };    var overrided = Chatbox.prototype.refresh;    Chatbox.prototype.refresh = function(data) {      var next_scroll = false;      if (data.messages && data.messages.length) {        $.each(data.messages, function(_,m){          if(ava_in_indirect_message)            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();          if(m.user && m.user.avatar)            avatars[m.username] = m.user.avatar        });        next_scroll = !this.messages || this.messages.length != data.messages.length;      }      overrided.call(this, data);      d = null;      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){        set_avatar($(this).text(), $(this).parent());      });      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){        set_avatar($(this).children().attr('data-username'), $(this).parent());      });      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2    };  };  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})});


وكود اخر يتم وضعه في ورقة css لنقوم بتحديد حجم الصورة والتحكم بها
الرمز:
#chatbox_members .cb-avatar > img {  height:30px;width:30px;  vertical-align: middle;}



دمتم بخير
منقول للإفادة مع التعديل
Mr.TnT

Mr.TnT
 
 

ذكر
عدد المساهمات : 947
معدل النشاط : 2747

http://www.ce-scripts.net/

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


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