famo.us - code like Lightbox example -

-

i'm searching code example of lightbox demo famo.us. unfortunately, interesting part of app in codepen uglified in pens version of famous.lib.js.

it's not whole gallery thing i'm interested in, "just" scollable view multiple elements in 1 row, depending on size , screen size.

has experiences in developing view/layout this?

thanks in advance

i have been doing work scrollview , gridlayout. can calculate grid dimensions based on contextsize , target/min cell size.

here example started. adding gridlayout sole view in scrollview. know may work against scrollviews efficient rendering in scrollview rendering entire grid, doing examples sake. use modifier around gridlayout ensure size of view calculated , scrollview scrolls right amount. anyway, here did..

var engine          = require('famous/core/engine'); var surface         = require('famous/core/surface'); var rendernode      = require('famous/core/rendernode'); var modifier        = require('famous/core/modifier'); // edited var scrollview      = require('famous/views/scrollview'); var gridlayout      = require('famous/views/gridlayout');  var context = engine.createcontext();  var scrollviews = [];  var scrollview = new scrollview(); scrollview.sequencefrom(scrollviews);  var gridcells = [];  var grid = new gridlayout(); grid.sequencefrom(gridcells);  grid.mod = new modifier();  var cellcount     = 24; var cellminwidth  = 200.0;  grid.mod.sizefrom(function(){    var size        = context.getsize();   var cellsx      = math.floor(size[0] / cellminwidth);   var cellsy      = math.ceil(cellcount * 1.0  / cellsx);   var cellheight  = size[0] * 1.0 / cellsx;    grid.setoptions({dimensions:[cellsx,cellsy]});    return [undefined,cellsy*cellheight]; });  grid.node = new rendernode(); grid.node.add(grid.mod).add(grid);   (var = 0; < cellcount; i++) {   var surface = new surface({     size:[undefined,undefined],     properties: {       backgroundcolor:'hsl('+(i*360/12)+',75%,50%)'     }   });    gridcells.push(surface);   surface.pipe(scrollview);  };  scrollviews.push(grid.node);  context.add(scrollview);

fwiw maximize efficiency of scrollview, need have list of views rendered sequentially. since rendering 1 view in scrollview, rendering everything, time. have thought of couple ways around though, both extend beyond scope example.

  1. you visibility check , render nodes based on position of scrollview.

  2. you create gridlayout each row, manage cells within each grid using list manipulation techniques.

bonus:

if want use gridlayout modifiers, found using _modifiers property rather helpful (note: available after deploy!). able create rearrangeable layout using technique. surfaces floating outside gridlayout , being positioned via draggable modifier based on gridlayouts modifiers. here working demo of that..

http://higherorderhuman.com/examples/rearrangeable.html

hope helps!


Comments

Post a Comment

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

-
i having problem, have grid called "gridbasica" , this: thisform.gridbase.recordsource = "sgviemp" sgviemp cursor made executing select sqlserver command sqlexec. when want modify registry, go form , the update there. so, when come form grid, grid isnt grid anymore, big white rectangle. reading around said: delete recordsource , asingt again. thisform.gridbase.recordsource = "" *--i sqlexe here thisform.gridbase.recordsource = "sgviemp" i , works, but, when click button modify again cursos updated modify form doesnt load fields did first time. could me out that? thanks in advance. --------------- edit ------------------ i have been doing recommended: lnselect = select(0) n = sqlexec(thisform.conexion,"select emp_ccodigo codigo, emp_cnombre 'nombre o razon social', emp_cnumrif 'r.i.f' sgviempr","sgviemp1") set echo on suspend select sgviemp zap in sgviemp *-- browse *--zaps correct
Read more

jquery - Set jPicker field to empty value -

-
im using jpicker color selector in form. have clear value set window/icon 'no color selected' state. i've tried following: $(':input[name="color"]').val(''); //access value directly. (does not affect jpicker) 2: $.jpicker.list[0].color.active.val('hex', '', this); //set color black , input value 000000, instead of empty string 3: $.jpicker.list[0].color.active.val(null, '', this); //does nothing none of 3 methods seems behave properly. in advance. this works me :) $.jpicker.list[0].color.active.val('v', null); here example: http://jsfiddle.net/3up7n/
Read more

.htaccess - htaccess convert request to clean url and add slash at the end of the url -

-
ok , searched more 4 days , more 20 posts here in stach or in websites without kind of success first here htaccess file rewriteengine on rewriterule ^([a-za-z0-9_]+)/?$ index.php?page=$1 [nc] rewriterule ^([a-za-z0-9_]+)\/([a-za-z0-9_]+)\/?$ index.php?page=$1&action=$2 [nc] i tried many codes 1 worked me can call request , works me www.example.com/pagename => www.example.com/index.php?page=pagename here questions , please provide me information "in detail" understand code well 1- how convert request automatically www.example.com/index.php?page=pagename www.example.com/pagename 2- if tried add slash @ end shows me page without images or styling mean www.example.com/pagename => works www.example.com/pagename/ => doesn't work that's :) for first part need 301 rule this: rewritecond %{the_request} /index\.php\?page=([^\s&]+) [nc] rewriterule ^ /%1? [r=301,l] for second part use absolute path in css, js, images files r
Read more