Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2016, 15:35
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

отображение элементов isotope.js
при загрузке страницы появляются все элементы, которые при нажатии на фильтр сортируются. как сделать, чтобы фильтр уже был нажат при загрузке страницы, т.е. сразу отображались элементы только для конкретной категории?
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2016, 16:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,843

deadhunter,
указать нужную категорию в sortBy не пробовали?
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2016, 16:28
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

Сообщение от рони Посмотреть сообщение
deadhunter,
указать нужную категорию в sortBy не пробовали?
это где?
Ответить с цитированием
  #4 (permalink)  
Старый 07.02.2016, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,843

Сообщение от deadhunter
это где?
а оно у вас как?
Ответить с цитированием
  #5 (permalink)  
Старый 07.02.2016, 16:49
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

Сообщение от рони Посмотреть сообщение
а оно у вас как?
вот джаваскрипт

var fselector = 0;
var work_grid = $("#work-grid, #isotope");

function initWorkFilter(){
    (function($){
     "use strict";
     var isotope_mode;
     if (work_grid.hasClass("masonry")){
         isotope_mode = "masonry";
     } else{
         isotope_mode = "fitRows"
     }
     
     $(".filter").click(function(){
         $(".filter").removeClass("active");
         $(this).addClass("active");
         fselector = $(this).attr('data-filter');
         
         work_grid.isotope({
             itemSelector: '.mix',
             layoutMode: isotope_mode,
             filter: fselector
         });
         return false;
     });
        
     if (window.location.hash) {
         $(".filter").each(function(){
             if ($(this).attr("data-filter") == "." + window.location.hash.replace("#", "")) {
                 $(this).trigger('click');
                 
                 $("html, body").animate({
                     scrollTop: $("#portfolio").offset().top
                 });
                 
             }
         });
     }

     work_grid.imagesLoaded(function(){
         work_grid.isotope({
             itemSelector: '.mix',
             layoutMode: isotope_mode,
             filter: fselector
         });
     });
        
        
    })(jQuery);
}


вот html

<!-- Works Filter -->                    
                    <div class="works-filter font-alt align-center">
                        <a href="#" class="filter " data-filter="*">All works</a>
                        <a href="#" class="filter active" data-filter=".branding">Branding</a>
                        <a href="#" class="filter" data-filter=".design">Design</a>
                        <a href="#" class="filter" data-filter=".photography">Photography</a>
                    </div>                    
                    <!-- End Works Filter -->
                    
                    <!-- Works Grid -->
                    <ul class="works-grid work-grid-3 work-grid-gut clearfix font-alt hover-white hide-titles" id="work-grid">
                        
                        <!-- Work Item (Lightbox) -->
                        <li class="work-item mix photography">
                            <a href="images/portfolio/full-project-1.jpg" class="work-lightbox-link mfp-image">
                                <div class="work-img">
                                    <img src="images/portfolio/projects-1.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Portrait</h3>
                                    <div class="work-descr">
                                        Lightbox
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2016, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,843

deadhunter,
строка 39
var filter = $(".filter.active").data('filter');
     filter && (fselector = filter);
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2016, 17:06
Интересующийся
Отправить личное сообщение для deadhunter Посмотреть профиль Найти все сообщения от deadhunter
 
Регистрация: 05.01.2016
Сообщений: 11

Сообщение от рони Посмотреть сообщение
deadhunter,
строка 39
var filter = $(".filter.active").data('filter');
     filter && (fselector = filter);
огромнейшее спасибо. спасаете меня уже в который раз )))
Ответить с цитированием
  #8 (permalink)  
Старый 07.02.2016, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,843

deadhunter,
на всякий случай не ищите атрибуты data c помощью attr, для этого в jquery есть http://api.jquery.com/data/
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2017, 14:56
Новичок на форуме
Отправить личное сообщение для ooopsalala Посмотреть профиль Найти все сообщения от ooopsalala
 
Регистрация: 06.03.2017
Сообщений: 3

Тот же вопрос. Как сделась что бы выводилось уже категория по умолчанию. вот код js
/
Ответить с цитированием
  #10 (permalink)  
