Действия

Widget

Порталы: различия между версиями

Материал из ВикиВоины
Строка 167: Строка 167:
 
  $(window).scroll(function() {
 
  $(window).scroll(function() {
 
     var currentPosition = $(this).scrollTop();
 
     var currentPosition = $(this).scrollTop();
−
 
 
     $('.sections_title, .period_title').each(function() {
 
     $('.sections_title, .period_title').each(function() {
 
         var sectionTop = $(this).offset().top;
 
         var sectionTop = $(this).offset().top;
 
         var sectionId = $(this).attr('id');
 
         var sectionId = $(this).attr('id');
−
 
 
         if (currentPosition >= sectionTop) {
 
         if (currentPosition >= sectionTop) {
 
             $('.side-nav li').removeClass('active');
 
             $('.side-nav li').removeClass('active');
−
 
+
             var activeElement = $('.side-nav li').find('a[href="#' + sectionId + '"]').parent();
−
             $('.side-nav li').find('a[href="#' + sectionId + '"]').parent().addClass('active');
+
            activeElement.addClass('active');
 
         }
 
         }
 
     });
 
     });

Версия 09:41, 5 мая 2024

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <script> $('.portal-carousel').slick({ 

 slidesToShow: 4,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 1000,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 800,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]

});

/* Слайдер галерея*/ $('.gallery-slider').slick({ 

 dots: false,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 arrows: false,
 asNavFor: '.gallery-slider-nav',

});

$('.gallery-slider-nav').slick({ 

 infinite: true,
 slidesToShow: 5,
 slidesToScroll: 1,
 asNavFor: '.gallery-slider',
 dots: false,
 centerMode: true,
 focusOnSelect: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1200,
     settings: {
       slidesToShow: 4,
     }
   },
   {
     breakpoint: 992,
     settings: {
       slidesToShow: 3,
     }
   }
 ]

});


/* Слайдер сликовский на страницах порталов внизу*/ $('.friends-carousel').slick({ 

 slidesToShow: 5,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 4,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1
     }
   }
 ]

});

