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

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

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

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



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

أقسام الدعم

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

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

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

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

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

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

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr2
 
@JAR7
 

عمل منتدى

ممكن الكود هذا

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

ممكن الكود هذا

مُساهمة من طرف المحال في السبت 22 مارس 2014 - 12:02

السسلام علييكم

ممكن الكود هذا
http://im83.gulfup.com/1Y8VO.png

وبي طريقة تغير لونه

المحال
 
 

ذكر
عدد المساهمات : 849
معدل النشاط : 2420

http://makszoox7.forumarabia.com/

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

رد: ممكن الكود هذا

مُساهمة من طرف ◄NEXT في السبت 22 مارس 2014 - 12:15



[css][javascript] كود جافا سكريبت لتغيير تايتل المنتدى بتقنية جديدة لمنتديات أحلى منتدى
كود جافا سكريبت لتغيير تايتل المنتدى بتقنية جديدة لمنتديات أحلى منتدى


 

أهلا بكم أعضاء وزوار شركة فور يمنى أظن أن الكل لاحظ أن التايتل يختلف فى منتدانا عن باقى المنتديات وقد طلب الكثير من الاعضاء هذا الكود واليوم أقدمه لكم وبتقنية حديثة أفضل من منتدانا لكل أعضائنا الغاليين

صورة للكود
:55445:

https://i34.servimg.com/u/f34/15/54/04/99/untitl29.png

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

الكود وشرحه
 

الكود يتكون من اتنين كود جافا سكريبت واحد ثابت لا نغيره والاخر نتحكم به وكود css للأشكال

الكود الجافا سكريبت الثابت

العنوان أى شئ ولكن تذكره

التأثير فى جميع الصفحات
ثم ضع الكود




الرمز:
// tipsy, facebook style tooltips for jquery
// www.4egy.net
// code brogramed by ahmed and mohamed abdelfatah
// releated under the MIT license

