I am having is trying to have a grey background, but with text over top of it rather than before or after the grey square.
Here is my code, an HTML document with JS and CSS integrated:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Change svg background color. */
.area {
background-color: #75738a;
}
</style>
</head>
<body>
<svg width="2000px" height="2000px" class="area">
<script>
write("Power up to the top");
</script>
</svg>
<script>
// start game "press any to continue"
document.addEventListener('keypress', (event) => {
}, false);
</script>
</body>
</html>
Previously, I was drawing a square and expecting to be able to put text on it. I realized instead of setting it to print a square, I needed to set the background image in HTML, and use CSS to center and fullscreen it.
<body>
<img src="gymbackground.jpg" id="bg" alt="">
<body>
HTML^
<style>
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
</style>
CSS within HTML^
Related
Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>
I'm trying to build a 3D viewer with three.js, that has full height but leaves space for a side panel. The vertical layout works as expected, but as soon as I append the render's dom element, a horizontal scroll bar appears.
Attached is a minimal working example. I would expect to just see the (black) canvas element and the red body. But after v.append(renderer.domElement), the page gets larger (filled with blue, html element) and a horizontal scroll bar appears. It seems the page is larger than its body.
See https://jsfiddle.net/5jnvt4jh.
Has anybody an idea, what may be happening there? I couldn't find any margin or padding with Chrome and Firefox. Thanks :).
MWE
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
html {
background-color: blue;
}
body {
margin: 0px;
height: 100vh;
background-color: red;
}
#viewer {
height: 100%;
width: 80vw;
background-color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var v = document.getElementById('viewer');
var renderer = new THREE.WebGLRenderer();
v.append(renderer.domElement);
renderer.setSize(v.clientWidth, v.clientHeight);
</script>
</body>
</html>
Change style of body to:
body {
margin: 0px;
height: 100vh;
background-color: red;
overflow:hidden;
}
jsfiddle: https://jsfiddle.net/raushankumar0717/5jnvt4jh/2/
I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,
$(window).load(function() {
$(".loader").fadeOut("slow");
})
But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded.
And the background image comes under the following section
<div class="loader"></div>
<div class="test_banner services_banner">
</div>
It would be great if somebody give a helping hand to manage this case. Thanks in advance.
Maybe you could use a multiple background-image
example:
div {
height:90vh;
width:90vw;
background:url(http://lorempixel.com/1200/800/nature/) center,
url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */
<div></div>
The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
}
body{
text-align: center;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
// Adding timestamp to set cache false
$.get("/examples/php/customers.php?v="+ $.now(), function(data){
//$("body").html(data);
});
});
// Add remove loading class on body element depending on Ajax request status
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Get Customers Details</button>
<div class="overlay"></div>
</body>
</html>
How can i increase the height of a DIV vertically ,towards up ie bottom postition needs to be fixed.(needs to code in JavaScript and HTML).
Height should increase upwards based on content available
Place the below in HTML section:
<div id="Main" style="height:10px">
Place the below code in the javascript section:
anim("Main", {marginTop:"-400px", height:"410px"}, 4000);
Place the below in HTML section:
<div id="Main" style="height:10px">
Place the below code in the css section:
<style>
#Main {
-webkit-transition:margin-top, height;
transition:margin-top, height
}
</style>
Place the below code in the javascript section:
document.getElementById("Main").style.marginTop = "-400px";
document.getElementById("Main").style.height = "410px";
From your request "towards up ie bottom postition needs to be fixed", I believe you want a DIV to grow taller while the base does not move.
The magic is in putting an absolutely positioned div, A, inside a relatively positioned div, B, and locating the position of B at the bottom of A. With the bottom of B set, increasing the height of B causes it to grow taller from that fixed location.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body {
background-color: #abc;
}
div {
width: 200px;
margin: auto;
}
#A {
position: relative;
background-color: #369;
height: 500px;
}
#B {
position: absolute;
bottom: 0px;
background-color: #69C;
height: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="A">
<p>This is A</p>
<div id="B">
<p>This is B</p>
</div><!-- /B -->
</div><!-- /A -->
</body>
<script>
$(document).ready(function(){
$('#B').animate({'height': 400}, 3000);
});
</script>
</html>
Place the below in HTML section :
<div id="Main" style="position:absolute;top:10px;height:100px;width:100px">
Place the below code in the javascript section:
$(document).ready(function () {
$("#Main").animate({height:'400px'},4000);
});
the 4000 is the time in which it should happen (4000= 4 seconds)
I have an image in the front and a text at the back. I want to make the text selectable while the image still being in the front. How can I achieve this ?
Link to jsfiddle is http://jsfiddle.net/G5BeU/
Sample code
<html><head><style type="text/css">#media print { .gmnoprint { display:none }}#media screen { .gmnoscreen { display:none }}</style>
<title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
<meta charset="utf-8">
<style>
#parent-street-view{position:relative}
#map_canvas{position:absolute !important;width: 500px; height: 400px; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);z-index:0}
#parent-street-view .overlay-pollution{width: 500px; height: 400px;position:absolute;z-index:100; }
</style>
</head>
<body>
<div id="parent-street-view">
<div id="map_canvas" >This is supposed to be visible and selectable</div>
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
</div>
<!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
Simple, set the pointer-events CSS property of the image to none. This will allow you to select the text behind.
You might also want to lower the opacity on the image, so you can partially see the text.
#parent-street-view .overlay-pollution {
width: 500px;
height: 400px;
position: absolute;
z-index: 100;
opacity: 0.5;
pointer-events:none;
}
Here is a demonstration: http://jsfiddle.net/G5BeU/2/
Use this code.
<html><head><style type="text/css">#media print { .gmnoprint { display:none }}#media screen { .gmnoscreen { display:none }}</style>
<title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
<meta charset="utf-8">
<style>
#parent-street-view{position:relative}
#map_canvas{position:absolute !important;width: 500px; height: 400px; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);z-index:0}
#parent-street-view .overlay-pollution{width: 500px; height: 400px;position:absolute;z-index:100; }
.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
z-index: 1000;
}
</style>
</head>
<body>
<div id="parent-street-view">
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
<div id="map_canvas" >This is supposed to be visible and selectable</div>
</div>
<!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
Note :
Style added
.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
z-index: 1000;
}
HTML code tag change places
<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
<div id="map_canvas" >This is supposed to be visible and selectable</div>
See this example at http://jsfiddle.net/Ct2X8/1