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.
Related
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.
I (newbie in MVC) added a preloader with jquery in the layout page, which should be loaded on every page load in MVC.
The problem is it fires only on the login page, but does not fires on the subsequent pages. Is there any way to make it generic ?
......................
<script type="text/javascript">
$(window).load(function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<style type="text/css">
.no-js #loader
{
display: none;
}
.js #loader
{
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Preloader_3.gif) center no-repeat #fff;
}
</style>
</head>
<body>
<div id="wrapper">
#Html.Action("Navbar", "Navbar", new { controller = ViewContext.RouteData.Values["Controller"].ToString(), action = ViewContext.RouteData.Values["Action"].ToString() })
<div id="page-wrapper">
<div id="main">
<div class="ptcontainer">
<div id="loader" class="se-pre-con"></div>
#RenderBody()
</div>
<div id="footer">
</div>
</div>
</div>
</div>
Thanks in Advance!
You code is correct but you need to but slash to the background url image
background: url(/images/Preloader_3.gif) center no-repeat #fff;
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
on my Magento 1.6.2.0 front page I am getting /**/ at the top of my page. Seems to be before the page content load at http://nilandsplace.com. I can see it in firebug, but have no way to know where it comes from. Firebug shows
<head>
<body class=" ig-404tosearch-index-index cms-home" style="position: relative; min-height: 100%; top: 0px;">
<span id="BuySafeSealSpan" style="display: inline; padding: 0px; margin: 0px; border: 0px none; position: fixed; bottom: 0px; top: auto; right: auto; left: 0px; z-index: 10001; background-color: transparent; height: auto; width: auto;">
/*
<script type="text/javascript">
*/
<meta content="EB5B8B2562CC109C0058726E01C0AFC1" name="msvalidate.01">
<meta content="azPLjb6T1pIRdUuZPmIGr7HV3p982Yaa1TGQKOjMe0E" name="google-site-verification">
<script type="text/javascript">
But it should look like this
<head>
<body class=" ig-404tosearch-index-index cms-home" style="position: relative; min-height: 100%; top: 0px;">
<span id="BuySafeSealSpan" style="display: inline; padding: 0px; margin: 0px; border: 0px none; position: fixed; bottom: 0px; top: auto; right: auto; left: 0px; z-index: 10001; background-color: transparent; height: auto; width: auto;">
<div style="display:none;">
<div id="livezilla_tracking" style="display:none">
<script type="text/javascript">
<noscript><img src="http://chat.nilandsplace.com/server.php?request=track&output=nojcrpt&fbpos=12&fbml=0&fbmt=0&fbmr=0&fbmb=0&fbw=32&fbh=112" width="0" height="0" style="visibility:hidden;" alt=""></noscript>
<script type="text/javascript">
<script src="https://stat.dealtime.com/ROI/ROI2.js" type="text/javascript">
<div class="wrapper">
The class=" ig-404tosearch-index-index cms-home" should be between the
<body></body>
tags and the
and what follows should be between
<head></head>
tags
Some how in removing and old Google translate script in my template files I introduced the
/*
<script type="text/javascript">
*/
But I can't find it. I have used file comparison to my local back up copy and can't find the Dif file difference. I have a local Apache2 server on my home computer with all the same setup. but my localhost does not have the load error?
I have been through Magento: /app, /core, /default (template files), /design, /js, /lib, /modules, /include and /skin and I am running out of files. I don't save /var/cache or session to files. I have cleared APC and eAccelerator and swapped in my online database to localhost and not found the error.
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}