I'm using foundation (5) to layout my grid. Foundation uses equalizer to enable you to measure columns against each other. I'm using this to good effect but it only gets me so far...
When I nest my rows I get a gap - really I need a flexible height on the quote box that fills the gap(see image). I have tried using JS to match the height of the container's equalized value but it just grows the box continually when the window is resized.
Does anyone have any advice on how to expand a div's height in a fluid responsive way so that it's (absolute positioned) content grows with it?
<!-- START Tier One -->
<div class="row" data-equalizer="foo" data-equalizer-mq="large-up">
<div class="large-4 large-push-8 medium-12 medium-push-12 small-12 columns" data-equalizer-watch="foo">
<div class="row" data-equalizer="tierOne" data-equalizer-mq="medium-only">
<div class="large-12 medium-6 small-12 columns">
<!-- Video -->
</div>
<div class="large-12 medium-6 small-12 columns case-study-col">
<div class="card show-for-medium-up case-study-parent" data-equalizer-watch="tierOne">
<a href="/case-studies/">
<div class="card__case-study case-study-child">
<div class="card__case-study-img" style="background-image:url('img/image.jpg');">
</div>
<div class="card__case-study-content">
<blockquote class="">
"<perch:content id="quote_featured" type="textarea" />"
<cite>
<perch:if exists="quote_avatar_featured">
<img src="img/avatar.jpg">
</perch:if>
<div class="q-cite">
</div>
</cite>
</blockquote>
</div>
<div class="card__case-study-bg">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="large-8 large-pull-4 medium-12 medium-pull-12 small-12 columns" data-equalizer-watch="foo">
<div class="card">
<div class="row collapse">
<div class="large-12 medium-6 small-12 columns">
<div class="row collapse">
<div class="large-5 medium-12 small-12 columns">
<!-- news image -->
</div>
<div class="large-7 medium-12 small-12 columns">
<!-- news text -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Teir One -->
Related
I have a three section of my page that are inside fullpagejs. The middle page needs to contain a very tall div that is split in two columns. The left is the div that needs to follow right text that takes the entire height of div. But because the way the fullpage.js works(translate with css not actual scrolling i can't make div that is positioned fixed to behave like it should
HTML
<div class="section section-1 show-for-large">
section1 content
</div>
<div class="section section-2">
<div class="row">
<div class="small-12 medium-6 column">
<div class="row" id="pokemon">
<div class="small-5 medium-5 columns">
<img src="/">
</div>
<div class="small-7 medium-7 column">
<span class="title">
title
</span>
</div>
</div>
<div class="row hide-for-large">
<div class="small-12 columns">
<p>
text
</p>
</div>
</div>
</div>
<div class="small-12 medium-5 column">
<div>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="section section-3">
section3 content
</div>
<div class="section section-4 fp-auto-height">
section4 content
</div>
FULLPAGE JS
$('#fullpage').fullpage({
sectionSelector: '.section',
scrollOverflow: true,
verticalCentered: false,
normalScrollElements:'#pokemon',
css3: true,
});
I tried using plugins like http://stickyjs.com/ , and similar like it but the problem is they all work on principle of scrolling.
Use position:absolute instead of fixed. Then use position:relative for the section elements, so the absolute position will be related to the section.
I need a feature to finish my slider image. I've used Slick.js to build my slider and a little HTML and CSS to be displayed inside a modal that is fired up when the user clicks in an static image. Well, I need the first slide shown in the slider to be the one just clicked by the user. I think this is a very common feature in sliders of the world. But I haven't found the way of doing it after a lot of searching. I'm asking because maybe someone has used Slick before and he has had the same situation. I guess the setting I have to play with is initialSlide, but no idea how to store the reference of the image at the same time slider is initialized. I'm aware is a tricky problem but I'm asking just in case.Thank you in advanced
This is how I initialize the slider
<script>
$(document).ready(function(){
$('.slider-gallery').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1
});
$(".slick-prev").hide();
$(".slick-next").hide();
});
$('#prev').click(function(){
$(".slider-gallery").slick('slickNext');
});
$('#next').click(function(){
$(".slider-gallery").slick('slickPrev');
});
</script>
This is the html of the static gallery image
<div class="large-6 medium-6 small-12 columns">
<div class="main-img"><a href="#openGallery">
<img src="assets/images/2.png" alt=""></a>
</div>
<div class="thumbnails">
<img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt="">
<img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt="">
<div class="thumbnail-hover"><a href="#openGallery">
<div class="hover-gallery">23fotos</div>
<img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a>
</div>
</div>
And this the html of the slider
<div id="openGallery" class="item-gallery">
<div class="row">
X
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
</div>
<div class="large-10 medium-10 columns">
<div class="slider-gallery">
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/1.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/2.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/3.png">
</div>
</div>
</div>
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
</div>
</div>
</div>
One way to do so is to use the slickGoTo() function attached to each click on image.
<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)">
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">
Notes:
The first slide is 0, the second is 1 and so...
You are using Foundation which is awesome. You don't need to add medium-4 and large-4 as you did when you have small-4. The Foundation rule is that "small" = small and larger.
If this is not working try the following syntax instaed:
onclick="$('.slider-gallery').slick('slickGoTo', 0);"
This depends on the slick version you're using.
My problem is that I can't make Masonry work with my Bootstrap columns (grid).
Step 1 - I called for the Masonry in my <head> like so :
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
Step 2 - I wrote my bootstrap html (this is the part I want to apply Masonry on) :
<div class="row" id="container"> <!-- container begins -->
<div class="col-lg-3 col-md-6 item"> <!-- 1st column starts -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
</p>
<hr>
<div class="more">Read More</div>
<div class="share">Share me</div>
</section>
</div>
</div> <!-- 1st column ends -->
<div class="col-lg-3 col-md-6 item"> <!-- 2nd column starts -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
</p>
<hr>
<div class="more">Read More</div>
<div class="share">Share me</div>
</section>
</div>
</div> <!-- 2nd column ends -->
<div class="col-lg-3 col-md-6 item"> <!-- 2nd column starts -->
<div class="well clearfix">
<section>
<img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">
<h2 id="post">This is my wordpress post title</h2>
<div class="post-label">
<span class="label label-default">Aymen</span>
<span class="label label-default">Web Design</span>
<span class="label label-default">12-10-2014</span>
<span class="label label-default">Comments 24</span>
</div>
<hr>
<p id="post">
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
</p>
<hr>
<div class="more">Read More</div>
<div class="share">Share me</div>
</section>
</div>
</div> <!-- 2nd column ends -->
</div> <!-- container ends -->
Step 3 - I added the javascript code above </body> :
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
Step 4 I added .item class to col-lg-3 col-md-6 as yo ucan see in Step 1
But nothing happens, the columns don't take their right places as they should.
This all works, but since you're using Bootstrap, why are you setting the columns to a fixed width?
I would recommend something like this:
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: '.item',
itemSelector: '.item'
This will use Bootstrap's percentages for column widths (eg. 33.33333% for col-md-4 etc) rather than fixed pixel widths.
And just for the sake of clarity, the HTML needs to look something like this:
<div id="container">
<div class="row">
<div class="col-md-3 item">
Some content
</div>
<!--- More columns here as required --->
</div>
</div>
So I'm trying to do this example from Zurb, but when I create the pie chart (even when I copy and paste the code they have to show the example), the chart goes crazy and tries to fill up the entire page. I know that it tries to take up the entire width of the element it's under, but then when I resize the width of the element, the chart only shrinks in size, but doesn't move back up, so ultimately, it's still taking up the entire space.
This is the main code:
<div style="margin-left: 15px">
<h4>Points: 3.75</h4>
<span>Rank 4</span>
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
</div>
My css which is under the head:
<link href="/res/css/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css"/>
And js which is on the bottom of the page:
<script src="/res/js/pizza.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/res/js/vendor/snapsvg.min.js"></script>
This is how it looks like:
Edit: Ok, so apparently when I name the id of the pie chart to 'donut', it works for some reason. I tested it by changing the ids, and only donut seems to work right now, but this won't work for me, because I have multiple pie charts needing to be shown.
Edit2: Seems like adding the style max-height: 480px seems to be a temporary fix.
`
Points: 3.75
Rank 4
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
'donut' is in your code in data-options
Your css class 'large-10 small-8 columns' is not defined in the pizza.css, maybe you need another file like : foundation.css.
If you don't want to add that big file, try to replace or just create a new css class
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
By
<div style="width: 200px; height: 200px;">
<div id="example1"></div>
</div>
or by the size that you want.
I want to acheive the following layout,
Desktop:
[----A---][-B-]
[-C-][-D-][-E-]
Mobile:
[----- A -----]
[---B--][--C--]
[---D--][--E--]
I can get 'B' to jump down to a new row in the mobile version and take up half the space, but I can't get it to share with 'C' - here is what happens:
[----- A -----]
[---B--]
[--C--][---D--]
[---E--]
How can I acheive the desired layout? I am using Zurb Foundation 4 framework.
The markup is as follows
<div class="row">
<div class="large-8 small-12 columns">
A
</div>
<div class="large-4 small-6 columns">
B
</div>
</div>
<div class="row">
<div class="large-4 small-6 columns">
C
</div>
<div class="large-4 small-6 columns">
D
</div>
<div class="large-4 small-6 columns">
E
</div>
</div>
Well as far as I see you can use following markup for your purpose (fiddle):
<div class="row">
<div class="large-8 small-12 columns">
A
</div>
<div class="large-4 small-6 columns">
B
</div>
<div class="large-4 small-6 columns">
C
</div>
<div class="large-4 small-6 columns">
D
</div>
<div class="large-4 small-6 columns">
E
</div>
</div>
Put everything in one .row.
Here's a demo.