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/
Related
i've been looking around a lot on how to do different carousels, but i'm struggling to find a resource that teaches me what it actually does instead of just throwing code at me. Time wasted on misleading videos where you have to download their special script at the end! :-(
i want to understand it first in vanilla JS/Css first, and then work towards understanding Pug/Scss.
i have the below:
.MenuContainer {
position: relative;
width: 300px;
height: 175px;
background-color: black;
border-radius: 10px;
}
.Imagebox {
height: 150px;
margin-top: 15px;
margin-bottom: 27px;
bottom: -17px;
width: 260px;
margin-left: 20px;
margin-right: 15px;
background-color: lavender;
align-self: center;
position: absolute;
border-radius: 5px;
}
.ListReel {
position: inherit;
height: 120px;
background-color: white;
width: 217px;
bottom: 8px;
margin-left: 20px;
display: flex;
flex-direction: row;
overflow-x: hidden;
justify-content: space-evenly;
}
.fa-chevron-left {
position: inherit;
left: 30px;
bottom: 93px;
font-size: 1.5em;
}
.fa-chevron-right {
position: inherit;
left: 236px;
bottom: 93px;
font-size: 1.5em;
}
.MenuItem {
position: inherit;
height: 85px;
width: 85px;
top: 1px;
position: inherit;
border-color: lawngreen;
border-style: solid;
border-width: 1px;
display: table-row;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a427ef628d.js" crossorigin="anonymous"></script>
<script src="../Scripts/JQuery"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../Scripts/jquery-ui.min.css">
<link rel="stylesheet" href="Test.css">
<title>TESTING</title>
</head>
<body>
<h1>Hello!</h1>
<div class="MenuContainer">
<h5 style="text-align: center; margin-top: 5px; color: white;">Select Item</h5>
<div class="Imagebox"></div>
<ul class=ListReel>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
</ul>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</body>
</html>
I tried going my own way but i'm completely stuck - i envision that the green boxes will need to be spaced evenly, and in a straight row, the items that fall outside the box, won't be visisble and the scroll will cycle the items "Carousel" style..
Ive tried a lot of things so far and i cant even seem to be able to flex my container/green boxes across let alone make a start on the animation!
Does anyone have any tips or resources or code ideas that can point me in the correct direction? preferably well explained tutorials? please?
Many Thanks
Let's start by thinking what the carousel should do. It should roll new images / items from the sides of the viewing container, right?
This means we want our carousel items to be full width of the carousel container, so the items fill the container and rest are left hanging out. Now we don't want to see the other carousel items outside the carousel and for that we can use overflow: hidden on the carousel container. This CSS declaration means that everything that doesn't fit inside the carousel container is hidden.
The other crucial thing is to lay out the carousel items next to eachother, so that when we move them they appear from the sides.
There are of course multiple ways to achieve this but here's what I would've done.
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
We have a container for the carousel (class: carousel) and the items within it (class carousel-item). Here I have added also a "carousel-item-wrapper" element here. Its job is to contain all the carousel items so we can just slide this bad boy around and the displayed carousel item will change.
Now for the CSS of this mf.
.carousel {
width: 600px;
height: 200px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 200px;
}
Let's start with .carousel and .carousel-item.
We set defined width and height attributes for the carousel container according to our needs. We want the same width and height to be applied to carousel-item so they fill the carousel window. We also want to set the aforementioned overflow: hidden on the .carousel container so the other items are not displayed when they don't need to.
Now I have set the width of the carousel items with min-width: 600px. The reason is that the carousel-item-wrapper where we have the items uses flexbox layout display: flex. If the items don't have a min-width attribute set, the flexbox would shrink all of them until they all fit side by side inside the carousel container. We don't want that!
Now we get to talk about the mystical #carousel-item-wrapper element. Firstly, it has flex properties needed for horizontal layout: display: flex to actually use flexbox and flex-direction: row (which is default actually..) which tells flexbox to align the items next to eachother.
Then I have set the wrapper element position to relative which means that if no other settings (left, right, top, bottom) is set the element will be where it would naturally go. The reasoning for relative positioning is that we can then change the left (or right) value to move the long horizontal list of carousel items so that the element we want will be aligned with the .carousel element (the "display window" so to speak).
Lastly, it has transitition: left 0.5s which tells the browser that any time the left attribute is changed (usually by JS), the browser will animate the change of the value. That is, if we first have left: 0px and change it to left: -600px (sliding the carousel one item over, as my carousel has width of 600px) the change will be animated (0.5s refers to the time you want it to take)
Now we have all of the HTML and CSS set up and if you change the left property of #carousel-item-wrapper it will move and animate the carousel.
Only thing we need is to create some JS to move it around. I have opted for a button which just moves the carousel one item.
I wasn't going to explain the JS but seeing that this answer got so long, I might as well do that as well.
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
First we start by getting a reference to the wrapper element with document.getElementById. We can use this to read the current value of left attribute on the element and change it. carouselWrapper.style.left is the value of the left property and slice(0, -2), well you can read up on it on your own but here it just strips the "px" from the value (because the value of left is a string of <value>px. Next we want to subtract carousel width from this (so the items slide up correctly). I also used the modulo operator, which is just remainder division. This will mean that once I have subtracted too much, it will wrap over. Now the only thing left is to apply this new value of left to the wrapper.
All in all the implementation would look a bit like this:
(EDIT: I change height to be 100px instead of 200px to make it fit inside the run code snippet window)
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
.carousel {
width: 600px;
height: 100px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
<button role="button" onclick="moveCarousel()">Move carousel</button>
</body>
</html>
One quick thing before I answer your question: try and post Minimum Working Examples (MWEs) on stackoverflow, because a) this will make your answer more useful to others; b) because it will help you isolate and debug. To go from full website to MWE, remove stuff until only the problem remains, and none of the other stuff.
Now:
I'm not sure whether you understand the implications of display:flex on .ListReel. This is a flexbox, a web technology that allows simplified formatting of things, and you may have seen it around a few tutorials. But flexbox setups require a bit more than just display:flex. You can read more here: CSS-Tricks post on Flexbox (not mine but i regularly use it)
For starters, try adding flex: 0 0 100% to your .MenuItem, which tells the browser that you want your carousel menu items to take up 100% of the width of the .ListReel. Then, for the moment, set overflow-x to auto, which will show the scrollbar.
Later you might not want the scrollbar; so you can set overflow-x back to hidden. I will assume that you know some javascript - the next step would be to add some javascript to make it work:
<script>
function moveTheListItems(){
var listReel = document.getElementsByClassName("ListReel")[0]; // get a reference to the listReel
listReel.scrollBy(listReel.clientWidth,0); // scroll it to reveal the next frame
}
setInterval(moveTheListItems,500); // run this function every 500ms = half a second
</script>
Hope it helps!
I've seen some custom Scrollbard but don't work for what I need...
I have a div element with dynamic text, sometimes there is lots of text so scroll bars shows up, I wonder if is possible to overflow: hidden; and have an image (arrow pointing down) that when clicked, the div will scroll down normally like when using the browsers scrollbar.
I have seen lots of this: https://grsmto.github.io/simplebar, all have scroll bars on the side, none has what I want.
Here it is (only the basics):
function scrollDown() {
var cuttentOffsetTop = $('#inner').offset().top
$('#inner').offset({top: (cuttentOffsetTop - 10)})
}
#container {
width: 100%;
height: 300px;
background-color: gray;
overflow-y: hidden;
position: relative;
}
.item {
width: 100%;
height: 100px;
background-color: violet;
}
.item + .item {
margin-top: 10px;
}
#scroll-down {
background-color: forestgreen;
color: white;
margin-bottom: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-down" onclick="scrollDown()">Click here to scroll down</div>
<div id="container">
<div id="inner">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
If you need an explanation - just ask.
Have you actually attempted to create this? Provide code that you have attempted so that we may edit that, as opposed to writing the whole thing for you. You didn't make it entirely clear if you wanted to jump down to a position, slowly scroll down while the button is held down, or what exactly so I'll provide a few different types.
window.scrollTo(0, 100);
If you know how far down you want to jump, you could use this. Alternately, using HTML you can do the following to jump to a specific part of a page.
Jump to element with id jumpLocation
You just have to google it better. Look at element.scrollTop method, more here. And a thread from stackoverflow..
Any ideas how to fix this problem: On a page with TOC (table of contents) with links pointing to hashtags within the same page, when the browser scrolls down other fixed position elements hide it. The browser should scroll further down to avoid being hidden by the fixed elements.
Fiddle to demonstrate this problem: https://jsfiddle.net/fcro6mth/ Click Section One or Section Two - the browser scrolls down to it but its hidden by the fixed header
Solution with JS: https://jsfiddle.net/fcro6mth/1/
Can you think of any solution that doesn’t involve JS?
Code from JS fiddle:
HTML:
<header>
This is the fixed position header
<nav>
Section One
Section Two
Section Three
</nav>
</header>
<div class="body">
This is the body.
<section id="section1">This is section one</section>
<section id="section2">This is section two</section>
<section id="section3">This is section three</section>
</div>
CSS:
section {
background: lightgrey;
margin: 20px 0;
padding: 20px 10px;
height: 300px;
}
header {
background-color: grey;
position: fixed;
top: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
left: 0;
color: white;
}
.body {
margin: 70px 10px 0 10px;
}
JavaScript:
$("nav a").click(function (event) {
var $target = $(event.currentTarget),
$scrollToTarget = $($target.attr("href")),
$header = $("header"),
prop = {
scrollTop: $scrollToTarget.offset().top - $header.outerHeight(true)
},
speed = 1000;
$('html, body').animate(prop, speed);
});
Check this: https://stackoverflow.com/a/13555927/2112228
Nice example to make hidden anchors for offsetting your sections.
Updated version of your fiddle:
https://jsfiddle.net/fcro6mth/4/
Solution
I wrapped your sections in div-wrappers gave them the IDs, padded them down and pulled them back up with a negative margin.
This results in the exact same appearance, but the links do what you want them to do.
Example:
HTML:
<div id="section1" class="wrapper">
<section >This is section one</section>
</div>
CSS:
.wrapper {
padding-top: 50px;
margin-top: -50px;
}
I have struggled with this issue a lot in designing a webpage with a combined banner / navbar of about 300px fixed at the top of a page full of short items linked to by anchor links from the website's home page.
The problem I have found with the "margin-top: -XXpx; padding-top: XXpx" approach is that the invisible padding overlaid the preceding item, meaning that active content (ie. links) were blocked. I overcame this by applying positioning to the anchored elements and setting the z-index so that the first item was on top of the stack with each subsequent item lower in the stack - like this:
CSS
.anchored-element {
padding-top: 300px;
margin-top: -300px;
position: relative;
}
HTML
<div class="anchored-element" style="z-index: 99">FIRST ITEM</div>
<div class="anchored-element" style="z-index: 98">SECOND ITEM</div>
<div class="anchored-element" style="z-index: 97">THIRD ITEM</div>
... etc
This provided a fix that worked for me across Firefox, Safari and Chrome on my desktop, and on my iOS devices. I hope this helps others tackle this very frustrating issue in bootstrap!
Trying to get a DIV to "float" to the bottom of the div its in. I've got the position set to relative on the parent div and kid, and bottom to 0 on the kid; but it still just sits at the top in the middle.
Parent DIV:
.detailsContainer
{
width: 100%;
height: 30%;
overflow: hidden;
position: relative;
background-color: blue;
}
Kid DIV
.obutton
{
text-align: center;
font-weight: bold;
width: 80%;
height: 29px;
background:rgba(204,204,204,0);
position:relative;
bottom: 0;
display: inline-block;
color: #666;
}
Current actual setup:
<div class="detailsContainer">
<a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
<div class="detailview"><b>Book Details<br></a></div>
<div id="BookDetails'.$row->BookID.'" class="hidden">
<table>
<tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
<td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
<tr><td>Awards </td><td>'.$row->Awards.'</td>
<td>Film</td><td>'.$row->Film.'</td></tr>
</table>
</div>
';?>
<br><center><a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div></a></center>
<div id="light2" class="white_content"></div>
<div id="fade" class="black_overlay"></div>
</div>
Its kind of a lot to post for this, but want to make sure nothing is interfering that you guys might spot. It jumps out of php near the bottom, I'll post the entire article if you think the issue might be else where.
I tried to make a jsfiddle of it, but there is so much php and variables that by time I gutted it, it'd just be 2 normal divs, having lost its uniqueness and the issue will probably have been deleted.
Thanks -Tom
.obutton position needs to be absolute... for bottom to work the way you're intending.
I have a PNG image of a character, and I want something like that:
http://www.swfcabin.com/open/1364482220.
If someone clicks on a part of the character's body, it'll be "selected".
The question is - how can I do that. I don't want to use more images (because I have multiple characters), I want to use CSS only.
I tried this: http://jsfiddle.net/eRVpL/, but the green background appear above the white background, and I want it to be only above the character.
The code:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
<span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }
.character > span {
display: block;
width: 200px;
height: 30%;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
}
img {
max-width: 200px;
}
</style>
You can make this work with CSS masks, although they are currently only supported in WebKit browsers: http://caniuse.com/#feat=css-masks
http://jsfiddle.net/eRVpL/3/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask"></div>
</div>
CSS:
.green-mask {
height: 200px;
width: 508px;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked div:
http://jsfiddle.net/eRVpL/11/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask">
<div class="filler"></div>
</div>
</div>
CSS:
.filler {
background-color: rgba(160, 255, 97, 0.3);
height: 200px;
margin-top: 200px;
width: 100%;
}
.green-mask {
position: absolute;
width: 508px;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.
Currently there is no CSS-only means of accomplishing this. There is a specification for compositing and blending with CSS that's in the works, but it currently isn't being supported enough to be used in a product just yet. You can read-up on the spec here: http://www.w3.org/TR/compositing/
With this specification, we could set the blend-mode of your element to "screen", "overlay", or "lighten" which would make your character be green but the background would remain white. Unfortunately, this isn't possible just yet.
The best way would be, as jcubic said in one of your comments, "You need to use a mask, image that will be exactly the same but the character transparent".
Good luck!
Try using z-index for getting what you want. You'll be able to make the object appear to be hidden on a certain page until you bring it up with a mouse click or hover. You can also make a green image that's basically a silhouette and cut it up into three different portions, give them a little bit of exact positioning (each with their own division) and have a little z-index, then you've got yourself that. You might also want to cut up the actual character into three parts to make it easier.