$(document).ready(function() { 

 $(".portals-friends__card_img").mouseenter(function() {
   $(this).addClass("rotate");
 }).mouseleave(function() {
   $(this).removeClass("rotate");
 });

 var isFixed = false;
 var linkList;

 if (window.innerWidth > 640) {
linkList = $('
    '); 
     } else {
    linkList = $('
      '); 
       }

       var contentLabel = $('<label class="sidebar" id="p-tb">Содержание</label>');
      var contentListItem = $('
    • '); contentListItem.append(contentLabel); linkList.append(contentListItem); $('.sections_title, .period_title').each(function() { var sectionTitle = $(this).text().trim(); var sectionLink = $(''); sectionLink.text(sectionTitle); sectionLink.attr('href', '#' + $(this).attr('id')); var listItem = $('
    • '); listItem.append(sectionLink); if ($(this).hasClass('period_title')) { listItem.addClass('side-nav'); } linkList.append(listItem); }); var portalContents = $('
      '); 
       portalContents.append(linkList);
 $('#sidebar:last').append(portalContents);

       var contentItemWrapList = linkList.clone();
 contentItemWrapList.find('.sidebar').remove();

       setTimeout(function() {
   $('.contents-item-wrap').append(contentItemWrapList);
 }, 1000);

       var sidebarTop = $('.sidebar:last').offset().top;
 var portalContentsTop = portalContents.offset().top;

       $(window).scroll(function() {
   var scrollTop = $(window).scrollTop();

         if (scrollTop > sidebarTop && scrollTop > portalContentsTop && !isFixed) {
     portalContents.addClass('fixed'); 
     isFixed = true;
   } else if ((scrollTop <= sidebarTop || scrollTop <= portalContentsTop) && isFixed) {
     portalContents.removeClass('fixed'); 
     isFixed = false;
   }
 });

      $(window).scroll(function() {
   var currentPosition = $(this).scrollTop();
   $('.sections_title, .period_title').each(function() {
       var sectionTop = $(this).offset().top;
       var sectionId = $(this).attr('id');
       if (currentPosition >= sectionTop) {
           $('.side-nav li').removeClass('active');
           var activeElement = $('.side-nav li').find('a[href="#' + sectionId + '"]').parent();
           activeElement.addClass('active');
       }
   });

      });


      }); </script> <style> .sections_title { width: 100%; font-size: 25px; 

             font-weight: bold;

      padding: 5px; margin-top: 20px; margin-bottom: 20px; text-align: center; }

      .portal-carousel { 

         width: 91%;
   margin-right: auto;
   margin-left: auto;

      }

      .portal-card { 

      color: #fff;
height: 450px;
padding: 15px;
text-align: center;
margin-left: 15px;
margin-right: 15px;
outline: none;
display: flex !important;
flex-direction: column;
align-items: center;

      }

      .portal-card__text { margin-top: 5px; 

             font-size: 0.9em;
       padding: 5px;
       overflow-y: auto;

      }

      .portal-card__text a { text-decoration: none; transition: all 0.2s; }

      .portal-card__title { 

      font-weight: bold;
margin-top: 5px;

      }

      .portal-card img { 

         width: 100%;
   height: 200px;
   object-fit: cover;

      }

      .slider-arrow { 

       position: absolute;
 top: 38%;
 height: 60px;
 width: 60px;
 padding: 10px;
 z-index: 1;
 border-radius: 50%;

      }

      .slider-arrow:hover { 

       opacity: 70%;

      }

      .slider-arrow_prod_right, .slider-arrow_gallery_right { 

       right: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-right.png") center no-repeat;

      }

      .slider-arrow_prod_left, .slider-arrow_gallery_left { 

       left: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-left.png") center no-repeat;

      }

      .slider-arrow:hover { 

       cursor: pointer;

      }

      .period_title { 

       padding: 5px;
 font-size: 1.3em;
 margin-bottom: 10px;

      }

      .period_title a { 

       color: #fff;

      }

      .warriors-cards-wrap { 

         display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

      }

      .warriors-card { 

       border-radius: 5%;
 height: 110px;
 width: 140px;
 margin-bottom: 15px;
 position: relative;
 z-index: 0;
 transition: 0.2s all ease;
 }

      .warriors-card:hover { 

       transform: scale3d(1.1, 1.1, 1.1);
 }

      .warriors-card img { 

       margin: 0;
 width: 100%; 
 height: 100%; 
 vertical-align: bottom;
 object-fit: cover;
 object-position: top;
 }

      .warriors-card-descr { 

       color: #fff;
 font-size: 0.8em;
 background-color: #000;
 border-radius: 0 5px 0 3px;
 padding: 4px;
 line-height: 1;
 position: absolute;
 z-index: 1;
 left: 0;
 bottom: -1px;
 }

      .gallery-slider { 

         width: 90%;
   margin: auto;

      }

      .gallery-img { 

       width: auto!important;
 height: 550px!important;
 position: relative;
 margin-bottom: 0;

      }

      .gallery-wrap { height: 550px; 

         text-align: center;
   margin: auto;
   outline: none;
   display: flex !important;
   justify-content: space-around;
   align-items: center;

      }

      .gallery-img-wrap { position: relative; height: 500px; }

      .gallery-descr { 

         opacity: 0;
   position: absolute;
   font-size: 1em;
   direction: ltr;
   padding: 10px;
   text-align: center;
   bottom: -50px;
   height: auto;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   transition: all 0.2s ease;

      }

      .gallery-wrap:hover .gallery-descr { opacity: 1; bottom: -25px; }

      .gallery-slider-nav { width: 90%; 

         margin: 20px auto;

      }

      .gallery-image-nav { max-width: 12rem; 

       max-height: 7.8rem;
 margin-left: 0.5rem;
 margin-right: 0.5rem;

      }

      .gallery-wrap-nav { height: 100px; 

         padding: 0;

      outline: none; 

       -webkit-filter: brightness(40%);
         filter: brightness(40%);

      }

      .slick-current { 

       -webkit-filter: none !important;
 filter: none !important;

      }

      .gallery-image-nav img { 

       width: 100%;
 object-fit: cover;
 height: 7.8rem;

      }

      .slider-arrow_gallery { 

         height: 100%;
   top: 0;
   border-radius: 0;

      }

      /* Карточки дружественных порталов */ .friends-carousel { 

        width: 91%;
   margin-right: auto;
   margin-left: auto;

      }

      .portals-friends__card, .portals-collections__card { 

       text-align: center;
 padding: 10px;
 display: -webkit-box!important;
 display: -ms-flexbox!important;
 display: flex!important;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;

      }

      .portals-friends__card:focus { 

       outline: none;

      }

      .portals-friends__card .portal-card__img { 

       height: 140px;

      }

      .portals-friends__card_img { 

       margin-bottom: 5px;

      }

      .portals-friends__card a, .portals-collections__card a { font-size: 1.7em; text-decoration: none; transition: all 0.2s; }

      .rotate { 

       -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 -webkit-transition: -webkit-transform 0.5s ease;
 transition: transform 0.5s ease;

      }

      .mobile { 

       display: none;

      }

      .portal-collections-cards-wrap { 

         display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

      }

      .portal-card__img_small { 

         font-size: 0.6em;

      }

      .portals-collections__card { 

          width: 150px;

      }

      .portal-contents { 

         position: relative;
   padding: 0;
   margin-top: -25px;

      }

      .portal-contents.fixed { 

       position: fixed;
 width: 215px;
 top: 1.875rem;
 left: 0.875rem;
 z-index: 9;

      }

      .portal-contents ul.side-nav li.side-nav { 

       margin-left: 1em;
 padding: 0;

      }

      @media only screen and (max-width:640px) { .slider-arrow_prod_right { 

       right: -2em;

      }

      .slider-arrow_prod_left { 

       left: -2em;

      } .portal-card__text { 

        font-size: 0.75em;

      } .warriors-card-descr { 

        font-size: 0.6em;

      } .portals-friends__card { 

       font-size: 0.55em;

      } .period_title { text-align: center; } .gallery-wrap { 

         height: 280px;

      } .gallery-slider { width: 100%; } .gallery-descr { font-size: 0.6em; padding: 5px; left: 0; bottom: 0; opacity: 1; }

      .gallery-img { 

         width: auto!important;
   max-height: 280px!important;

      } .gallery-wrap-nav { 

            height: 45px;

      } .gallery-image-nav { 

         height: 3.8rem;

      } .gallery-image-nav img { 

         width: 100%;

      height: 2.8rem; } .gallery-img-wrap { position: initial; height: 280px; } .slider-arrow_gallery { 

         height: 110%;
   top: -2px;

      } 

         .friends-carousel {
   height: 100px;

      }

      .slider-arrow_gallery_right { 

       right: -2.2em;

      }

      .slider-arrow_gallery_left { 

       left: -2.2em;

      }

      .gallery-img { 

       object-fit: cover;

      } 

      .nomobile {
 display: none;

      } 

      .mobile {
 display: inline;

      }

      .friends-carousel { 

      margin-bottom: 40px;

      }

      .portals-friends__card .portal-card__img { 

       height: 90px;

      }

      .contents-item-wrap ul { 

       margin: 0;

      }

      .contents-item-wrap ul li.side-nav { 

       margin: 0;
 padding: 3px;

      }

      .contents-item-wrap ul li:first-child { 

       display: none;

      }


      } </style>

      Источник — https://wikiwarriors.org/mediawiki/index.php?title=Widget:Порталы&oldid=411958