Optimizing game menus for different mobile screens - javascript

So, the games I download from the google playstore follow a certain pattern: there is a background image at the menu, and there are a few buttons to click at;
I've checked those games at different devices and it seems like the background doesn't stretch or misfits, and the buttons fit themselves according to the smart device size(tablet/regular phone). here is what I tried:
https://jsfiddle.net/0fe2Lyjg/13/
<body>
<div class="wrapper">
<div class "option1"><button>1</button></div>
<div class "option2"><button>2</button></div>
<div class "option2"><button>3</button></div>
</div>
</body>
css:
.wrapper button{
width: 33%;
height: 40%;
margin: auto;
display: inline;
}
body{
width: 100%;
height: 100%;
background-image: url("http://www.uiupdates.com/wp-content/uploads/2015/03/game-background.jpg")
}
here is what I want to achieve:
the picture pretty much describes it all; everything resizes to screen, and even if there was a logo drawn on the background it would appear at the same place. I am not sure about the actual design(colors textures etc) of the buttons but you can try whatever you want.
EDIT: using px with buttons dimensions will achieve bad results since one mobile screen might consider it too big/small. it should be dealt with %.

html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
html {
background-image: url("http://www.uiupdates.com/wp-content/uploads/2015/03/game-background.jpg");
background-size: contain;
background-attachment: fixed;
background-repeat-y: no-repeat;
}
.parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
.block {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: inline-flex;
}
.center {
margin: auto;
width: 100%;
height: 43%;
padding: 10px;
display: inline-flex;
}
button {
width: 22%;
height: 50%;
margin-right: 20px;
border: none;
margin: auto;
}
#media (max-device-width: 887px){
html{
background-size: cover ;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<div class="parent">
<div class="block">
<div class="center">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
</div>
</body>
</html>

Related

How do I prevent elements with absolute position from overflowing?

I have attached a simple code snippet for a website. When hovering over the underlined words, images are supposed to appear. How can I prevent those images from "jumping out" of their container so that they will always be visible and don't leave the screen?
The images are supposed to appear at the position of the correlating word.
I hope you understand the problem I've described here.
#charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
background-color: black;
}
#wrapper {
margin: 0;
position: fixed;
width: 100%;
height: 100%;
overflow: scroll;
}
.section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
text-align: left;
position: relative;
}
p {
color: white;
font-family: Helvetica, sans-serif;
font-size: 36px;
margin-left: 100px;
margin-right: 100px;
text-align: left;
display: block;
width: 50%;
}
.gallery-image {
position: absolute;
display: none;
transform: translate(0,calc(1em - 50%));
max-width: 50vw;
max-height: 75vh;
height: auto;
z-index: 1000;
}
.gallery-link {
position: relative;
text-decoration: underline;
}
.gallery-link:hover > .gallery-image{
display: flex;
z-index: 1000;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div class="section">
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span class="gallery-link"><img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cocooningâ“’Shin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br>
End Quote
</p>
</div>
</div>
</body>
</html>
You can try to modify your .gallery-image with top and remove transform too. Your final CSS will be like this
.gallery-image {
position: absolute;
display: none;
max-width: 50vw;
max-height: 75vh;
height: auto;
z-index: 1000;
top: 100%; /*Here is the main change*/
}
You can check the sandbox here https://jsfiddle.net/kqoh2Lat/
The final result

Showing the cropped image over the original using css

the output that I want
the one that I have implemented so far
The grey colour background is the background colour of the lined div which is in absolute position to show the crop selection. I want the area inside the line without any colour so that part of the image would be visible and rest should be of grey background as it is.
.bounded-image {
width: fit-content;
position: relative;
}
img {
width: 292px;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
box-sizing: border-box;
width: 140.816px;
height: 260.12px;
top: 71.2428px;
left: 76.4561px;
background: transparent;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: black;
opacity: 0.4
}
<div className="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div className="bg-image"></div>
<div className="bordered-image" ></div>
</div>
I have prepared a possible solution to your problem. However, the question is whether the inner <div class="bordered-image"> is a fixed size? Because otherwise you need to adjust the value of the background-size: calc(170%); property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bounded-image {
width: fit-content;
position: relative;
width: 500px;
height: 700px;
}
img {
width: 100%;
}
.bordered-image {
position: absolute;
border: 1px dashed #5035e1;
width: 300px;
height: 450px;
top: 130px;
left: 100px;
background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a);
background-position: center;
background-size: calc(170%);
background-repeat: no-repeat;
z-index: 5;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: 0.4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="bounded-image">
<img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/>
<div class="bordered-image"></div>
<div class="bg-image"></div>
</div>
</body>
</html>

How to prevent: Don't resize anything in the container div by changing screen resolution

Maybe you can help me. Specifically, I want that the text is always in the same container position depending on the screen resolution. Are there any solutions for this? Do I need a JS function for this? I don't know what to search in order to fix this…
<style>
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height:90%;
min-width: 960px;
display:block;
margin-left: auto;
margin-right: auto;
top: 50%;
}
img {
max-width: 100%;
max-height: 100%;
}
#text {
z-index: 100;
position: absolute;
top: 29.5%;
left: 11%;
font-size: 115%;
font-family: Arial, Helvetica, sans-serif;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
<body>
<script>
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('container').css('width', screenWidth + 'px');
});
</script>
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
<div class="container">
<center><img src="Picture.png"></center>
<p id="text">20.5</p>
</div>
</body>
I would be very grateful for any kind of help.
Probably the solution is quite simple.
You are on the right track using %s to position the text box(es).
We do absolutely everything that we can in terms of % of width and height of the image. That way responsiveness is automatic.
There is no need to use Javascript. Measure the width and height of the image, the distance down and to the left of the 3 text boxes and the width and height of a text box and put the measurements into CSS variables. CSS can then calculate the correct % top, bottom, width and height as needed. It doesn't matter what units you use to do this measurement, as long as the same unit is used for all of them.
This snippet has measurements to give the idea. You may want to re-measure everything to get better accuracy.
The one outstanding thing that requires thought is the font size. This needs to be responsive rather than be defined in px etc. It is set to 1vw.
The minimum width requirement of the img has been removed so that the image can be seen in its entirety on smaller devices (the user can always zoom if they want). If the minimum is reinstated then there will have to be further thought on the font size to stop it decreasing not in relation to the img size.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height: auto;
/*min-width: 960px;*/
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
--w: 1354;
--h: 665;
--x: 106;
--boxw: 113;
--boxh: 20;
--yvib: 230;
--ytemp: 294;
--yspeed: 354;
}
img {
width: 100%;
height: auto;
}
#vib {
--y: var(--yvib);
}
#temp {
--y: var(--ytemp);
}
#speed {
--y: var(--yspeed);
}
.text {
z-index: 100;
position: absolute;
text-align: center;
padding: 2px;
font-size: 1vw;
width: calc((var(--boxw) / var(--w)) * 100%);
height: calc((var(--boxh) / var(--h)) * 100%);
font-family: Arial, Helvetica, sans-serif;
top: calc((var(--y) / var(--h)) * 100%);
left: calc((var(--x) / var(--w)) * 100%);
color: red;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
</head>
<body>
<!-- The top bit commented out as the question is about the main image not this bit
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
-->
<div class="container" onclick="console.log(event);">
<img src="https://i.stack.imgur.com/I9R3S.png">
<div id="vib" class="text">20.5</div>
<div id="temp" class="text">100</div>
<div id="speed" class="text">50</div>
</div>
</body>

Navbar is not hiding on scroll using javascript

I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.

Split screen more than twice button

I want a button that splits the screen when clicked. The button is on a html page called PF1.1.html and when the button is click i want it to spilt the screen but the new screen created to be a page named PF1.html and so on. No matter how many times u click the button it keeps creating split screen pages with the PF1.html.
This is the split screen test: https://jsfiddle.net/v1p5h9g7/1/
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="split left">
<div class="centered">
<h2>Don't know how to make it open PF1.HTML and how to resize it after</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Test</p>
</div>
</div>
Here it is, i think you want something like this - here is the code mentioned and also you can check out this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Split screen on click</title>
<!--added text to remove the answer-->
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
/* height: auto; */
height: auto;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
#child{
width: 200px;
height: 200px;
border: 2px solid #000000;
border-radius: 3px;
}
#clicker{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
var sec = document.createElement("DIV");
sec.setAttribute("id", "child");
document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>

Categories

Resources