My javascript only has one line of code, and it gets the "getElementById null" error.
document.getElementById("menu-background").style.left = "0";
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javavascript" src="js/main-menu.js"></script>
</head>
<body>
<div id="menu-background">
<div id="main-menu"></div>
</div>
</body>
</html>
CSS:
#menu-background {
position: fixed;
width: 100%;
height: 100%;
background-image: url("images/background.png");
background-position: center;
background-size: cover;
top: 0;
text-align: center;
left: 100%;
}
#main-menu {
width: 60vw;
height: 80vh;
border-style: solid;
border-radius: 1.125em;
border-color: #b88a00;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.75);
transition: all 0.25s;
}
I run visual studio code and have checked the link to the js. I have also tried to run it inside of the HTML file.
You can try this:
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById("menu-background").style.left = "0";
});
You should put your script at the end of the document in order for the element to be defined before reaching it:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="menu-background">
<div id="main-menu"></div>
</div>
<script type="text/javavascript" src="js/main-menu.js"></script>
</body>
</html>
I have found the problem!!!
My HTML file was named "main.html" and when I renamed it to "index.html" it worked!
Thanks for the fast replies, guys. I'm a newcomer here, so I really mean it.
Related
I am trying to create this page where I have different div and buttons that are scattered on the page and connecting them using jquery connections by musclesoft
I have tried this code but it seems that the connection isn't happening at all, I can't figure out what the issue is?
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
jQuery(document).ready(function() {
$('div').connections();
});
</script>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by rasbsal</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<button>
Text
</button>
</div>
<div>
<button class="about">
About
</button>
</div>
</body>
</html>
The connections are not visible because there's actually no space between the div elements (go to Inspect Element in Dev Tools and see for yourself highlighting the two DIV elements).
Use button as your connecting selector
jQuery(($) => {
$('button').connections();
});
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<div>
<button>Text</button>
</div>
<div>
<button class="about">About</button>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections#1.0.1/jquery.connections.js"></script>
MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>
This question already has answers here:
Jquery not loading in head but loading on bottom of body tag
(5 answers)
Closed 7 years ago.
hello my javascript code is not working i included the css and the script in the code i don't have good experience in javascript maybe there is something missing i need some help here thanks in advance
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
</html>
its working already.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
</html>
The order of your HTML is totally incorrect, you have the <head></head> tag below the <body></body>.
Place the head tag above the body, just after the opening html tag then move your css and the link to jQuery in this section.
Finally it's better to add your JS at the very bottom of the page as the browser reads the dom from top to bottom, thus will increase the speed of the page load.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
<script type='text/javascript'>
$(function() {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
</body>
You have multiple errors.
First the css in <style></style> tag must be in your <head></head> of your page.
Best solution is using external css file and add him with a <link> in your <head>.
After that the <script> section is highly better on the bottom of your page because the browser compile in order of your code.
If you want add <script> before html add your script in this function :
$(document).ready(function(){
// Here
});
write the jS code in a .js file and use
<script src="foo/bar/yourScript.js"></script>
the style sheet in an .css and use a
<link rel="stylesheet" href="css/bar/yourStyle.css">
so the Script-tag is always at the Bottom of the body-element
the head is above the body and the link-tag inside the head
Here is suggestion that please maintain the flow of code.
write the css Style in head tag and jquery or JavaScript after body tag completed.
Here is jsfiddle link
https://jsfiddle.net/nbcakhzz/2/
Hope it will help you.
i want to use wow.js on my website. I got a sidebar which needs to have the content inside a container with overflow-x: auto;. Because of this wow.js does not work.
Is it possible to define in wow.js the scrolling container?
My site looks like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/js/wow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/animate.css">
<script>
$("document").ready(function() {
new WOW().init();
})
</script>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
position: relative;
}
#menu {
position: absolute;
width: 300px;
left: -300px;
background: red;
}
#content {
position: absolute;
width: 100%;
height: 100%;
background: green;
overflow-x: auto;
}
.wow {
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<nav id="menu">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li>
</ul>
</nav>
<div id="content">
contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
<script>
</script>
</html>
Problem solved:
I've changed the Contentcontainer to a section and used this code to init wow.js
var wow = new WOW({ scrollContainer: "section"});
wow.init();
Thanks anyway
I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.
I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.
Here is the js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Here is the CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.
Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.
I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.
The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.
When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.
Something like this should work (http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}