كود اختيار خلفية المنتدى من الاعضاء - شركة انكور التطويرية

بسم الله الرحمن الرحيم كود اختيار خلفية المنتدى من الاعضاء في هذا الكود الحصري الجديد يمكنك وضع اكثر من خلفية وجعل كل عضو يختار الخلفية التي تناسبه بكل سه ..

كود,اختيار,خلفية,المنتدى,الاعضاء,keyword

. كود اختيار خلفية المنتدى من الاعضاء - شركة انكور التطويرية

دليل انكور للمواقع


استضافة انكوهوست
تنبيه! جاري العمل على تغييرات كبيرة في شركة انكور التطويرية مع بداية السنة الجديدة
#الحرية_لفلسطين #الأقصى_في_خطر






أهلا وسهلا بك زائرنا الكريم في شركة انكور التطويرية، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .


كود اختيار خلفية المنتدى من الاعضاء

بسم الله الرحمن الرحيم كود اختيار خلفية المنتدى من الاعضاء في هذا الكود الحصري الجديد يمكنك وضع اكثر من خلفية وجعل كل ع ..


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 2191
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 16
قوة السمعة : 420
موقعي : زيارة موقعي
 offline 

بسم الله الرحمن الرحيم

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

معاينة عمل الكود :
13312
الكود :
لوحة الادارة - عناصر اضافية - اكواد javas c r i p t - كل الصفحات
العنوان : اي شيء

/**
 * Forum background image selector.
 *
 * @author Luiz Felipe Gonçalves <https://luizfelipe.dev>
 * @see https://ajuda.forumeiros.com/t113492-
 * @see https://github.com/lffg/code-in-js/blob/master/fdf/t113492.js
 * @license MIT
 */

