obtain a table/chart design overlapping divs - javascript

I've been wondering for the past few days on how to obtain such as design as the one attached below. First of all, my concern is the "sparkline/area" chart at the bottom of the table/divs.
I can't wrap my head around on how I can code something like this. The chart data should "overlap" each div - how is that done? Should I maybe use a table?
Could someone, please try to help me out here. A quick code example on how to obtain the overlapping effect would help tremendous.
If this post doesn't belong on Stackoverflow, please accept my apologies.

Use z-index to position element above/below other elements:
HTML
<div class="wrapper">
<div class="row">
<div class="col">One</div>
<div class="col above">Two Above</div>
<div class="col">Three</div>
<div class="col above">Four Above</div>
<div class="col">Five</div>
</div>
<div class="btmOne"></div>
<div class="btmTwo"></div>
</div>
CSS
.wrapper{
width:500px;
height:150px;
position:relative;
}
.row{
width:500px;
height:150px;
background-color:gray;
}
.btmOne{
position:absolute;
bottom:0px;
left:0px;
width:500px;
height:50px;
background-color:red;
opacity:0.5;
z-index:1;
}
.btmTwo{
position:absolute;
bottom:0px;
left:0px;
width:500px;
height:30px;
background-color:blue;
opacity:0.5;
z-index:10;
}
.col{
float:left;
background-color:lightgray;
width:98px;
border:1px solid gray;
height:148px;
position:relative;
text-align:center;
line-height:100px;
font-weight:bold;
}
.col.above{
z-index:5;
}
To make the column come forward just add the class 'above' to the row.
See here for an example:
jsFiddle example

Related

How do I get a fixed scrolling div to scroll with the rest of the window?

Here's the jfiddle http://jsfiddle.net/pq5ckkcg/4/. I basically need the whole window and div to scroll together no matter where the mouse is. How would I accomplish this?
<div id="bottomwrap">
<div id="element"></div>
<div id="element"></div>
<div id="element"></div>
</div>
#bottomwrap {
position:fixed;
top:45px;
right:0;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
#element {
float:left;
width:200px;
height:300px;
background-color:#000;
margin:20px;
}
Your parent div needs to be relative positioned:
#bottomwrap {
position:relative;
margin-top:45px;
float: right;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
http://jsfiddle.net/pq5ckkcg/3/

CSS with right border - Nested