(function($) {
   
    function fixTitle($ele) {
        if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
            $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
        }
    }
   
    function Tipsy(element, options) {
        this.$element = $(element);
        this.options = options;
        this.enabled = true;
        fixTitle(this.$element);
    }
   
    Tipsy.prototype = {
        show: function() {
            var title = this.getTitle();
            if (title && this.enabled) {
                var $tip = this.tip();
               
                $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
               
                var pos = $.extend({}, this.$element.offset(), {
                    width: this.$element[0].offsetWidth,
                    height: this.$element[0].offsetHeight
                });
               
                var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
                var gravity = (typeof this.options.gravity == 'function')
                                ? this.options.gravity.call(this.$element[0])
                                : this.options.gravity;
               
                var tp;
                switch (gravity.charAt(0)) {
                    case 'n':
 
                       tp = {top: pos.top + pos.height +
this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                        break;
                    case 's':
 
                       tp = {top: pos.top - actualHeight -
this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                        break;
                    case 'e':
 
                       tp = {top: pos.top + pos.height / 2 -
actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
                        break;
                    case 'w':
 
                       tp = {top: pos.top + pos.height / 2 -
actualHeight / 2, left: pos.left + pos.width + this.options.offset};
                        break;
                }
               
                if (gravity.length == 2) {
                    if (gravity.charAt(1) == 'w') {
                        tp.left = pos.left + pos.width / 2 - 15;
                    } else {
                        tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                    }
                }
               
                $tip.css(tp).addClass('tipsy-' + gravity);
               
                if (this.options.fade) {
 
                   $tip.stop().css({opacity: 0, display: 'block',
visibility: 'visible'}).animate({opacity: this.options.opacity});
                } else {
                    $tip.css({visibility: 'visible', opacity: this.options.opacity});
                }
            }
        },
       
        hide: function() {
            if (this.options.fade) {
                this.tip().stop().fadeOut(function() { $(this).remove(); });
            } else {
                this.tip().remove();
            }
        },
       
        getTitle: function() {
            var title, $e = this.$element, o = this.options;
            fixTitle($e);
            var title, o = this.options;
            if (typeof o.title == 'string') {
                title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
            } else if (typeof o.title == 'function') {
                title = o.title.call($e[0]);
            }
            title = ('' + title).replace(/(^\s*|\s*$)/, "");
            return title || o.fallback;
        },
       
        tip: function() {
            if (!this.$tip) {
 
               this.$tip = $('<div
class="tipsy"></div>').html('<div
class="tipsy-arrow"></div><div
class="tipsy-inner"/></div>');
            }
            return this.$tip;
        },
       
        validate: function() {
            if (!this.$element[0].parentNode) {
                this.hide();
                this.$element = null;
                this.options = null;
            }
        },
       
        enable: function() { this.enabled = true; },
        disable: function() { this.enabled = false; },
        toggleEnabled: function() { this.enabled = !this.enabled; }
    };
   
    $.fn.tipsy = function(options) {
       
        if (options === true) {
            return this.data('tipsy');
        } else if (typeof options == 'string') {
            return this.data('tipsy')[options]();
        }
       
        options = $.extend({}, $.fn.tipsy.defaults, options);
       
        function get(ele) {
            var tipsy = $.data(ele, 'tipsy');
            if (!tipsy) {
                tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
                $.data(ele, 'tipsy', tipsy);
            }
            return tipsy;
        }
       
        function enter() {
            var tipsy = get(this);
            tipsy.hoverState = 'in';
            if (options.delayIn == 0) {
                tipsy.show();
            } else {
                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
            }
        };
       
        function leave() {
            var tipsy = get(this);
            tipsy.hoverState = 'out';
            if (options.delayOut == 0) {
                tipsy.hide();
            } else {
                setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
            }
        };
       
        if (!options.live) this.each(function() { get(this); });
       
        if (options.trigger != 'manual') {
            var binder  = options.live ? 'live' : 'bind',
                eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
                eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
            this[binder](eventIn, enter)[binder](eventOut, leave);
        }
       
        return this;
       
    };
   
    $.fn.tipsy.defaults = {
        delayIn: 0,
        delayOut: 0,
        fade: false,
        fallback: '',
        gravity: 'n',
        html: false,
        live: false,
        offset: 0,
        opacity: 0.8,
        title: 'title',
        trigger: 'hover'
    };
   
    // Overwrite this method to provide options on a per-element basis.
    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
    // (remember - do not modify 'options' in place!)
    $.fn.tipsy.elementOptions = function(ele, options) {
        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
    };
   
    $.fn.tipsy.autoNS = function() {
        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
    };
   
    $.fn.tipsy.autoWE = function() {
        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
    };
   
})(jQuery);



 

ثانى كود هو الجافا سكريبت المتغير

العنوان أى شئ ولكن تذكره

التأثير فى جميع الصفحات
ثم ضع الكود



الرمز:
$(document).ready(function(){
  $(function() {
    $('a').tipsy({gravity: 'se', delayIn: 500, delayOut: 1000, fade: true});

 
  });
});


 

شرح التعديل على الكود
الكود حاليا له عدة تأثيرات

1 - اول خاصية gravity: 'se' هذه الكلمة فى الكود توضح مكان التايتل اذا كان من اى ناحية
يعنى مكتوب فى الكود كلمة se يعنى يظهر من الجنوب الشرقى
صورة السهم اللى هيتغير

https://i34.servimg.com/u/f34/15/54/04/99/untitl30.png

لتغيير مكانه كالأتى
لجعله من ناحية الشمال غير se إلى n

لجعله من ناحية الشمال الغربى غير se إلى nw

لجعله من ناحية الشمال الشرقى غير se إلى ne

لجعله من ناحية الغرب غير se إلى w

لجعله من ناحية الشرق غير se إلى e

لجعله من ناحية الجنوب الغربى غير se إلى sw

لجعله من ناحية الجنوب غير se إلى s

من ناحية الجنوب الشرقى هى se

كود ال css
لوحة الادارة
مظهر المنتدى
الوان
ورقة تصميم ال css
ضع الكود التالى



الرمز:
.tipsy {
padding: 5px;
font-size: 11px;
position: absolute;
text-shadow: none;
z-index: 999;
}

.tipsy-inner {
padding: 8px 8px 8px 8px;
background-color: black;
color: white;
max-width: 2000px;
text-align: center;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
font:10pt tahoma;text-align:center;




}

.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.tipsy-arrow {
position: absolute;
background: url('http://cuul.tk/img/tipsy.gif') no-repeat top left;
width: 9px;
height: 5px;
}

.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}

.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}

.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}

.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}

.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}

.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}

.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}





 

إلى هنا قد أنتهينا من وضع الكود وإن شاء الله يعمل كويس جدا معكم عندما تضيف خاصية title الى اى رابط تعمل معه تلقائيا



أخر :

 كود [css]+[javascript] لتطوير تايتل المنتدى بإنسيابية رائعة


لوحة الإدارة >> مظهر المنتدى >>  الصور و الألوان >> ورقة تصميم CSS

و ثم ضع الكود و إضغط سجل



 
الرمز:
 /*التايتل : SohbaNet.ibda3.org by JOHN CENA*/
    #tooltip {
    position:absolute;
    background-color: #1775BD; /*لتغيير الخلفية*/
    z-index: 999;
    width:auto;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-family:Times New Roman; /*لتغيير نوع الخط*/
    font-weight:500;
    font-size:13px; /*لتغيير حجم الخط*/
    display:none;
    color:#fff; /*لتغيير لون الخط*/
    padding:5px;
    }
    /*التايتل : SohbaNet.ibda3.org by JOHN CENA*/


ثم ضع


