I am facing a problem. I am trying to create something similar to this:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
z-index:1000;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
z-index:-99;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
When I put this code inside ion-content, it simply doesn't work. I just see the first div, but I can't scroll to see the rest.
Related
How to show my div inner overflow scroll? i need show this div. I did position absolute and z index but not showing div. it is showing inner parent div. Someone help me? Thanks a lot :)
<div class="otobus_alan">
<div class="otobus">
<a href="" class="koltuk">Koltuk
<div class="ekstra_div">
Test
</div>
</a>
</div>
</div>
.otobus_alan {
width:600px;
height:200px;
overflow-x:auto;
position:relative;
margin-top:100px;
z-index:1;
}
.otobus {
float:left;
display:block;
width:1000px;
height:180px;
background:red;
position:relative;
z-index:1;
}
.ekstra_div {
position:absolute;
display:none;
z-index:2;
padding:25px;
background:blue;
width:50px;
height:50px;
top:-40px;
left:100px;
}
.koltuk {
float:left;
background:white;
}
.koltuk:hover .ekstra_div {
display:block;
}
https://codepen.io/musti_nation/pen/RyZBoe
I'm trying to create a parallax effect on a div but it jumps the the top of the page as i start scrolling. The top value is changes to 0 immediately
HTML
<div class="container">
<div class="top">
</div>
<div class="middle">
</div>
<div class="slider" id="rowSlider">
</div>
<div class="content">
</div>
</div>
JS
function parallax(){
var prlx_lyr_1 = document.getElementById('rowSlider');
prlx_lyr_1.style.top = -(window.pageYOffset / 2)+'px';
}
window.addEventListener("scroll", parallax, false);
CSS
.container{width:100%;}
.top{position:fixed; top:0; left:0; width:100%; z-index:1; background:#000; height:50px;}
.middle{width:100%; height:150px; background:red; width:100%; position:relative; z-index:2; margin-top:50px;}
.slider{width:100%; position:fixed; height:200px; background:orange; left:0; top:200px; z-index:3;}
.content{width:100%; position:relative; z-index:4; height:200px; background:blue; margin-top:400px;}
JSFIDDLE DEMO
Thanks to dann:
Initial position for .slider is 200px. solution is:
prlx_lyr_1.style.top = (200-(window.pageYOffset / 2))+'px';
https://jsfiddle.net/rd9kot8p/3/
I want to build a page in three sections:
A header of fixed height
A main section that is liquid
A footer of fixed height
I want the page to have a minimum height so that the bottom of the footer is flush with the bottom of the window. I want the main section in the middle to stretch, even when the contents of the main section are too short.
I know I could probably do this with JavaScript but I'd prefer to use a CSS solution if there is one.
I've tried various versions of the following code, but the main section is only expanding as far as its contents will push it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body, header, main, footer {
width:100%;
display:block;
}
body{
display:block;
position:relative;
height:100%;
min-height:100%;
padding:0;
margin:0;
}
header{
background-color:#ccc;
height:100px;
}
footer{
height:100px;
background-color:#ccc;
}
main {
border:1px solid #f00;
}
#wrapper{
height:100%;
min-height:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>
I do believe something like this would work. Demo
<div class="container-main">
<div class="header">header</div>
<div class="wrapper">
<div class="container-fluid">
<div class='one '>one</div>
<div class='two '>two</div>
<div class='three '>three</div>
</div>
</div>
<div class="footer">footer</div>
</div>
CSS:
html, body {
color:#fff;
width:100%;
height:100%;
margin:0;
}
.container-main {
display:table;
width:100%;
height:100%;
box-sizing:border-box;
background:#efefef;
padding:4px;
border:1px solid red;
}
.wrapper {
display:table-row;
height:100%;
}
.container-fluid {
display:table-cell;
padding:10px;
background:#e1e1e3;
border:1px solid blue;
}
.one {
background:#888;
}
.two {
background:#666;
}
.three {
background:#555;
}
.one, .two, .three {
height:80px;
}
.footer {
background:#000;
display:table-row;
}
.header {
background:#000;
display:table-row;
}
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>
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!
This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!