I am frustrated. Really frustrated fighting the issue of background scrolling when a modal is open on mobile.
Scenario
I open a modal on mobile.
Add a .noScroll class to the body in order to prevent background scrolling. Alas, the body in the background scrolls when a modal is open. Trying to tap/move slowly on the modal sometimes starts the scrolling in the modal, which is the desired result.
I need the body to stay in position, so no positon: fixed or absolute
I have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
I have tried setting top: document.body.getBoundingClientRect().top+"px" i.e. resolving the issue via JS
CODE:
HTML
<div id="galleryItem" class="modal_menu_item flexCenterX flexCenterY" style="display: flex;">
<div class="modal_overlay"></div>
<div class="modal_food_inner flexParent flexColumn">
<span class="modal_close"><i class="fa fa-times" aria-hidden="true"></i></span>
<div class="modal_food_info flexParent flexColumn flexCenterY">
<h2 class="modal_food_info_title noMargin noPadding text-center">Keema Samosa</h2>
<hr>
<p class="modal_food_info_body noMargin">Crisp pastry filled with minced lamb, potato and peas served with homemade chutneys</p>
<hr class="optional" style="display: block;">
<span class="menu_food_item_priceContainer text-muted flexOne noPadding">€5.50</span></div>
<img src="/pictures/55/vzrw5siuzogdeul8yaznqq4f.jpg" class="img-responsive modal_food_poster"></div>
</div>
CSS
body.noScroll {overflow: hidden;}
.modal_menu_item {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 9999999;
-webkit-overflow-scrolling: touch;
}
.modal_overlay {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100%;
height: calc(100vh + 80px);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modal_food_inner {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: 0 auto;
}
This issue seems a common one for mobiles. Though, at this point I'm somewhere between misery and desperation.
Help a programmer – Save a life
When you adding this class .noScroll try to add in css when you adding this class when open modal
body.noScroll {
overflow:hidden;
}
Related
I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>
I have some issues with a website of my business.
So I bought a theme for my website(Wordpress) and downloaded few extension to that, because it was included to the theme. Unfortunately I saw some issue, when I zoom out by my browser Chrome/Firefox, the right picture "Teilen" displace to the next line, and I want to force it to stay as it is by original one.
And here is the code:
.products li.product.grid.with-hover .product-actions {
top: 5px;
left: 19px;
right: 19px;
padding-top: 13px;
text-align: center;
position: absolute;
border-top: 0;
}
<div class="product-actions">
<a class="out-of-stock" title="Vergriffen">Vergriffen</a> Quick View <div class="buttons buttons_3 group">
Details
<div class="yith-wcwl-add-to-wishlist add-to-wishlist-2150">
<div class="yith-wcwl-add-button hide" style="display: none;">
<a href="/?add_to_wishlist=2150" rel="nofollow" data-product-id="2150" data-product-type="simple" class="add_to_wishlist" style="zoom: 1;">
Wunschliste<div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: none; position: absolute; background: url("http://lockpick.ch/wp-content/themes/bazar/theme/assets/images/ajax-loader.gif") center center no-repeat rgb(255, 255, 255);"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; display: none; position: absolute; left: 32px; top: 25px;"></div></a>
<img src="http://lockpick.ch/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility: hidden;">
</div>
<div class="yith-wcwl-wishlistaddedbrowse show" style="display: block;">
<span class="feedback">Produkt hinzugefügt!</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
<span class="feedback">Dieses Produkt ist bereits in der Wunschliste vorhanden.</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div style="clear:both"></div>
<div class="yith-wcwl-wishlistaddresponse"></div>
</div>
<div class="clear"></div>
Teilen </div>
</div>
CSS issue
Website: www.lockpick.ch
Hope you can help me, because I am totaly newbie to CSS/HTML...
Greetings
Lucia
The issue comes from the use of a width of 33.3333% for these elements. While in most cases this approximation of 1/3 works, in some settings it ends up being problematic and the 3 elements end up being slightly more than 100% width.
A simple fix would be to edit this 33.3333% to 33%. Visually the users shouldn't see the 1% missing on the right and it solves your issue.
From the website link you provided, it is located in style.css line 675:
ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *,
.product-box .buttons.buttons_3 > * {
width: 33%;
}
Please try so :) Because by default the box-sizing is content-box which is meaning width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included.
These element has border-left: 1px solid #e0dfdf; and width: 33.333%. In the smaller screen, each element will has small width, e.g less than 100px lead to 1px border costs more than 1% of width. Then the last element is pushed down to next line.
ul.products li.product.grid.with-hover .product-actions .buttons a.details, .product-box .buttons a.details {
box-sizing: border-box;
}
I am working on a Bootstrap-project with some anchors-links. After clicking them my css doesn't work anymore.
HTML:
<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
<div class="container">
<h3 id="SectionID">Section With ID</h3>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
CSS:
.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}
.jumbotron {
overflow: hidden;
position: relative;
}
You can see it in this fiddle.
Afer clicking on 'GoToSelection' the .jumbotron looses it's padding-top. When I disable and then enable the property with firebug it woks again.
There is nothing wrong with CSS or HTML.
The jumbotron is not loosing its padding either. What's actually happening here is that. when you click on the link "GoToSection" which has a href value "#SectionID", it is actually scrolling to the
<h3 id="SectionID">Section With ID</h3> .
I want to create a black curtain on my site, but I want it to appear only when someone click in this button:
<a href="#dailyBriefOverlay" id="dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
</a>
I'm having trouble creating the effect that will cause it to appear only when clicked.
I created the div
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
and set the css:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
}
There is any jquery that help with that?
http://qz.com/ this site has this effect, if you click on the message icon, the window will appear.
Any help is very appreciated.
You can achieve this task with pure CSS. Use :target pseudo class for .overlay to show up only when it's targeted with URL hash.
For this you should hide .overlay initially and then use .overlay:target selector to show it. Also make sure you remove duplicated id="dailyBriefOverlay" from the link.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
display: none; /* hide it */
}
.overlay:target {
display: block; /* show it if it's a target */
}
<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click
</a>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
With this pure CSS approach it's also easy to add some nice CSS transitions. For example like in below demo.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
transition: height .4s ease;
}
.overlay:target {
height: 100%;
}
<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click
</a>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
<p>Close</p>
</div>
I assume it always shows right now.
Change your css to have the following line also:
display:none;
Now, use jQuery to show it when you click the button:
<script>
$("#dailyBriefOverlay").click(function() {
$(".overlay").show();
});
</script>
It first checks on the id (dailyBriefOverlay) of the button if it gets clicked. When it does, it sets the display:none; property to display:block of the class (overlay)
$('.btn-reservar').on('click',function(){
$('.overlay').animate({
top: 10px, // or any value you want it to go to.
display: block,
atr: val// Any other value to change to.
}, 2000); // time in MS how long the animation lasts.
});
Think that'll do the trick
$(document).ready(function () {
$("div#dailyBriefOverlay").hide();
$("a#daailyBriefOverlay").click(function(){
$("div#dailyBriefOverlay").show();
});
});
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
<a href="#dailyBriefOverlay" id="daailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click Me
</a>
You should use JQuery to it. See running example!
I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything
Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png
Unfortunatly, I'm unable to show that particular div...
It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.
My css (its using less but you get the idea):
.carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
}
heres is my html:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="thumbnail1.jpg" />
</div>
<div class="item">
<img src="thumbnail2.jpg" />
</div>
<div class="item">
<img src="thumbnail3.jpg" />
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div>
Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.
If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and
.overlay {
background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto