Alignment of fluid divs in a container of variable width - javascript

Hello kind internet beings, I have a question I hope you can assist with. I have a container like so:
And the inner divs float left so that they are side-by-side in rows. The problem is that when there is an inner div that is taller then the others, the next row is all weird and there is a lot of extra space.
I'd prefer it to look like:
Each inner div (in the picture it is not to scale) has the same width but might have a different height. Is there some css option to set each row to line up under the tallest item of the previous row, perhaps?
<style>
.objectContainer
{ background-color: #e1e8fa;
border-radius: 5px;
padding:4px;
width: 280px;
float: left;
margin: 7px;
-moz-box-shadow: 0 0 3px #000000;
-webkit-box-shadow: 0 0 3px #000000;
box-shadow: 0 0 3px #000000;
display:inline-block;
position:relative;
vertical-align:top;
}
.innerContainer
{ padding: 4px;
margin: 4px;
min-height: 95px;
max-height: 140px;
outline: 1px dashed #5c5c5c;
background-color: white;
}
.tab {
padding-left: 15px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
height: 18px;
width: 150px;
border-top: 1px dashed;
border-left: 1px dashed;
border-right: 1px dashed;
border-color: #5c5c5c;
border-radius: 10px 10px 0px 0px;
position: relative;
}
</style>
<div id="mainContainer" class="main_container" >
<div class="main" style="padding-bottom: 20px;">
<div class="listviewheader">
<div style="clear:both;" class="objectContainer" id="container_2483" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2483" id="note_2483" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2483" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2484" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2484" id="note_2484" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2484" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</br></br></br></br></br></br>
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2496" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2496" id="note_2496" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2496" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2495" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2495" id="note_2495" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2495" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2481" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2481" id="note_2481" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2481" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2482" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2482" id="note_2482" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2482" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'>
</div>
</div>

set the css for your inner divs to display:inline-block; position:relative and most importantly, vertical-align:top;
that should do it!

You can use bootstrap to separate divs by their rows.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4" id="box1">box 1</div>
<div class="col-md-4" id="box2">box 2</div>
<div class="col-md-4" id="box3">box 3</div>
</div>
<div class="row">
<div class="col-md-4" id="box4">box 4</div>
<div class="col-md-4" id="box5">box 5</div>
<div class="col-md-4" id="box6">box 6</div>
</div>
</body>
</html>
It looks something like this with the height and background color changed.

Use a grid system. Either bootstrap or zurb foundation will work fine. If you decide to do it on your own I can tell you the most important trick is to use the "after" pseudo selector to clear the float. The following gives you the basic grid design. The box sizing is only necessary to avoid trouble with optional paddings in the columns.
Then CSS with
.row:after{
content: "";
clear: both;
display: block;
height: 0;
width: 0;
overflow: hidden;
}
.col-33{
width: 33.33%;
float: left;
box-sizing: border-box;
}
<div class="row">
<div class="col-33">
First col
</div>
<div class="col-33">
Second col
</div>
<div class="col-33">
Third col
</div>
</div>
<div class="row">
<div class="col-33">
First col
</div>
<div class="col-33">
Second col
</div>
<div class="col-33">
Third col
</div>
</div>

Related

Make parent div behind child element

