I need to implement a tiled layout for a website containing 9 tiles where one of the tiles is larger than the others. The basic div layout would look something like this:
<div>
<div id="tiles1" class="inactive">
Tile 1
</div>
<div id="tiles2" class="inactive">
Tile 2
</div>
<div id=id="tiles3" class="inactive">
Tile 3
</div>
<div id="tiles4" class="active">
Tile 4 (Active)
</div>
<div id=id="tiles4" class="inactive">
Tile 4
</div>
<div id=id="tiles5" class="inactive">
Tile 5
</div>
<div id=id="tiles6" class="inactive">
Tile 6
</div>
<div id=id="tiles7" class="inactive">
Tile 7
</div>
<div id=id="tiles8" class="inactive">
Tile 8
</div>
<div id=id="tiles9" class="inactive">
Tile 9
</div>
</div>
The div that is marked with class="active" should be larger than the others. It might be possible that there are more tiles, but they would be hidden beneath a load more button.
A possible solution that I had in mind was to implement the tiles using nested grids in foundation and then add a listener for each div which flips the class.
The actual tiled layout would then be handled in CSS.
However, I was wondering if there exists a jquery plugin out there that already achieves what I am trying to do (along with the CSS) as that would reduce the workload for the designer.
Maybe someone has suggestions for plugins that I could try?
Thanks
Related
I am trying to create a sliding tile structure in Sharepoint.
I have already succeeded in having the tile slide open once when it is clicked on the basis of a parent and child tile. Now I would like it to be able to slide open again, so three-part drop menu
<div class="tile largeTile green" onclick="DropDown(this)" Parent="tegel">
<div class="tileFront" title="S2">
<div class="title">
Tegel
</div>
</div>
</div>
<!--Start Child containers for tegel-->
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<div class="tile green DocumentChild" Parent="tegel">
<div class="tileFront" title="test" onclick="window.open('link','_blank')">
<div class="title">
schuif
</div>
</div>
</div>
<!--End of child containers tegel-->
I tried putting a child after a child but it doesn't work, and I have no idea how to use the 'element' code. I read somewhere about an element as 3rd menu but I have no idea how to insert it in the code.
There are still 2 files, 1 .css file containing the layout of the tiles and Javascript for the operation of the tiles. I will probably need to add code to this as well.
Hopefully someone can help me with this
I wonder if there's a way to render responsively elements created by *ngFor in Angular 2?
I use Bootstrap 4 grid system based on flex property. And I've got this code in my Angular2 app:
<div class="outlet container">
<div class="row itemsBlock">
<div *ngFor="let item of items" class="itemRender">
<img class="itemImage" src="{{item.image}}" />
<span class=itemitle">{{item.title}}</span>
</div>
</div>
What I want is to get my items rendered responsively, say
3 divs in the row on large and middle-sized displays
2 divs in the row on small ones
1 div in the row on x-small displays
You can't really relate that stuff with looping over items collection. You could take use xl, lg,md & sm class with col-size-number(like col-xs-12) class on same row. Bootstrap will take care about to applying a class over element based on screen resolution.
Markup
<div class="row itemsBlock">
<div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
<img class="itemImage" src="{{item.image}}" />
<span class=itemitle">{{item.title}}</span>
</div>
</div>
Note: The Bootstrap v4 grid system has five tiers of classes: xs
(extra small), sm (small), md (medium), lg (large), and xl (extra
large). You can use nearly any combination of these classes to create
more dynamic and flexible layouts.
I am interested in making HTML5 page with page scrolling like this one: http://www.apple.com/iphone-5s/
I would be grateful is someone could point out how this scrolling is made and/or what frameworks are involved or could reach identical result.
It is easy.
Make bind to mouse scroll, and create slides.
<div class="b-slider">
<div class="b-sider__item">
Item 1
</div>
<div class="b-sider__item">
Item 2
</div>
<div class="b-sider__item">
Item 3
</div>
<div class="b-sider__item">
Item 4
</div>
<div class="b-sider__item">
Item 5
</div>
</div>
And use jcarousel slider plugin with vertical scroll options
$('.b-slider').jcarousel('next');
So I need to create a flipping image almost exactly like this.
But the difference is what if I want several buttons and each one flips to a specific face. Lets say I want 4 buttons labelled 1, 2, 3 and 4, and I want 4 different card faces, each a different color with the corresponding number on the face. So the page will load with face 1 showing and clicking on button 1 will do nothing, but clicking on button 3 will flip to a face showing the number 3 and so on etc etc. Any ideas?
Simple solution
Start with the same approach as in the online example you mentioned in the question, but before starting the rotation, replace the contents of the "back side" with the contents of the element you want to rotate into view.
The contents of each element should be stored separately in the HTML, and retrieved when needed.
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">1</div>
</li>
<li>
<div class="content content2">2</div>
</li>
<li>
<div class="content content3">3</div>
</li>
<li>
<div class="content content4">4</div>
</li>
</ul>
</div>
jQuery demo
The demo should work fine in all recent versions of Firefox, Safari, and Chrome.
It looks like IE10 doesn't fully support the backface-visibility property (with or without the -ms- prefix). This prevents both the demo and the online example from working properly in IE10.
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?