Im using openfl and trying to use a webfont in the nmepreloader class.
I cant seem to get it to work even though I have the style sheet and index set up properly I think.
Here is my fontSyle.css
/* * * * FONTS * * * */
#font-face {
font-family: 'Futura PT';
src: url( 'assets/fonts/FuturaPT.woff' );
}
#font-face {
font-family: 'Futura Bold PT';
src: url( 'assets/fonts/FuturaBoldPT.woff' );
}
and my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta id="viewport" name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="fontStyle.css" />
<link rel="stylesheet" type="text/css" href="gameStyle.css" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load( {
custom: {
families: ['Futura PT, Futura Bold PT'],
urls:['./fontStyle.css']
}
} );
</script>
<div id="mainContainer" style="">
<div id="unacceleratedDiv" style="background-color: #030C22; width: 100%; height: 100%; position: absolute;" data-framerate="60">
<canvas width="0" height="0" id="unacceleratedCanvas" style="position: absolute; left: 0px; top: 0px; -webkit-transform-origin: 0px 0px; opacity: 1;">
</canvas>
</div>
<div id="haxe:openfl" style="background-color: #030C22; width: 100%; height: 100%" data-framerate="60"></div>
</div>
<div id="iOS7HelperContainer" style="opacity: 0.7; visibility: hidden;">
<div id="iOS7HelperOverlay" style="background: '' "></div>
</div>
<div id="noPortrait" class="BadOrientation BadOrientation--Portrait" style="visibility: hidden; background-size: contain;"></div>
<div id="noLandscape" class="BadOrientation BadOrientation--Landscape" style="visibility: hidden; background-size: contain;"></div>
<script type="text/javascript" src="./pixi.min.js"></script>
<script type="text/javascript" src="./iOS7HelperOverlay.js"></script>
<script id="haxe:openfl:script" type="text/javascript" src="./JourneyToTheWest.js"></script>
</body>
</html>
How can I use these fonts inside of the preloader.
Related
I want to make a progress bar using Bootstrap that has some dots on that progress bar as in the image below. How can I do that? Or where exactly should I research?
.progress {
width: 278px;
height: 7px;
left: 597px;
top: 489px;
}
.progress-bar {
background: #007BFF;
border-radius: 100px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-body">
<div class="justify-content-center">
<div class="progress" style="width: 100%">
<div class="progress progress-bar" aria-valuenow="15%" aria-valuemin="0%" aria-valuemax="100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try using range bars
https://getbootstrap.com/docs/5.1/forms/range/
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<label for="customRange1" class="form-label">Range bars</label>
<input type="range" class="form-range" id="customRange1" />
</body>
</html>
Can anyone give me a help with code? I'm trying to move the h3 header to the right side of the page and cannot seem to get it to move. The attached picture is of where it is now and where I would like it to be.
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<style>
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
Apply a float: right; to the <h3> element
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
h3 {
float: right;
}
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
I made a google forum and I copied it's HTML code to put it on my own website. The code works when there is no background image on the page, but when I put a background image it is gone. I tried putting it above the image with index and more but it never seemed to work. Any solutions?
CSS
body {
background: linear-gradient(rgba(20, 26, 35,0.55),rgba(20, 26, 35, 0.55)),
url("../img/minecraft.jpg") no-repeat center center fixed;
z-index: 0;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
overflow: hidden;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSekkPJOyDhurz628H4ITig0AJcAx4dzU5e9xRlknsq1eFqSMA/viewform?embedded=true" width="640" height="1757" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<div class="applycontainer">
<div class="applylogo">
<!-- In the img folder, upload your logo -->
<!-- Make sure you name it 'logo.png' -->
<img src="img/logo.png" alt="PvP Hut Logo">
</div>
</body>
</html>
here I am trying to change the image source property with the help of javascript but it is not working my case how can I change this .some one suggest me change in code.so that is can work in my case.
this is the CSS file for formatting the HTML code.
here I am using both logos from the internet.
also changing the background and background is changed but imaged is not changed.
function hello() {
console.log(document.getElementsByTagName("img").src);
document.getElementsByTagName("img").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
</body>
</html>
Get the elements id instead. document.getElementById("hero").src = "https://www.facebook.com/images/fb_icon_325x325.png";
This way you are specific in which element you are trying to get. Because you using a tag, you need to specify which child of the tag you are getting.
could use document.getElementsByTagName("img").item(0); or document.getElementsByTagName("img")[0] or be more specific and get it by its id.
The [0] is the first occurrence of the tag on the page, numerical increments of items in code start with 0, if there were two, the key would be [1].
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
document.getElementById("hero").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>
The error was that getelementsbyTagName returns an HTMLCollection list which is an array-like object.
Thus if you want to access the element , you have to use the arr[0] style.
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
Code
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<head>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>
I have an iframe that fits in the page on google chrome but when I open it in IE10 it is as if the entire page has been zoomed in
Here is an example of chrome
and here is explorer
below is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Fastlane Autosales</title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<style>
body {width:100%; height:100%; overflow:hidden, margin:0}
html {width:100%; height:100%; overflow:hidden}
#size {width: 900px; height: 800px; display: block;}
</style>
<body>
<div id="wrapper1">
<div id="menu-wrapper">
<div id="menu" class="container">
<ul>
<li>Homepage</li>
<li class="current_page_item">Inventory</li>
<li>Financing</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div style="position: absolute; top: 50%; left: 20px; margin-top: -360px">
<iframe id = "size" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" style="background-color:#E6E6E6" src="http://listings2011.boostmotorgroup.com/Search.aspx?DealershipID=4075&isLogo=0&MediaID=36"></iframe>
</div>
</body>