say i have
<div id ="outer" class="outer">
<div id= "inner" class="inner">
//some stuff
</div>
</div>
the inner div has a dynamic height, it changes depending on what is inside the div. the outer div is just a container which is set to have the height of the window.
I want to set it so that the inner div is vertically centered within the outer div. Is there a way to do this easily in CSS or is JavaScript necessary?
THE SOLUTION I FOUND:
var container= document.getElementById("outer");
var inner= document.getElementById("inner");
var inHeight=inner.offsetHeight;
container.style.height=(window.innerHeight-10);
container.style.width=window.innerWidth;
var conHeight=container.offsetHeight;
inner.style.marginTop=((conHeight-inHeight)/2);
In case anyone else searching for a solution to the same problem, this worked for me.
emphasized text
try this out http://jsfiddle.net/gLChk/12/
but it won't be supported in IE<8 browsers. To make it work on all the browsers, you'll have to write a js which will find the height of .inner and apply these css properties
$(document).ready(function(){
var inner = $('.inner'),
ht = inner.height();
inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});
Hope this helps. :)
.outer {
display: table;
position: relative;
width:100%;
height:200px;
border:1px red solid;
}
.inner {
display: table-cell;
position: relative;
vertical-align: middle;
}
Try it with
.inner {
top: 50%;
bottom: 50%;
}
jsfiddle
greets
use:
.inner
{
margin-top:auto;
margin-bottom:auto;
}
Related
I have been trying to put an element to fixed position within a given scroll height with Javascript. Outside of this height range, the position should be back to relative.
Here is what I have done so far. The position:fixed is inside the about-option class. When it gets to 4680, the class is added.
How do I make it have a height end-point of 5800 i.e 4680 - 5800, and also remove the class outside this height range?
window.onscroll = function () {
myFunction();
};
function myFunction() {
if (
document.documentElement.scrollTop > 4680 ||
document.body.scrollTop > 4680
) {
document.getElementById("about-txt").classList.add("about-option");
} else {
document.getElementById("about-text").className = "";
}
}
css
.about-option {
position: fixed;
top: 20%;
width: 40%;
right: 7%;
I guess you are trying to do what position sticky does: once the element hits the window's top boundery it starts sticking and if you scroll to the inverse way, it goes back to move together with content. Like here:
https://codepen.io/elad2412/pen/QYLEdK
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
The trick part is to remember to add a container outside the sticky element, otherwise, it will not work.
I hope it helps!
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
So currently I have a div that houses an image. The css is setup as so
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
width:100%;
height:auto;
position: absolute;
top:0;
left:0;
}
and since the outer container no longer sees the height as anything i have to use jquery to load the height after the fact and it is an obvious switch on the page. I was wondering if there is either a way to do this soley in css or a way to do this before the page loads in jquery. I've exhausted search engines trying to find a way to do this. Odds are I'm not phrasing it right but hey you win some and you lose some.
the jquery for loading is below
function Height(){
var height = $(".BannerImage").height();
var em = height/200;
var newfont = em * 24;
$(".InnerBanner a").css("font-size", newfont);
$(".InnerBanner").height($(".BannerImage").height());
}
the function is currently called like so
$(document).ready(function(){
You need to call jquery on document load so it actually loads the image so you can get it's height. On document ready the image will not be loaded(depending on the size, butt 99% it will not be fully loaded). Because of position absolute the image does not take any space in it's parent, so it behaves like a totally independent element.
So to do it with jQuery :
$(window).on('load', function(){
$('.InnerBanner').height( $('.InnerBanner img').height() );
});
Also, as I can see from the css .InnerBanner img will take up the complete width of it's parent element, so why do you add position:absolute to the image?
Since you are asking to do this in CSS,
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
position: absolute;
top:0;
left:0;
}
<!--Same height and width for both class-->
.InnerBanner img,
.InnerBanner{
width:100%;
height:auto;
}
other trick is here
<div class="layout">
<div class="columns-container">
<div class="column"></div>
<div class="column"></div>
</div>
</div>
.layout {
display: table;
}
.layout .columns-container {
display: table-row;
}
.layout .columns-container .column {
display: table-cell;
}
Since we don’t know the columns’ heights, we can’t set a fixed height
on their parent. Also setting height: 100% or something like that on
the columns won’t work: we are counting on them to spread to the
maximum height and thus make their parent taller.
In your case
.InnerBanner{
display: table-row;
}
.InnerBanner img{
display: table-cell;
}
.InnerBannerlayout {
display: table;
}
keep an extra layout parent div with class InnerBannerlayout .
I have a problem here in Chrome (maybe in other browsers too).
I have a wrapper div which floats to the left. It contains some child div and these divs float to the left too and they have different widths according to their contents. I defined a max-width property for the wrapper div and as you can see in the fiddle code when the wrapper reaches this max-width, the last child in the wrapper moves to the next line but the wrapper keeps the maximum width and there are a lot of empty space on the right.
I'd assume the wrapper's size should be recalculated and should have a smaller width because it floats.
I'd like it, because in my real code the wrapper has "sexy" css but it looks rude with empty spaces.
Sorry for my English, I hope you'll understand my problem. Has anyone an idea how I can resolve this problem without any JS (or just a little bit of JS)?
Thanks!
http://jsfiddle.net/Xd9PV/1/
<div class="wrapper">
<div class="float float-1">apple</div>
<div class="float float-2">banana</div>
<div class="float float-3">orange</div>
<div class="float float-4">some very delicious strawberries</div>
</div>
.wrapper {
border: 1px solid red;
float: left;
max-width: 300px;
}
.float {
border: 1px solid blue;
float: left;
}
It’s not possible using CSS. When you set a max-width, it won’t recalculate it’s width after x floats have dropped to other lines because of the overflow.
You can use javascript/jQuery to calculate this for you instead that inserts a break where needed, f.ex:
var width = 0,
maxWidth = 300, w;
$('.wrapper .float').each(function() {
width += ( w = $(this).outerWidth() );
if ( width > maxWidth ) {
$(this).before('<div style="clear:left"></div>');
width = w;
}
});
Demo: http://jsfiddle.net/2mfbY/
Add a clear:both to the last div element like this:
.float {
border: 1px solid blue;
float: left;
margin-right: 5px;
}
.float:last-child {
clear:both;
}
Works for me.
You can try using ellipsis (But I am not sure whether it seems OK to you or not)
.float {
border: 1px solid blue;
float: left; padding:0 2px;
margin-right: 5px; max-width:90px;
text-overflow:ellipsis ;
white-space:nowrap; overflow:hidden
}
DEMO