- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4279
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/jquery-2.1.4.js" type="text/javascript"></script>
<script src="/index.js" type="text/javascript" defer></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="animation" style="position: absolute">
I am the text which is going to be animated
</div>
</body>
</html>
JS:
/*global $*/
$(".animation").animate({
left: "+=500"
}, 5000, function () {
alert("finish!");
});
Taken from here.
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4445
For example, if you want to have button which will clear content from text box, but you don't want to loose focus from your text box then you can use this code:Â
<!DOCTYPE html> <html> <head> </head> <body> <input type="text" placeholder="Your text" id="myText"> <button>Test</button> <script type="text/javascript" src="/jquery-2.1.3.js"></script> <script type="text/javascript" src="/index.js"></script> </body> </html>
JS:
$("#myText").focus(function (event) {
alert("Focus!");
});
$("button").mousedown(function( event ) {
event.preventDefault();
$("#myText").val("");
});
Thing to notice:
Example you can see here.
Or here:- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4738
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> <input class="myInput" placeholder="some text"> <p/> <a class="myHref" href="http://www.milosev.com">Test</a> <div class="log"></div> </body> </html>
JS:
window.onload = function() {
$(".myInput").focusout(function() {
$(".log").html($(".log").html() + " I am out of focus <br/>");
});
$(".myInput").focus(function() {
$(".log").html($(".log").html() + " I am focused <br/>");
});
$(".myHref").mouseenter(function() {
$(".log").html($(".log").html() + " Mouse enter <br/>");
});
$(".myHref").mouseleave(function() {
$(".log").html($(".log").html() + " Mouse leave <br/>");
});
$(".myInput").change(function (handler) {
$(".log").html($(".log").html() + "I am changed, and the value is: " + $(".myInput").val() + "<br/>")
});
$(".myInput").keypress(function (handler) {
$(".log").html($(".log").html() + "Key code: " + handler.keyCode + "<br/>")
});
$(".myInput").on('input', $(".myInput"), function() {
$(".log").html($(".log").html() + "Input called, and value is: " + $(".myInput").val() + "<br/>")
});
}
Example download from here.