Why wont my div vertically align? - javascript

I've written some code where when I click on an image it fades out and fades in a new div which should be vertically aligned. I use the same code as my logo which is originally vertical-align: middle, so I don't see the issue.
The code I'm using currently is this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
Here is the JSFiddle of a section of my code: http://jsfiddle.net/L79kte39/

Vertical alignments in CSS can be tricky. Here's a good article I go back to when I haven't done it for a while:
http://phrogz.net/css/vertical-align/
Apparently (read: supposedly), CSS has been adopted enough for the following to work fairly universally:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Source

Here's my version. It uses vertical-align...with a lot of twists. It does not use transform, or any exact pixel widths. It does use one extra container.
The key is this:
.cod-valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
which creates an empty inline-block that fakes vertical-align (meant for text-row character placement) into thinking the current line of text contains a 0-character, 100%-tall string, at the center of the div. Then, the next element aligns next to it by also setting vertical-align. (I applied the image the same way)
It's tricky, but probably easier to understand if you remember that vertical-align was first intended for things like aligning large characters in a line of text in the correct way. (ie, if the first letter of a book chapter is large, does the rest of the text go at its top, or its bottom?)
http://jsfiddle.net/7qtLLakq/

#cod-options would need a height to have it centered the way the logo is centered. Try height:200px

Related

Emulating `position: fixed;` with javascript, but without it being jumpy, laggy, or having "hickups"

I'm trying to emulate position: fixed; using javascript, the reason being that the element has to be inside a scrollable div (overflow-scroll-y), and position: fixed; only works relative to the window scroll, not an elements scroll, though normally in a case like this I could fix it by using position: absolute; and everything would just work, but the scollable div / container element needs to have perspective: 1px; which brakes the position: absolute; adjustment, so back to just js emulation.
Now it works, with javascript, but all too often the element in question lags a bit behind the scroll, creating a kind of "jumpy" feeling (it's especially bad on Firefox), that is say it's fixed at the top of the element, if the user scrolls it's suppose to be exactly at the top always, but in reality it sometimes goes a bit (or allot) too high or low, depending on the scrolling direction, and then snaps in place again, this snapping or jumpy effect is undesirable, and is not present in cases where you can fix the element using either position: fixed; or position: absolute;.
I've made a jsFiddle Example, if you don't notice the undesirable effect in your browser you can try uncommenting the increaseLag function, on my computer the lag is clearly visible on Firefox but not as noticeable on Chrome unless I enable the increaseLag function (I'm running Ubuntu).
How could one tackle this? Is there perhaps a pure css solution I'm missing or an alternative js route?
My current buggy solution uses a scroll event on the container element which updates the top css property of the "fixed" element relative to the updated scroll position.
$("#container_element").scroll(function() {
//increaseLag(this);
var scrollTop = $(this).scrollTop();
$(".fixed_emulation").css("top", scrollTop+"px");
});
#container_element {
width: 100%;
height: 100%;
overflow-y: scroll;
perspective: 1px;
}
.fixed_emulation {
background-color: #000;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
}
<div id="container_element">
<div class="fixed_emulation"> :) </div>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
...
</div>

Using client-testimonials-carousel plugin, having the arrows not move

I'm using this plugin and it works perfectly:
https://codyhouse.co/demo/client-testimonials-carousel/index.html
however I'm not too sure how to get the arrows to stay put and never move. Right now they center themselves based on the height of the div and I just want them to stay where they are instead. If someone could show me what they changed so I can also learn that would be awesome!
You have to change this css:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
background-color: white;
content: "";
height: 13px;
left: 50%;
position: absolute;
top: 50%;
width: 2px;
}
Change the top: 50%; to whatever you want. Like top: 200px for example.
The top: 50% will get the height of the parent element and move the own element 50% down. This can be disabled by adding a fixed declaration.
If you cant edit the css from your plugin, include your own css-file and paste this into it:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
top: 200px;
}
Consider sticking with the moving arrows. Reason for suggesting this is that your choice of fixed top position is unlikely to be as pleasing as the centred version. Say you choose
top: 100px;
It will look great for a testimonial that generates a 220px high block because the 100px point is roughly central. But it will look ugly when the testimonial block is 130px high and the arrow is close to the bottom of the block.
Your sample testimonials have either 3 or 4 lines only. Try it with single-line testimonial and a 7 line version and see how you feel about fixing the position.
Its a nice looking site so far - good work.

