jquery - How can I run a script on page load? -
this script drawing line top bottom, starts on mouseover "onhover" , want draw when page opened.
this whole code clear. thing makes functional hover line $( ).hover(function().
var animationduration = "0.4" var backgroundcolor = "white" $.fn.line = function liner(animationduration, borderwidth, side, backgroundcolor) { var classname = "line" var timeperside = animationduration $(this).append('<div class=' + classname + '> <div></div> </div>'); $(this).children("." + classname).css({ "-webkit-transition": "all " + timeperside + "s linear " + timeperside * 0 + "s", "transition": "all " + timeperside + "s linear " + timeperside * 0 + "s", "background-color": backgroundcolor, }); switch (true) { case side == "right": $(this).children(".line").css({ "top": "0", "right": "-10", "height": "0%", "width": borderwidth, }); } if (side == "right") { $(this).hover(function () { $(this).children(".line").css({ "height": "150%", }); }); } }; and html
<body> <div class="box1 float-left liner"> <h1>lorem</h1> </div> </body> <script type="text/javascript"> $( document ).ready(function() { $('.liner').line(animationduration, "5px", "right", backgroundcolor); }); </script> </html>
it sounds want ignore hover function , run portion of plugin on load. you'll have modify plugin, may not idea. instead of this:
if (side == "right") { $(this).hover(function () { $(this).children(".line").css({ "height": "150%", }); }); } ... this:
if (side == "right") { $(this).children(".line").css({ "height": "150%", }); } if need code run on both events, might pull inner portion out named function , phone call both:
function setlineheight(els) { $(els).children(".line").css({ "height": "150%", }); } ... , then:
if (side == "right") { $(this).hover(function () { setlineheight(this); }); setlineheight(this); // called when plugin initialized (on document.ready) } jquery mouseover onhover
No comments:
Post a Comment