(function($, STORAGE_KEY, styles) {
  'use strict';

  var imageList = [
    'https://i.servimg.com/u/f15/20/01/43/25/yq2dqw10.png', // La primera es la imagen por defecto
    'https://i.servimg.com/u/f15/20/01/43/25/uelbrg10.jpg',
    'https://i.servimg.com/u/f15/20/01/43/25/aabt5510.jpg',
    'https://i.servimg.com/u/f15/20/01/43/25/qgaqh410.jpg',
    'https://i.servimg.com/u/f15/20/01/43/25/hgqzqj10.png'
  ];

  /**
   * Generates a new jQuery object to select the images.
   *
   * @return {object}
   */
  function generateElement() {
    var choicesList = $.map(imageList, function(image) {
      return $('<div class="lffg-bgimage__choice">')
        .attr('data-image', image)
        .html($('<img />', { src: image }).prop('outerHTML'))
        .prop('outerHTML');
    });

    return $(
      [
        '<div class="lffg-bgimage lffg-bgimage--hidden">',
        '  <a class="lffg-bgimage__toggler" title="Cambiar imagen de fondo">',
        '    <span><i class="fa fa-paint-brush"></i></span>',
        '  </a>',
        '  <div class="lffg-bgimage__inner">',
        '    <header class="lffg-bgimage__header">',
        '      <span>Seleccionar imagen de fondo</span>',
        '    </header>',
        '    <div class="lffg-bgimage__picker-wrapper">',
        '      <div class="lffg-bgimage__picker">',
        '        ' + choicesList.join('\n'),
        '      </div>',
        '    </div>',
        '  </div>',
        '</div>'
      ].join('\n')
    );
  }

  function handleToggle() {
    var $target = $(this);

    $target.parents('.lffg-bgimage').toggleClass('lffg-bgimage--hidden');
  }

  function setBg() {
    if (!'localStorage' in window) {
      return false;
    }

    var image = function() {
      return localStorage.getItem(STORAGE_KEY);
    };

    if (!image()) {
      // Set the first one of the list as the default.
      localStorage.setItem(STORAGE_KEY, imageList[0]);
    }

    $('body').css('background-image', 'url(' + image() + ')');
    return true;
  }

  function handleChange(event) {
    var $target = $(this);
    var image = $target.attr('data-image');

    localStorage.setItem(STORAGE_KEY, image);
    setBg();
  }

  $(function() {
    // Execute once and stop the script if the API is not supported.
    if (!setBg()) {





      return console.warn(
        '[LFFG Script] Your browser does not support the localStorage API.'
      );
    }

    generateElement()
      .on('click', function(event) {
        event.stopPropagation();
      })
      .on('click', '.lffg-bgimage__toggler', handleToggle)
      .on('click', '.lffg-bgimage__choice', handleChange)
      .appendTo('body');

    $(window).on('click', function() {
      if (!$('.lffg-bgimage').is('.lffg-bgimage--hidden')) {
        $('.lffg-bgimage').addClass('lffg-bgimage--hidden');
      }
    });

    $('<style>', { text: styles.join('\n') }).appendTo('head');
  });
})(jQuery, 'lffg-current-bgimage', [
  '.lffg-bgimage {',
  '  display: block;',
  '  border: solid 1px #ddd;',
  '  border-left: 0;',
  '  position: fixed;',
  '  top: 10vh;',
  '  left: 0;',
  '  background-color: #fff;',
  '  box-shadow: 4px 4px rgba(0, 0, 0, 0.39);',
  '  z-index: 9999;',
  '  transition: all ease-in-out 300ms;',
  '}',
  '',
  '.lffg-bgimage.lffg-bgimage--hidden {',
  '  transform: translateX(calc(-100% - 25px));',
  '}',
  '',
  '.lffg-bgimage__toggler {',
  '  display: flex;',
  '  justify-content: center;',
  '  align-items: center;',
  '  width: 45px;',
  '  height: 45px;',
  '  position: absolute;',
  '  border: solid 1px #ddd;',
  '  left: calc(100% + 1px + 1.5rem);',
  '  background-color: #fff;',
  '  font-size: 23px;',
  '  color: #39c !important;',
  '  box-shadow: 4px 4px rgba(0, 0, 0, 0.39);',
  '  transition: all linear 95ms;',
  '  cursor: pointer;',
  '}',
  '',
  '.lffg-bgimage__toggler::before {',
  '  content: "";',
  '  width: 15px;',
  '  height: 15px;',
  '  border: solid 1px transparent;',
  '  border-top-color: #ddd;',
  '  border-left-color: #ddd;',
  '  background-color: #fff;',
  '  transform: rotate(-45deg);',
  '  position: absolute;',
  '  left: -8px;',
  '  z-index: 2;',
  '  transition: all linear 95ms;',
  '}',
  '',
  '.lffg-bgimage__toggler:hover,',
  '.lffg-bgimage__toggler:hover::before {',
  '  color: #fff !important;',
  '  background-color: #39c;',
  '}',
  '',
  '.lffg-bgimage__toggler span {',
  '  position: relative;',
  '  z-index: 2;',
  '}',
  '',
  '.lffg-bgimage__header {',
  '  padding: 1rem;',
  '  border-bottom: solid 1px #ddd;',
  '  background-color: #39c;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", sans-serif;',
  '  font-size: 1.15rem;',
  '  text-transform: uppercase;',
  '}',
  '',
  '.lffg-bgimage__picker-wrapper {',
  '  max-height: 300px;',
  '  overflow-y: scroll;',
  '}',
  '',
  '.lffg-bgimage__picker {',
  '  display: flex;',
  '  justify-content: center;',
  '  align-items: center;',
  '  flex-direction: column;',
  '}',
  '',
  '.lffg-bgimage__choice {',
  '  display: block;',
  '  width: 120px;',
  '  height: 120px;',
  '  margin-bottom: 1rem;',
  '  border: solid 1px #ddd;',
  '  border-radius: 500px;',
  '  overflow: hidden;',
  '  cursor: pointer;',
  '  transition: all linear 100ms;',
  '}',
  '',
  '.lffg-bgimage__choice:hover {',
  '  box-shadow: 0 0 0 5px #39c;',
  '}',
  '',
  '.lffg-bgimage__choice:first-child {',
  '  margin-top: 1rem;',
  '}',
  '',
  '.lffg-bgimage__choice img {',
  '  width: 140px;',
  '  height: 140px;',
  '}'
]);


بالتوفيق للجميع
يرجى ذكر المصدر عند النقل
والسلام ختام


:. كاتب الموضوع Admin



;,] hojdhv ogtdm hglkj]n lk hghuqhx

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : اضغط هنا




19-04-2021 04:31 صباحا
مشاهدة مشاركة منفردة [1]
العراقي الطائي
.:: عضو فعال ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 14-02-2021
رقم العضوية : 451
المشاركات : 149
الجنس : ذكر
تاريخ الميلاد : 16-3-1972
قوة السمعة : 10
 offline 
شكرا جزيلا




الكلمات الدلالية
كود ، اختيار ، خلفية ، المنتدى ، الاعضاء ،

« تحويل الروابط الى عنوان الرابط | تحديد عدد الصور المسموح في كل توقيع »

 







سياسة الخصوصية


وسوم المنتدى







الساعة الآن 03:23 صباحا


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum
الاقسام العامة خدمات انكور تطوير المواقع و المنتديات اصحاب المواقع والمنتديات اقسام التصميم مكتبة السكربتات دورات انكور تقنيات ودروس الارشفة المكتب الاداري دليل المواقع مدونة انكور