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

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more