DIV height 100% for remaining space under another div

So I have a header bar for a page I made with a height of 150px. Under that area I want another DIV to fill the remaining space (width and height) all across the screen and to the bottom of the screen. I've tried setting height: 100% for the DIV, but that causes the screen to become scrollable and I only want it to fill the remainder of the page. NOTE: There is NO footer or anything under it.
Using jQuery/Javascript is acceptable, but CSS-only is prefered (if possible). If using jQuery, please explain the proper way to have it implemented into the page (I'm assuming $(function() {...}); under the <style> tag in the head.
I've tried searching for a result before, but nothing seems to work correctly.
tl;dr I basically made 3 options for you. click on the 'like this' in the below paragraph to see what they all look like without any text. Click on the A). B). and C). links in the paragraphs below that to see the difference between the three options. Check how each one scrolls differently, they are all different I promise. After you look at all three you can read how the one you want is implemented. (that is if you like any of them.) Hope you like it, no problem if you don't :)
I'll have a go at this, because it honestly depends on what you're going after there are multiple ways to look at it and it depends on your end goal. I will cover three possible scenarios: (which all look the same without text mind you, like this, but if you want to see what they look like with text click the letters. Make sure you scroll the page to see the difference between them.)
(Just as a side note I based A). and B). off how Twitter Bootstrap does it.)
A). You just want it to look like one div on top of the other (header div on top of main-content div) and display like that, but you still want the page to scroll if the 2nd div's text overflows. In this implementation when they scroll will move the header out of view, but if you don't want the header div to move out of view that leads me to
B). Same as the first header div on top of main-content div, but when they scroll the header div will still stay in place at the top instead of moving out of view.
and last of all,
C). You really do want the div to stretch to the bottom of the screen and never have the scroll bar for the whole page. This could be used in some cases, for instance, Spotify makes a nice music app with this kind of style so that you never scroll the whole page just panes in the page.
Ok so first here is the html code used to construct all three of them
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
And now to the fun part...
I will provide a Fiddle for the following examples, and with the css I will put the necessary code at the top and the unneccessary code at the bottom. (The html may have some unneccasary text so just ignore that. I just want you to see the page scrolls differently on the three.)
A).
no need to rephrase what it is so I'll just show you the code that is necessary.
First, here is A). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for A). (the background-color isn't completely necessary, but it is somewhat necessary to show the point.)
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
and now for...
B).
First, here is B). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs.
Here is the necessary css for B).
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
As you can probably tell the only difference is the position: fixed on the .header, but look at the two examples to see the difference it makes.
and now last of all C).,
C).
First, here is C). without the text just so you can see what it looks like the others until the content gets too large.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 1 where it has a scroll bar just for that area's overflowing content.
Here is the fiddle with the text so you can see how it differs, and with I'll call option 2 where it hides the overflowing content. (This is honestly bad practice and I wouldn't do it. So if I may suggest. I would go with option 1 of C).)
Here is the necessary css for C).
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
I won't explain it, but here is an article on positioning that will.
here is the only necessary css for option 1 is adding overflow-y: auto to .main-content, but if you want to go with option 2 which I don't suggest you can go with overflow-y: hidden on .main-content
Well that's all for my post which is probably too long for most people sorry if I bored you, but I'm just trying to help. Hope you figure out the layout you want. This is only a few examples of the layouts possible with good old css. If you don't get the layout you want from this or any other post feel free to send me a message by commenting below, and I'll be happy to answer it sometime. Hope this helped. If it didn't that's fine too. :)
You can try css3 flexbox.
http://jsfiddle.net/wL9aM/1/
.container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 700px;
}
.header {
height: 200px;
background: red;
}
.main {
-webkit-flex: 1;
flex: 1;
background: blue;
}
try using script..
var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px
$(".filler_div").height(window_h - header_h);
You can also put that inside a function() so that you can add it also when you resize the browser, the filler space also adjusts...
function setfillerDivHeight(){
//the code above
}
$(document).ready(function(){
setFillerDivHeight(); //the initial setting of height
});
$(window).resize(function(){
setFillerDivHeight(); //reapply setting of height when window resizes
});
<div class="full-page-height-wrapper">
<header></header>
<main></main>
</div>
html,body {
height: 100%;
margin: 0;
}
header {
height: 150px;
}
.full-page-height-wrapper {
min-height: 100%;
position: relative;
}
CODE: http://fiddle.jshell.net/N7zJg/9/
preview: http://fiddle.jshell.net/N7zJg/9/show/
I don't think you cannot acheive that in pure CSS.
So, there is two different solutions:
1) You can put the 150px div in the 100% div.
2) You can do it with jQuery:
If your top div is <div id="A"> and the second one is <div id="B">, you'll have:
var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });
Feel free to adapt the code if you have some margins.
Found a solution myself finally. Doing it this way makes the design more responsive since (if i choose to add something to the bottom), it will automatically resize the div's height.
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-column;
}
#fullDiv {
height: 100%;
}
I found two solution.
The one is that I have must set the div in the absolute position.
the div float over the screen.
another one is use table-row display.
If you use just CSS, you cant achieve your task by giving 100% height to div. Because what basically CSS is doing is giving 100% height to your DIV plus giving 150 px to above header. Consider giving height of DIV less than 100% or some static value such as 600px or 700px.
Alternate is having a class of DIV with min-height 100% and inside it putting your header and body.

