cant believe im asking this question but,
why this work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
and this doesn't?
its pretty much the same code,
if anyone can edit the code that would be brilliant?
<!DOCTYPE html>
<html>
<head>
<title>Splash!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="refresh" content="6.5;url=home.html" />
<link rel="stylesheet" href="../css/stylessplash.css" type="text/css">
</head>
<body id="posts">
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrapper">
<p>
<span>u</span>
<span>u</span>
<span>H</span>
<span>!</span>
</p>
</div>
</body>
</html>
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
On your second code block you are simply creating a function
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
It doesn't run because you are not invoking the function in form load or whenever you want. Which is shown in your 1st code block
<body onload="return ran_col()">
You can use that code to set the background to a specific element (not to the whole body like you did). To set the background of the whole page, instead of
document.getElementById('posts').style.background = color;
you will need
document.body.style.backgroundColor = color;
Hope this helped!
Related
I have a simple C++ SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<script src="index.js"></script>
</body>
</html>
screenshot here
This is the browser-default margin on the body-element.
You can remove it by adding some CSS to the head-element.
Example:
<style>
body {
margin: 0;
}
</style>
I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>
<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}
i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!
I have an image and I want to fade the central circular portion of the image to be shown clear and the rest of the portion to be faded.
I tried with canvas as well as by taking two divs and making one of them fade,
but not working.
Following is the pattern i need, with the area out of the circle to be faded. Please Help!!
Here's a starting point for you to get an image that's clear center and fade-to-color outside:
position 2 canvases -- one on top of the other
draw the image on the bottom canvas
fill the top canvas with your color (blue,etc)
use a combination of scaling, shadowing and compositing to "reveal" the image underneath
Demo: http://jsfiddle.net/m1erickson/HtL4P/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{position:absolute;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var img=new Image();img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
function start(){
canvas.width=canvas1.width=img.width/3;
canvas.height=canvas1.height=img.height/3;
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
ctx1.fillStyle="dodgerblue";
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
ctx1.scale(3,1);
ctx1.globalCompositeOperation="destination-out";
ctx1.arc(-100,120,40,0,Math.PI*2);
ctx1.shadowColor="white";
ctx1.shadowBlur=60;
ctx1.shadowOffsetX=500;
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=356 height=237></canvas>
<canvas id="canvas1" width=356 height=237></canvas>
</body>
</html>