I want to prevent scrolling other DIV of scrolling DIV.
HTML:
<div id="body">
<div class="long">
<div class="half-height" style="background-color:blue"></div>
<div class="half-height" style="background-color:yellow"></div>
</div>
<div id="left-side" class="side">
<div class="long">
<div class="half-height" style="background-color:red"></div>
<div class="half-height" style="background-color:green"></div>
</div>
</div>
<div>
<div id="right-side" class="side">
<div class="half-height" style="background-color:black"></div>
<div class="half-height" style="background-color:white"></div>
</div>
</div>
CSS:
#body {
height:300px;
width:300px;
background-color:white;
overflow:auto;
position:relative;
}
.long {
height:500px;
}
.half-height {
height:50%;
}
.side {
height:100%;
position:absolute;
width:30%;
background-color:white;
top:0;
overflow:auto;
}
#left-side {
left:0;
}
#right-side {
right:0;
}
Left-side DIV have to scrollable without body scrolling.
(When left-side's scrollbar touch to end, body start to scroll, I want to fix this)
When I wheel scroll in right-side DIV, body is not to be scrolled
Here's my fiddle https://jsfiddle.net/vuju6pgb/
You can add a css on the mouseenter event to set the overflow to hidden and switch it back go auto on the mouseleave event.
$("#left-side").mouseenter(function(){
$("#body").css("overflow", "hidden");
}).mouseleave(function(){
$("#body").css("overflow", "auto");
});
You can do the same with #body and body as well.
Here is the updated fiddle https://jsfiddle.net/vuju6pgb/4/
Related
I would like to build a slidepanel with js. For that I would like a div that resizes when slider opens.
Trying to do as following:
html
<div class="wrapper">
<div class="left">original content</div>
<div class="right">sliding from right side</div>
</div>
css
.wrapper {width:100%;height:100%;position:relative;}
.left {width:auto;height:100%;display:inline-block;}
.right {width:50%;height:100%;}
This is the basic setup. I would like to have left take the full width. But when I click a button I want right to Slide in to 50%. Before adding js, I am trying to position the two divs, but it does not work. I tried with table cell, flex, ... I m just not able to get it right. Someone a good tip?
$("#expand").on("click", function(){
$(".wrapper").toggleClass("expand");
});
.panel {
height:100vh;
transition: width .5s;
}
.left {
float:left;
width:100%;
Background:red;
Text-align:right;
}
.right {
float:right;
width:0%;
background:#ddd;
overflow:hidden;
}
.pos {right:5px;}
.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="panel left">
original content
<button class="pos" id="expand">Click</button>
</div>
<div class="panel right">sliding from right side</div>
</div>
I need to build a menu inside an element which can have different width and different positions of the page.
I would like to create an edit menu which appears when hover on element,but I need the menu is as wide as the entire page
I need to use position:absolute as not to "disturb" the page layout
this is my fiddle
http://jsfiddle.net/bkoqv52e/
HTML
<div class="container row">
<div class="col-md-6 left">
<nav>nav</nav>
<div class="content">content left</div>
</div>
<div class="col-md-6 right">
<nav>nav</nav>
<div class="content">content-right</div>
</div>
</div>
CSS
.container {
width:100%;
background:#eee;
padding:30px;
}
nav {
height:30px;
background:#999;
display:none;
width:100%;
position:absolute;
top:-30px;
left:0;
}
.left {
background:#ddd;
height:300px;
}
.right {
background:#ccc;
height:200px;
margin-top:100px;
}
.col-md-6:hover > nav {
display:block;
}
Any suggestion is appreciated! thanks
Without js, you can define .left and .right to position static in order to refer nav to container on position relative like:
.container {
width:100%;
background:#eee;
padding:30px;
position: relative;
}
nav {
height:30px;
background:#999;
display:none;
width:100%;
position:absolute;
left:0;
}
.left {
background:#ddd;
height:300px;
position: static;
}
.right {
background:#ccc;
height:200px;
margin-top:100px;
position: static;
}
.col-md-6:hover > nav {
display:block;
}
<div class="container row">
<div class="col-md-6 left">
<nav>nav</nav>
<div class="content">content left</div>
</div>
<div class="col-md-6 right">
<nav>nav</nav>
<div class="content">content-right</div>
</div>
</div>
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.
LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)
<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/
http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...
I'm currently having difficulty getting the footer of my website to work properly. I think it's because of my fixed positioned header and container divs but I need them to be fixed to stay on top when scrolling. I'm not sure how to take this into account for the footer to appear at the bottom when the container div is empty.
HTML:-
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">
</div>
</div>
<script>
$(document).ready(function() {
$('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );
});
</script>
<div id="navbar">
<div id ="navbarContent">
</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</div>
</body>
</html>
CSS:-
#container{
width:960px;
margin:auto;
overflow:hidden;
}
#wrapper{
min-height:100%;
position:relative;
}
#navbar{
width:100%;
height:40px;
margin:auto;
background-color:#4e8885;
position:fixed;
top:120px;
padding:0px;
}
#header{
width:100%;
height:120px;
margin:auto;
background-color:#8bbcba;
position:fixed;
top:0px;
}
#footer{
width:100%;
min-height:20px;
margin:auto;
background-color:#8bbcba;
position:absolute;
bottom:0;
left:0;
}
In your example using fixed heights, it's not necessary to dynamically calculate the margins. You should just be able to set the margins of container to match the totals of your headers and footer for margin-top and margin-bottom respectively. See this jsFiddle: http://jsfiddle.net/9Jdrr/
If you need to dynamically calculate it, you should be able to do it based on this arrangement.