New block with z-index 100, becomes too large - javascript

This is not my script.
I tried editing this script so when my pictures are clicked, they would not be larger than the device's resolution, and they would be centered in the screen. Unfortunately, what I've tried places them on the top-left and makes them smaller than the resolution.
I've tried margin auto, max-width / height, and removing top:0; left:0;
Here's where the script is deployed: http://idealportraits.com/
When I click an image on the PC, the original code works well. When I use my phone and tap an image, depending whether the image is larger vertically or horizontally, it becomes much too large and goes off-screen.
How do I make the image open as the full resolution (width or height, whichever is reached first) of the device being used, not larger, and centered in the screen?
<!-- Images enlarge on click -->
<script type="text/javascript">
function showImage(smSrc, lgSrc) {
document.getElementById('largeImg').src = smSrc;
showLargeImagePanel();
unselectAll();
setTimeout(function() {
document.getElementById('largeImg').src = lgSrc;
}, 1)
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.display = 'block';
}
function unselectAll() {
if(document.selection)
document.selection.empty();
if(window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<style type="text/css">
#largeImgPanel {
text-align: center;
display: none;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
</style>
<!-- End script -->

Just as a work around. I have typed up a quick CSS only onclick event for your images. So when you click on the images, it should expand them to 100% height/width, and also be centred on the screen.
It also means your have to copy/paste the relevant bits onto your piece of code, But why use JS when you can use CSS, after all people do disable Javascript sometimes.
http://codepen.io/Ballard/pen/JRjAod
.box {
width: 700px;
height: 700px;
background-color: #000;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
}
.inbox {
text-align: center;
vertical-align: middle;
line-height: 350px;
width: 350px;
height: 350px;
background-color: #fff;
color: #000;
align-self: center;
}
#btnctrl {
display: none;
}
#btnctrl:checked + label > .fb {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
overflow: auto;
}
<div class="box">
<div class="inbox">
<input type="checkbox" id="btnctrl"/>
<label class="btn" for="btnctrl"><img src="https://s19.postimg.org/777mf3pdv/facebook.png" class="fb"></label>
</div>
</div>
Let me know if this is any good for you, may save alot of scripting time.

By the sounds of it, you might be dealing with the old Android position: fixed problem. Try this.
If that doesn't solve the problem, try setting 100% width and height on the document/container and then using max-width and max-height for the images.
I'm not providing this in the comment section, because I don't have enough reputation to post comments.

From what i can see, the problem is not just with the script. e.g. if you hold your mobile device in landscape mode and click on the images you will see that all large images are fully visible when clicked(they may not fill the screen though).
At the moment the HTML for the large images seem to be hardcoded with a height of 100%, you will need to remove that and set that in Javascript by checking the ratio, if it is portrait image then set the height to be 100% and if it is a landscape image then set the width to 100%

Related

How to keep size proportions for div's child elements

TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element

Fixed aspect ratio box with letter and pillarboxing between header and footer

