I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>
Related
I am writing an html calendar and got stuck on positioning divs. I generate the divs dynamically and they stack on top of each other which is ok most of the time. Some times I need to create a div and have it placed at the top of the page right next to the first created div. If I use float it moves over too far and does not go to the top. I could use position to accomplish this, but it gets complicated. Just seems it should be easy to drop it up to the top like it would in a table using valign=top. I added some css positioning to show where I want the div, but if possible, I would like to do it without position. Any suggestions on good ways to position a div would be much appreciated.
#container{
width:200px;
height:200px;
background-color:blue;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
float: right;
position:relative;
top:-100px;
left:-100px;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
</div>
Let's call the calendar tiles "source divs", and for the div you want to appear positioned to the right of the 1st "source div", we'll ascribe the term "target div".
I recommend that you position your target div inside of the source div. This semantic relationship will make it very easy to position the target div correctly, using left: 100%;:
.calendar { font-size: 0; }
.src {
position: relative;
font-size: 14px;
display: inline-block;
width: 30px; height: 30px;
outline: 1px solid #000;
}
.src:hover:after {
content: "";
position: absolute;
display: block;
width: 100%; height: 100%;
left: 100%; top: 0;
background-color: #ff0000;
}
<div class="calendar">
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<br/>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
<div class="src"></div>
</div>
Hover any source div to see the corresponding target div.
Perhaps you should look at using a grid layout in the cell . you would have much better control of how the content appears in the cell without having to work with floating div's .Also a layout in a grid container keeps things uniformed and prevents overlapping using
grid-template-columns: auto auto auto;
If you only want 2 columns at the top just change it to
grid-template-columns: auto auto ;
here is a link grid layouts
and
flexbox vs grid
#container{
width:200px;
height:200px;
background-color:blue;
display: grid;
grid-gap: 2px;
grid-template-columns: auto auto auto;
grid-template-rows: 60px auto auto;
}
#item1{
width:50px;
height:50px;
background-color:red;
}
#item2{
width:50px;
height:50px;
background-color:yellow;
}
#item3{
width:50px;
height:50px;
background-color:green;
}
<div id=container>
<div id=item1></div>
<div id=item2></div>
<div id=item3></div>
<div id=item3></div>
<div id=item3></div>
<div id=item1></div>
<div id=item1></div>
<div id=item1></div>
</div>
I am trying to write one vertical menu like in this website . On hover the vertical menu should shift marginally to the right side and should display the sub menu.
I have been failed to accomplish this.
Please help me :(
<html>
<head>
<title></title>
<style>
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
Here's the solution, I used JQuery:
HTML:
<div>
<div class="apear">
</div>
<div style="float:right">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS:
.apear
{
width:200px;
height:300px;
background-color:pink;
float:right;
display:none;
}
.one
{
background-color:yellow;
height:100px;
width:100px
}
.two
{
background-color:blue;
height:100px;
width:100px
}
.three
{
background-color:green;
height:100px;
width:100px
}
JQuery:
$(document).ready(function(){
$(".one").mouseenter(function(){
$(".apear").show(500);
});
$(".apear").mouseleave(function(){
$(".apear").hide(500);
});
});
Here is a fiddle
Im trying to implement the "multi" example on this page... http://rubaxa.github.io/Sortable/ . I feel like I've "recreated" the structure and the appropriate options as set forth on https://github.com/RubaXa/Sortable , but I am struggling to get this to function as i want.
the simplified version of what i'm trying to do is here... https://jsfiddle.net/uqcqufo8/
HTML...
<div id="multi">
<div><div data-force="5" class="layer title title_xl">Multi</div></div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group A</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group c</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
<div class="layer tile" data-force="30" style="width:100px; height:100px; background:grey; margin:5px; display:inline-block; color:red;">
<div class="tile__name">Group b</div>
<div class="tile__list">
<div style="background:red; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:blue; width:10px; height:10px; margin:2px; display:inline-block;"></div>
<div style="background:green; width:10px; height:10px; margin:2px; display:inline-block;"></div>
</div>
</div>
</div>
javascript...
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
Basically, the large grey squares should be sortable (as they are), but the colored squares should also be sortable - they should be sortable within their individual boxes, and they should be draggable from one grey box to another. I'm failing to see what i'm missing. Thanks.
I edited your javascript to the below and it works for me. I followed the examples on the Sortable page so it's likely the preferred method:
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
I have 3 <div>s as follows. In that one of the <div> has panel bar so its height may be increased based on the content of each panel bar. Now I want to increase the height of other two divs based on the height of the <div> which has panel bar. How can I achieve this?
<div class="leftdiv">
</div>
<div class="maindiv">
//Panel bar is inside this div.
</div>
<div class="rightdiv">
</div>
"leftdiv" and "rightdiv" height should be increase base on "maindiv" height???
You could also do it using css and positioning the divs absolutely or relatively, with margins for the central item.
Fiddle:
http://jsfiddle.net/o403Ljoq/
Code:
<div class="parentDiv">
<div class="leftDiv" >text</div>
<div class="mainDiv">text<div>Something with height</div>
<div style="height:200px;">something else with height</div></div>
<div class="rightDiv" >text</div>
.parentDiv
{
position:relative;
background-color:gray;
}
.leftDiv
{
background-color:blue;
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:100px;
}
.mainDiv
{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
.rightDiv
{
background-color:green;
position:absolute;
right:0px;
top:0px;
bottom:0px;
width:100px;
}
Demo
html
<div class="container">
<div class="leftdiv">a</div>
<div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div>
<div class="rightdiv">c</div>
</div>
css
.leftdiv {
background:red;
display:table-cell;
}
.maindiv {
background:green;
display:table-cell;
}
.rightdiv {
background:blue;
display:table-cell;
}
.container{
display:table;
width:100%;
}
try this example using bootstrap (row col-wrap class) Try the example in full screen mode
#media (min-width: 768px) {
/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-base{
margin-top: -15px;
}
}
#media (max-width: 767px) {
.row.base{
display:none;
}
}
.col-wrap{
overflow: hidden;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-wrap">
<div class="col-sm-4 col">
<div class="well">
<p>A </p>
<p>B </p>
<p>C </p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>D </p>
<p>E </p>
</div>
</div>
</div>
<div class="row base col-wrap">
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
</div>
</div>
You may use JavaScript for achieving the result:
var commonHeight = $(".maindiv").height();
$(".leftdiv").height(commonHeight);
$(".rightdiv").height(commonHeight);
The full example and demo is here:
http://jsfiddle.net/pLmp1zpr/
Use flexbox to do this.
Wrap your divs in a container.
HTML:
<div class="container">
<div class="leftdiv"></div>
<div class="maindiv"></div>
<div class="rightdiv"></div>
</div>
CSS:
.container{
display:flex;
align-items:stretch;
flex-flow:row wrap;
}
.leftdiv,.rightdiv,.maindiv{
flex:1 0;
}
Here is the DEMO.
I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.topnavbtn').mouseenter(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
}).mouseout(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
});
});
</script>
HTML:
<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
And CSS:
.topnavbtn {
height:34px;
float:left;
display:inline-block;
margin:7px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
line-height: 34px;
}
.topnavbtn .left {
height:34px;
width:9px;
background:url(images/nav/images/navLeft.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .right {
height:34px;
width:9px;
background:url(images/nav/images/navRight.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .mid {
background:url(images/nav/images/navBg.png) repeat-x;
height:34px;
width:auto;
float:left;
display:inline-block;
}
This is a syntax error :
$(this).$('.left').css(...
try
$('.left', this).css(...
Just replace
$(this).$('.left')
with
$(this).children('.left')
and so on for rest of classes .