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.
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;
}
I have the following html/css/javascript files in a Visual Studio folder. I am trying to change my div element with id = "top" to "Text change" instead of "top". As you can see, it is functioning correctly in the code snippet, but when I run my html file with the live server extension in Visual Studio, the javascript fails to make a change. I believe I am linking my css and javascript correctly to my html file. What is wrong here?
document.getElementById("top").innerHTML = "Text change";
#top {
text-align: center;
color: green;
}
#middle {
text-align: center;
color: blue;
margin-top: 500px;
}
#bottom {
text-align: center;
color: red;
margin-top: 1000px;
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="javascript-test.js"></script>
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
</body>
Your JavaScript is running before your HTML loads. Move the <script> tag to the bottom of your page, just before your closing </body> tag:
<script src="javascript-test.js"></script>
</body>
Try putting the <script>tag in the <head> to make the javascript run first.
<head>
<link rel="stylesheet" href="style.css">
<script src="javascript-test.js"></script>
</head>
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
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
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.