I want auto-adjust and auto-center a div of one game that I am working (HTML5), I have tried some css combinations, the perfect combination is it:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This centers the game great on all moment, but I cant click after use the "centered" class, I dont know whats the problem and its difficult find a solution searching on the net, anybody can help me with this?
The main .html file (with style and js) is there:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta charset="utf-8"/>
<!-- Set the title bar of the page -->
<title></title>
<!-- Set the background colour of the document -->
<style>
body {
background: #000000;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
-ms-touch-action: none;
margin: 0px;
padding: 0px;
border: 0px;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class
{
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login
{
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
float: right;
}
div.gm4html5_login_button
{
float: left;
}
div.gm4html5_login_header
{
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="gm4html5_div_class centered" id="gm4html5_div_id">
<img src="html5game/splash.png" id="GM4HTML5_loadingscreen" alt="Loading screen" style="display:none;"/>
<!-- Create the canvas element the game draws to -->
<canvas id="canvas" width="1024" height="600">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
</div>
<!-- Run the game code -->
<script type="text/javascript" src="html5game/SaveTheCity.js?LGLZB=1822663509"></script>
</body>
Related
Auxiliary line
How to draw the blue dashed reference lines with css like the one in firefox development?
I finally build references line like this : to make the parent div's top,left, width,height variables, and calc them to lines.
<!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" />
<title>Document</title>
<style>
body {
margin: 0;
}
:root {
--left: 30px;
--top: 20px;
--width: 100px;
--height: 60px;
}
.mydiv {
width: var(--width);
height: var(--height);
left: var(--left);
top: var(--top);
position: relative;
background-color: black;
}
.up {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
line-height: 1px;
width: 100vw;
}
.down {
border-top: 1px dashed aqua;
height: 1px;
left: calc(0px - var(--left));
top: var(--height);
width: 100vw;
}
.left {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
height: 100vh;
}
.right {
border-left: 1px dashed aqua;
width: 1px;
top: calc(0px - var(--top));
left: var(--width);
height: 100vh;
}
.v-line {
position: absolute;
}
</style>
</head>
<body>
<div class="mydiv">
<span class="v-line up"></span>
<span class="v-line down"></span>
<span class="v-line left"></span>
<span class="v-line right"></span>
</div>
</body>
</html>
If you have more good idea pleace leave your answer.
I am currently working on an interactive simulation with an image as a background. Like this:
<body>
<div>
<img><img>
<button><button>
<!-- etc.. -->
<div>
<body>
Is it possible to make the buttons stick to the image when resizing the window. I've already tried things like setting the positions with a percentage instead of pixels etc. But nothing seems to work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
I am trying to create a paper-folding effect through CSS and Javascript like it has to interact with the mouse but I tried to do this but didn't figure it out. And I also surfed on the internet but there is no trace of how to do this. The effect must be like this Netrix Digital.
So can anyone tell me how to do this and if you paste the answer please make sure to explain it.
Here is my code
body {
background-color: #ccc;
text-align: center;
margin-top: 100px;
}
.bgcolor {
background-color: black;
color: rgba(255, 255, 255, 0.8);
}
.fold{
width:500px;
height: 350px;
background: #eee;
margin: 0 auto;
}
.fold h1{
line-height:350px;
font-family: sans-serif;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="fold">
<h1>Folding effect</h1>
</div>
</body>
</html>
Thanks for helping in advance :)
Hope this helps ->
CodePen Link to Paper Folding Effect
HTML ->
<div class="fold"></div>
CSS ->
body {
background: #344;
padding: 25px
}
/* paper */
.fold {
postion: relative;
height: 200px;
padding: 25px;
background: #fff
}
/* folding */
.fold::before {
content:"";
position: absolute;
top: 32px;
right: 32px;
border-style: solid;
border-width: 0 100px 100px 0;
border-color: #ddd #344;
transition: all ease 0.5s;
}
.fold:hover::before {
border-width: 0 150px 150px 0;
border-color: #eee #344
}
I have an issue that should be fixed through the CSS/Query only - HTML change is not possible because HTML is implemented on thousands of the pages on the website.
screenshot (1)
It works fine if the width is less, but when scrollbar is visible, and I move it to the right to see the code, then "COPY" button also shifted to the left,
creenshot (2)
I added the copy button using the script and it is working fine with thousands of the pages. Unable to fix the issue.
HTML:
<pre class="i3-code">
--example code--
</pre>
SCRIPT:
<script type="text/javascript">
function cpy(t){var e=t.innerText,n=document.createElement("textarea");n.setAttribute("class","invisible"),n.setAttribute("id","cpytxtbox"),n.textContent=e,document.body.append(n),n.select(),document.execCommand("copy"),document.getElementById("cpytxtbox").outerHTML=""}var $input=$('<div class="copy-btn"><input type="button" value="Copy"/></div>');$input.prependTo($(".i3-code")),$(".copy-btn").click(function(){cpy(this.parentElement)});
</script>
CSS:
.i3-code {
background-color: #fefbed;
font-size: 1em;
line-height: 1.2;
}
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
}
.copy-btn input {
background: #e1e1e1;
color: #000;
border: none;
font-weight: 500;
padding: 7px;
transition: background 1s;
}
A live test can be done with this URL (on any example code), by resizing the window screen
https://www.includehelp.com/python/date-toordinal-method-with-example.aspx
This should do the trick:
.copy-btn {
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
position: sticky;
top: -8px;
left: -8px;
right: -8px;
overflow: hidden;
}
It implements position: sticky.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body>
<pre class="float-right position-sticky">
</pre>
</body>
</html>
For some reason the video and sidebar div keep pushing each other outside of the wrapper div. In addition, it seem like the main wrapper div is not being defined for some reason. I been messing around for hours now and it seem like nothing work . Can some give me some pointer.
https://jsfiddle.net/4z5wwq2j/
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>
You have to set display: inline-block; for the #sidebar div as well:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
Set the vertical-align as well for both of them as you need.