javascript - Isotope.js help: Changing item image after sorting -


i able achieve originaly set out in post bellow, ran problem multi-class items display multiple images. my main question whether took right approach solving original goals or if there more clever way active same effect, in turn fixing 1 problem have. here break down:

1) achieve image change feature, used css hide multiple inline seasonal images in each sortable item. used bit of js apply class of .seen items sorted. relied on css again display images inteneded.

2) 1 problem found if sortable item has more 1 seasonal class, 2 images shown when either of classes become active. know can hide problem setting set width , height .grid .sortable-item , controlling overflow (commented out in example show problem) - but, don't want hide it. how can display seasonal image intended when class becomes active?

here code pen code: http://codepen.io/anon/pen/nrlwk

as always, appreciated.

this general question on how go building project have in mind, , best way set off on right foot. new js, please gentle.

i want use isotope.js (or similar script) display page multiple items (about 30 different plants found in garden) , ability sort them seasons of year + "what beautiful now" + , "view all" (a total of 6 categories) .

on load, or when sorted either "what beautiful now" or "view all", need each item reflect image of current season in.

when sorted season, need "current" images switch on designated seasonal image of plant. therefore, each sortable item have 4 different versions 4 different images in background ready surface when plants sorted. (perhaps 5 if makes more sense have "current" version besides 4 seasonal versions.)

my question: what approach can take achieve effect in manageable way?

can isotope apply class items sorted? assuming can:

  1. should each item have 4 inline images, each css class, control using display:inline; , display:none; properties stylesheets? (i worry approach increase load times)
  2. would make more sense create blank dummy div who's background control example above -relying on css.
  3. or there other way involving js overlooking?

any appreciated. examples of suggest immensely helpful.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based
Read more

thorough guide for profiling racket code -

did googling ("racket profiling", "racket measure performance"), didn't find , there no examples in docs. did google "profile" search on htdp - no luck. (profile (f ...)) output isn't obvious other small snippets. ideally want python's python -m cprofile usage examples. when search "python profiling", both duckduckgo , google give top result: 26.4. python profilers . (although scanned quickly, seems more of reference "thorough usage guide" examples. if had else in mind, perhaps please link that?) the equivalent racket documentation be: profile: statistical profiler . a usage example: #lang racket (require profile) (profile-thunk (thunk (function-to-profile arg0 arg1) )) here (thunk e) convenience (lambda () e) . bigger example: #lang racket (module mod racket (provide f) (define (f) (for/list ([i 10000]) i))) (require (prefix-in mod: 'mod)) (define (f) (for ([i 10000
Read more