Created a div popup with position fixed. This div includes form element. If screen size is small then popup gets cut form bottom and we can scroll through browser stroller.
I added solution to keep it up from bottom
.popup {
bottom: 15%;
position: fixed;
}
But it comes in bottom and doesn't look in center if screen size is big.
I am looking for solution like popup should be always in center of page and if screen size is small then it should be up from bottom. Should not cut from bottom.
To center div you have use following code
.popup {
width:200px;
height:200px;
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
Setting left,right,top,bottom to 0 with margin auto will center div having position fixed or absolute.
div {
background:#333;
width:200px;
height:200px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
.popup{
width:80%;
height:200px;
position:fixed;
top:10%;
left:0;
margin:0 auto;
}
This is my custom Responsive popup that i use most frequently. To get the div centered i use JQuery height and my script calculates the device window height and adjust popup accordingly.
As per me this is the most easiest and awesome way to create popups
I hope it might help you.
JSFiddle : Demo
HTML
<div class="popup">
<span class="p_box">
<span class="close">X</span>
<h2 id="popup_head"> Popup Alert !</h2>
<p> This is popup content. The dummy text is here.</p>
Some more dummy text.
</span>
</div>
<div class="content">
<h1>Hello There...</h1>
<p>This is just a dummy text.</p>
<p>This is just a dummy text.</p>
<p>This is just a dummy text.</p>
</br>
<h2>Content</h2>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
<button id="popup_bt">Popup</button>
</div>
CSS
body {
margin:0px;
width:100%;
}
.content {
padding:55px;
text-align:justify;
}
.popup {
display:block;
visibility:hidden;
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
background:rgba(0, 0, 0, 0.7);
z-index:9999;
overflow:hidden;
text-align:center;
}
#media(max-width: 1020px) {
.p_box {
width:30%;
}
}
#media(max-width: 800px) {
.p_box {
width:40%;
}
}
#media(max-width: 640px) {
.p_box {
width:60%;
}
}
#media(max-width: 420px) {
.p_box {
width:80%;
}
}
.p_box {
position:relative;
margin:0px auto;
display:block;
height:auto;
width:25%;
padding:20px;
background:white;
text-align:left;
}
.close {
display:inline;
position:absolute;
right:0px;
top:5px;
margin-right:5px;
background:#E32222;
color:white;
height:20px;
width:20px;
border-radius:5px;
z-index:9999;
cursor:pointer;
text-align:center;
}
#popup_head {
color:#E32222;
text-align:center;
}
JQuery/JavaScript
$(document).ready(function(){
var dh = window.innerHeight;
var pbox_h = $(".p_box").innerHeight();
var mid_scr = dh/2;
var mid_box = pbox_h/2;
var topPos = mid_scr - mid_box;
$(".p_box").css("top","" + topPos + "px");
$("#popup_bt").click(function(e){
$(".popup").fadeIn();
$(".popup").css("visibility","visible");
});
$(".close").click(function(event){
$(".popup").fadeOut();
});
});
Note : You could custom your popup box i had added some dummy content.
Centering things is a piece of cake:
.centereddiv {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
Hope this helps!
Related
I have an issue with the layout of my website right now...
The layout is similar to this fiddle I made. Top layer has my project thumbnails, and the lower layer gets exposed to show project details when user clicks a thumbnail.
Problem I am having is that a user has to scroll down to click a thumbnail on the top layer. Then, when the layer fades out, the lower div has already scrolled with it - and I need the div to be scrollTop(0) instead...
Please see my fiddle to understand what I am talking about:
$('#click').on('click', function(){
$('#topPanel').fadeOut(600);
})
#click {
padding:10px 15px;
position:fixed;
z-index:100;
}
#topPanel, #bottomPanel {
width:80%;
height:auto;
margin:0 auto;
padding:100px;
text-align:center;
}
#topPanel {
background:green;
position:absolute;
z-index:10;
}
#bottomPanel {
background:yellow;
position:absolute;
z-index:0;
}
#topPanel p, #bottomPanel p {
padding: 500px 0;
text-transformation:uppercase;
}
#bottomPanel p:nth-child(odd){
background:#555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">CLICK ME TO FADEOUT TOP</button>
<br>
<p>please scroll down and then click button above to see issue</p>
<div id="topPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
<div id="bottomPanel">
<p>top of page</p>
<p>middle of page</p>
<p>bottom of page</p>
</div>
https://jsfiddle.net/reese329/50urkgtm/
The problem is that your panels aren't scrolling: the whole document is scrolling! The trick is to set overflow: hidden on a wrapper element (or the body), and make the panels themselves scrollable with overflow-y: scroll. Here is a working example.
Notice that I had to set the height of the panels explicitly (to 100vh, filling the viewport).
I also fixed your text-transform: uppercase rule (the style is text-transform, not text-transformation :) ).
I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.
I have an alert box with text inside, but I can't think of any ways to move the text down within the alert box div, vertically centering it. I've tried line-height but that of course will not work for the two lines of text that I have when you view it on a browser with a min-width of 320px and max 480px. #alertmsg should remain at the top, however, the text within it should be centered when viewed on a mobile browser. I've also tried Vertical-align, but that doesnt work either. Does anyone have any suggestions?
Any help would be greatly appreciated. I also tried to place a <p> in the JavaScript; no luck.
Here is my CSS:
#alertmsg {
position:absolute;
background-color:#252525;
top:0px;
padding-left:0px;
width:100%;
font-family:'gotham-medium', arial, sans-serif;
src:url("http://www.3elementsreview.com/fonts/gotham-light.ttf");
font-style:normal;
font-weight:normal;
font-size:1.2em;
line-height:1.2em;
text-align:center;
height:63px;
color:#ffffff;
opacity:1;
display:inline-block;
overflow:hidden;
z-index:1000;
border-bottom:2px solid #ff6000;
}
And my JavaScript:
$(document).ready(function() {
if (typeof window.sessionStorage != undefined) {
if (!sessionStorage.getItem('mySessionVal')) {
$('<div />', {
id : "alertmsg",
text :"Join our email list and receive the latest updates at 3Elements Review.",
on : {
click: function() {
$(this).slideUp(200);
}
}
}).appendTo('body').fadeIn(1).delay(6000).fadeOut("slow");
sessionStorage.setItem('mySessionVal', true);
sessionStorage.setItem('storedWhen', (new Date()).getTime());
}
}
});
You could use
#alertmsg {
position:absolute;
top: 50%;
height:63px;
margin-top: -31.5px; /* half height */
}
Demo
I have been working with a script by Scripterlative called CursorDivScroll, which scrolls the content of a div based on the cursor position. In my case, I want to scroll content vertically from the right side of the div; not a continuous scroll, but movement that goes a little and then stops so the user has some control. I'm having problems getting the script to work and wondered if anyone knew of a better solution? The script I have uses cursordivscroll.js and this script, which is placed just beneath my div.
<script type='text/javascript' >
$(document).ready(function() {
CursorDivScroll( 'repertoiredetails', 40, 10 ).noHorizontal();
});
</script>
Thanks for any help in advance.
<div id="repertoiredetails">
<p>content</p>
</div><!-- close repertoiredetails-->
#repertoiredetails {
background-color:#000;
width:400px;
opacity:0.7; filter:alpha(opacity=70);
margin-top:140px;
float:left;
height:auto;
display:none;
margin-left:-2px;
padding-top:5px;
border-radius:5px;
-moz-border-radius:5px; /* Firefox 3.6 and earlier */
z-index:999;
}
#repertoiredetails {
cursor: url(../images/arrow.png), auto;
position:relative;
}
#repertoiredetails p {
text-align:justify;
text-justify:inter-word;
color:#999;
font-family:'Arial Narrow', Arial, sans-serif;
font-size:13px;
width:400px;
padding:20px;
}
Don't know why the noHorizontal() is not working, but with a few changes in your CSS you can make it work.
a Fiddle example: http://jsfiddle.net/M4AXB/1/
Good Luck!