Старый 06.03.2017, 14:57
Новичок на форуме
Отправить личное сообщение для ooopsalala Посмотреть профиль Найти все сообщения от ooopsalala
 
Регистрация: 06.03.2017
Сообщений: 3

(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={ csstransforms:function(){return!!i},csstransforms3 d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{ height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e .remove()}return a},csstransitions:function(){return!!j}},l;if(e)fo r(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms) {var o=e.csstransforms3d?{translate:function(a){return" translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+ a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"is oTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:fun ction(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a) {b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssN umber.translate=!0,b.cssHooks.translate={set:funct ion(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty :"webkitTransitionEnd",MozTransitionProperty:"tran sitionend",OTransitionProperty:"oTransitionEnd otransitionend",transitionProperty:"transitionend" }[j],r=h("transitionDuration"));var s=b.event,t=b.event.handle?"handle":"dispatch",u;s .special.smartresize={setup:function(){b(this).bin d("resize",s.special.smartresize.handler)},teardow n:function(){b(this).unbind("resize",s.special.sma rtresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",u&&clearTi meout(u),u=setTimeout(function(){s[t].apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartres ize=function(a){return a?this.bind("smartresize",a):this.trigger("smartre size",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),thi s._create(a),this._init(d)};var v=["width","height"],w=b(a);b.Isotope.settings={resizable:!0,layoutMod e:"masonry",containerClass:"isotope",itemClass:"is otope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visible Style:{opacity:1,scale:1},containerStyle:{position :"relative",overflow:"hidden"},animationEngine:"be st-available",animationOptions:{queue:!1,duration:800 },sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transf ormsEnabled:!0,itemPositionDataEnabled:!1},b.Isoto pe.prototype={_create:function(a){this.options=b.e xtend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};var d=v.slice(0);for(var e in this.options.containerStyle)d.push(e);for(var f=0,g=d.length;f<g;f++)e=d[f],this.originalStyle[e]=c[e]||"";this.element.css(this.options.containerStyle) ,this._updateAnimationEngine(),this._updateUsingTr ansforms();var h={"original-order":function(a,b){return b.elemCount++,b.elemCount},random:function(){retur n Math.random()}};this.options.getSortData=b.extend( this.options.getSortData,h),this.reloadItems(),thi s.offset={leftarseInt(this.element.css("padding-left")||0,10),toparseInt(this.element.css("paddi ng-top")||0,10)};var i=this;setTimeout(function(){i.element.addClass(i. options.containerClass)},0),this.options.resizable &&w.bind("smartresize.isotope",function(){i.resize ()}),this.element.delegate("."+this.options.hidden Class,"click",function(){return!1})},_getAtoms:fun ction(a){var b=this.options.itemSelector,c=b?a.filter(b).add(a. find(b)):a,d={position:"absolute"};return c=c.filter(function(a,b){return b.nodeType===1}),this.usingTransforms&&(d.left=0,d .top=0),c.css(d).addClass(this.options.itemClass), this.updateSortData(c,!0),c},_init:function(a){thi s.$filteredAtoms=this._filter(this.$allAtoms),this ._sort(),this.reLayout(a)},option:function(a){if(b .isPlainObject(a)){this.options=b.extend(!0,this.o ptions,a);var c;for(var d in a)c="_update"+f(d),this[c]&&this[c]()}},_updateAnimationEngine:function(){var a=this.options.animationEngine.toLowerCase().repla ce(/[ _\-]/g,""),b;switch(a){case"css":case"none":b=!1;break; case"jquery":b=!0;break;default:b=!e.csstransition s}this.isUsingJQueryAnimation=b,this._updateUsingT ransforms()},_updateTransformsEnabled:function(){t his._updateUsingTransforms()},_updateUsingTransfor ms:function(){var a=this.usingTransforms=this.options.transformsEnab led&&e.csstransforms&&e.csstransitions&&!this.isUs ingJQueryAnimation;a||(delete this.options.hiddenStyle.scale,delete this.options.visibleStyle.scale),this.getPositionS tyles=a?this._translate:this._positionAbs},_filter :function(a){var b=this.options.filter===""?"*":this.options.filter ;if(!b)return a;var c=this.options.hiddenClass,d="."+c,e=a.filter(d),f =e;if(b!=="*"){f=e.filter(b);var g=a.not(d).not(b).addClass(c);this.styleQueue.push ({$el:g,style:this.options.hiddenStyle})}return this.styleQueue.push({$el:f,style:this.options.vis ibleStyle}),f.removeClass(c),a.filter(b)},updateSo rtData:function(a,c){var d=this,e=this.options.getSortData,f,g;a.each(funct ion(){f=b(this),g={};for(var a in e)!c&&a==="original-order"?g[a]=b.data(this,"isotope-sort-data")[a]:g[a]=e[a](f,d);b.data(this,"isotope-sort-data",g)})},_sort:function(){var a=this.options.sortBy,b=this._getSorter,c=this.opt ions.sortAscending?1:-1,d=function(d,e){var f=b(d,a),g=b(e,a);return f===g&&a!=="original-order"&&(f=b(d,"original-order"),g=b(e,"original-order")),(f>g?1:f<g?-1:0)*c};this.$filteredAtoms.sort(d)},_getSorter:fu nction(a,c){return b.data(a,"isotope-sort-data")[c]},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b} },_pushPosition:function(a,b,c){b=Math.round(b+thi s.offset.left),c=Math.round(c+this.offset.top);var d=this.getPositionStyles(b,c);this.styleQueue.push ({$el:a,style:d}),this.options.itemPositionDataEna bled&&a.data("isotope-item-position",{x:b,y:c})},layout:function(a,b){var c=this.options.layoutMode;this["_"+c+"Layout"](a);if(this.options.resizesContainer){var d=this["_"+c+"GetContainerSize"]();this.styleQueue.push({$el:this.element,style:d} )}this._processStyleQueue(a,b),this.isLaidOut=!0}, _processStyleQueue:function(a,c){var d=this.isLaidOut?this.isUsingJQueryAnimation?"anim ate":"css":"css",f=this.options.animationOptions,g =this.options.onLayout,h,i,j,k;i=function(a,b){b.$ el[d](b.style,f)};if(this._isInserting&&this.isUsingJQu eryAnimation)i=function(a,b){h=b.$el.hasClass("no-transition")?"css":d,b.$el[h](b.style,f)};else if(c||g||f.complete){var l=!1,m=[c,g,f.complete],n=this;j=!0,k=function(){if(l)return;var b;for(var c=0,d=m.length;c<d;c++)b=m[c],typeof b=="function"&&b.call(n.element,a,n);l=!0};if(this .isUsingJQueryAnimation&&d==="animate")f.complete= k,j=!1;else if(e.csstransitions){var o=0,p=this.styleQueue[0],s=p&&p.$el,t;while(!s||!s.length){t=this.styleQue ue[o++];if(!t)return;s=t.$el}var u=parseFloat(getComputedStyle(s[0])[r]);u>0&&(i=function(a,b){b.$el[d](b.style,f).one(q,k)},j=!1)}}b.each(this.styleQueu e,i),j&&k(),this.styleQueue=[]},resize:function(){this["_"+this.options.layoutMode+"ResizeChanged"]()&&this.reLayout()},reLayout:function(a){this["_"+this.options.layoutMode+"Reset"](),this.layout(this.$filteredAtoms,a)},addItems:fu nction(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms. add(c),b&&b(c)},insert:function(a,b){this.element. append(a);var c=this;this.addItems(a,function(a){var d=c._filter(a);c._addHideAppended(d),c._sort(),c.r eLayout(),c._revealAppended(d,b)})}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Преобразование из текстовых данных в красивое отображение материала AlexGraur Общие вопросы Javascript 0 08.08.2015 15:13
Отображение определенных элементов таблицы при нажатии на radio Kichiro Элементы интерфейса 2 04.12.2014 17:05
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 12:05
Отображение и скрытие элементов UL Surlik jQuery 0 19.02.2012 15:20
IE 6 не обновляет отображение элементов.... geschaft Internet Explorer 4 09.07.2011 16:44