I'm attempting to roll divs over one another as your scroll down a page using Skrollr. I've gotten the desired effect to work with two divs, but when I try to make it work with a 3rd, only the first and last div seem to work. I'm thinking this is because I'm not fully understanding how the data-anchor-target attribute in Skrollr works. Here is the HTML I'm attempting to use:
<div id="skrollr-body">
<div id="q1" data-0="top:0%;">
Text
</div>
<div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text2
</div>
<div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text3
</div>
</div>
And the CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#skrollr-body {
width:100%;
height:100%;
position:fixed;
}
#skrollr-body > div {
overflow:hidden;
position:absolute;
height: 100%;
width: 100%;
}
#q1 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q2 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q3 {
background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
background-size: cover;
}
Fiddle here
What am I missing that is not allowing all 3 divs to behave as expected, instead of just the first and last?
Thanks.
Here's an example without anchor-target http://jsfiddle.net/YMYTy/1/
<div id="skrollr-body">
<div id="q1">
Text
</div>
<div id="q2" data-bottom-top="top:100%;" data-top="top:0%;">
Text2
</div>
<div id="q3" data-bottom-top="top:100%;" data-top="top:0%;">
Text3
</div>
</div>
It's different than what I described, but works.
There's this open feature request which, once implemented, will make this much easier https://github.com/Prinzhorn/skrollr/issues/185 You will then be able to use data-100p and data-200p to have animations after you scrolled down one or two times the height of the viewport.
Related
I have a rather annoying problem at the moment. I have tried numerous threads in here on how to set a grid of images to the same size no matter what size the image has to begin with. But it doesn't work and it's driving me crazy.
The results I'm getting looks like this:
My HTML looks like this:
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search Movie!</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
</form>
</div>
</div>
JavaScript:
function getMovies(movieSearched) {
axios.get('http://www.omdbapi.com?s='+movieSearched+'&apikey='+myKey).then((response) => {
movies = response.data.Search;
var output = ``;
$.each(movies, (index, movie) => {
output+= `
<div class="col-md-4">
<div class="box">
<img src="${movie.Poster}" height="250">
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
$('#movies').html(output);
});
and CSS:
.box {
padding: 5px;
text-align: center;
overflow: hidden;
}
.box img {
margin-bottom: 30px;
display: grid;
width: 100%;
height: 250px;
object-fit: scale-down;
object-position: center;
}
#movieDiv {
display: grid;
}
#movies img, #movie img {
width: 100%;
height: 100%;
}
Maybe it has to do with the fact that I'm setting the images from the JS to the #movieDiv? Im new to this so I'm not really experienced. But how do I make the images the same size?
Thanks!
to fix the issue with the hight you can simply wrap your whole content inside a div and set the display to flex , it will automatically set the child div to the same hight no mater the size of the content inside of them , and then inside those div you can put your images
.container{
display:flex;
}
here is a codepen link
https://codepen.io/anon/pen/dmWQgm
Using bootstrap, I'm trying to set a background-image for the first row of an html page. The .background CSS class, contains info on setting up the background image. When I make it a class of <body>, it works fine and fills the whole page with a background image. When I try to put it in the first <div>, though, The image is not displayed at all.
From what I understand, you can set a background image for a <div>. What am I doing incorrectly that is making this not work?
CSS:
.background
{
background-image : url("image.jpg");
background-repeat : no-repeat;
background-size : cover;
}
HTML:
<body>
<div class ="row background">
<div class="col-xs-12">
<h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1>
<input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input>
</div>
</div>
<!-- start new row -->
<div class="row">
<div class="col-xs-3">
<!-- img> /img -->
</div>
<div class="col-xs-9">
<p>
Blob
</p>
</div>
<script>
$("#text").fadeIn(6000);
window.setTimeout(function ()
{
$("#down").fadeIn(6000);
}, 6000);
</script>
</body>
Also, here is an attempt at putting it in JSFiddle: https://jsfiddle.net/yc1jnp6o/2/. For some reason Neither the image (which I changed for the fiddle) or the headline will display in the fiddle. This isn't the case on the apache server I have set up.
Don't use width, because he has used col-xs-12 in row , that means he want to 100% width
.background {
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
min-height:200px;
}
You need to declare width and height when using background:
.background {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
May be you can make use of pseudo code
.row.background:before{
display:block;
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image : url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat : no-repeat;
background-size : cover;
z-index:-1;
}
it covers whole row class
Check the fiddle
I have two images, each are of five stars side by side, but one is yellow while the other is blue. Something like the below (grabbed from Google):
I want to overlap the images on top of each other, and "hide" part of the top image depending on a user's review score of a product.
For example: say the images are 50x10px. I overlap them such that the yellow is on top of the blue. A review comes in 5/5; the image is unchanged. A review comes in 4/5; display only the first 40px of the yellow star image, leaving the remaining 10px to display the blue star (so it'll appear as 4 yellow, 1 blue star in the same image). I can just hide part of the yellow image to get a full range 0/5 to 5/5 using only two images.
How can this be accomplished using HTML, CSS, PHP, and/or JS?
Use just use a background image and set the width. (I just used your image, but a better image would make it easier)
.rating {
background-image: url(http://i.stack.imgur.com/gDqPE.png);
height: 100px;
width: 100px;
}
.one-star {
width: 115px;
}
.one-half-star {
width: 150px;
}
.two-star {
width: 190px;
}
.two-half-star {
width: 225px;
}
.three-star {
width: 265px;
}
.three-half-star {
width: 304px;
}
.four-star {
width: 340px;
}
.four-half-star {
width: 378px;
}
.five-star {
width: 414px;
}
<div class="rating one-star"></div>
<div class="rating one-half-star"></div>
<div class="rating two-star"></div>
<div class="rating two-half-star"></div>
<div class="rating three-star"></div>
<div class="rating three-half-star"></div>
<div class="rating four-star"></div>
<div class="rating four-half-star"></div>
<div class="rating five-star"></div>
In your CSS, you can crop your img with CSS Clip Property as:
.Yellow4Stars {
position: absolute;
clip: rect(0px,40px,10px,0px);
}
.Yellow3Stars {
position: absolute;
clip: rect(0px,30px,10px,0px);
}
Assuming the width of the full 5 stars is 50px and the height is 10px.
Why don't you try this:
<html>
<head>
<style type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>
<body>
<img src="http://path-to-image" width="184" height="46" class="under" />
<img src="http://path-to-image" width="184" height="46" class="over" />
</body>
adjust the css for proper positioning.
Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.
HTML:
<body>
<div id="one" data-stellar-ratio=".2">
<p>This is the first div.</p>
</div>
<div id="two" data-stellar-ratio="1">
<p>This is the second one.</p>
</div>
<div id="three">
<p>Third one!</p>
</div>
<div id="four">
<p>Fourth and last.</p>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
#one, #two, #three, #four {
position: absolute;
height: 100%;
width: 100%;
font-size: 5em;
}
p {
margin: 1em;
width: 60%;
}
#one {
background: red;
}
#two {
background: blue;
top: 100%;
}
#three {
background: green;
top: 200%;
}
#four {
background: yellow;
top: 300%;
}
I was able to throw something together using just jQuery and no other libraries. It relies on relative positioning. Basically, everything scrolls normally until one of the slides reaches the top of the browser window. Once it tries to scroll past the top of the browser window, I add an offset to the slide's vertical position to keep it from moving up any further. When scrolling back the other way, I simply subtract from this offset until it hits 0 at which point it begins to scroll normally again.
I'm sure the code can be cleaned up but I added a ton of comments so hopefully it's readable. If you have any questions or you would like me to modify it to better suit your needs, let me know. Here's a fiddle with the solution I came up with:
http://jsfiddle.net/jwnace/jhxfe2gg/
You can also see a full page demo of the same code here:
http://joenace.com/slides/
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>