I used a plugin called embedit to use custom html, javascript and CSS in my wordpress. The original code look like:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-darkness/jquery-ui.css" />
<style>
.calculator>td{
border-bottom: 0px;
border-top: 0px;
}
input.dark[type=text] {
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border:1px solid rgba(31, 161, 5, 1);
text-align: center;
background: #000000;
behavior: url(/pie/PIE.htc);
color: #10c90d;
height: 20px;
width: 35px;
}
#container {
width:300px;
height:320px;
z-index:4;
-webkit-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(10deg) skew(0,0) translate(0%,-5px);
transform: rotate(10deg) skew(0,0) translate(0%,-5px);
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
}
input[type=text].dark:focus {
box-shadow: 0 0 9px rgba(31, 161, 5, 1);
-webkit-box-shadow: 0 0 9px rgba(31, 161, 5, 1);
-moz-box-shadow: 0 0 9px rgba(31, 161, 5, 1);
}
.report{
margin-top:-100px;
margin-left:70%;
}
.main{
background: rgb(0,155,5); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWIwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDY4MTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(#9BD91A, #54750E); /* FF3.6+ */
background: -webkit-gradient(#9BD91A, #54750E); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#9BD91A, #54750E); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#9BD91A, #54750E); /* Opera 11.10+ */
background: -ms-linear-gradient(#9BD91A, #54750E); /* IE10+ */
background: linear-gradient(#9BD91A, #54750E); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BD91A', endColorstr='#54750E',GradientType=0 ); /* IE6-8 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color:#ffffff;
border-color: #000000;
border-width: 100px;
-webkit-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 2px 2px 21px 21px rgba(0, 0, 0, .4);
width: 100%;
}
.pointer{
cursor: pointer;
}
.half{
width: 50%;
}
.full{
width: 100%;
}
.tape{
position: relative;
top:-40px;
left:50px;
width: 130px;
height: 35px;
background-color:#fff;
opacity:0.6;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 1px 0px #cccccc;
-moz-box-shadow: 0px 0px 1px 0px #cccccc;
box-shadow: 0px 0px 1px 0px #cccccc;
-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
}
.paper {
padding:25px 25px 40px;
margin:0 auto 20px auto;
align:center;
line-height:1.5;
border:0;
border-radius:3px;
background: #F9EFAF;
background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
background: -moz-linear-gradient(#F9EFAF, #F7E98D);
background: -o-linear-gradient(#F9EFAF, #F7E98D);
background: -ms-linear-gradient(#F9EFAF, #F7E98D);
background: linear-gradient(#F9EFAF, #F7E98D);
box-shadow:0 4px 6px rgba(0,0,0,0.1);
transition:box-shadow 0.5s ease;
font-smoothing:subpixel-antialiased;
width:220px;
height:260px;
}
.calculator{
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
height: 700px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<div class="calculator">
<div class="main">
<h1>Solar Payback Calculator</h1>
<table>
<form><tr><td colspan="9"><h2>Roof Size</h2></td></tr><tr><td>
Width: </td><td class="pointer" onclick="subtractwidth();">- </td><td colspan="2" width="500"><div id="slider1"></div></td><td class="pointer" onclick="addwidth();"> + </td><td>
Length: </td><td class="pointer" onclick="subtractlength();">- </td><td colspan="2" width="500"><div id="slider2"></div></td><td class="pointer" onclick="addlength();">
+</td></tr><tr><td></td><td></td><td>
<input type="text" id="roof_width" onKeyUp="calculate();" class="slider_input1 dark" value="0"/>m</td><td></td><td></td><td></td><td></td><td>
<input type="text" id="roof_length" onKeyUp="calculate();" class="slider_input2 dark" value="0"/>m</td></tr>
<tr><td>
Electricity Bill: </td><td class="pointer" onclick="subtractbill();">- </td><td colspan="7" width="500"><div id="slider3"></div></td><td onclick="addbill();" class="pointer">
+</td></tr><tr><td></td><td></td><td>
£<input type="text" id="electricity_bill" onKeyUp="calculate();" class="slider_input3 dark" value="0"/></td></tr>
</form>
</table>
<table class="full"><tr><td>
<table class="half">
<tr><td>Area of the roof: </td><td></td><td><span id="roof_area"></span><span id="unit_area"></span></td></tr>
<tr><td>Number of Solar Panels: </td><td></td><td><span id="no_solar_panel"></span></td></tr>
<tr><td>System Cost: </td><td></td><td><span id="system_cost"></span></td></tr>
<tr><td>Annual System Output: </td><td></td><td><span id="system_output"></span></td></tr>
<tr><td>FIT Estimate: </td><td></td><td><span id="fit_estimate"></span></td></tr>
</table></td>
<td><table class="half">
<tr><td>Export FiT: </td><td></td><td><span id="export_fit"></span></td></tr>
<tr><td>Savings from using Solar Energy: </td><td></td><td><span id="savings"></span></td></tr>
<tr><td>Total Annual Yields: </td><td></td><td><span id="total_annual_yield"></span></td></tr>
<tr><td>Payback time in years: </td><td></td><td><span id="payback_time"></span></td></tr>
<tr><td>Profit over 20 years: </td><td></td><td><span id="profit"></span></td></tr>
</table></td></tr>
</table>
<script>
$("#slider1").slider({
range: "min",
value: 0,
step: 0.01,
min: 0,
animate: true,
max: 10,
slide: function( event, ui ) {
$( ".slider_input1" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input1").change(function () {
var value = this.value
$("#slider1").slider("value", parseInt(value));
calculate();
});
$("#slider2").slider({
range: "min",
value: 0,
step: 0.01,
min: 0,
animate: true,
max: 10,
slide: function( event, ui ) {
$( ".slider_input2" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input2").change(function () {
var value = this.value
$("#slider2").slider("value", parseInt(value));
calculate();
});
$(".slider_input2").change(function () {
var value = this.value
$("#slider2").slider("value", parseInt(value));
calculate();
});
$("#slider3").slider({
range: "min",
value: 0,
step: 1,
min: 0,
animate: true,
max: 3000,
slide: function( event, ui ) {
$( ".slider_input3" ).val( ui.value );
calculate();
//$( ".slider_input" ).val( ui.value );
}
});
$(".slider_input3").change(function () {
var value = this.value
$("#slider3").slider("value", parseInt(value));
calculate();
});
var calculate = function(){
var roof_length = document.getElementById('roof_length').value;
var roof_width = document.getElementById('roof_width').value;
var electricity_bill= document.getElementById('electricity_bill').value;
roof_length = parseInt(roof_length);
roof_width = parseInt(roof_width);
electricity_bill = parseInt(electricity_bill);
if (roof_length<0 || roof_width<0 || electricity_bill<0){
roof_length = Math.abs(roof_length);
roof_width = Math.abs(roof_width);
electricity_bill = Math.abs(electricity_bill);
document.getElementById('roof_length').value=roof_length;
document.getElementById('roof_width').value=roof_width;
document.getElementById('electricity_bill').value=electricity_bill;
}
var roof_area = roof_length*roof_width;
roof_area = roof_area.toFixed(2);
if(isNaN(roof_area)){
document.getElementById('roof_area').innerHTML="Invalid Input";
document.getElementById('unit_area').innerHTML="";
}else{
document.getElementById('roof_area').innerHTML=roof_area;
document.getElementById('unit_area').innerHTML=" m<sup>2</sup>";
}
var no_solar_panel = roof_area/1.676675;
no_solar_panel = Math.floor(no_solar_panel);
if(isNaN(no_solar_panel)){
document.getElementById('no_solar_panel').innerHTML="Invalid Input";
}else if(no_solar_panel<16){
document.getElementById('no_solar_panel').innerHTML=no_solar_panel;
}else{
var no_solar_panel = 16;
document.getElementById('no_solar_panel').innerHTML=no_solar_panel;
}
var system_cost = no_solar_panel*500;
if(isNaN(system_cost)){
document.getElementById('system_cost').innerHTML="Invalid Input";
}else{
document.getElementById('system_cost').innerHTML="£" + system_cost;
}
var system_output = no_solar_panel*256;
if(isNaN(system_output)){
document.getElementById('system_output').innerHTML="Invalid Input";
}else{
document.getElementById('system_output').innerHTML=system_output + " kWh";
}
var fit_estimate = (system_output*0.1544);
fit_estimate = fit_estimate.toFixed(2);
if(isNaN(fit_estimate)){
document.getElementById('fit_estimate').innerHTML="Invalid Input";
}else{
document.getElementById('fit_estimate').innerHTML="£" + fit_estimate;
}
var annual_electricity_used = electricity_bill/0.18;
if(system_output>annual_electricity_used){
var left_over = system_output-annual_electricity_used;
left_over = left_over.toFixed(2);
}else{
var left_over = 0;
}
var export_fit = left_over*0.045;
export_fit = export_fit.toFixed(2);
if(isNaN(export_fit)){
document.getElementById('export_fit').innerHTML="Invalid Input";
}else{
document.getElementById('export_fit').innerHTML="£" + export_fit;
}
if(left_over>0){
var savings = annual_electricity_used*0.18;
savings = savings.toFixed(2);
}else if(left_over<=0){
var savings = system_output*0.18;
savings = savings.toFixed(2);
}
if(isNaN(savings)){
document.getElementById('savings').innerHTML="Invalid Input";
}else{
document.getElementById('savings').innerHTML="£" + savings;
}
savings = parseInt(savings);
fit_estimate = parseInt(fit_estimate);
export_fit = parseInt(export_fit);
var total_annual_yield = (savings+fit_estimate)+export_fit;
if(isNaN(total_annual_yield)){
document.getElementById('total_annual_yield').innerHTML="Invalid Input";
}else{
document.getElementById('total_annual_yield').innerHTML="£" + total_annual_yield;
}
var payback_time = system_cost/total_annual_yield;
payback_time = Math.ceil(payback_time);
if(isNaN(payback_time)){
document.getElementById('payback_time').innerHTML="Invalid Input";
}else{
document.getElementById('payback_time').innerHTML=payback_time + " Years";
}
var profit = (total_annual_yield*20)-system_cost;
if(isNaN(profit)){
document.getElementById('profit').innerHTML="Invalid Input";
}else{
document.getElementById('profit').innerHTML="£" + profit;
}
if(isNaN(roof_width) || isNaN(roof_length) || isNaN(electricity_bill)){
document.getElementById('report').innerHTML='<h1>Invalid Input</h1>';
}else{
document.getElementById('report').innerHTML='<div id="container"><div class="paper"><div class="tape"></div><h1>Report:</h1><span class="report-content">With your roof size of <span id="report_roof_area">_____</span> m<sup>2</sup>, you can fit <span id="report_no_solar_panel">_____</span> solar panels for £<span id="report_system_cost">_____</span>.<br />Saving you £<span id="report_savings">____</span> each year on your bill!<br />Making £<span id="report_total_annual_yield">_____</span> each year and £<span id="report_profit">____</span> profit over 20 years.</span></div><!--end paper--></div><!--end container-->';
document.getElementById('report_roof_area').innerHTML=roof_area;
document.getElementById('report_no_solar_panel').innerHTML=no_solar_panel;
document.getElementById('report_system_cost').innerHTML=system_cost;
document.getElementById('report_savings').innerHTML=savings;
document.getElementById('report_total_annual_yield').innerHTML=total_annual_yield;
document.getElementById('report_profit').innerHTML=profit;
}
}
var subtractwidth = function(){
var roof_width = document.getElementById('roof_width').value;
roof_width = parseInt(roof_width);
var roof_width = roof_width-1;
document.getElementById('roof_width').value=roof_width;
}
var addwidth = function(){
var roof_width = document.getElementById('roof_width').value;
roof_width = parseInt(roof_width);
var roof_width = roof_width+1;
document.getElementById('roof_width').value=roof_width;
calculate();
}
var subtractlength = function(){
var roof_length = document.getElementById('roof_length').value;
roof_length = parseInt(roof_length);
var roof_length = roof_length-1;
document.getElementById('roof_length').value=roof_length;
calculate();
}
var addlength = function(){
var roof_length = document.getElementById('roof_length').value;
roof_length = parseInt(roof_length);
var roof_length = roof_length+1;
document.getElementById('roof_length').value=roof_length;
calculate();
}
var subtractbill = function(){
var electricity_bill= document.getElementById('electricity_bill').value;
electricity_bill = parseInt(electricity_bill);
var electricity_bill = electricity_bill-10;
document.getElementById('electricity_bill').value=electricity_bill;
calculate();
}
var addbill = function(){
var electricity_bill= document.getElementById('electricity_bill').value;
electricity_bill = parseInt(electricity_bill);
var electricity_bill = electricity_bill+10;
document.getElementById('electricity_bill').value=electricity_bill;
calculate();
}
document.getElementById('roof_length').value=0;
document.getElementById('roof_width').value=0;
document.getElementById('electricity_bill').value=0;
</script>
</div>
<div class="report" id="report">
<div id="container"><div class="paper"><div class="tape"></div><h1>Please Input Values</h1></div><!--end paper--></div><!--end container-->
</div>
</div>
</body>
</html>
Without wordpress it looks like: http://www.asifslab.com/solarpanel.html
But when I add it to wordpress it looks like: bit.ly/Yvn2vv
The jquery-ui slider unfortunately does not work, and the style is in a complete mess.
Moreover the html do not fit into the content area(the report covers the footer).
How to fix this problem. Can anyone help?
The CSS of your wordpress site is applying to the custom HTML code you added using the plugin, that's why the styles are all messed up, and also probably why the sliders are not working (i didn't verify that point).
Instead of using a plugin, use an iframe.
<iframe src="http://www.asifslab.com/solarpanel.html">
And apply some styling. (Adjust these to fit your needs.)
iframe {
width: 100%;
margin: auto;
height: 600px;
display: block;
}
demo
To clarify what your problem is; you have two sets of styles that weren't made with each other in mind. So there are issues with Wordpress overriding the styles on your widget. Putting it in an iframe keeps everything separate, so that the widget doesn't affect the blog styles, and the blog doesn't affect the widget. Harmony.
AS gotson said, the css from your wordpress theme overrides some of the things on your custom page. You may want to use a unique class with a prefix instead of using a general tag and create it in a fix width container that is the same with the wordpress template that you're using.
#sp_Container{ //apply style }
Instead of
#container{ //apply style }
also, make sure to target every declaration inside that container.
#sp_Container .class1{ //apply style }
#sp_Container .class2{ //apply style }
#sp_Container .class3{ //apply style }
P.S. The container needs a position:relative; so you can make sure that the result note won't get too far from it(if it was set on a position:absolute;).
Related
I want to overlay a div in front of full-screen Unity - Canvas. I can overlay it when it is not full screen but can not figure out how to overlay div front of Unity Canvas while canvas is in full-screen mode.
I made a loading CSS in the index.html file of the Unity WebGL build. That I paste below.
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div id="modelLoading" class="loader"></div>
I use this CSS as a class for a div, Basically, div shows up in a normal window as seen in the image below, but it disappears in the full-screen window. Also tried: fullscreen things but didn't work.
I add screenshots and the full HTML code below.
Thank you for your help.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div id="modelLoading" class="loader"></div>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600>
</canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">DeleteThisWebGLMultiThreadWorks2</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/DeleteThisTryingMultiThreadWebGL8.loader.js";
var config = {
dataUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.data.gz",
frameworkUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.framework.js.gz",
codeUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.wasm.gz",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "DeleteThisWebGLMultiThreadWorks2",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
Instead of asking unity library to make canvas fullscreen you can make entire canvas container
fullscreen yourself using JavaScript and DOM APIs.
This way you'll have more control. See below demo code. Explanation is in the code comments.
As you haven't shared your CSS and javascript libraries I've added my own style for demo purpose.
Put this entire code in a local .html file and run it in a browser. Then press Fullscreen. You'll notice that the spinning loader is in fullscreen along with the canvas.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* new rules ********/
#unity-container {
width: 97vw;
height: 90vh;
border: 3px solid orange;
background-color: gray;
}
#fullScreenContainer {
position: relative;
height: 100%;
width: 100%;
}
#unity-canvas {
background-color: black;
/* note the dimensions are in percentages */
/* they'll scale with parent, as parent goes fullscreen*/
/* the canvas will grow as well*/
width: 100%;
height: 100%;
margin: 0 auto;
}
#unity-fullscreen-button {
border: 1px solid black;
width: fit-content;
color: Orange;
font-size: 2em;
}
#unity-fullscreen-button:hover {
background-color: lightgreen;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<!-- take this container fullscreen instead of taking only the canvas -->
<div id="fullScreenContainer">
<div id="modelLoading" class="loader"></div>
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-footer">
<div id="unity-fullscreen-button">FullScreen</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var fullContainer = document.querySelector("#fullScreenContainer");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
fullscreenButton.onclick = () => {
//don't request fullscreen on unityinstance
//unityInstance.SetFullscreen(1);
//let's take things fullscreen ourselves
//request fullscreen on the wrapper
fullContainer.requestFullscreen();
//you might want to resize canvas to fit screen.
};
//ignore this just for the demo
var canvas = document.getElementById("unity-canvas");
var ctx = canvas.getContext("2d");
ctx.font = "bold 24px verdana, sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "green";
ctx.fillText("The Game", 150, 80);
ctx.closePath();
</script>
</body>
</html>
I think if you debug unityInstance.SetFullscreen(1) in chrome developer console then you'll find that it does similar thing: resizing canvas and calling requestFullscreen() on it.
Note: StackOverflow and other online html editors do not allow fullscreen so you'll have to try the code in local .html file.
With fix your code will look like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Xplore 3D Model Editor</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
#modelLoading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#modelLoading:fullscreen {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<div id="modelLoadingContainer">
<div id="modelLoading"></div>
<!-- //*** removed inline dimensions. setting inline style is not good -->
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button">
</div>
<div id="unity-build-title">Xplore 3D Model Editor</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var modelLoading = document.getElementById('modelLoading');
function EnableModelLoading() {
document.getElementById("modelLoading").style.display = "";
}
function DisableleModelLoading() {
document.getElementById("modelLoading").style.display = "none";
}
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/Xplore3DModelEditorOnHeroku5.loader.js";
var config = {
dataUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.data.unityweb",
frameworkUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.framework.js.unityweb",
codeUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "Timelooper",
productName: "Xplore 3D Model Editor",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
// Avoid draining fillrate performance on mobile devices,
// and default/override low DPI mode on mobile browsers.
config.devicePixelRatio = 1;
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
//*** changes set minWidth instead of fixed width
canvas.style.minWidth = "960px";
canvas.style.minHeight = "600px";
//100% will ensure canvas will be of parent size
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
//DisableleModelLoading();
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
//*** hide loading
modelLoading.style.display = "none";
}).catch((message) => {
alert(message);
});
};
document.getElementById('unity-fullscreen-button').addEventListener('click', function () {
var elem = document.getElementById('modelLoadingContainer');
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
document.body.appendChild(script);
</script>
</body>
</html>
You may have to adjust style on fullScreenContainer element.
I display a google map on a bootstrap modal when the modal is shown, and I set the center of the map to be a latLong location:
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.canGetAddress = true;
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
//this.addMarkersToMap();
//this.bindAutoCompleteToMap();
})
And the map initially starts with the location of the latitude and longitude (should be in the center) being in the top left corner of the map. Then when I close the modal and reopen it, the latlong location is centered correctly in the map. So it is to do with timing. How come the latlong location starts off in the top left corner of the map, rather than the center?
Here is all my relevant code. Try not to be put off if you haven't done angular 2. The question isn't really about angular 2:
html:
<div id="map" #map></div>
css:
#map {
height: 400px;
width:400px;
max-width: none !important;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#map > div {
border-radius: 10px;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
typescript:
selectedResult;
subscription: Subscription;
#ViewChild('areaInput') areaInput;
#ViewChild('map') mapInput;
map;
autocomplete;
zoom: number = 8;
options = {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
};
canGetAddress: boolean;
constructor(private resultSelectionService: ResultSelectionService) {
resultSelectionService.resultSelected$.subscribe(
result => {
this.selectedResult = { result };
$('#result-details-modal').modal('show');
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.canGetAddress = true;
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
//this.addMarkersToMap();
//this.bindAutoCompleteToMap();
})
console.log(this.selectedResult.result);
});
}
ngAfterViewInit() {
this.initMap();
}
resizeMap() {
google.maps.event.trigger(this.map, "resize");
}
initMap() {
this.map = new google.maps.Map(document.getElementById('map'), this.options);
this.resizeMap();
}
setMapCenter(lat: number, lng: number) {
var myLatLng = {lat: lat, lng: lng};
this.map.setCenter(myLatLng);
}
The solution was to simply change the order of resizing the map and setting the map center.
THIS:
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();
BECOMES:
this.resizeMap();
this.setMapCenter(
this.selectedResult.result.place.geometry.location.lat(),
this.selectedResult.result.place.geometry.location.lng()
);
I've been having trouble center 3 divs on my webpage. I have tried using auto margin and inline-block lines in the css, but nothing is seeming to work. I have borders on the divs temporarily to make it easier to see the divs. But, when I try and apply any sort of centering, the divs stay on the left. If anyone could get all 3 of the following divs to be centered, that would be great, as I'm quite new to html and css coding. Thanks in advance! Here's the page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vortex Network</title>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style type="text/css">
#top-image {
background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px;
position:fixed ;
top:0;
width:100%;
height:100%;
background-size: calc(100% + 50px);
z-index:98;
}
#media screen and (min-width: 480px) {
#top-image {
width:20%;
height:20%;
}
}
body {
color:#FFF;
height:55%;
width:100%;
height:100%;
color:#FFF;
min-width:100%;
width: auto !important;
overflow-y: scroll;
}
.stars {
position: absolute;
background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png );
background-repeat: repeat-x,repeat-x repeat-y;
transform:translate3D(0em, 0em, 0);
animation: stars 21s ease;
transform-style: preserve-3d;
}
.Icon {
width: 710px;
height: 450px;
top: 5%;
position: absolute;
text-align: center;
border-style: solid;
margin: auto;
}
#thumbs {
border-style: solid;
position: absolute;
width: 925px;
top: 55%;
margin: auto;
padding: 10px;
text-align: center;
margin: auto;
}
.status {
position: absolute;
height: 50px;
width: 500px;
border: 3px solid #ffffff;
text-align: center;
top: 77%;
margin: auto;
-moz-box-shadow: inset 0 0 75px #ffffff;
-webkit-box-shadow: inset 0 0 75px #ffffff;
box-shadow: inset 0 0 75px #ffffff;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 5;
}
.floating{
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
}
#-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}
#-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
.scaling{
float: center;
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}
#-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}
.zoom_img img{
-moz-transition:-moz-transform 0.2s ease-in;
-webkit-transition:-webkit-transform 0.2s ease-in;
-o-transition:-o-transform 0.2s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
.shadowfilter {
-webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.80));
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.shadowfilter:hover {
-webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 179, 0.8));
}
p {
font-family: 'Luckiest Guy', cursive;
-webkit-text-stroke: 3px black;
color: #ae00de;
font-size: 2.6em;
margin:0px;
}
</style>
</head>
<script>
(function(){
ShootingStar = function( id ) {
this.n = 0;
this.m = 0;
this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
this.options = {};
id = ( typeof id != "undefined" )?id:"";
this.capa = ( $( id ).lenght > 0 )?"body":id;
this.wW = $( this.capa ).innerWidth();
this.hW = $( this.capa ).innerHeight();
};
ShootingStar.prototype.addBeamPart = function( x, y ) {
this.n++;
var name = this.getRandom( 100, 1 );
$( "#star"+name ).remove();
$( this.capa ).append( "<div id='star"+name+"'></div>" );
$( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
$( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
}
ShootingStar.prototype.delTrozoHaz = function() {
this.m++;
$( "#haz" + this.m ).animate( {opacity:0}, 75 );
if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
}
ShootingStar.prototype.getRandom = function( max, min ) {
return Math.floor( Math.random() * (max - min + 1)) + min;
}
ShootingStar.prototype.toType = function ( obj ) {
if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
if ( obj === null ) { return "null"; }
var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
switch ( type ) {
case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
}
if ( typeof obj === "object" ) { return "object"; }
return undefined;
}
ShootingStar.prototype.launchStar = function( options ) {
if ( this.toType( options ) != "object" ) { options = {}; }
this.options = $.extend( {}, this.defaultOptions, options );
this.n=0;
this.m=0;
var i=0, l=this.options.beamSize,
x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
self = this;
for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
$( "#ShootingStarParams" ).html();
$( "#ShootingStarParams" ).fadeIn( "slow" );
}
ShootingStar.prototype.launch = function( everyTime ) {
if ( this.toType( everyTime ) != "number" ) { everyTime = 2; }
everyTime = everyTime * 1000;
this.launchStar();
var self = this;
setInterval( function() {
var options = {
dir: ( self.getRandom( 1, 0 ))?1:-1,
life: self.getRandom( 400, 100 ),
beamSize: self.getRandom( 700, 400 ),
velocity: self.getRandom( 10, 4 )
}
self.launchStar( options );
}, everyTime );
}
})();
</script>
<body class="stars">
<div class="zoom_img">
<div id="thumbs">
<!-- Forum Icon -->
<img class="shadowfilter" src="http://s15.postimg.org/i03eeyw23/Forums_After.png" alt="Forums_Icon" height="180" width="180"/>
<!-- Vote Icon -->
<img class="shadowfilter" src="http://s15.postimg.org/vshtalmtn/Vote_After.png" alt="Vote_Icon" height="180" width="180"/>
<!-- Store Icon -->
<img class="shadowfilter" src="http://s15.postimg.org/j4xgkciiz/Store_After.png" alt="Shop_Icon" height="180" width="175"/>
<!-- Staff Icon -->
<img class="shadowfilter" src="http://s15.postimg.org/ds8m67umj/Staff_After_2.png" alt="Staff_Icon" height="180" width="180"/>
<!-- Bans Icon -->
<img class="shadowfilter" src="http://s15.postimg.org/5vo4xzj63/Bans_After_2.png" alt="Bans_Icon" height="180" width="180"/>
</div>
</div>
<!-- Logo -->
<div class="Icon">
<img src="http://files.enjin.com/353719/module_header/10950667/background/Vortex-Network-Logonew.png" class="scaling" width="642" height="460"></img>
</div>
<!-- IP Adress -->
<div class="status">
<p>play.vortexpvp.com</p>
</div>
<div id="top-image"></div>
<div id="ShootingStarParams"></div>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ShootingStarClass.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
var shootingStarObj = new ShootingStar( "body" );
shootingStarObj.launch();
});
</script>
</div>
</div>
</body>
</html>
I have finished a webpage I am working on, but unfortunately, I've only designed it for a 1920x1080 monitor. Whenever the site is viewed on other window sizes/monitor resolutions, the page does not adjust properly. Could someone possibly fix this so that the page is scaled accordingly when the window size is changed or it is viewed on mobile? If anyone could fix the code so that it would adjust to any browser side, that would be great. I've been working on it for a while. Here's the entire page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vortex Network</title>
</head>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<script>
window.onresize = function(event) {
...
}
</script>
<script>
(function(){
/**
author: #manufosela
2013/08/27 copyleft 2013
ShootingStar class Main Methods:
launch: launch shooting stars every N seconds received by param. 10 seconds by default.
launchStar: launch a shooting star. Received options object by param with:
- dir (direction between 0 and 1)
- life (between 100 and 400)
- beamSize (between 400 and 700)
- velocity (between 2 and 10)
**/
ShootingStar = function( id ) {
this.n = 0;
this.m = 0;
this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
this.options = {};
id = ( typeof id != "undefined" )?id:"";
this.capa = ( $( id ).lenght > 0 )?"body":id;
this.wW = $( this.capa ).innerWidth();
this.hW = $( this.capa ).innerHeight();
};
ShootingStar.prototype.addBeamPart = function( x, y ) {
this.n++;
var name = this.getRandom( 100, 1 );
$( "#star"+name ).remove();
$( this.capa ).append( "<div id='star"+name+"'></div>" );
$( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
$( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
}
ShootingStar.prototype.delTrozoHaz = function() {
this.m++;
$( "#haz" + this.m ).animate( {opacity:0}, 75 );
if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
}
ShootingStar.prototype.getRandom = function( max, min ) {
return Math.floor( Math.random() * (max - min + 1)) + min;
}
ShootingStar.prototype.toType = function ( obj ) {
if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
if ( obj === null ) { return "null"; }
var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
switch ( type ) {
case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
}
if ( typeof obj === "object" ) { return "object"; }
return undefined;
}
ShootingStar.prototype.launchStar = function( options ) {
if ( this.toType( options ) != "object" ) { options = {}; }
this.options = $.extend( {}, this.defaultOptions, options );
this.n=0;
this.m=0;
var i=0, l=this.options.beamSize,
x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
self = this;
for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
$( "#ShootingStarParams" ).html();
$( "#ShootingStarParams" ).fadeIn( "slow" );
}
ShootingStar.prototype.launch = function( everyTime ) {
if ( this.toType( everyTime ) != "number" ) { everyTime = 2; }
everyTime = everyTime * 1000;
this.launchStar();
var self = this;
setInterval( function() {
var options = {
dir: ( self.getRandom( 1, 0 ))?1:-1,
life: self.getRandom( 400, 100 ),
beamSize: self.getRandom( 700, 400 ),
velocity: self.getRandom( 10, 4 )
}
self.launchStar( options );
}, everyTime );
}
})();
</script>
</div>
<style type="text/css">
#top-image {
background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px;
position:fixed ;
top:0;
width:100%;
height:100%;
background-size: calc(100% + 50px);
z-index:98;
}
body {
color:#FFF;
height:55%;
width:100%;
height:100%;
color:#FFF;
min-width:100%;
width: auto !important;
}
.stars {
position: absolute;
background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png );
background-repeat: repeat-x,repeat-x repeat-y;
transform:translate3D(0em, 0em, 0);
animation: stars 21s ease;
transform-style: preserve-3d;
}
.Icon {
width: 100%;
height: 19%;
top: 5px;
position: fixed;
padding: 10px;
display: block;
margin:auto;
align-content: center;
}
.container {
position: relative;
top: 0px;
text-align: center;
}
#logo {
height:auto;
}
.shadowfilter {
-webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.80));
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.shadowfilter:hover {
-webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 179, 0.8));
}
#thumbs {
position: relative;
width: 52%;
margin-top: 30%;
margin-left: auto;
margin-right: auto;
z-index: 10000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.status {
position: relative;
height: 5%;
margin: auto;
width: 27%;
border: 3px solid #ffffff;
text-align: center;
-moz-box-shadow: inset 0 0 75px #ffffff;
-webkit-box-shadow: inset 0 0 75px #ffffff;
box-shadow: inset 0 0 75px #ffffff;
z-index:99;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 5;
}
.floating{
float: left;
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
#-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}
#-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
.scaling{
float: center;
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}
#-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}
.zoom_img img{
-moz-transition:-moz-transform 0.2s ease-in;
-webkit-transition:-webkit-transform 0.2s ease-in;
-o-transition:-o-transform 0.2s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
p {
font-family: 'Luckiest Guy', cursive;
-webkit-text-stroke: 3px black;
color: #ae00de;
font-size: 2.6em;
margin:0px;
}
</style>
<body class="stars">
<div class="zoom_img">
<div id="thumbs">
<img class="shadowfilter" src="http://s15.postimg.org/i03eeyw23/Forums_After.png" alt="Forums_Icon"/>
<img class="shadowfilter" src="http://s15.postimg.org/vshtalmtn/Vote_After.png" alt="Vote_Icon"/>
<img class="shadowfilter" src="http://s15.postimg.org/j4xgkciiz/Store_After.png" alt="Shop_Icon" height="200" width="190"/>
<img class="shadowfilter" src="http://s15.postimg.org/ds8m67umj/Staff_After_2.png" alt="Staff_Icon" height="200" width="200"/>
<img class="shadowfilter" src="http://s15.postimg.org/5vo4xzj63/Bans_After_2.png" alt="Bans_Icon"/>
<span class="stretch"></span>
</div>
</div>
<div class="container">
<div class="Icon">
<img src="http://files.enjin.com/353719/module_header/10950667/background/Vortex-Network-Logonew.png" class="scaling" width="642" height="460"></img>
</div>
</div>
<div class="status">
<p>play.vortexpvp.com</p>
</div>
<div id="top-image"></div>
<div id="ShootingStarParams"></div>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ShootingStarClass.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
var shootingStarObj = new ShootingStar( "body" );
shootingStarObj.launch();
});
</script>
</div>
</body>
</html>
Thanks in advance for any help!
Use CSS3 #media Rule
you should apply CSS3 #media Rule to all the elements included in your website,
for example you have a #top-image style css:
#top-image {
background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px;
position:fixed ;
top:0;
width:100%;
height:100%;
background-size: calc(100% + 50px);
z-index:98;
}
#media screen and (min-width: 480px) {
#top-image {
width:20%;
height:20%;
}
}
it will alter the #top-image's max width and height if the viewport is 480 pixels wide or wider.
Learn the syntax before you apply it to your website: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I really like this element,
but how to create it? I am not sure what's the correct designation of the element...
Thank you very much.
This effect can be achieved by layering a couple arc()s:
// bright blue full circle
d.beginPath();
d.arc(50, 50, 50, 0, 2 * Math.PI, false);
d.fillStyle = "#aaeeff";
d.fill();
// dark blue percentage circle
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 50, -0.5 * Math.PI, 0.78 * 2 * Math.PI - 0.5 * Math.PI, false);
d.fillStyle = "#00aaff";
d.fill();
// white inner filler
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 25, 0, 2 * Math.PI, false);
d.fillStyle = "#ffffff";
d.fill();
and finally rendering the text:
d.moveTo(50, 50);
d.fillStyle = "#606060";
d.font = "12pt sans-serif";
d.fillText("78%", 36, 56);
Fiddle: http://jsfiddle.net/j6NVg/
Instead of using the <canvas> element, I have chosen to construct the pie chart relying on CSS and JS entirely. The HTML markup is as follow:
<div class="pie" data-percent="78">
<div class="left">
<span></span>
</div>
<div class="right">
<span></span>
</div>
</div>
The CSS is as follow. The trick is to split the circle into two halves (the nested .left and .right elements). The halves will have their overflowing content hidden, and contain nested <span> that we will manipulate with JS for rotation later. Add vendor prefixes when appropriate :)
.pie {
background-color: #eee;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.pie > div {
float: left;
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.pie span {
background-color: #4a7298;
display: block;
width: 100%;
height: 100%;
}
.pie .left span {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.pie .right span {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.pie:before,
.pie:after {
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.pie:before {
background-color: #fff;
content: "";
width: 75%;
height: 75%;
z-index: 100;
}
.pie:after {
content: attr(data-percent) "%";
z-index: 200;
text-align: center;
}
I have used the following with jQuery:
$(function() {
$(".pie").each(function() {
var percent = $(this).data("percent").slice(0,-1), // Removes '%'
$left = $(this).find(".left span"),
$right = $(this).find(".right span"),
deg;
if(percent<=50) {
// Hide left
$left.hide();
// Adjust right
deg = 180 - (percent/100*360)
$right.css({
"transform": "rotateZ(-"+deg+"deg)"
});
} else {
// Adjust left
deg = 180 - ((percent-50)/100*360)
$left.css({
"transform": "rotateZ(-"+deg+"deg)"
});
}
});
});
Here is the fiddle: http://jsfiddle.net/Aw5Rf/7/
Check the below links for more info (not an exact one.But you can get some idea).
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [10,30,20,60,40];
function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
}
return myTotal;
}
function plotData() {
var canvas;
var ctx;
var lastend = 0;
var myTotal = getTotal();
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < myData.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,lastend,lastend+
(Math.PI*2*(myData[i]/myTotal)),false);
ctx.lineTo(200,150);
ctx.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}
plotData();
</script>
</section>
</body>
</html>
For more info :Graphing Data in the HTML5 Canvas Element Simple Pie Charts
Another Link : Pure CSS3 Pie Charts effect
This is an online demo: http://jsbin.com/uFaSOwO/1/
First of all what you need can be done exactly using jQuery knob plugin. Still interested in a CSS Solution, than here's what I have done
<div class="load_me"></div>
.load_me {
margin: 100px;
height: 50px;
width: 50px;
border: 5px solid #f00;
border-radius: 50%;
border-top-color: transparent;
}
Demo
Animating the Knob Credits
If you want to prevent the mouse alteration, you can simply add readOnly
$this.knob({
readOnly: true
});
Demo
FIDDLE with ANIMATION
Here's my approach:
var ctx = canvas.getContext('2d');
/*
* in canvas, 0 degrees angle is on the right edge of a circle,
* while we want to start at the top edge of the circle.
* We'll use this variable to compensate the difference.
*/
var relativeAngle = 270;
function drawCanvas() {
ctx.clearRect(0, 0, 90, 90);
//light blue circle
ctx.lineWidth = 20;
ctx.strokeStyle = '#D8E8F7';
ctx.beginPath();
ctx.arc(45, 45, 35, 0, 2*Math.PI);
ctx.stroke();
//dark blue circle
ctx.strokeStyle = '#66ADF4';
ctx.beginPath();
//notice the angle conversion from degrees to radians in the 5th argument
ctx.arc(45, 45, 35, 1.5*Math.PI, ((angle + relativeAngle) / 180) * Math.PI);
ctx.stroke();
//text
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillStyle = '#666';
ctx.font = 'bold 14px serif';
// angle conversion to percentage value
ctx.fillText(parseInt(100 * angle / 360).toString() + '%', 45, 45);
}
var angle;
function timeout() {
angle = parseInt(360 * percent / 100);
drawCanvas();
if (angle > 360) {
document.getElementById('run').disabled = false;
percent = 0;
return;
}
percent++;
setTimeout(timeout, 10);
};
var percent = 0;
/* START the ANIMATION */
timeout();
At the bottom of the code you'll find a self evaluating function timeout which calls the drawCanvas function every 10 miliseconds and increments the blue circle angle. I hope everything is clear here. If not, feel free to ask!
Enjoy it!