I want to build an mobile app interface which basically shows two different things, a list and a map. But instead of having a plain tap-bar at the bottom with two entries, I want to show the two things with as layers (for example like the Google Maps App (on iOS), where you can drag a drawer from the bottom to the top and interact with it, but you can also interact with the underneath map when the drawer is at the bottom again).
A good picture is that one (the map should be fullscreen underneath the list-view, and you should be able to drag the list to the top, and slide through the list, but also when the map is visible to interact with the map (pinch to zoom, etc.)).
I thought of building a map-div with a lower z-index than the list-div, giving the list-div a top-padding of 200px (so that the map is always visible a little bit, and the list is not on top) and giving the list-div a transparent .png background. But then the area on top of the list-div is not clickable, so I can't interact with the underneath map-div (because of the padding and the transparent background of the list-div).
Is this possible with plain CSS?
EDIT: I think I got the solution, which looks like:
<html>
<style>
html {
width: 100%;
height: 100%;
}
.map {
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.list {
height: 1000px;
width: 100%;
background-color: blue;
position: relative;
margin-top: 200px;
z-index: 1;
}
.layer {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<body>
<div class="map">
<h1>Map</h1>
</div>
<div class="layer">
<div class="list">
<h1>List</h1>
</div>
</div>
</body>
</html>
Related
I'm trying to align to make some custom ''video player'' thingy based around two iframes acting as double buffers and an overlay that will allow users to perform custom actions, similar to Coursera's modal questions.
All this will be exposed later through and uri that will be used in an external iframe (yea, i know)
The issue i'm facing is that i need the overlay to always match the video inside the iframes but the iframes themselves seem to be bigger than the actual video. For example, by assigning width: 100% to the iframes i manage to get a consistent result accessing this component through another iframe (the one that will be used in the website).
Current html structure using VueJs
<div id="action-player">
<!-- Interactive layer -->
<div class="a-overlay-layer">
<slot name="overlay-layer"></slot>
</div>
<!-- iFrame double buffer -->
<div class="a-iframe-layer">
<div id="buffer0" :class="['a-frame-buffer', { 'a-frame-buffer__active': bufferState.active === 0 }]"></div>
<div id="buffer1" :class="['a-frame-buffer', { 'a_frame-buffer__active': bufferState.active === 1 }]"></div>
</div>
</div>
Both buffers are being instanced by vimeo player. Currently in the slot for the overlay i just have a background:red element covering the screen;insira o código aqui
.a_player {
position: relative;
width: 100%;
height: 100%;
// padding-top: 56.25%; // //Aspect ratio 16:9
}
.a-overlay-layer {
position: absolute;
display: block;
float: right;
height: 100%;
width: 100%;
z-index: 2147483647;
pointer-events: none;
// background: transparent;
}
.a-iframe-layer {
position: relative;
width: 100%;
height: 100%;
}
.a-frame-buffer {
position: absolute;
z-index: 99;
display: block;
height: 100%;
width: 100%;
// vimeo iframe
iframe {
height: 100%;
width: 100%;
}
}
.a-frame-buffer__active {
z-index: 100 !important;
animation: smoothTransition 0.425s linear 0s 1 normal both;
}
The double buffer works fine, i just need to find a way to keep the overlay matching the video size not the whole iframe, which i thin, i defaulting to the whole screen cause of width: 100%.
Appreciate the help! o/
I have two "DIV"s, one on the left and one on the right. The right one has draggable elements and the left one has a droppable container. Both DIV's have the CSS attribute overflow: auto, which is essential in my implementation because I need a scroll to appear in each div when either DIV overflows.
The issue is, when I drag the element in the right DIV, and move it to the left, it disappears after the edge of the DIV.
This is a sample of what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
for (var i = 1; i <= 20; i++) {
$('#right').append($('<div></div>')
.addClass('item')
.html(i));
}
$(".item").draggable({
cursor: "move",
revert: "invalid"
});
$("#bin").droppable({
drop: function(event, ui) {
var mydiv = $(ui.draggable);
$("#bin").html("Dropped");
}
});
});
</script>
<style>
#left {
border: 2px solid black;
position: fixed;
width: 49%;
height: 98%;
overflow: auto;
}
#right {
border: 2px solid black;
position: fixed;
left: 52%;
top: 2%;
width: 46%;
height: 98%;
overflow: auto;
}
#bin {
border: 2px solid black;
position: relative;
left: 12%;
top: 5%;
width: 75%;
height: 75%;
}
.item {
border: 2px solid black;
left: 12%;
top: 5%;
width: 15%;
height: 5%;
}
</style>
</head>
<body>
<div id="left">
<div id="bin">
</div>
</div>
<div id="right">
</div>
</body>
</html>
You need to remove the overflow:auto in your CSS. You will then see the item will be visible when dragging between the divs then.
In order to accomplish the functionality you'd like, you need an outer div wrapping the two container boxes. You'd set an fixed height on the outer div, then use overflow-y:scroll to get your functionality.
You can do as others have suggested, but I've always found the best way to accomplish this is to set the draggable item to position:fixed
see for example:
https://jsfiddle.net/gregborbonus/tzz0927p/1/
For me personally, this allowed a lot more flexibility, but I also did a lot of work with responsive designs and such to make it work right.
I've edited to include overlapping div's. Added a few functions to make it more visible, like random Color, and an on hover and hover out event to make it possible to see and click each box.
https://jsfiddle.net/gregborbonus/tzz0927p/3/
With 100 and added a scroll function to make the scroll smooth. Also added a quick snippet so that the elements would only appear within the containing box.
This is different from your code, it uses 2 containers, rightc for the main container(the one that scrolls) and right for the container of all the elements. The rest is commented in the code.
https://jsfiddle.net/gregborbonus/tzz0927p/13/
so, something I realized was that the elements would still overlap the page on page load.
So, to show this working with an even shorter div and changed to compensate for onload:
https://jsfiddle.net/gregborbonus/tzz0927p/15/
I'm not sure what this is called, but how do developers accomplish being able to have, say a hollow image of a Nexus phone, and then scroll content inside of it? It's an ingenious way to simulate how a product will work in real life, so how does one pull this off?
Here's an example, about halfway down the page.
http://grupoweb.upf.edu/innova/q_kly/#step-6
#silversunhunter
I am able to get both images displayed, but the content seems to be completely obscuring the parent div. I measured the images and the dimensions are correct afaik.
css:
.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;
}
.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}
HTML:
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>
</div>
</div>
</div>
You need to set the image as a background image in the parent div. Then a properly measured div inside that is absolutely positioned can be your scrollable content.
<div id="main">
<div id="content"></div>
</div>
the phone image is 345px × 661px
#main {
background: url(/filelocation) no-repeat;
height: 661px;
width: 345px;
position: relative;
}
the screen is 305x601 (hypothetically)
#content {
overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
height: 601px;
width: 305px;
position: absolute;
left: 20px;
top: 30px;
}
This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 8 years ago.
This is a reference that I used, which explains how to make a div scrollable with its scroll bar hidden. The only difference is that I have nested divs. Check my fiddle
HTML:
<div id="main">
<div id="sub-main">
<div id="content">
<div id="item-container">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
</div>
</div>
CSS:
#main {
width: 500px;
height: 500px;
}
#sub-main {
width: 500px;
height: 500px;
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 500px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Like above, I have a overflowed horizontal div and I want to hide its scroll bar. I have to make it still scrollable because $.scrollTo() wouldn't work otherwise.
UPDATE:
I have read all the answers, but I still have not resolved my problem and don't know what's causing it. This is the live that's having troubles.
Basically, I am trying to follow this almost exactly the same, but there must be some reason that my website isn't working as expected. There are two problems.
When I set overflow: hidden to a parent container of scrollable items, I cannot scroll (native javascript scroll functions do not work too).
I want to scroll just the overflowed container, not the entire window. This can be done by setting a target in $.localScroll({ target: '#projects-content' }) but nothing scrolls when I set the target. If I don't, scrolling works as long as overflow:hidden is not applied.
Again, any help would be greatly appreciated.
HTML:
<div id="projects"> <!-- start of entire projects page -->
<div id="project-sidebar">
<a href="#project-first">
<div class="sidebar-item sidebar-first">first</div>
</a>
<a href="#project-second">
<div class="sidebar-item sidebar-second">second</div>
</a>
<a href="#">
<div class="sidebar-item sidebar-third">third</div>
</a>
</div>
<div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
<div id="project-first" class="project-item">
<!-- these items should be scrollable -->
<div class="project-subitem" id="first-sub1">
<a href='#first-sub2' class='next'>next</a>
</div>
<div class='project-subitem' id='first-sub2'>
<a href='#first-sub1' class='prev'>prev</a>
</div>
<!-- end of scrollable items -->
</div>
</div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->
<script>
// FIXME: when I set target, nothing scrolls.
// But I don't want the entire window to scroll
$('#projects').localScroll({
//target: '#project-content',
hash: false
});
</script>
CSS
#project-content {
width: 80%;
height: 100%;
position: relative;
float: left;
}
#project-sidebar {
float: left;
width: 20%;
height: 100%;
}
.project-item {
width: 300%;
height: 100%;
}
.project-subitem {
height: 100%;
width: 33.33%;
position: relative;
float: left;
}
Update:
After I added overflow:scroll to #project-content, the scrolling works as expected. All I need now is making scroll bars disappear in #project-content. I tried adding overflow:hidden to its parent but had no success. I also tried adding it to html, body, but then the entire document refuses to accept any scrolling functions like scrollTop().
Any help will be greatly appreciated!
Theory :
The technique is to use a parent container that is shorter than the child element with scrollbar. This image shows what I mean :
Practice :
In your case, I suggest using absolute positionning and negative bottom value on #project-content so it overflows it's parent container (#projects) at the bottom.
The point is now what negative value? It should be the same value as the with of a scroll but scrollbars are never the same width according to browsers. So I suggest giving a bigger value : -30pxto be sure it is hidden. You will just need to be carefull that you don't have content to close to the bottom that can be hidden on browesers with thin scrollbars.
This is the CSS you should add to your website :
#projects{
position: relative;
}
#project-content{
position: absolute;
top: 0;
left: 20%;
bottom: -30px;
/* remove:
height: 100%;
position: relative;
float: left;
padding-bottom: -15px
/*
}
scollbars take up around 20px so just make you scrollable div 20px taller and 20px wider and your scrollbars will be hidden:
#content {
background-color: red;
width: 520px;
height: 520px;
overflow: auto;
}
Example
It's kind of cheating but could you hide it behind the #content like this DEMO
#content {
background-color: red;
width: 500px;
height: 480px;
overflow: hidden;
}
#item-container {
width: 1500px;
height: 500px;
overflow: scroll;
}
If you know all containers that can be scrollable, you can hide scrollbar with CSS and a little bit of JS. For webkit-based browsers (safari, google chrome, opera) it will be CSS-only solution to set scrollbar width to 0. For IE, Firefox and other non-webkit browsers you should calculate scrollbar width that will be used as negative margin-right for you scrollable content.
To do so you should wrap your content into div with overflow-y:scroll to always show vertical scrollbar and hide this scrollbar with margin-right:-17px and parent overflow:hidden. Example is here. No need to set fixed width, nor height.
This is the way that used in jQuery Scrollbar. Hiding horizontal scrollbar is more complicated and requires to handle content changes to recalculate container height.
I basicly add padding:0 1em 1em 0; to the element where it is supposed to be hidden , this hides both scrollbars if parent has overflow: hidden. tune padding-bottom or only padding-right, if it is to hide only one of them.
1em is average width of scroll bars in most browsers :
http://jsfiddle.net/5GCsJ/912/
The solution to make the content itself with horizontal scroll.
Just increase the height of #main, and #content.
#main {
width: 500px;
height: 520px;
}
#sub-main {
overflow: hidden;
}
#content {
background-color: red;
width: 500px;
height: 520px;
overflow: auto;
}
#item-container {
width: 1500px;
height: 500px;
overflow: hidden;
}
.item {
width: 500px;
height: 500px;
font-size: 25em;
text-align: center;
float: left;
}
Use a script to create custom scrollbars.
http://manos.malihu.gr/jquery-custom-content-scroller/
Then use CSS(or modify script or change script config) to hide the custom scrollbars.
I did this crudely using jQuery and your example
Check this fiddle:
I simply detected the direction of the scroll-wheel and pushed the horiz-scroll bar with jQuery
$(document).ready(function(){
$('#content').bind('mousewheel', function(e){
var curScroll = $("#content").scrollLeft();
if(e.originalEvent.wheelDelta > 0) {
$("#content").scrollLeft(curScroll-500);
} else {
$("#content").scrollLeft(curScroll+500);
}
});
});
It is "crude" because I hard-coded some values like the 500px amount to scroll, you could write some more javascript to detect dynamically how much to scroll. Plus I don't know if the wheelDelta value will be +120 for up and -120 for down, for you and other users.
Also note that the scrolLeft() can be animated.. for smoother transitions.
Is there any way to allign a button to the center of the DIV.I was able to make it work with different strategies using a padding-top:2px and padding-bottom:2px or with using a margin-top and margin-bottom.But here comes the problem,basically it is a moving DIV i.e it might differ if the user have more inforamtion in it.For example user enters only work number in the input text field it will be showing up only the only work phone number.But if the user enters work,home and additional number,it need to show all the information entered,which will vary the size of the DIV.What happens is the div will increase in size and button still stays at the top of the div.Is there any way to make the button fixed at the center even after the DIV varies in size.Can it be achieved in CSS or we need to used javascript to make it work.
Vertical align is always tricky.
However where is a demo of moving centered button with CSS and moved with jQuery.
As it moves, the button remains at center as the position has not been defined.
#outer {
text-align: center;
width: 200px;
background: #ddd;
height: 200px;
position: static;
display: table;
}
#inner {
line-height: 200px;
display: table-cell;
vetical-align: middle;
}
I think it can be done with pure css, is this what you are looking for?
<html>
<head>
<style type="text/css">
.wrapper {
position: relative;
width: 300px;
height: 200px;
background: #eeeeee;
}
.button {
position: absolute;
top: 41%;
left: 33%;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="button" type="button" value="Button" />
</div>
</body>
</html>