DIVs overlapping. Need to move it over so they don't

Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.
You can view the site that im having issues on here.
If the error is the Fatal Error. Check Code. bit at the top, then do this
Change
#newscontent {
top: 4px;
left: 14%;
position: fixed;
}
to
#newscontent {
top: 4px;
left: 18%; //CHANGE HERE
position: fixed;
}
This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.
Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.
only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right
OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:
First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.
Second, on all three of those divs, add a menu-item class:
<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>
Third, add the following CSS to your style sheet:
.menu-item {
float: left;
font: bold 120% Arial,Helvetica,sans-serif;
margin-left: 15px;
padding-top: 3px;
text-decoration: none;
}

How do I keep a div in the center of the page?

I'm using jQuery to create a "dialog" that should pop up on top of the page and in the center of the page (vertically and horizontally). How should I go about making it stay in the center of the page (even when the user resizes or scrolls?)
I would use
position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);
but with this solution and a browsers viewport-size of less than your dialog is, parts of the dialog will be unreachable on top and left sides because they are outside the viewport.
So you have to decide if it's suitable for your dialogs size.
(CSS doesn't know how to calculate, yet. So the little math over there has to be done by you, right now. Therefore your dialog has to be a fixed size which you have to know.)
Edit:
Oh yes, if you want to serve your dialog for the IE6 too, you should do something like this:
#dialog { position: absolute; }
#dialog[id] { position: fixed; }
Since IE6 is not capable of fixed positions and also not capable of attribute-selectors, the IE6 will be the only one who has the position set to absolute. (This will only affect with scrolling behaviour. absolute stays on its place in page and fixed stays on its place in the browser. The rest is similar.)
Check out Infinity Web Design's piece on this.
#mydiv {
background-color:#F3F3F3;
border:1px solid #CCCCCC;
height:18em;
left:50%;
margin-left:-15em;
margin-top:-9em;
position:absolute;
top:50%;
width:30em;
}
This is the CSS they use, and I've tested it out in multiple browsers.
You'll note that the left margin is negative half the width and the top margin is negative half the height. This takes care of the centering, more or less, with absolutely positioning it at 50% top and left.
To put a div horizontally in the middle I always put margin: 0 auto. But it cannot be a floating element and in IE I always needed to put a div around and then give it the property text-align: center, so that the inside div is centered horizontally.
If you know the element's offset dimensions (width/height + padding), you can use this CSS:
elementContainerSelector {
position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elementSelector {
position: absolute;
top: 50%;
left: 50%;
margin: -[half of offset height]px 0 0 -[half of offset width]px;
}
Hurix's answer works too, and bear in mind the caveats in that answer as well.
Keep margin-left:auto and margin-right:auto

Categories

Resources