Question
I'm not fluent in javascript and I'm trying to edit this example at w3schools to make a simple headline within a div slide to the right smoothly (from out of view) upon page load. I just KNOW it has something to do with the code that is already here, but I'm having two problems.
When I turn the box they are moving into a text headline and change the "div" selector into '.headline' (or whatever I've named it), clicking the button won't move it.
If I figure that out, I still don't know how to make it work without the button.
Solution
Right now that code is invoked with a click handler, just remove the wrapper for that and execute it on page load:
https://stackoverflow.com/questions/18964545
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian$(document).ready(function() {
$(".header").animate({ //be sure to change the class of your element to "header"
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
OTHER TIPS
if you want to make it when body loads just try these
100% working
The html content and coding are as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var function1 = function(){
$(document).ready(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
};
</script>
</head>
<body onload="function1();">
<p> in the body tag i have added onload event which tells that when body is fully loaded then do this function which has a name of function1 or you can name something else but remember <b>in script tag the name after var should be same as the name in onload event </b></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