I'm using jQuery.Gantt in a project and I need do many customization in this plugin.
One of this is pass mouse over an element (blue cells) and show a tooltip (in example I put a title).
I have some divs that "highlight" weekends and these divs is over gantt elements (blue cells)
If I change z-index of cells they will overlay the header (month and day) in horizontal scroll.
I trying to find a way to get the following order: weekend div with z-index 0, gantt cells (blue) with z-index 1 and header with z-index 2. I need this order to display the title on gantt cells and use mouseover event on weekend cells.
How can I achieve this with the example below?
.dataPanel {
outline: 1px solid #DDD;
background-position-y: 15px;
background-size: 30px 48px;
background-image: linear-gradient(to left, rgba(153, 152, 153, 0.7) 1px, transparent 1px), linear-gradient(0deg, #E7ECEF 0%, #E7ECEF 53%, #ECF1F4 53%, #ECF1F4 100%);
background-repeat: repeat;
position: relative;
font-family: 'Verdana, sans-serif';
}
.header {
position: sticky;
top: 0;
z-index: 600;
width: 241px;
background: #fff;
height: 63px;
}
.row {
float: left;
height: 24px;
line-height: 24px;
margin: 0;
}
.dayPosition {
top: 46px;
}
.monthPosition {
top: 15px;
}
.day {
background-color: #fff;
width: 24px;
line-height: 24px;
text-align: center;
border-bottom: 1px solid #DDD;
border-right: 1px solid #DDD;
font-size: 10px;
color: #007E7A;
}
.row .sa,
.row .sn,
.row .wd {
height: 24px;
text-align: center;
width: 29px;
}
.bar {
background-color: #D0E4FD;
height: 18px;
margin: 0 3px 3px 0;
position: absolute;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
border-radius: 3px;
}
<div class="dataPanel" style="width: 27540px; height: 732px;">
<div class="header">
<div class="row header monthPosition">
JAN
</div>
<div class="row header dayPosition">
<div class="row day wd" id="dw-1559098800000" data-repdate="1559098800000">
<div class="fn-label">WED</div>
</div>
<div class="row day wd" id="dw-1559185200000" data-repdate="1559185200000">
<div class="fn-label">THU</div>
</div>
<div class="row day wd" id="dw-1559271600000" data-repdate="1559271600000">
<div class="fn-label">FRI</div>
</div>
<div class="row day sa" id="dw-1559358000000" data-repdate="1559358000000">
<div class="fn-label">SAT</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day sn" id="dw-1559444400000" data-repdate="1559444400000">
<div class="fn-label">SUN</div>
<div style="background-color: rgba(100, 100, 100, 0.1); height: 673px; width: 30px; bottom: 0px; top: 245px; position: initial;"></div>
</div>
<div class="row day wd" id="dw-1559530800000" data-repdate="1559530800000">
<div class="fn-label">MON</div>
</div>
<div class="row day wd" id="dw-1559617200000" data-repdate="1559617200000">
<div class="fn-label">TUE</div>
</div>
<div class="row day wd" id="dw-1559703600000" data-repdate="1559703600000">
<div class="fn-label">WED</div>
</div>
</div>
</div>
<div title="Saturday" class="bar" style="top: 63px; left: 90px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Sunday" class="bar" style="top: 63px; left: 120px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Monday" class="bar" style="top: 63px; left: 150px; width: 29px;"><div class="fn-label">24</div></div>
<div title="Tuesday" class="bar" style="top: 63px; left: 180px; width: 29px;"><div class="fn-label">24</div></div>
</div>
Code in JSFiddle
You just need to add pointer-events: none; to the overlay div.

Bottom-always (non-sticky) footer working with different window sizes

I'm working on a footer which always be on the bottom of the page BUT isn't sticky. It's demand It'll be responsive. At the moment it's only on the bottom in two cases: first when I set bottom property to -350px (giving bottom:0px causing my footer lands somewhere in the middle of the page) or second when I manually change it's window size (as you probably notice I'm using Bootstrap).
Because I want to set a dynamic gallery in the future (when you scroll down the
more images will be appearing) I've tried to cope with this using JQuery but ... it seems to have some bugs I can't see. What should I do ?
$(document).ready(function() {
var currentHeight = $(document).height();
/*alert(currentHeight);*/
var currentFooter = currentHeight - 50;
$('footer').css("bottom", currentFooter);
$(window).on('scroll', function() {
/*var navHeight = $(window ).height() - 67;*/
var heHeight = $('.header').height();
if ($(window).scrollTop() > heHeight) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
});
nav {
margin-bottom: -10px;
margin-top: 0px;
width: 100%;
height: 80px;
display: inline-block;
position: relative;
z-index: 3;
top: -75px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
}
.sticky {
position: fixed;
top: 0;
}
section {
background-color: rgb(242, 242, 242);
width: 100%;
height: 130px;
padding-top: 10px;
padding-bottom: 15px;
}
nav h2 {
font-weight: 700;
display: inline-block;
padding-right: 15px;
margin-left: 39px;
}
nav p {
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
}
nav p .yours {
letter-spacing: 3px;
}
section ul li {
list-style: none;
display: inline-block;
font-size: 12px;
margin-right: 9px;
}
section ul li a {
color: rgb(132, 132, 132);
text-decoration: none;
}
section li a:hover {
text-decoration: none;
color: black;
}
/*#lorem{
width:640px;
height:500vh;
font-size:14px;
padding-top:50px;
margin:0 auto 0;
}
*/
.bg-grey {
margin-top: 35px;
}
#their {
display: block;
/* padding-left: 10px;
margin-left:40px;
padding-right:500px;
margin-bottom: 60px;
padding-top:5px;
padding-bottom:5px;*/
width: 342px;
height: 15px;
background: rgb(242, 242, 242);
position: relative;
left: 250px;
margin-bottom: 60px;
}
p {
display: inline-block;
padding-left: 22px;
margin-top: 60px;
padding-top: 10px;
font-weight: bold;
}
#th p {
margin-top: 30px;
}
#th p:first-of-type {
margin-top: -20px;
}
.thumbnail {
border: none;
border-radius: 0;
background: rgb(85, 102, 119);
!important
}
#own {
position: absolute;
top: -100px;
padding: 20px 102px;
margin-right: -190px;
border-radius: 5px;
font-size: 13px;
font-weight: bold;
}
#own:hover {
/*background:rgba(255, 196, 0, 0.18); */
background: rgba(244, 97, 19, 0.72);
color: black;
}
#th {
/*
display: block;
position:relative;
top:-70px;
padding-top:20px;
right:-10px;
width:500px;
height: 2000px;
*/
display: block;
position: absolute;
top: 330px;
left: 810px;
margin-bottom: 30px;
}
#th input {
margin-left: 15px;
}
footer {
background-color: rgb(175, 175, 175);
position: relative;
width: 100%;
height: 80px;
/*bottom:-350px;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>TEAM</li>
<li>CONTACT</li>
</ul>
</section>
<nav>
<h2>TRAVEL MOOD</h2>
<p><span class="yours">what</span> is <span class="yours">your's ?</span></p>
</nav>
<div class="container-fluid all">
<div class="container-fluid">
<div class="row">
<p class="to_know">GET TO KNOW THEIR STORIES</p>
<div id="their"></div>
</div>
</div>
<div class="container-fluid bg-grey" id="portfolio">
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="china.jpeg" alt="china" class="img-responsive">
<p>Donald & Ronald</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="tatry.jpeg" alt="tatry" class="img-responsive">
<p>Louis</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="vienna.jpeg" alt="vienna" class="img-responsive">
<p>Alejandra</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="croatia.jpeg" alt="croatia" class="img-responsive">
<p>Marlene & Rita</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="almostcolorado.jpeg" alt="almostcolorado" class="img-responsive">
<p>X & Y </p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="country.jpeg" alt="county" class="img-responsive">
<p>Mr Doe & Mrs Doe</p>
</div>
</div>
</div>
<form id="th">
<div class="form-group row">
<div class="col-md-6">
<button type="submit" class="btn btn-sm active" id="own">CREATE YOUR OWN !</button>
</div>
</div>
<p>WEATHER</p><br>
<input type="radio" name="weather" value="no_matter" checked> no matter<br>
<input type="radio" name="weather" value="warmer"> warmer<br>
<input type="radio" name="weather" value="colder"> colder<br>
<input type="radio" name="weather" value="the_same"> the same<br>
<p>COMPANY</p><br>
<input type="radio" name="company" value="some_time_alone" checked> no matter<br>
<input type="radio" name="company" value="couple"> couple<br>
<input type="radio" name="company" value="with_family"> with family<br>
<input type="radio" name="company" value="girls_boys_adventure"> girls/boys adventure<br>
<p>HOW FAR</p><br>
<input type="radio" name="location" value="another city" checked> another city<br>
<input type="radio" name="location" value="another country"> another country<br>
<input type="radio" name="location" value="another continent"> another continent<br>
<p>PLACE WHERE YOU CAN</p><br>
<input type="radio" name="activity" value="active"> stay active<br>
<input type="radio" name="activity" value="leisure"> have some leisure time<br>
<input type="radio" name="activity" value="party"> part..y/cipate<br>
<input type="radio" name="activity" value="culture"> bite some culture<br>
</form>
</div>
<footer></footer>
</div>

Trace div on hover?

Right now I have six floated divs, each with an image as a background. There is a 4.5px margin on each div so it looks like there is a border.
I want to make it so that on hover, the div's "border" is traced/filled up in a different color. How do I do that?
<div id="one" >
</div>
<div id="two" >
</div>
<div id="three" >
</div>
<div id="four" >
</div>
<div id="five" >
</div>
<div id="six" >
</div>
Here's the css:
#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}
#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow: 0 0 0 8px white;
}
One approach is to use an svg element instead of a div to animate the border (stroke) using stroke-dashoffset and stroke-dasharray.
http://jsfiddle.net/zLuercaa/
Make
margin:0;
and then add a real border to each div
border: 4px solid blue;
and then on :hover you can change the border color.
Simply add transition-duration: 0.4s; or whatever time you want to your divelements.
body {
background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
background-image: url('http://lorempixel.com/400/300');
max-height: 400px;
background-color: grey;
margin: 4.5px;
height: 60vh;
width: 417px;
max-width: 417px;
float: left;
background-size: cover;
opacity: .9;
text-align: center;
transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
opacity: 1;
box-shadow: 0 0 0 8px white;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>

How to create a button to every list item which opens a menu over it?

I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle
You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>
try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/

Categories

Resources