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.
Related
I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>
<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>
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 -->
Say I have a carousel and a container right under it. How do i make the container scroll ontop of the carousel? Sort of like a parallax effect I guess.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
<div >
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<p>123</p>
</div>
<div class="col-lg-4">
<p>456</p>
</div>
<div class="col-lg-4">
<p>789</p>
</div>
</div>
</div>
something like in this site http://themenectar.com/demo/salient-promo/
I think you can use this codepen idea : http://codepen.io/JTParrett/pen/BkDie
You will set it up like that :
<div class="box" data-scroll-speed="2">S</div>
The highest data-scroll-speed is, the slowest it will scroll.
You'll require jQuery, but the result would be something like that :
https://jsfiddle.net/mk0hdtsj/2
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.
how can I create some space between grid spans in Twitter bootstrap? I am using margin or padding, but both of them push the last grid span to a new line and breaks the layout. Here is the jsfiddle:
http://jsfiddle.net/jUQEc/1/
And, some markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="posts">
<div class="span6 post">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 post">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Two things:
You need to add the container-fluid class to the container. This will keep the left/right margins in tact when you bring the screen in.
Add a box-sizing:border-box to the .box class to tell the browser to keep all padding and margins inside the width defined by the span classes.
Lastly, you have a header tag inside the container but not in a row/span. You will probably get more consistent rendering if you wrap it up.
Here is a fiddle: http://jsfiddle.net/8RVx6/