angularjs - Expanding tiles layout using Angular in responsive layout -

-

i'm developing angular single-page app responsive layout. current page i'm working on uses tile-based layout auto wraps tiles next row. html below and, in responsive layout, can show 1, 2, or 3 tiles per row depending on width of row (it positions them using floats).

<div class="tiled_panel">     <div class="tile_1">...</div>     <div class="tile_2">...</div>     <div class="tile_3">...</div>     <div class="tile_4">...</div>     <div class="tile_5">...</div>     ... </div>

now each tile given "learn more" button. design calls block expand between row of selected tile , row below. block full width of row , closed when user closes or clicks on different learn more button.

my first thought arrange html below using ng-if hide or display expander divs can't figure out css needed have display between rows.

<div class="tiled_panel">     <div class="tile_1">...</div>     <div class="expander_1">...</div>     <div class="tile_2">...</div>     <div class="expander_2">...</div>     <div class="tile_3">...</div>     <div class="expander_3">...</div>     <div class="tile_4">...</div>     <div class="expander_4">...</div>     <div class="tile_5">...</div>     <div class="expander_5">...</div>     ... </div>

my second thought, since i'm using angular, somehow use transcluding or including insert relevant html appropriate spot. again, can't figure out how identify need insert html?

i've tried searching around other people's solutions similar problems since figured not unusual requirement haven't yet been able find else doing this.

can else suggest need identify insert html or how generate css? or suggest solution haven't considered yet?

although have 70% understand of mean, think ng-class can solve you've faced. solution code below. , setup jsfiddle.

html looks this.

<div ng-app="" ng-controller="myctrl">     <div class="tiled_panel">         <div>tile 1 <a href ng-click="change_tile(1)">more</a></div>         <div class="expander" ng-class="{'close': opentile===1}">expander 1<a href ng-click="change_tile(-1)">close</a></div>         <div>tile 2 <a href ng-click="change_tile(2)">more</a></div>         <div class="expander" ng-class="{'close': opentile===2}">expander 2<a href ng-click="change_tile(-2)">close</a></div>     </div> </div>

your controller code looks this.

$scope.change_tile = function(value){     $scope.opentile = value; } $scope.change_tile(0);

css looks this.

.expander{     visibility: hidden } .close{     visibility: visible }

Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more