My code:
<html>
<head>
<script type="text/javascript" charset="utf-8">
function backgroundImage() {
document.body.style.backgroundImage='url("http://www.image.jpg")';
}
</script>
</head>
<body onLoad="backgroundImage()">
Content here
</body>
</html>
But the addition of document.ready:
$(document).ready(function () {
document.body.style.backgroundImage='url("http://www.image.jpg")';
});
breaks the code
Why does this not work, something I'm missing, or prefix of document.ready just not needed? Could it be that 'document' should not be called twice?
Thanks in advance!
Kind Regards,
Dale
This is no problem, can run
http://jsfiddle.net/HRhQW/
You should change the name of the function from 'backgroundImage' to something like 'setBackgrounImage'. The name is somehow conflicting with the property.
Update: I guess I was wrong, See this jsfiddle.net/ARsmn. The body onload function is called after the $(document).ready(). So you might want to keep this in your mind when using body body onload and $(document).ready().
Related
I am slightly baffled by this one... for some reason the newLoaded() function is apparently not defined and as per the console output I get this: Uncaught ReferenceError: newLoaded is not defined at onload yet it's literally on the same page (not even loaded via external resources)
<head>
...
<script language="text/javascript">
function newLoaded() {
loaded();
}
</script>
</head>
<body onLoad="newLoaded();" class="page page-id-105 page-template page-template-page-fullwidth page-template-page-fullwidth-php cherry-fixed-layout" style="height: 100%;margin:0px;padding:0px">
...
What i found out was the language="text/javascript" is deprecated. Either remove it or use type=""
I have tried following code and seems to be working good
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function newLoaded() {
//loaded();
alert();
}
</script>
</head>
<body onload="newLoaded()">
</body>
</html>
also if there is any load() function whats not defined, the rest can't be triggered.
I think you might have a typo it should be onload not onLoad
EDIT: it works on both cases but the standard one all lowercase
Sorry there might be an answer somewhere out there, but I was having trouble finding it as well as trying to do it myself. But I was wondering if I could get an example of putting HTML inside of a jQuery function as well as a javascript function so that I can use it later to append to DOMs.
HTML
<div class="container>
</div>
jQuery
$(function (nothing){
'<h3>Nothing Here</h3>'
});
$(".container").append(function(nothing));
RESULT
Nothing Here
I am an even bigger noob with javascript, but I'd like to achieve the same result. Can someone show me how? Also, is there a difference in using the javascript method VS the jQuery method? thanks!
Javascript answer:
domElement.innerHTML is the API to add any html content inside the domElement.
And the html content can be returned from the javascript function in string format.
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script> function getHTMLContent() {
return "<h2>Nothing here</h2>";
}</script>
<script>
document.getElementById("container").innerHTML = getHTMLContent();
</script>
</body>
</html>
Jquery answer: Instead of .innerHTML we have .append in jquery. This also takes string as parameter. And there is no difference in the way we call the javascript function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function getHTMLContent() {
return "<h2>Nothing here</h2>";
}
$("#container").append(getHTMLContent());
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
And regarding your doubt on function() and $function()..
$(function() { ... });
is just jQuery short-hand for
$(document).ready(function() { ... });
It gets called automatically once the page is ready.
But in javascript when you declare function(), this is not called by itself. You have to explicitly call it.
function nothing(){
$(".container").append('nothing');
}
I want to do a quick javascript check from within the head tag, like so:
<html>
<head>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</head>
<body class='no-js'>
...
</body>
</html>
This doesn't work. Cannot read property classList of null, which...fair enough. If I move the <script> tag into <body>, everything works, but I want the <script> tag in <head>.
What are my options?
EDIT: I should have been much clearer about the error. I realize the problem is that body hasn't loaded when I'm trying to to add the class. However, I was using a bit of Modernizr originally and it was somehow able to modify the body class from within the head and I don't think it was using window.onload or anything like that.
Run the code after body is loaded. There are several approaches to solve the problem:
Move the code into a named function defined in global context and call it in onload.
<html>
<head>
...
<script>
function load() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
}
</script>
</head>
<body onload="load();" class='no-js'>
...
</body>
</html>
Or move code to DOMContentLoaded event listener callback in order to call after dom elements are loaded.
<html>
<head>
...
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.remove("no-js");
document.body.classList.add("js");
});
</script>
</head>
<body class='no-js'>
...
</body>
</html>
Or move the entire script tag to the end of the page.
<html>
<head>
...
</head>
<body class='no-js'>
...
<script>
document.body.classList.remove("no-js");
document.body.classList.add("js");
</script>
</body>
</html>
At the time the javascript is executed there is no body tag, because the browser hasn't gotten around to it yet. You need to either add the script tag in the body, or add it as an event to execute when the document has loaded. See DOMContentLoaded for an example.
I'm trying to include jQuery in my HTML-file but I haven't succeed yet.. I know there are a lot of tutorials and stuff on the internet (and this site!) but it still won't work.
This is my code in the HTML-file.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="global.css"/>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<title>test</title>
</head>
<body>
<script>
$(document).ready(function() {
$("p").css("font-size:50px");
};
</script>
<p id="first">Hello there!</p>
</body>
</html>
I just don't understand why nothing is happening..
Would be awesome if someone could help me with this on!
You are not using the jQuery css() function quite properly. You also missed a closing parenthesis. Try changing it to this:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
You should always use .css('property-name', 'property-value') in that format for best results. There are other ways (object properties) but they are slightly different syntax and do not conform directly to expected vanilla CSS property names.
jQuery API reference - .css()
If that does not fix it, check to be sure your jquery file is in the same directory as the HTML page. Or (probably better) just replace it with the CDN call recommended by other answers (e.g. replace <script type="text/javascript" src="jquery-2.0.3.min.js"></script> in your head with <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>).
You missed to close the code properly. You missed the );. Also the css method is little different in your version. The parameters should be property name, property value.
Try this
$(document).ready(function() {
$("p").css("font-size","50px");
});
Working sample : http://jsbin.com/AfAjihiP/1/
There is a small syntax error. Replace:
$(document).ready(function() {
$("p").css("font-size:50px");
};
With this:
$(document).ready(function() {
$("p").css("font-size", "50px");
});
You forgot to close a parenthesis, and the .css() function needs two parameters.
YOu can do one of two things. You can use the cdn version and link it like this:
or
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> after making sure the file is in the root of your project.
also you should have:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
and not what you currently have.
Don't write several code: Instead of $(document).ready use $ , it works:
so :
$(function() {
$("p").css({"font-size": "50px"});
});
or
$(function() {
$("p").css("font-size", "50px");
});
How to add a class to first div using jQuery.
I Tried following code but doesn't work for me.
maybe I'm missing something.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
You are executing the code before the markup is ready. Wrap the code in
// document ready short-style
$(function() {
});
try
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Your code is correct, but it's executed before the DOM is ready, please move the <script></script> to the last line before </body>.
To add a class to the rest of the elements you can do this (from VisioN's comment)
$(".item:not(:first,:last)").addClass("differentClass");
$(".item :first").addClass('first');
u use this code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
your code should execute when the DOM is fully loaded. So use $(document).ready().
the script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.
Read more about $(document).ready().
check the code below. It will help you to get done what you want.
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
$(".item:first").addClass('first'); will work fine too.
Try the demo too.
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
Here is the jQuery code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards,
http://www.santoshkori.com
see jsfiddle here
$(document).ready(function() {
$('div:first').addClass('first');
});
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
$('.item:first').addClass('first');
$('.item:last').addClass('last');
Try this
JS CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
DEMO
Note
you need to use $(function() { ... }) to wrap whole jQuery code.