I have 3 divs of the same size stacked on each other. Each of the divs has got the size of the screen which is visualized on the image with the black frame.
What I would like to achieve is to make div2 visible at the beginning. This is means div2 is filling the screen and the other divs are just visible when I am swiping up or down.
Right now, div1 is visible at the beginning since it is the first div.
Any help?
<div id="wrapper" style="overflow:hidden" layout="column">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Try this library:
https://github.com/alvarotrigo/fullPage.js
HTML
<div id="fullpage">
<div class="section" id="div1">a</div>
<div class="section active" id="div2">b</div>
<div class="section" id="div3">c</div>
</div>
CSS
#fullpage>div{
height: 100vh;
}
In order to view the second square on page load add active class to the div.
Hope it helps.
Related
I have a HTML grid and 4 divs in. On one hand I want to apply a single background image on these one. On the other hand, I want to translate the divs on scroll.
It works but when I scroll, the background image is not extended anymore.
<html>
<body>
<section id="home">
<div id="bloc1" class="bloc"> </div>
<div id="bloc2" class="bloc"> </div>
<div id="bloc3" class="bloc"> </div>
<div id="bloc4" class="bloc"> </div>
</section>
</body>
</html>
JS & CSS on JSFiddle : https://jsfiddle.net/SO3HSBF5/84wmv1cn/4/
Anyone can help me ?
I have 2 divs on a same row. When the div2 which is on right is removed I want the div1 on left to take full width.
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">Div1/div>
<div class="col-sm-6" style="background-color:lavenderblush;">Div2</div>
</div>
I am using bootstrap for grid and resposivity. Is there any way I could achieve it with bootstrap?
You could write a css selector that sets the width of col-sm-6 to be 100% it is both the first-child and last-child
.row .col-sm-6:first-child:last-child {
width:100%
}
If you are using bootstrap4, then you can skip the column size declaration and instead just do.
<div class="row">
<div class="col-sm" style="background-color:lavender;">Div1/div>
<div class="col-sm" style="background-color:lavenderblush;">Div2</div>
</div>
How to determine elements in the visible region of Div?
There are 2 div within main div.
The wrapper div contains many child div with overflow property.
On scrolling the document div i need to find out the visible
children div in the wrapper.
Below is HTML structure
<div class="main">
<div class="wrapper">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="document"></div>
</div>
Is there any possibility for finding the number of visible div in the window?
Try this:
$('wrapperdivselector').find("div:visible");
for length:
$('wrapperdivselector').find("div:visible").length;
Demo
use :visible try this
$('.orginalDiv1>.waprrer div:visible').someCommand()
or
$('.orginalDiv1>.waprrer').find('div:visible').lenght()
I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>
I have divs on my page as below;
<div id="container">
<div id="header">
</div>
<div id="sidebar">
<div id="switch"></div>
<div id="list"></div>
</div>
<div id="viewer"></div>
<div id="footer">
</div>
</div>
div switch is a button meant to shrink sidebar and to stretchviewer. I want the sidebar to shrink completely to the left and to stretch viewer to the remaining space. But still I am getting a 5px wide gap. You can have a look at my fiddle here. How can I solve this??
Thanks in advance...:)
blasteralfred
Add this line too your css:
#list {padding-left: 0;}
Remove the padding-left in #list and the whitespace is gone.