- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4064
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: 4338
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.
- Details
- Written by: Stanko Milosev
- Category: jQuery
- Hits: 4325
Here you can download my example of the slider.
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/index.js"></script> <script type="text/javascript" src="/knockout-3.2.0.js"></script> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/jquery-ui.js"></script> <link href="/jquery-ui.css" rel="stylesheet"></link> </head> <body onload="startSlider()"> <h2 class="demoHeaders">Slider</h2> <div id="slider"></div> </body> </html>
JS:
var startSlider = function () {
$( "#slider" ).slider({
range: "min"
});
}
Example taken from here, and here.
HTML5 example:
<!DOCTYPE html> <html> <head> </head> <body> <input type="range" name="points" min="0" max="10"> <body> </html>
Example taken from here.