Running the following code snippet will provide a framework for what I am visually hoping to accomplish, with some concessions made in the CSS that I'd like to remove:
body {
height: 100vh;
margin: 0;
}
.container>* {
height: 100%;
width: 100%;
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
.content {
background-color: blue;
flex: 1;
position: relative;
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
height: 56.25vw;
max-height: calc(100vh - 100px);
width: calc((100vh - 100px) * (1/0.5625));
;
max-width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="header"></div>
<div class="content">
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
Included are a header and footer of arbitrary height and a fixed aspect ratio box centered vertically and horizontally between them. I'd like it to letter- and pillar-box as the page is resized, and respond to increases/decreases in header height.
As it stands, the code accomplishes many of these goals but falls short in that it requires that the heights of the header and footer be included in the CSS for the fixed aspect ratio box. This limits my ability to freely manipulate the size of the header, or let it grow arbitrarily as a function of content (at least to the extent I am not using JavaScript).
I've managed to make this work successfully for the case of letter-boxing (top and bottom black bars) by leveraging the fact that the content is full-width. As a result, I can use 100vw / 56.25vw (in the case of 16:9) for the width/height and achieve the desired result. Unfortunately, when moving the content around to pillar-box, this obviously falls apart.
I've more or less resigned myself to needing JavaScript to - at the very least - toggle a class based on the dimensions of the inner content box to determine whether letter or pillar boxing is appropriate. However, it became very clear very quickly that setting width as a function of height is not trivial.
I was fortunate to come across this post, where a solution leveraging a 1x1 pixel is used to set width as a function of height.
I was able to successfully make this work for the pillar-boxing case in both Chrome and Safari, but not Firefox (IE11 and Edge not yet tested, but coverage is desired... pray for me). I'd like to get recent versions of Chrome/Safari/Firefox covered, as well as I11/Edge if possible.
The solution for Chrome/Safari is as follows:
body {
height: 100vh;
margin: 0;
}
.header,
.footer {
height: 100%;
width: 100%;
}
.container>* {
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
img {
display: block;
height: 100%;
background: orange;
}
.content {
background-color: blue;
flex: 1;
position: relative;
overflow: hidden;
height: 100%;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
background-color: purple;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
There are a few things to consider. I am comfortable with fixing the height of the footer. This constraint may prove valuable, but I've been unable to yield anything from it yet. I am also comfortable with radical alterations to the included markup, supposing it enables the desired behavior.
The end-purpose of this would be to maintain fixed aspect ratio content between this flexible header, static footer, and overlay content upon it.
I am well aware that I could run some JavaScript and set these heights manually with great success, but I am coming at this from a position largely based in intellectual curiosity. If you, too, are curious, perhaps you can lend a hand in exploring :)
Thank you!

How was this css effect achieved?

I ran into two different website few days back, which was a responsive site but images had different css rules. I'm not sure if only css was used or some javascript. For example in responsive sites, when a window is made small, the images also turns small, so does the text and with different break points size of text can be manipulated.
1) What I saw was on the first website, the height of the image remained the same but the image within it shrunk when the screen was made small. I can compare this to a camera's zoom in and zoom out effect. When the window was made small, the image zoomed out. when the window size was made big, the image zoomed in (all the while height remained the same).
2) On the second website, I noticed that when the screen was made small, the image(100% width) slid to the left of the screen, but the height remained the same.
Two different websites:
Wondering how this was done?
What you are describing is simply images with fluid-height and fixed-height.
In the first example image is set to max-width: 100% and height: auto which resizes according to screen size.
In the second example there is a container div with max-width: 100% and overflow: auto which simple does not allow the image surpass window size and you have an image with fixed height.
Fluid height:
.fluid-height{
max-width: 100%:
height: auto;
width: 100%;
}
<p>Fluid width and height</p>
<img class="fluid-height" src="https://images.unsplash.com/photo-1491308056676-205b7c9a7dc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a4dc6385e23451fd8aa3458688757100&auto=format&fit=crop&w=4506&q=80">
Fixed height:
div{
max-width: 100%;
overflow: hidden;
}
img{
height: 500px;
}
<p>Fixed height</p>
<div>
<img class="fixed-height" src="https://images.unsplash.com/photo-1522206052224-9c5ad951dd74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6276d94baf7d9a4b6962be8d9e8aeb4b&auto=format&fit=crop&w=8100&q=80">
</div>
Responsive scaling on websites
Right side image scales with the div that surrounds it.
|container
--|image
|end container
Setting width:50%; on the image makes it take up 50% of the container.
The container scales with the viewPort or window.
The container has display: inline-block; so that other elements can fit next to it.
Example:
red element is the container,
blue represents the window.
Javascript is only there to scale the blue window on button press.
document.addEventListener("DOMContentLoaded", function() {
let counter = 1;
let button = document.getElementById("scale");
let tmpWindow = document.getElementById("pretend");
button.addEventListener("click", function(e) {
counter++;
var nextWidth = parseInt(tmpWindow.style.width) - (10 * counter);
tmpWindow.style.width = nextWidth + "px";
});
});
.test-window {
/*width: 700px;*/
border: 5px solid blue;
}
.container-right {
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 50%;
height: 100%;
line-height: 0;
}
.container-right img {
width: 100%;
}
.container-left {
display: inline-block;
width: 200px;
border: 5px solid black;
}
<div>
<button id="scale">Shrink window size</button>
</div>
<div id="pretend" class="test-window" style="width:700px;">
<div class="container-right">
<img id="img-right" src="https://lorempixel.com/200/200/" />
</div>
<div class="container-left">
<p>Dante, astray in a wood, reaches the foot of a hill which he begins to ascend; he is hindered by three beasts; he turns back and is met by Virgil, who proposes to guide him into the eternal world. Midway upon the road of our life I found myself within
a dark wood, for the right way had been missed. </p>
</div>
</div>
figured this out:
.somediv {
background-image: url("baloon.jpeg");
background-size: cover;
background-position: center;
}

Extra wide image slider on responsive site

I'm creating a responsive site and I'd like to use a really wide image slider (I'm sure you've seen the type of thing).
What I'd like to happen is for the main site to be, for example, maximum 1,200 pixels wide and use a fluid width. I'd then like the image slider to be, for example, 2,000 pixels wide. On a static site this is relatively straightforward as I could simply give the image slider a negative left margin of -400 pixels to center it. Sadly in the case of a responsive site this isn't possible as that offset needs to be fluid.
I did come across some script that made the offset fluid but this only worked when the screen was wider than the site width (i.e the max width of the main content area). When the window then becomes narrower than this max width the script fails to keep the image slider centered .
Any ideas how this could be written to keep the image slider centered horizontally in the window, whether the users window is wide or narrow?
<script type="text/javascript">
function setMargins() {
width = $(window).width();
containerWidth = $("#flexslider_width").width();
leftMargin = (containerWidth-width)/2;
$("#flexslider_width").css("marginLeft", -leftMargin);
}
$(document).ready(function() {
setMargins();
$(window).resize(function() {
setMargins();
});
});
</script>
Thanks for any thoughts in advance,
Tom
EDIT: I understand now. Try this: http://codepen.io/anon/pen/azoRwo
.outer{
position: relative;
width: 100%;
height: 100px;
border: 2px solid red;
overflow: hidden;
}
.image {
position: absolute;
left: 50%; /* Move to the middle of the parent */
margin-right: -50%; /* Remove that extra width */
transform: translate(-50%, 0); /* Move left again; No IE8 support*/
width: 1000px;
height: 96px;
border: 2px solid cyan; /* Just useful for debugging */
background: url('http://i.imgur.com/rBkbXS3.jpg');
overflow: hidden;
}
Basically we move right, then left, using percentages of the parent's width. If you want the same functionality in IE8, you'll have to use JavaScript.
Reference: http://www.w3.org/Style/Examples/007/center.en.html
Alright, check this out: http://codepen.io/anon/pen/LEPgLp
html, body {
margin: 0;
}
.image-slider{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.main{
width: 100%;
max-width: 800px;
height: 100px;
border: 1px solid green;
margin: 0 auto;
position: relative;
}
#media only screen and (max-width: 800px) {
body {
overflow: hidden;
}
.image-slider {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
top: 0;
}
.main {
margin-top: 100px;
}
}
When your window is smaller than 800px (was easier to develop. just change the values), I'll position your slider absolute and in the middle. Because of the absolute position, your .main div will move to the top so I'll add a margin-top. Just change your margin-top to the hight of your slider. Good luck!

Prevent Address-Bar hiding in mobile Browsers

I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.
Thank in advance!
This is not scrollable at all:http://maxeffenberger.de/test.html
This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html
This is the way I have achieved it:
html {
background-color: red;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
/* prevent overscroll bounce*/
background-color: lightgreen;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* iOS velocity scrolling */
}
Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
The only soltuion that worked for me was this :
Put the content of your body inside a wrapper with the following style :
.wrapper {
position: absolute;
top: 0.5px;
left: 0;
right: 0;
bottom: 0.5px;
overflow-x: hidden; /* or any other value */
overflow-y: auto; /* or any other value */
}
the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.
if someone still has this problem with the hiding address bar, this is how its worked for me.
html, body {
height: 100%;
}
body {
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: scroll;
}
.background {
position: fixed;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.
This does it for me in iOS 15. Though my web app disables zooming. Both the top bar and bottom bar are always full size.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
So for it was the problem, that I want to avoid the scroll effect on a certain element. For this element I just set:
.disable-scroll {
overflow-y: hidden;
touch-action: pan-x;
}
It works on Chrome and the Xiaomi Default Browser but not Firefox.
The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API
The following worked for me:
HTML
<body>
<div> This is the container for all content. </div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
⋮
}
body > div {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: CALC(100% + 1px);
overflow-x: hidden;
overflow-y: auto;
⋮
}
Another approach with customized scrollbar:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bdbdbd;
}
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-y: auto;
}
Use window.innerHeight to set boundaries for your site
You can set html and body or your wrapper to
var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
Keep in mind, that it needs to be updated on every resize!
window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar).
You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).
In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling.
Have a look at.
This is also my solution to problems like those above.
2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.
On mobile:
Android 7.1.1/ Chrome 61.0
iOS 9.3.5/ Safari
=> now the browser bar is no longer hiding on scroll- and swipe-events.
Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.
With a javascript window.scrollTo(0, 1); you can fix the problem.
Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.

Categories