I was working with an html page now i am trying to rewrite a div style to another style it'll look like this <div class="fs-stretcher" style="width: 1170px; height: 480px;"></div>. for that i am using java script like this
<script>
window.onload=document.getElementsByClassName('fs-stretcher')[0].setAttribute("style","width: 0px; height: 0px; background-color: yellow;")
</script>
but it is not working somebody please help me to fix this.
You have to assign a function reference to window.onload.
window.onload = function () {
document.getElementsByClassName('fs-stretcher')[0].setAttribute("style", "width: 0px; height: 0px; background-color: yellow;")
};
your code is executing the statement document.getElementsByClassName.... and assigns the value returned by setAttribute to onload
Another way to place the script after you div.
<html>
<head>
</head>
<body>
<div class="fs-stretcher" style="width: 1170px; height: 480px;">adv</div>
<script>
window.onload = document.getElementsByClassName('fs-stretcher')[0].setAttribute("style", "width: 100px; height: 100px; background-color: yellow;")
</script>
</body>
</html>
This will also work fine. But if you use window.onload =function(){-----} is best way as answer above by Arun P johny.
window onload is a function, and you should need to bind a function to this event.
so try:
window.onload = function () {
document.getElementsByClassName('fs-stretcher')[0].setAttribute("style", "width: 0px; height: 0px; background-color: yellow;")
};
or you can create a function
function setElementOnLoad() {
document.getElementsByClassName('fs-stretcher')[0].setAttribute("style", "width: 0px; height: 0px; background-color: yellow;")
};
and bind it to onload of body tag:
<body onload="setElementOnLoad()">
Related
I'm trying to use javascript to navigate to the second div after the page loads, but it's not working for some reason. What am I doing wrong?
<script type = "text/javascript">
window.location.hash = "second";
</script>
#first {
border: 1px solid red;
width: 100%;
height: 100%;
}
#second {
border: 1px solid blue;
width: 100%;
height: 100%;
}
<div id = 'first'> </div>
<div id = 'second'> </div>
Make sure your script runs after the document is loaded. Since you've tagged jQuery, this should work:
$(function() {
window.location.hash = "second";
});
Fiddle
Works for me! Be sure only that the javascript runs when the document is loaded, an easy way is to put it a the end of the document. If you want do it with jquery use on document ready.
I'm trying to create a simple 2-D game in Javascript. I'm going to use jQuery to do some animations.
There will be buttons that a player will use to call various functions (Move up/down/left/right, Attack, Defend, etc).
A movement() function will call a secondary function, animateCharacter(), to handle the movement of an image object on screen.
The problem I'm having is that the next command in the movement() function executes before the animateCharacter() function has finished.
I tried to add a callback function, but that didn't fix the situation. I've tried many other things -- setInterval, setTimeout, .delay, etc. Nothing seems to fix this situation. What am I not doing, or what am I doing wrong?
Here's a simplified example of the problem....
What I'm expecting to happen is the user hits [Move the Block], the image of a yellow face moves a bit to the right; then the mainContainer turns into "hello", and then turns into "goodbye."
But what happens instead is: The user hits [Move the Block], the mainContainer immediate says "goodbye", then the animation is never visible, but when the animation finishes, the mainContainer turns into "hello."
If I comment out the final command, the animation is seen and the mainContainer turns into "hello," as expected; but then I don't get to do the that final line of code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<script>
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, function () { callbackSent();});
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("mainContainer").innerHTML = "goodbye";
}
</script>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Try This.
Moved document.getElementById("mainContainer").innerHTML = "goodbye"; to the setTimeout function, that will execute after Hello is printed in the div.
Your code was executing like:
Animate the box with 1500 miliseconds - Animation starts
Change main content to goodBye without waiting for animation completion - Right after animation start
Animation got Completed, so change content to Hello - Animation Completes, though the user never saw it.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello";
setTimeout(function(){document.getElementById("mainContainer").innerHTML = "goodbye"; },1000);
};
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Your code does what it is told at the moment. You need to introduce a delay before showing goodbye.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({
left: "+=50"
}, 1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
animateCharacter(function () {
$("#mainContainer").html("hello");
setTimeout(function () {
$("#mainContainer").html("Goodbye");
}, 3000);
});
}
$('#pushMe').click(doTask);
JSFiddle: http://jsfiddle.net/TrueBlueAussie/7tucg2s5/1/
Notes:
I also used jQuery alternatives to shorten the code.
I moved your inline onclick handler to the jQuery equivalent as that is easier to maintain.
You can't put your "goodbye" message directly in #myContainer because this will destroy #myObject. Add another div to hold the message:
HTML:
<div id="mainContainer">
<div id="myObject">:c)</div>
<div id="myText"></div>
</div>
CSS:
#myText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
JavaScript:
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("myText").innerHTML = "goodbye";
}
Fiddle here: http://jsfiddle.net/robbyn/0qkt0v5r/
Try
function animateCharacter() {
return $("#myObject").animate({
left: "+=50"
}, 1500, function() {
$(this)
.fadeOut(500)
.parent()
.html("<span>hello</span>")
.find("span")
.delay(1500, "fx")
.fadeOut(250, function() {
$(this).html("Goodbye").fadeIn(250)
})
})
}
$("#pushMe").on("click", function() {
animateCharacter()
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
#mainContainer {
border: 1px solid gray;
width: 100px;
height: 100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color: blue;
text-align: center;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe">Move the Block</button>
</body>
</html>
Here is my jQuery code:
(function() {
var overlay = {
init: function() {
$('<div></div>', {
class: 'overlay'
})
.insertAfter('button');
}
};
overlay.init();
})();
I would expect this to put a div under my button however the HTML that is created contains no div:
<body>
<button>Reveal More Info</button>
</body>
Sorry if this is a newbie question, I have just started learning.
The HTML Head:
<head>
<title>jQuery rules</title>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="script.js"></script>
<style>
body {
background: yellow;
}
button {
margin: 100px 0 0 200px;
}
div {
display: none;
width: 600px;
height: 400px;
background-color: white;
border-radius: 40px;
position: absolute;
left: 25%;
top: 30%;
}
</style>
</head>
From jQuery documentation, see e.g., http://api.jquery.com/jQuery/#jQuery-html-attributes:
Blockquote
The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.
The problem is you are including the script.js in your header which is executing before the button is added to the dom so the insertAfter() will not be able to find the button to insert the div.
The solution here is to use document ready handler, or to insert the script at the bottom of the body(just before </body>)
//dom ready handler
jQuery(function ($) {
var overlay = {
init: function () {
$('<div></div>', {
'class': 'overlay'
}).insertAfter('button');
}
};
overlay.init();
});
Demo: Fiddle
How to block all UI things in a webpage until all JavaScript files including jquery.js are loaded completely. Is there any possibility to do it using only JavaScript?
You can add a css mask with z-index set to higher than all your other ui elements on the page
In your page
<body>
<div class="mask"></div>
..
..
</body>
CSS
.mask {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #666;
overflow: hidden;
opacity: 0.7;
z-index: 99;
}
Once your jQuery is loaded, hide this mask.
$( document ).ready(function() {
$('.mask').hide();
});
Add some kind of this snippet at the very top of you body:
<div class="loading-overlay" id="loading">
<div class="loading">Loading..</div>
</div>
and this styles inline in HEAD:
<style>.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1000;
}
.loading {
font-size: 20px;
text-align: center;
color: #FFF;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}</style>
Then after all javascript files execute this code:
document.getElementById('loading').style.display = 'none';
Make sure z-index property of the overlay is high enough to cover everything on the page.
However this solution is not reliable if some of your heavy scripts are loaded asynchronously.
Example: http://jsfiddle.net/ucPLW/
Statically listing the script tags in the head will ensure they are loaded before the DOM. This has been the case for as long as I can remember.
<html>
<head>
<!-- insert your script tags here -->
</head>
<body>
<!-- your DOM here -->
</body>
</html>
Its recommended to load the scripts at the bottom of the page instead so I'm not sure your motivations for this.
If by "UI Things," you mean the DOM, then you can put your javascript either at the end of your html like so:
<html>
<head>...</head>
<body>
<script>
// This javascript will execute after the HTML has loaded
</script>
</body>
</html>
Or if you want to use JQuery then you can put your UI code in a document ready function like this:
$(document).ready(function() {
// This javascript will also execute after the HTML has loaded
});
Best of Luck.
You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.
$(window).load(function(){
//your code here
});
I am building a mobile website. I need the header to be position:fixed (but being mobile that is not supported) so I am using iScroll4 because it seems to be what I am looking for. For some reason I am not able to figure out how to implement it.
Here is my HTML:
<html>
<head>
<!--includes the iscroll.js file-->
</head>
<body>
<div id="header">
<!--header contents-->
</div>
<div id="wrapper">
<div id="scroller">
<!--a bunch of html that you probably don't care to see-->
</div>
</div>
Here is my CSS:
#scroller {
position: absolute;
}
#wrapper {
position: absolute;
width: 100%;
top: 0px;
left: 0;
overflow: auto;
}
#header {
background: #4B92DB;
border: none;
height: 175px;
opacity: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
And here is my Javascript:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
If you have any ideas they would be greatly appreciated.
Where's your loaded() being called? This (or something like it) might help:
<body onload="loaded()">
Reading iScroll4 official page might help you. http://cubiq.org/iscroll-4
Section: Getting started. There are 3 ways to make it work:
onDOMContentLoaded event to trigger iscroll
onLoad event to trigger
inline, place the code below the html bit you want to scroll
All codes are just on the page mentioned.