لوحة الإدارة >> عناصر اضافية >>  البوابة و العناصر >> إدارة العناصر المستقلة على المنتدى
و ثم ننشئ عنصر جديد و نضع الكود التالي فيه ونضغط على سجل و ضعه فى العمود رقم 3
و لا تنسى تفعيل العناصر المستقلة 




الرمز:
<script src='http://www.patmax.eu/J1/120404182635.js'></script>
<script>  
     jQuery(document).ready(function(){
     jQuery('a [title]').quicktip({
     speed:700
     });
    jQuery('img [title]').quicktip({
     speed:700
     });
    jQuery('div [title]').quicktip({
     speed:700
     });
    jQuery('span [title]').quicktip({
     speed:700
     });
    });
    </script>



الكود من منتدى أجنبى

◄NEXT
 
 

ذكر
عدد المساهمات : 261
معدل النشاط : 1906

http://arab-top.forum.st

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

رد: ممكن الكود هذا

مُساهمة من طرف stones في السبت 22 مارس 2014 - 12:26

تشكر على مجهودك الرائع AM!DO
اخي جميع الاكواد والشروحات ترسل
من هناء
http://help.ahlamontada.com/post.forum?mode=newtopic&f=73
وذلك ليتم التاكد منها ومن ثم وضعها
في القسم المناسب

stones
 
 

ذكر
عدد المساهمات : 11045
معدل النشاط : 13485

http://stones.arab.st/

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

رد: ممكن الكود هذا

مُساهمة من طرف ◄NEXT في السبت 22 مارس 2014 - 12:36

@stones كتب:تشكر على مجهودك الرائع AM!DO
اخي جميع الاكواد والشروحات ترسل
من هناء
http://help.ahlamontada.com/post.forum?mode=newtopic&f=73
وذلك ليتم التاكد منها ومن ثم وضعها
في القسم المناسب

شكراً على التنبية أخى " stones ",
هذه الأكواد إجابة على موضوع السيد " المحال "
وشكراً,

◄NEXT
 
 

ذكر
عدد المساهمات : 261
معدل النشاط : 1906

http://arab-top.forum.st

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

رد: ممكن الكود هذا

مُساهمة من طرف المحال في السبت 22 مارس 2014 - 13:29

اخي جربته في منتدى تجربي ولم يشتغل!

المحال
 
 

ذكر
عدد المساهمات : 849
معدل النشاط : 2420

http://makszoox7.forumarabia.com/

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

رد: ممكن الكود هذا

مُساهمة من طرف ◄NEXT في السبت 22 مارس 2014 - 18:43

جرب هذا الكود : أنا استعملة شخصياً :)

الرمز:
#tooltip {
    position:absolute;
    background-color: #1775BD; /*لتغيير الخلفية*/
    z-index: 999;
    width:auto;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-family:Times New Roman; /*لتغيير نوع الخط*/
    font-weight:500;
    font-size:13px; /*لتغيير حجم الخط*/
    display:none;
    color:#fff; /*لتغيير لون الخط*/
    padding:5px;
    }

ضع الكود في ورقة تصميم css

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

ثم ضع هذا الكود في العناصر الشخصية


الرمز:
<script src="http://www.patmax.eu/J1/120404182635.js"></script><script> 
     jQuery(document).ready(function(){
     jQuery('a [title]').quicktip({
     speed:700
     });
    jQuery('img [title]').quicktip({
     speed:700
     });
    jQuery('div [title]').quicktip({
     speed:700
     });
    jQuery('span [title]').quicktip({
     speed:700
     });
    });
    </script>

في العناصر الشخصية : إسم العنصر : أكتب أي شيئ
                      استعمل جدول عاماً : لا
                      يجب التأكد من تفعيل نافذه نمط الأرسال

صوره :




صوره تأكيد عمل الكود :



 مع التحية 

◄NEXT
 
 

ذكر
عدد المساهمات : 261
معدل النشاط : 1906

http://arab-top.forum.st

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

رد: ممكن الكود هذا

مُساهمة من طرف المحال في السبت 22 مارس 2014 - 19:27

بااااارك الله فييك جبيبي

اتعبتك معي

شكرااا جزيلاا

ويعطيك العافيه يامبدع  Cool  Cool  Cool  Cool

المحال
 
 

ذكر
عدد المساهمات : 849
معدل النشاط : 2420

http://makszoox7.forumarabia.com/

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

رد: ممكن الكود هذا

مُساهمة من طرف ◄NEXT في السبت 22 مارس 2014 - 19:30

@المحال كتب:بااااارك الله فييك جبيبي

اتعبتك معي

شكرااا جزيلاا

ويعطيك العافيه يامبدع  Cool  Cool  Cool  Cool
أشكرك أخى  :تحية مع الشكر:

◄NEXT
 
 

ذكر
عدد المساهمات : 261
معدل النشاط : 1906

http://arab-top.forum.st

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

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


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