Here, I recorded video about problem.
https://www.youtube.com/watch?v=WZbKix3XGTE
Problem is when keyboard on screen. The content is behind of keyboard not reachable. If there is input end of page user can't see what is typing in it.
I have this issue only with chrome, other browsers work normal.
All solutions in my mind about this contains javascript. But I am not sure javascript handle this perfectly. I wanted to ask you knowledge before start. Is there any other option for this only with CSS or something else?
Code in example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
<title></title>
<style type="text/css">
#top {
background-color: lightgreen;
width: 100%;
height: 600px;
}
#bottom {
background-color: green;
height: auto;
padding: 20px;
margin-top: 10px;
}
#bottom > input {
display: block;
padding: 5px;
width: 100%;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="bottom">
<input type="text" />
</div>
</body>
</html>
Codepen Link
https://codepen.io/hllktlhndd/pen/yZKzyZ
Did you get answer for this ?
This worked before okay, but now the android-chrome comes on top of the page and does not push it up anymore.
I'm using webview, maybe they have some option for it?
Quick fix is to add padding at the bottom of the screen, maybe 200 - 300px
Related
I followed Derek Banas' YouTube tutorial on creating a Tetris game. But when I open my HTML file ("Tetris.html") on Google Chrome, it just opens a blank page and nothing else.
I've tried updating Chrome but I have the latest version. I have also tried openning older HTML files, without issues. My CSS, JS and HTML files are located in the same folder.
HTML file ("Tetris.html"):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>JavaScript Tetris</title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<script src="TetrisBasic.js"></script>
</head>
<body>
<canvas id='my-canvas'></canvas>
</body>
</html>
CSS file ("mainstyle.css"):
body {
text-align: center;
background: #fff;
}
#my-canvas {
background: #fff;
margin-left: 10px;
margin-top: 10px;
}
I'm not including my JS file ("TetrisBasic.js") since I don't think it has any issues. Tell me if I should otherwise.
It's blank because your canvas has no color. The provided color in css is #fff. So, if you aims to see the canvas in your page, you need to change the background or put some border color to your #my-canvas class. Something like thats:
#my-canvas {
background: #000;
margin-left: 10px;
margin-top: 10px;
}
When an image on a web-page is right-clicked a menu appears which provides the ability to "Save Image As".
Is it possible to get this functionality through jQuery or JavaScript by clicking on a button (div).
I've tried to get code from numerable sites without success.
The following is a simple test page where clicking on the red button would show the menu.
Thanks,
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src='jquery-2.1.4.js'></script>
<style>
#divBtn{
width: 100px;
height: 50px;
top: 0px;
left: 0px;
background-color: #ff0000;
position: absolute;
}
#divImage {
width: 864px;
height: 541px;
top: 50px;
left: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="divBtn"></div>Click</div>
<div id="divImage">
<img src='Imager.jpg'></img>
</div>
<script>
$(document).ready(function(){
//Code to show menu when divBtn is clicked.
});
</script>
</body>
</html>
This is not possible to do. You can however create your own "menu" through the use of and trigger it with the right click event. You cannot access the browser's right click menu.
You can trigger download of an image using HTML5 download attribute. More info here:
Simulate Save Image As
EDIT
I had my index.css overriding my original header layout. Watch your ID's and classes!
EDIT
I'm using jQuery to load my website header and footer sections. Then display them on my index & other pages. However, it seems to resize my header whenever I try to load it. Anyone have any clue as to why that may be? I did some research on this problem but didn't found anything that helps.
Here's the websites it's affecting.
INDEX
HEADER
and here's the JSFiddle that has my code in it for the header
JSFiddle for Header
and my index code how I'm calling header
<html>
<head>
<title>HobbsBear Studios</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_css/index.css" type="text/css" />
<link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
<script type ="text/javascript" src="_javascript/photobanner.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- A buncha stuff in the middle --!>
<div id="footer"></div>
</body>
</html>
So it is displaying all of the elements just not in the correct layout. Any ideas?
The root cause of this is because the 'Slidy container' that you are using overrides the class names that you are using in your header. You may have to change these class names. Within 2 minutes i found that the following 2 classes were breaking it for you and they are coming from the index.css page.
#menu {
position: absolute;
top: 80%;
left: 25%;
width: 50%;
font-family: 'Exo', sans-serif;
font-weight: bold;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 550px;
}
Thing is you will HAVE to change the ID's either in the content or the header because having more then one of the same ID on a page is not good practice and on some browsers will throw out an error cause it's not 'valid' html structure. ID's are meant to be used to target exact specific elements on a page where as classes are used for targeting multiple elements at once.
Fix this and you should be good to go.
I have a HTML5 web page, and I have a fullscreen video background.
When ever I try to run the webpage file by just clicking on the .html file through the folder in Windows, there is no problem.
But when i try to run it in Netbeans with the webserver as a HTML or PHP project, the video plays once, and then stops playing, while it has the atttribute of loop. And the looping does work when i open the .html file through windows.
On some video's its not even loading up the whole video, however the video controls are there. But the screen just stays black.
Is my code causing this problem? or the Netbeans application.
Here's my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/plugins.css" type="text/css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="fitScreen">
<div class="loading"></div>
<div class="mainContent">
<video preload="auto">
<source src="sample.mp4" type="video/mp4">
</video>
<div id="logo"></div>
</div>
</div>
</body>
</html>
And the CSS:
#import "reset.css";
html, body {
height: 100%;
width: 100%;
font-family: Arial;
overflow-x: hidden;
}
.fitScreen {
position: relative;
z-index: 0;
height: 100%;
background-color: black;
}
.mainContent video {
display: none;
position: fixed;
z-index: 2;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
}
And abit of javascript for a pre-loader ish thingy:
$(window).load(function() {
$('.loading').animate({'opacity': '50%'}, 1500, function() {
$('.loading').fadeOut('fast');
$(".fitScreen video").prop('muted', true); //mute
setTimeout(function() {
$('.fitScreen video').fadeIn(2000);
$('.fitScreen video').get(0).play();
}, 250);
$('#logo').delay(500).fadeIn(2000);
});
});
I am currently using Netbeans 8.
I assume you are running the project on the NetBeans' embedded server? If so, try to run it in Chrome (from NetBeans, as usual), open Chrome Developer Tools, reload the page using F5 and switch to Network tab in Chrome Developer Tools and check the Type column for the row with the video record. There should be something like video/mp4 or video/[something]. It is possible that the embedded server doesn't support this mime type. If that's the case, check this link http://forums.netbeans.org/topic58110.html there is some workaround to enable it.
I added the fancybox 2 plugin to my site and it works fine when I test it in Chrome and Safari, but in Firefox it doesn't. The page loads fine, but when you click on a thumbnail to open fancy box, the margin styles in my body tag are cancelled (I determined this using firebug) and my whole layout shifts entirely to the right side of the viewport. When you click out of fancy box the layout remains pushed to the right. Has anyone had a similar problem and would you have any tips on how to fix it? I've posted my DOCTYPE and head bellow along with my css rules for the body. If more info is needed let me know. The site is not yet up so I can't link to it. I'm new to this so sorry if I've missed anything obvious. Thanks so much to anyone who thinks they can help!!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>
body {
width: 1050px;
background: #c7c7c7;
margin: 0 auto;
overflow: scroll;
}
I actually had this same problem this morning. The solution I went with (there's probably a better option) is to create a div wrapping the body content and set the width on that, then set the body width to 100%;
<body>
<div id="container">
// Page content
</div>
</body>
CSS:
body { width: 100%; }
#container { width: 1050px; margin: 0 auto; }
Seemed to fix issues with Firefox, and we tested it back to IE7 without any issues.