This is a hard one to explain so bear with me (or just skip straight to the jsfiddle)
I have a Div with a max-height defined and overlow-x set to scroll. Within this Div there are a bunch of list items (in this instance, addresses). Naturally there can be many of these and they can overflow, which works fine. What I want is a 'cover' div that indicates that this panel is disabled. I have done this by putting an absolutely positioned div within the main div, like so.
<div style="max-height:150px;overflow:auto;position:relative">
<ul>
<li>Church Walk, Access To Foxholes Farm, DT2 9HG
</li>
<li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
</li>
<li>Little Bride, Access To Foxholes Farm, DT2 9HG
</li>
...etc
</ul>
<div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
This then appears when the user does something, overlaying the content and making it appear disabled. Great! The problem occurs when my list items overflow. When the overlay div appears it only covers the current visible portion of the parent div, meaning that if I scroll down the div it appears 'uncovered' as the cover div only spans the height of the parent, not including its overflow.
This is really hard to explain so please go to my jsfiddle and click one of the addresses. You'll see that the div gets covered. If you then scroll down that div you will see that the items at the bottom of the list are uncovered.
This also works in reverse so if you click the 'Hide the overlay div' button to get rid of the cover and then click one of the addresses at the bottom of the list, you'll see that the 'cover' still only covers the top part of the div.
Any ideas on how you go about making that cover div extend the entire height of its parent, including the overflow? Other alternative solutions are welcomed and encouraged. Bear in mind that I don't necessarily need the 'Searching' text that gets overlaid on top, just the 'cover' would be enough.
3 divs instead of 2 works well:
http://jsfiddle.net/JhGCn/2/
html:
<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
<div id="insideDiv">
<ul ...
</ul>
<div id="overlayDiv" style="display:none;">
<p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
</div>
</div>
</div>
css:
#insideDiv {
width: 100%;
height: 100%;
position: relative;
}
#overlayDiv {
background-color: white;
position: absolute;
top: 0px;
opacity: 0.8;
height: 100%;
width: 100%;
}
this works fine too:
http://jsfiddle.net/JhGCn/3/
var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
height += $(this).height();
$('#overlayDiv').css("height", height + "px");
etc..
I would take the overlay out of the parent, set a z-index and position it over the address picker with negative margin.
http://jsfiddle.net/JhGCn/1/
#overlayDiv{
background-color: white;
opacity: 0.8;
height: 100%;
width:100%;
position:absolute;
z-index:9999;
margin-top:-150px;
height:150px;
}
This a pattern I've seen before as well: http://jsfiddle.net/6oa6grn9/
#overlayDiv {
background-color: white;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
Related
I am querying how it is possible to have a site, for arguments sake StackOverflow, where an overlay div can hide all of the content apart from what is inside the div. I suppose like a camera, you can only see whats in the viewfinder, not outside of it. I want for the moment for the viewfinder to be fixed.
I found: Fiddle
which is close, but not quite. I have tried to google and ask friend devs but no luck in the resource department. Anyone got any ideas to get me started?
<html>
<div class="content">
<h1>All the page content divs</h1>
</div>
<div id="viewport-window"></div>
</html>
You can do this by applying a clip-path style to the main element you want the overlay to be over (for instance body if you want the whole page). You could possibly also use clip for more browser support, but do keep in mind it is being deprecated.
Demo
Has a static clip-path, but when moving mouse around it will change to a 200x200 viewport that follows the mouse
jQuery(document).mousemove(function(e){
var width = jQuery(document).width();
var height = jQuery(document.body).height();
var viewW = 200;
var viewH = 200;
var top = e.pageY - (viewH/2);
var right = (width-e.pageX) - (viewW/2);
var bottom = (height-e.pageY) - (viewH/2);
var left = e.pageX - (viewW/2);
var style = "inset("+top+"px "+right+"px "+bottom+"px "+left+"px)";
jQuery(document.body).css({
"-webkit-clip-path":style,
"-moz-clip-path":style,
"clip-path":style
});
});
body {
-webkit-clip-path:inset(20px 200px 200px 40px);
-moz-clip-path:inset(20px 200px 200px 40px);
clip-path:inset(20px 200px 200px 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://placekitten.com/g/500/500" />
Actually, you can do this without an "overlay" element.
Just use a giant box-shadow and a high z-index.
In this example I've used a :hover and the 'overlay` is slightly transparent.
.wrapper {
width: 80%;
margin: auto;
text-align: center;
}
.box {
width: 100px;
height: 100px;
margin: 1em;
display: inline-block;
vertical-align: top;
background: plum;
position: relative;
}
.box:hover {
box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.75);
z-index: 9999;
}
<div class="wrapper">
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
</div>
Of course, this effect is purely visual the other elements are still accessible.
You can also do that in 2 steps for example:
First, create a div to overlay entire page and hide everything.
Second, create a clone of your div(to be shown) with absolute position which has the same coordinates of the original location, and increase its z-index.
So, the logic is to hide everyting and show what you want over it. You could also visualize it with css or jquery animations.
I'm currently building a responsive site and i need to have a hidden div which will slide in from the left after clicking a button in the the left side bar. Once this button has been pressed the side bar will be pushed across from the sliding content (Sliding from the left) and overlay the existing content or push across the content in the right hand side.
This is where the problem lies as it's a responsive site. I would like the sidebar in the 'siteInnerLeft' div to be pushed to the right hand side of the page when the new div slides in. So after the content has sliden in the previous content is no longer visible until the sliding content has slid back out.
Here is a my JSFiddle - http://jsfiddle.net/76xvB/2/
Hopefuly you can see what i'm trying to acheive. I've manaed to get it working until a point but the issue I have is the content sliding in is fixed and I don't want it to be fixed as there is more content to view and this removes the users ability to scroll.
I understand that 'position fixed' takes the element out of the document flow. So is this going to stop me acheiving what I want? If so, is there another way of doing it.
NOTE: The real site will have percentages not pixels because of it being responsive, this is a broken down version.
My current code:
HTML
<div id="siteWrapper">
<div id="siteInnerLeft">
<div id="homeNavLink">
<p>Click me</p>
</div>
</div>
<div id="siteInnerRight">
<div class="pushmenu-push">
<p>Current page content</p>
</div>
<div class="pushmenu pushmenu-left">
<p>Content to slide in from the left</p>
</div>
<div id="footer">
<p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
</div>
</div>
</div>
CSS
#siteWrapper{
max-width:500px;
margin:0 auto;
width:100%;
}
#siteInnerLeft{
background-color:green;
width:100px;
float:left;
position:fixed; /* Sidebar that needs to be fixed*/
}
#siteInnerRight{
width: 400px;
background-color:yellow;
float:left;
margin-left: 100px; /*Compensates for fixed header width */
}
.pushmenu {
background: #e9e8e0;
font-family: georgia,times news roman, times, serif;
position: fixed;
width:400px;
height: 100%;
top: 0;
z-index: 1000;
}
.pushmenu-push{
left: 0;
overflow-x: hidden;
position: relative;
width: 100%;
}
.pushmenu-left{
left:-400px;
}
.pushmenu-left.pushmenu-open {
left: 0px;
/* box-shadow: 5px 5px 5px #d9d8d0;*/
}
.pushmenu, .pushmenu-push {
transition: all 0.3s ease 0s;
}
#footer{
width:100%;
clear:both;
background-color:red;
}
jQuery
$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
Any suggestions would be most appreciated.
Thanks.
On completion of the transition, change the position of the sidebar so that it is not longer fixed. The answer on the following link breaks it down pretty well and has quality references:
Callback when CSS3 transition finishes
If the side-bar is fixed, you could create a scroll-bar inside for the content, so the text can be viewable; you could do this by adding overflow-y: auto; in the .pushmenucss class.
Another way would be to set the sidebar as position: absolute; and then dynamically change the top property from javascript when the user hits the sidebar's bottom.
This is my first post, but I'm a long-time viewer. Hope someone can help - this one's been driving me crazy and I've tried and tried to find an answer but to no avail.
Basically, I'm updating a friend's website with a few stylistic scrolling elements. I chose SuperScrollorama as it looks completely amazing, although I'm ready to accept that it's complete overkill for what I'm trying to achieve. I'm really interested in SuperScrollorama anyway, so I suppose I partly chose it just so I could try to use it!
Anyway, the idea I'm trying to implement involves:
Single page website, where section one is simply a centred, large (650px width) image and a navigation menu <ul> centred and fixed to the top of the page containing 6 <li> elements.
On scrolling down, I want the image to shrink to 250px width, and I want to make a space of 250px between the third and fourth <li> for the shrunken image to scroll into and then remain for the duration of the scroll. I'm trying to create the space by adding a margin-right to the third <li>. (I appreciate this may give me undesirable side-effects, one being that it won't be completely centred. Suggestions welcome here too! The problem that I'm about to describe, however, I also experienced when trying other methods based around floating and using two separate divs so the margin-right itself doesn't seem to be the root cause)
Now, I've managed to get the image to shrink and attach itself to the top of the page without too much trouble.
The problem that I'm having is with the margin-right. On page load, the <ul> appears centred and uniformly spread, as I want it to. The margin-right value on the third <li> is 0. However, the value jumps from 0 to 89px following the tiniest of scroll events. Continuing the scroll works as desired, but on scrolling back up, the margin returns to 89px and then stops.
Here's the code that I've got:
HTML:
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROGRAMME</li>
<li id="grow_margin">TICKETS</li>
<li>MENU</li>
<li>VENUE</li>
<li>FAQ</li>
</ul>
</nav>
<header id="fix-it">
<h1><img id="scale-it" src="/images/logo.png" />TITLE</h1>
</header>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
width: 100%;
height: 5%;
text-align: center;
}
nav ul {
list-style: none;
height: 100%;
}
nav ul li {
display: inline-block;
height: 100%;
}
nav ul li a {
color:#bbbbbb;
text-decoration: none;
margin: 8px;
}
header {
width: 100%;
position: fixed;
}
header h1 {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
And the JS:
<script>
$(document).ready(function() {
var controller = $.superscrollorama({
reverse: true
});
var windowHeight=window.innerHeight;
var scrollDuration = windowHeight;
controller.addTween('#grow_margin',
TweenMax.to( $('#grow_margin'), .25, {css:{'margin-right':'250px'}, immediateRender:true}), scrollDuration);
controller.addTween('#scale-it',
TweenMax.fromTo( $('#scale-it'), .25, {css:{width:'650px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{width:'250px'}, ease:Quad.easeInOut}),
scrollDuration);
controller.addTween('#fix-it',
TweenMax.fromTo( $('#fix-it'), .25, {css:{top:'40%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top:'4'}, ease:Quad.easeInOut}),
scrollDuration);
});
</script>
Any help would be so much appreciated! It's driving me absolutely crazy!
Thank you!
Rob
I am trying to create a carousel, where clicking on any element will slide it leftwards, simultaneously sliding the right element into viewport. For that, I need to have the divs stacked side by side. I am trying it out as a float based layout (see Fiddle ).
Problem is that here clicking the red colored div slides it leftward alright, but not the green element leftwards. This is probably due to the fact that they are actually lying below another, as visible when the overflow: hidden is removed from #cont's style. How elese to stack them side by side so that sliding one leftward automatically slides the next one leftwards as well? (Creating the to-be-next element on the fly while clicking and animating it into viewport is a no-no, the element should be present in the DOM!)
I'd suggest you use a plugin, as there is more to this than you may realize. There are many plugins out there for this, here's a list to get you started: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I modified your Javascript, HTML, and CSS to get you pointed in the right direction:
http://jsfiddle.net/nf5Dh/2/
You need a container contContent, positioned absolutely, and that container gets moved within the container div. You just float the elements in contContent to get them next to each other.
HTML:
<div id='cont'>
<div id="contContent">
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
</div>
</div>
CSS:
#cont {
width: 50px;
padding-top: 10px;
background: blue;
height: 50px;
overflow: hidden;
position: relative;
}
#contContent {
height: 50px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#contContent > div {
float: left;
display: inline-block;
height: 50px;
width: 50px;
}
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
And the JS:
$("#contContent > div").click(function(){
$("#contContent").animate({left: "-=50px"},1000);
});
You'd probably be better off using an ul instead of all divs, this is at least more semantically correct, though not technically necessary.
<div id="carousel">
<ul id="carouselContent">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
</ul>
</div>
This:
#cont {
white-space:nowrap;
overflow: hidden;
}
.pane { // or whatever the slide divs are called. get rid of the float.
float: none;
display: inline-block;
*zoom:1;
*display:inline;
}
You can use that carousel where you can generate javascript for the carousel http://caroufredsel.dev7studios.com/configuration-robot.php
I've used http://sorgalla.com/jcarousel/ for things like this in the past, that's based on postion: relative and left/right offsets. Probably easier than messing with floats.
You can try using a list item instead, and display them inline.
I have a .wall div with a some .toy divs inside it. I want to arrange the toys inside the wall. float:left property has done it for me nicely.
Now the problem is I want to add position:absolute for the toy divs to make it draggable later. How can I do this either via Javascript or via CSS?
Applying position:absolute, all toys will come to the top left corner of the wall overlying and hiding each other.
The width and height of the wall is constant but the width and height of the toys is variable, also the number of toy divs is dynamic and as the number increases toys need to arrange as rows.
Any suggessions will be helpful, please note the I can not avoid the use of position:absolute for dragging.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
body{
text-align:center;
}
.clearfix{
clear:both;
}
.wall {
border: 5px solid #cde;
margin:auto;
width:200px;
padding:10px;
}
.toy{
background-color: #BBCCEE;
border:1px solid #8899BB;
margin:5px;
width: auto;
padding:5px;
float:left;
}
.tall{
padding-top:10px;
}
</style>
<script>
$(document).ready(function() {
$('.toy').each(function(index) {
var position = $(this).offset();
var prevPosition = $(this).prev().offset();
$(this).css({
//top: position.top,
//left:position.left,
//position:'absolute',
});
});
});
</script>
<div class='wall'>
<div class='toy'>T1</div>
<div class='toy'>T2</div>
<div class='toy'>T3333333</div>
<div class='toy'>T4</div>
<div class='toy'>T5</div>
<div class='toy tall'>T6</div>
<div class='toy'>T7</div>
<div class='toy'>T8</div>
<div class='clearfix'></div>
</div>
Here is the code at JSBin.
Add
position:relative
To the wall div
I am working on a website that does exactly that (sorry for the non-english stuff):
http://moveit.canassa.com/cartao/4/
The link is now broken but here is a jsFiddle that shows what I am talking about:
http://jsfiddle.net/canassa/Z9N3L/
The "toy" div is using a position absolute:
.toy{
width: 100px;
height: 25px;
position: absolute;
z-index: 0;
}
The problem with the position absolute is that the toy will be relative to page and not the "wall" container, in order to fix that you must make the wall container relative:
#wall{
position: relative;
overflow: hidden;
}
The overflow:hidden is also a nice trick that I found. It makes the draggable objects go "under" the wall container.
There is no big secret to make it draggable, using jQuery:
// Creates a toy div inside the wall
$(MV.wallId).append('<div class="toy" id="' + this.getId() + '"></div>');
box = this.getBox(); // return the "toy" that I've just created.
$('#' + this.getId()).draggable(); // make it draggable
This would be a lot easier if you just used the jQueryUI .draggable(). It doesn't require the elements to be positioned.
If you're dead set on using this plugin, then you have the right idea. Let the elements flow into place and then calculate their position and set position: absolute and whatever the left and top end up being at runtime.
Set the .wall to be position: relative. Then:
var tPos;
$('.toy').each(function(index) {
tPos = $(this).position();
$(this).css({
left: tPos.left,
top: tPos.top
});
};
$('.toy').css({
position: absolute
});
The height of the .wall and the width of each .toy collapse when the toys are absolutely positioned but you can just add a few more lines to get/set their width and height in the above .each loops.
This obviously doesn't work if new toys can be added dynamically without a page reload as you suggest. To handle that you could switch them back to position: relative, add the new one, get the position of the new one in the flow, then set the position and switch back to position: absolute. Any elements that had been dragged out of place would be gaps in the flow, but I don't see any easy way around that.
the element in that the absolute should be positioned, must have the style position:relative.
(must be a parent of the target element)
The container div for every .toy must have position:relative set. That way, the position 0 for its children elements becomes its top left corner. Like this:
<div class="parent">
<div class="child">Blah.</div>
<div class="child">Blah.</div>
</div>
And:
.parent {
position: relative;
}
.child {
position: absolute;
left: 10px; /* This is 10 pixels from the parents left side */
top: 10px; /* This is 10 pixels from the parents top side */
}
Good luck.