Having Trouble with Webpage Resizing

Having Trouble with Webpage Resizing - 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

Related

Can Not Overlay div Over Full Screen Canvas for Unity WebGL Build

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.

How to don't let the element brake if it's not the children

I'd like to make both .quote-container and #new-quote elements in the same line even if the window width is very small. For example 83pixels. Using min-width on the .quote-container element worked, however, using the same technique on the #new-quote element didn't work.
Maybe that's because #new-quote isn't the children of .quote-container? I even tried to make it a child and it was even worse (picture was taken on the desktop window size):
What I'd like to achieve in visual:
var getNewQuote = function(callback) {
var quote = {};
quote.text = 'Example';
quote.author = 'Example';
$(".loading").hide();
callback(quote);
};
var quoteContainerStartingPadding,
quoteContainerEndingPadding,
newQuoteEndingPadding;
if ($(window).width() > 648) {
quoteContainerStartingPadding = "0 2.5rem";
quoteContainerEndingPadding = "2.5rem";
newQuoteEndingPadding = "2.5rem .75rem";
} else {
quoteContainerStartingPadding = "0 1.5em";
quoteContainerEndingPadding = "1.5rem";
newQuoteEndingPadding = "1.5rem .75rem";
}
$(".quote-container").css("padding", quoteContainerStartingPadding);
getNewQuote(function(quote) {
var getRandomColor = function() {
var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
randomNumber = Math.floor(Math.random() * colors.length);
return colors[randomNumber];
};
var updateText = function($t) {
var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
twitter += '"' + quote.text + '" ';
twitter += quote.author;
var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
tumblr += quote.author;
tumblr += "&content=";
tumblr += quote.text;
tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
$t.find(".quote-text").html("").append($icon, quote.text);
$t.find(".quote-author").html("- " + quote.author);
$("#tweet-quote").attr("href", twitter);
$("#tumblr-quote").attr("href", tumblr);
};
var calcNewHeight = function(q) {
var $temp = $("<div>", {
class: "quote-container temp",
}).appendTo($("body"));
$temp.append($("<div>", {
class: "quote-text"
}), $("<div>", {
class: "quote-author"
}));
updateText($temp, q);
var h = $temp.height() + 40;
$temp.remove();
return h;
};
var changeColor = function(newColor) {
$("body, .button:not(#new-quote)").animate({
backgroundColor: newColor
});
$("#new-quote").animate({
color: newColor
});
$(".quote-text, .quote-author").css("color", newColor);
if ($("#modStyle").length === 0) {
$("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
} else {
$("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
}
};
var getQuote = function() {
var nc, nh = 0;
nc = getRandomColor();
nh = calcNewHeight(quote);
changeColor(nc);
$(".quote-container, #new-quote").animate({
height: nh / 16 + "rem",
}, {
duration: 1000,
queue: false
});
$(".quote-container").animate({
padding: quoteContainerEndingPadding
}, {
duration: 1000,
queue: false
});
$("#new-quote").animate({
padding: newQuoteEndingPadding
}, {
duration: 1000,
queue: false
});
updateText($(".quote-container"), quote);
$(".quote-container").children().not($(".loading")).fadeTo(750, 1);
};
$(".quote-container, #new-quote").css({
visibility: "visible",
height: 0
});
$("#new-quote").css("padding", "0 .75rem");
getQuote();
}
);
var two = function() {
$(".quote-container").children().not($(".loading")).hide();
$(".loading").show();
getNewQuote(function(quote) {
var getRandomColor = function() {
var colors = ["#ff9966", "#7f00ff", "#396afc", "#0cebeb", "#06beb6", "#642b73", "#36d1dc", "#cb356b", "#3a1c71", "#ef3b36", "#159957", "#000046", "#007991", "#56ccf2", "#f2994a", "#e44d26", "#4ac29a", "#f7971e", "#34e89e", "#6190e8", "#3494e6", "#ee0979"],
randomNumber = Math.floor(Math.random() * colors.length);
return colors[randomNumber];
};
var updateText = function($t) {
var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
twitter += '"' + quote.text + '" ';
twitter += quote.author;
var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
tumblr += quote.author;
tumblr += "&content=";
tumblr += quote.text;
tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
var $icon = $("<i class='fa fa-quote-left'>").prop("aria-hidden", true);
$t.find(".quote-text").html("").append($icon, quote.text);
$t.find(".quote-author").html("- " + quote.author);
$("#tweet-quote").attr("href", twitter);
$("#tumblr-quote").attr("href", tumblr);
};
var calcNewHeight = function(q) {
var $temp = $("<div>", {
class: "quote-container temp",
}).appendTo($("body"));
$temp.append($("<div>", {
class: "quote-text"
}), $("<div>", {
class: "quote-author"
}));
updateText($temp, q);
var h = $temp.height() + 40;
$temp.remove();
return h;
};
var changeColor = function(newColor) {
$("body, .button:not(#new-quote)").animate({
backgroundColor: newColor
});
$("#new-quote").animate({
color: newColor
});
$(".quote-text, .quote-author").css("color", newColor);
if ($("#modStyle").length === 0) {
$("head").append("<style id='modStyle'>#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}</style>");
} else {
$("head style#modStyle").html("#new-quote:before {background:" + newColor + ";} .lds-eclipse {box-shadow: 0 .25rem 0 0 " + newColor + ";}");
}
};
var getQuote = function() {
var nc = getRandomColor(),
nh = calcNewHeight(quote);
$(".quote-container").children().not($(".loading")).css("opacity", 0);
changeColor(nc);
$(".quote-container, #new-quote").animate({
height: nh / 16 + "rem",
}, {
duration: 1000,
queue: false
});
updateText($(".quote-container"), quote);
$(".quote-container").children().not($(".loading")).fadeTo(750, 1);
};
getQuote();
});
}
;
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
background: #333;
color: #333;
font-family: sans-serif;
}
.quote-container {
width: 35%;
background: #fff;
margin: 0;
display: inline-block;
vertical-align: middle;
border-radius: 0.1875rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
visibility: hidden;
min-width: 15rem;
}
.quote-text {
font-size: 1.625rem;
}
.quote-text i {
margin-right: 0.6rem;
}
.quote-text p {
display: inline;
}
.quote-author {
font-size: 1rem;
margin: 0 0.4rem 2rem 0;
text-align: right;
}
.button {
padding: 0.75rem;
text-align: center;
font-size: 1rem;
color: #fff;
border-radius: 0.1875rem;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.button:not(#new-quote):hover {
opacity: 0.8 !important;
}
.button:not(#new-quote) {
min-width: 1rem;
min-height: 1rem;
}
.button i {
vertical-align: middle;
}
#new-quote {
white-space: nowrap;
writing-mode: vertical-lr;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
vertical-align: middle;
background: #fff !important;
margin: 0;
position: relative;
right: 0.25625rem;
color: #333;
visibility: hidden;
}
#new-quote:before {
content: "";
position: absolute;
height: 100%;
width: 0.0625rem;
bottom: 0;
left: 0;
visibility: hidden;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#new-quote:hover:before {
visibility: visible;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.v-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.text-center {
text-align: center;
}
footer {
font-size: 0.85rem;
margin-bottom: 1rem;
}
footer a {
text-decoration: none;
color: #fff;
position: relative;
}
footer a:before {
content: "";
position: absolute;
width: 100%;
height: 0.0625rem;
bottom: 0;
left: 0;
background: #fff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
footer a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Loading animation */
#keyframes lds-eclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes lds-eclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.lds-eclipse {
-webkit-animation: lds-eclipse 1s linear infinite;
animation: lds-eclipse 1s linear infinite;
width: 10rem;
height: 10rem;
border-radius: 50%;
margin: auto;
}
#media (max-width: 62.5em) {
.quote-container {
width: 50%;
}
}
#media (max-width: 50em) {
.quote-container {
width: 65%;
}
}
#media (max-width: 17.96875em) {
.quote-container {
width: 40%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="v-align text-center">
<div class="quote-container">
<div class="quote-text">
</div>
<div class="quote-author"></div>
<a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
<a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
<div class="loading">
<div class="lds-eclipse"></div>
</div>
</div>
<div id="new-quote" class="button">New quote</div>
<footer>
Created by LukasLSC
</footer>
</div>
EDIT 1: Codepen: https://codepen.io/Kestis500/pen/KZvXgB?editors=0110

If you want to align things in CSS you usually have two different positioning concepts you can use for this purpose:
display (flex)
float
Usually it is a good idea to put all elements you want to align in a wrapping container like a div. In this manner you can just focus on your aligning issue and forget about the general layout - means where you want to have your aligned elements in the layout eventually. You can later on just position the wrapper and do not have to worry about the elements inside.
Another best practice is to give all your elements that this container inherits from a dimension (at least width). A common mistake is that elements that should be aligned break just because the parent element does not have enough space to fit all elements on one line. If you want to know why I provide an example at the end, just follow the *.
But lets go back to the two concepts that you can use. Which one you should use depends on one hand what other attributes you need to give the respective elements and what browsers you need to support. If you only want to support newer browser versions you can go with flexbox, the more secure way to do this is use percentages for widths and float.
Flexbox
.container {
display: flex;
flex-direction: row; // this makes your elements align horizontally
}
.child1 {
flex: 1 1 auto;
}
.child2 {
flex: 0 1 auto;
}
The flex attribute determines the dimension of a child. So consider the parent as width: 100%; and the numbers you give as a first parameter to flex is the ratio of the child's dimension compared to the other children.
Float
.container {
overflow: hidden;
width: 100%; // this must be relative to the containers parent of course
}
.child1 {
width: 75%;
float: left;
}
.child2 {
width: 25%;
float: left;
}
Mind that float takes effect on the elements following in the document flow AFTER the element that you give the float attribute. Also take into account that you might need to calculate margins, paddings or borders in additionally to the elements' widths (except for paddings when using box-sizing: border-box) and that elements containing only floated elements lose their "automatic" dimensions as floated elements lose their information about height and width as well. (overflow: hidden on the container solves this issue for you)
*In a responsive design e.g. you should give the highest parent a width of 100%. If you provide to a child width: 50%; it will now have exactly 50% of the entire width. If you now give the child of the child width: 50% it will be 25% of the entire width. This is less error prone then giving the child's child directly 25%. Let's assume later on you give the child a width of 50% the width of the child's child (25%) will relate to the childs width instead of the parent. So you will end up with a width of 12.5% for the child's child relative to the entire width.

How to animate width using inline css

I'm trying to animate a width of an element using data from an API upon page load and I'm using Vue js. What I've done is I used inlined css and apply width value (from API data). I'm able to add the element width but it has no animation.
Vue template edited:
<li v-for="(stats, index) in teamStats[0]">
<div class="bar">
<span :style="'width:'+ stats +'%;'">
{{stats}}
</span>
</div>
</li>
Sass:
.bar {
span {
text-align: $l;
right: 0;
width: 0%;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
}

You'll probably need to use the JavaScript transition hooks. Here's an example.
new Vue({
el: '#app',
data: {
stats: [],
},
created() {
// Simulate loading data from server
setTimeout(() => {
this.stats = [0.1, 0.15, 0.32, 0.55, 0.88, 0.96];
}, 500);
},
methods: {
onEnter(el) {
var stat = +el.dataset.stat;
var index = +el.dataset.index;
el.style.transitionDelay = index * 0.05 + 's';
el.style.width = (stat * 100) + '%';
el.style.backgroundColor = `hsl(${50 - 50 * stat | 0}, 100%, 50%)`;
},
},
});
.bars {
width: 400px;
}
.bar {
margin: 5px 0;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
color: white;
font-family: sans-serif;
font-weight: bold;
padding: 5px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
.bar.v-enter-active {
transition: all 1s cubic-bezier(0, 1, 0.5, 1);
}
.bar.v-enter {
/* Needs !important to override inline styles */
opacity: 0;
width: 0% !important;
background-color: hsl(50, 100%, 50%) !important;
}
<script src="https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.min.js"></script>
<div id="app">
<transition-group tag="div" class="bars" #enter="onEnter">
<div class="bar" v-for="stat, index of stats" :key="stat" :data-stat="stat" :data-index="index">
{{ (stat * 100 | 0) }}%
</div>
</transition-group>
</div>

Trouble Centering Divs

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>

Copying html into wordpress using a plugin causing problems

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;).

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008