I am attempting to nest some divs. Each div is a unit which contains a right div and a left div. The left div can contain more units or single non-child units. Basic tree structure. However, I can't seem to get the css to work for what I'm going for.
I've created a js fiddle for it, listed below. The code is also below. I've also included a picture of what I'm going for. Any help is appreciated. I am open to jquery/javascript solutions.
JSFiddle
http://jsfiddle.net/atsFA/
HTML
<div id="main">
<div class="inmain">
<div class="inleft">
<div class="inthing">
Thing THing Thing X
</div>
<div class="inmain">
<div class="inleft">
<div class="inthing">
thing2 thing2 thing2 X
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
2
</div>
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
1
</div>
</div>
</div>
CSS
#main{
width:600px;
height:600px;
background-color:grey;
position:relative;
}
.inmain{
width:100%;
border:2px solid black;
position:relative;
height:100%;
}
.inleft{
background-color:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
}
.inright{
background-color:green;
position:absolute;
width:20px;
right:0px;
top:0px;
}
Image for Reference
I have used nested classes and nth-child or nth-of-type basing on your html structure.
Bear in mind I have used padding-bottom: 22px to take into account of your 2px border.
You can try:
#main{
width:600px;
height:600px;
position:relative;
}
.inmain{
width:100%;
position:relative;
height:100%;
}
.inmain:nth-of-type(2){
border:2px solid black;
position:relative;
height:100%;
width:96%;
}
.inmain:nth-child(1) .inleft{
background:white;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
background:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:0;
}
.inmain .inleft .inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:0;
}
.inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:22px;
}
Check this DEMO: http://jsfiddle.net/atsFA/12/
Using the below JQuery method with the css worked. The 22px less on the width is to account for a scroll bar, if one is used.
function setConstructSizes(element) {
//Set split group heights
element.find(".inthing").each(function () {
var hR = $(this).parent().parent().children(".inright").first().height();
if (hR > $(this).height()) {
$(this).height(hR);
}
});
//Set width of all inner lefts
element.find(".inleft").each(function () {
var p = $(this).parent();
var w = p.width();
$(this).width(w - 22);
});
//Set height of all inner rights
element.find(".inright").each(function () {
$(this).height($(this).parent().height());
});
}
.inmain
{
position:relative;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.inleft
{
position:relative;
}
.inright
{
text-align:center;
border-left:1px solid black;
border-right:1px solid black;
width:20px;
position:absolute;
right:0px;
top:0px;
}

Two fixed width divs, and another div with dynamic size between

The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.

How do I make a div's height remain 100% to the "main" container?

<div id="main">
<div id="left">
news feed goes here
</div>
<div id="right">
another news feed ges here
</div>
<div style="clear:both;"></div>
</div>
Suppose I have a container "main", and I have 2 columns. Both columns are float:left;.
When people click "load more" on the left news feed column, of course it will expand the height of that column because we load more content. But I want the right column to also expand with it. In other words, I want the "right" column to be 100% height of main, always.
How can I do that? Do I se the "right" column's height to be 100%? or what?
duplicate or not.. here's a fiddle to give you an idea how you could do this
http://jsfiddle.net/pixelass/uAur5/
HTML
<span class="more">load more</span>
<div class="main">
<div class="left">this is a left box</div>
<div class="full">this is the right box</div>
</div>
CSS
.left {
background:#666;
margin:10px;
width:130px;
height:80px;
float:left;
padding:10px;
}
.full {
width:130px;
background:#eee;
float:right;
height:80px;
padding:10px;
margin:10px;
}
.main {
width:500px;
background:#000;
height:140px;
margin:20px 10px;
}
.more{
border:#000 1px solid;
padding:3px;
background:#222;
color:#aaa;
margin:20px;
cursor:pointer;
}
jQuery
$('.more').click(function(){
$('.main').append('<div class="left">this is a left box</div>');
$('.full').css('height', '+=120px');
$('.main').css('height', '+=120px');
});
If you mean you want to change height of div, then;
document.getElementById("yourRightDivsId").style.height = yourNewHeight;

How can I autoscroll a div onmouseover and hide the scrollbar for that div?

I want to autoscroll a particular element either onmouseover or using an image map. I also want to hide the scrollbars for that div. The problem is...
I don't understand how to do this. I've been learning javascript for weeks now and I've only learned the useless parts. Nothing actually applicable to web design, that is. I did google it and nothing gave me the exact answer I was looking for, nor was I able to tweak those examples to work for me.
The code is on jsfiddle.net unless I'm breaking an unwritten rule, and please just let me know, I will just post the link. Please please please! don't just give me an answer, as I am a beginner. Please explain your solution. Thank you so much!
http://jsfiddle.net/thindjinn/KQP9t/2/
Decided to add the code, because I've gotten immediate responses before when doing that.
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
<script src="/scrollingPictures.js"></script>
</head>
<body>
<div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
<div id="scroll">
<img class="left" id="image1" src="http://www.yalibnan.com/wp-content/uploads/2011/02/steve-jobs1.jpg" alt="Steve Jobs"/>
<img class="left" id="image2" src="http://www.power-of-giving.com/image-files/achievements-of-richard-branson.jpg" alt="Richard Branson"/>
<img class="left" id="image3" src="http://static5.businessinsider.com/image/4b16d0c70000000000134152/anderson-cooper.jpg" alt="Anderson Cooper"/>
<img class="left" id="image3" src="http://swandiver.files.wordpress.com/2009/03/rachel-maddow.jpg?w=288&h=371" alt="Rachel Maddow"/>
<img class="left" id="image3" src="http://img2.timeinc.net/people/i/2006/celebdatabase/kanyewest/kanye_west1_300_400.jpg" alt="Kanye West"/>
<img class="left" id="image3" src="http://img1.browsebiography.com/images/gal/2627_Larry_Page_photo_1.jpg" alt="Larry Page"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
<div id="work"><div class="panel">Work</div></div>
<div id="education"><div class="panel">Education</div></div>
<div id="skills"><div class="panel">Skills</div></div>
<div id="footer"> Home <!-- Beginning of Footer -->
Privacy Statement
Contact Us
Careers
More Info
</div>
</body>
</html>
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
height:100%;
overflow:auto;
overflow-x:hidden;
}
img.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
img.left:hover{
opacity:1;
}
div.gradientTop{
position:absolute;
margin-top:0;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:50px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
font-size:2em;
padding-right:5%;
padding-top:7%;
height:100%;
}
#work{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#education{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#skills{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#ffe;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
z-index:0;
background-color:#f0f0f9;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
z-index:0;
background-color:#ededf2;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
#footer {
background:white;
z-index:3;
position:absolute;
font-variant:normal;
text-indent:5%;
color:#333;
clear:both;
height:50px;
padding-top:20px;
}
How do hide scrollbars:
Set the css property overflow to hidden on the div:
<div style="overflow:hidden"></div>
How to scroll the div:
The element has a scrollTop property, which is the amount of pixels the element has been scrolled. You can scroll the element by assigning to this property:
var div = document.getElementById(someId);
div.scrollTop = 50;
How to do something on mouseover:
var div = document.getElementById(someId);
div.onmouseover = function() {
// do something here
};
Chech this page:
http://valums.com/vertical-scrolling-menu/
And this is the sample.
http://valums.com/files/2009/vertical-menu/final.htm
Good luck

Categories