I am trying to change the CSS below so that I don't need the JavaScript snippet to achieve the same desired effect.
The JavaScript:
<script>
$(function() {
var pageCount = 2;
var pageWidth = 450;
$("#pages").css('width', window.innerWidth * pageCount);
$(".page").css('margin-right', window.innerWidth - pageWidth);
});
</script>
The HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#pages {
position: absolute;
top: 50%;
height: 200px;
width: 30000px;
margin-top: -100px;
left: 50%;
}
.page {
margin-left: -150px;
width: 300px;
background: blue;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="pages">
<div class="page">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
<div class="page">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
<div class="page">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</body>
</html>
Is there any way I can remove this JavaScript and do the same thing in CSS only? Originally I tried playing around with margin-right: 100% but couldn't get it to work.
Code Pen: http://codepen.io/anon/pen/gfxeh
Yes. You can use the following CSS:
.page {
counter-increment:section;
margin-left: -150px;
width: 300px;
background: blue;
float: left;
margin-right: calc(100%/3 - 300px);
}
#pages {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
left: 50%;
width: calc(100%*3);
}
Alternative solution that works with any number of pages and compatible with older browsers (calc is a new CSS feature)
There is however a limitation: the scroll bar is in the pages element. (there is a way to work around this which I will show bellow)
HTML
<div id="pages">
<div class="page">
<div class="content">
<h1>Page 1</h1>
<p>This is the first page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 2</h1>
<p>This is the second page</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>Page 3</h1>
<p>This is the third page</p>
</div>
</div>
</div>
CSS
#pages {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.page {
width: 100%;
display: inline-block;
}
.page > .content {
width: 300px;
background: blue;
margin: 0 auto;
}
See Code Pen
If your page will only contain the carousel, you can replace #pages with body so that the scroll bar is the main scrollbar
See Code Pen
By the way, the CSS in the marked solution is not working. It should be
.page {
...
margin-right: calc(100%/3 - 300px);
}
Code Pen for the correction
Related
I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr
I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
I've built a quick block which allows someone to zoom in on an image and then drag (pan and zoom).
To do this, I have used panzoom:
jQuery(document).ready(function( $ ) {
$("#panzoom").panzoom({
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: 'invert',
});
});
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
The above works fine on desktop. But on mobile, since the user users the screen to scroll, when trying to drag the image across, it "stutters".
Difficult to explain, best demo'd on an actual device.
Any ideas on what the issue is here?
Use this library instead, it's more stable
// just grab a DOM element
const element = document.querySelector('.wrap');
// And pass it to panzoom
panzoom(element);
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src='https://unpkg.com/panzoom#8.7.3/dist/panzoom.min.js'></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
I've looked at other questions, with no success...
I'm just trying to keep the page scrolling slowly after load, follows the code:
CSS (Most of CSS is placed as embed files, this is just the styles applied to the content objects):
<style type="text/css">
.content {
width: 98%;
left: 1%;
margin-top: -10px;
}
.block_1 {
position: relative;
width: 18.5%;
height: 150px;
margin-left: 1%;
margin-top: 1%;
float: left;
background: #FFF;
border: 3px solid #999;
}
</style>
JS:
<script type="text/javascript">
$(function(){
$.slidebars({
siteClose: true
});
});
// Loading
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
});
$('html,body').animate({scrollTop: $('#end').offset().top});
</script>
HTML
<body>
<div class="loading">
<div class="loading_msg">Carregando dados, aguarde...</div>
<div class="loading_img"><img src="img/loader.gif" /></div>
</div>
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="300px"</div>
<div id="sb-site">
<div class="div_bg_header"><?php show_header_menu_dashboard($p_title); ?></div>
<div class="content" id="content">
<div class="block_1"></div>
<div class="block_1"></div>
...
<a id="end"></a>
</div>
</div>
</body>
Grateful
correct as
$(document).ready(function(){
$(window).load(function(){
$('.loading').fadeOut(700);
});
$('html,body').animate({scrollTop:$('#end').offset().top});
});
in your CSS please set some height to the body,
body {
height: 1500px;
}
and it will work well. current offset is just 16. so for visible scrolling
please add the following style.
#end {
margin-top: 500px;
display: block;
}
I want to create a div that contains a grid generated with css, and that div appears behind other div, that contains the UI.
That is that one div in the body appears behind the other div that contains the user interface.
The div that is behind, must contain a grid drawing using CSS.
<head>
<style type="text/css">
#divcontainer {
width: 100%;
height: 100%;
position: absolute;
z-index: -999;
background-color: #bababa;
}
#divinnercontainer {
width: 10%;
height: 20%;
outline: 1px solid;
float: left;
}
</style>
</head>
<body>
<div class="divcontainer">
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
<div class="divinnercontainer"></div>
</div>
<div style="z-index:999">
<!-- UI -->
</div>
This is my code, but I don't see any grid, what I'm doing wrong?
Thanks in advance
The problem is because you use #divcontainer and #divinnercontainer instead of .divcontainer and .divinnercontainer.
you mixed up css classes with css ids.
You simply need to change
#divcontainer {
...
}
#divinnercontainer {
...
}
to
.divcontainer {
....
}
.divinnercontainer {
....
}
# is for id not for class
.divcontainer {
width: 100%;
height: 100%;
position: absolute;
z-index: -999;
background-color: #bababa;
}
.divinnercontainer {
width: 10%;
height: 20%;
outline: 1px solid;
float: left;
}
CodePen
in css is #divinnercontainer, but you call a divinnercontainer as a class in html
Your just need to fix the class name in your css :
#divcontainer to .divcontainer
#divinnercontainer to .divinnercontainer
I have two divs, 'content-left' and 'content-right'. The content-left div can vary in height. The content-right div has a constant height.
UPDATE: content-left can not only vary in size, but it can vary in size from minute to minute, depending on what the user does.
I wish to have content-left contain a div scroll-bar. I dont want the browser-window itself to have a scroll bar.
I want the content of the content-right div to be always visible. content-right should never scroll off the page.
I came up with the code below, but I think it could be better.
I tested this in firefox and chrome. Internet Explorer is irrelevant to me.
In essence, I merely "hide" the left div, determine the difference between the top of the right div and the window size, and set the max-height property of the left-div. The scroll then happens by the overflow:auto
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
processLeftDiv();
});
$(window).resize(function() {
processLeftDiv();
});
function processLeftDiv() {
$('#content-left').hide();
windowHeight = $(window).height() ;
positionTop = $('#content-right').position().top ;
$('#content-left').css('max-height', ( windowHeight - ( positionTop + 20 ) ) );
// the 20 is padding
$('#content-left').show();
}
</script>
<title>Test</title>
<style type="text/css">
#header
{
width: 100%;
background: red;
}
#content-left
{
float: left;
margin-bottom: 5px;
width: 50%;
height: 100%;
max-height: 100%;
overflow: auto;
background: blue;
display:none;
}
#content-right
{
float: right;
width: 50%;
background: green;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="body">
<div id="content-left">
Content left
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
repeated 100 times
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
<p>Blah Blah</p>
</div><!--close left div-->
<div id="content-right">
Content
<p>Content stuff</p>
</div><!--close right div-->
</div><!--close body div-->
</body>
</html>
Thoughts?
No need to complicate this with javascript, you can use CSS only, much more simple. Here's how you do it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
.header
{
width: 100%;
height: 100px;
background: red;
}
.wrapper
{
position: absolute;
top: 100px;
bottom: 0;
left: 0;
width: 100%;
}
.content-left
{
float: left;
width: 50%;
height: 100%;
overflow: auto;
background: blue;
}
.content-right
{
float: left;
width: 50%;
height: 100%;
background: green;
}
</style>
</head>
<body>
<div class="header">
<p>Header stuff</p>
</div>
<div class="wrapper">
<div class="content-left">
Content left
</div>
<div class="content-right">
Content right
</div>
</div>
</body>
</html>
Just a few tips since you're a newbie:
always try to use classes instead of ids in your html/css, your life will be much more simple in the long run (ids should only be used if you want to bind some javascript to just one element, no other good reasons imo)
always use some CSS reset block (I used the most simple one here on body tag). I know this is just an example, but in real applications this is a must. Google it, there are some great ones out there.