I have 2 files, filter.html and filter.js.
In filter.html I have a div with the id "test" and in filter.js I have a variable with the name "finishedHTML".
Now I want to write the content of "finishedHTML" into the test div as html code, but the html things "finishedHTML" is empty.
How can I solve this problem?
Source:
var finishedHTML = "<h2>Yes it works</h2>"
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Thanks four your help!
You can use the variable finishedHTML only after it has been declared. So declare it at any point before setting the innerHTML and it will work.
var finishedHTML = "<h2>Yes it works</h2>";
document.getElementById('test').innerHTML = finishedHTML;
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<!-- style="margin-left: 300px; padding-top: 300px;"-->
<div id="test" style="margin-top: 100px;">
<h1>This is a test text</h1>
</div>
<footer>
</footer>
</body>
</html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
put <script> inside body can solve your asysnc loading script issue
Hey just check this its working fine for me.
Thanks
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 30px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
var finishedHTML = "<h2>Yes it works</h2>";
console.log(finishedHTML);
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Move document.getElementById('test').innerHTML = finishedHTML; into filter.js.
Related
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
I have a time input as you can see below
Here label and text are very close and not look well.In order to separate then I gave some padding-top to text but it also moved clock icon down on the right side.
How can I align the text without affecting that clock icon?
Padding added version is below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
.floating-input{
padding-top: 17px;
padding-left: 19px;
}
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events:none;
z-index: 1;
}
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>
On Chrome and Edge(Chromium) you can use the ::-webkit-calendar-picker-indicator pseudo element selector to position the clock icon to counteract the padding.
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events: none;
z-index: 1;
}
input[type="time"].floating-input {
padding-top: 17px;
padding-left: 19px;
}
input[type="time"].floating-input::-webkit-calendar-picker-indicator {
position: relative;
top: -6px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>
I have look for lots of solutions for this in StackOverflow but none solved it, so I hope someone could helo me directly in this post.
I'm making a simple navegation bar for a web page and I wanted it to full fill the width of the browser window, so I gave it the class .container-fluid, and it worked perfectly in a big computer, but when using a laptop, the elements inside the .container-fluid overflows the window like this:
A better look at it is this:
Why is this happening?
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-sm-2 text-center">
<h1>Pliki</h1>
</div>
<div class="col-sm-2">
<div class="row align-items-center">
<div class="col-sm-6 text-center">
Instructions
</div>
<div class="col-sm-6 text-center">
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
SASS
#import url('https://fonts.googleapis.com/css?family=Lato');
$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);
.header {
background-color: $bg-color;
height: 70px;
color: $primary-color;
.row {
height: 100%;
}
h1 {
font-family: Courier, sans-serif;
}
.btn {
color: $primary-color;
border-color: $primary-color;
font-family: Lato, sans-serif;
&:hover {
color: $bg-color;
background-color: $primary-color;
}
}
}
.main {
background: black;
}
JAVASCRIPT
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
The .col-sm-2 class that wraps the button is too narrow to fit the contents. I would remove the .col-* classes from those columns, remove .row from the buttons' parent and use .d-flex instead, apply a margin between the buttons and a padding to the .header .row (to match similar to what you had before - though it isn't necessary).
Here's a pen for your changes in scss https://codepen.io/mcoker/pen/qjxmLr
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
#import url("https://fonts.googleapis.com/css?family=Lato");
.header {
background-color: #21252b;
height: 70px;
color: #76c888;
}
.header .row {
height: 100%;
padding: 0 30px;
}
.header h1 {
font-family: Courier, sans-serif;
}
.header .btn {
color: #76c888;
border-color: #76c888;
font-family: Lato, sans-serif;
margin-left: 1em;
}
.header .btn:hover {
color: #21252b;
background-color: #76c888;
}
.main {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div>
<h1>Pliki</h1>
</div>
<div>
<div class="d-flex align-items-center">
<div>
Instructions
</div>
<div>
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
I tried to create a jQuery function .hover to change the background-color of div by using another class and using hover to addClass and removeClass.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
CSS:
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
Javascript:
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
You haven't included the Jquery library. Include it before your script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
$(document).ready(function() {
$('div').hover(
function() {
$(this).addClass('hltd');
},
function() {
$(this).removeClass('hltd');
}
);
});
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
.hltd {
display: inline;
font-family: Helvetica;
color: black;
background-color: #66FF33;
padding: 20px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
Though, if you are only trying to change the background colour, CSS would be a better option.
use css :hover pseudo-class instead of JS
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
div:hover {
color: black;
background-color: #66FF33;
}
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
Its work for me..
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
It has worked for me, confirm your script referenced correctly. I could suggest to open your inspect element and check the console and view any errors which you may encounter. If you nothing appears, use the browser debugger.
I have used the following online link for jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners