In Java, FileOutputStream is a bytes stream class that’s used to handle raw binary data. To write the data to file, you have to convert the data into bytes and save it to file. See below full example. package com.mkyong.io; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; public class WriteFileExample { public static void main(String[] args) …
In Java, file permissions are very OS specific: *nix , NTFS (windows) and FAT/FAT32, all have different kind of file permissions. Java comes with some generic file permission to deal with it. Check if the file permission allow : file.canExecute(); – return true, file is executable; false is not. file.canWrite(); – return true, file is …
In Java, there are many ways to create and write to a file. Files.newBufferedWriter (Java 8) Files.write (Java 7) PrintWriter File.createNewFile Note I prefer the Java 7 nio Files.write to create and write to a file, because it has much cleaner code and auto close the opened resources. Files.write( Paths.get(fileName), data.getBytes(StandardCharsets.UTF_8)); 1. Java 8 Files.newBufferedWriter …
jQuery show() and hide() are the most common used effect. show() – Display the matched elements. hide() – Hide the matched elements. Both methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style …
Both jQuery after() and insertAfter() methods are doing the same task, add a text or html content after the matched elements. The major difference is in the syntax. For example, <div class="greyBox">I’m a ipman</div> <div class="greyBox">I’m a ipman 2</div> 1. $(‘selector’).after(‘new content’); $(‘.greyBox’).after("<div class=’redBox’>Iron man</div>"); 2. $(‘new content’).insertAfter(‘selector’); $("<div class=’redBox’>Iron man</div>").insertAfter(‘.greyBox’); Result Both methods above …
Both jQuery append() and appendTo() methods are doing the same task, add a text or html content after the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).append(‘new text’); $(‘.box’).append("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …
jQuery text() is used to get the contents of all the matched elements; While text(‘new text’) is used to replace or set the text contents of all the matched elements. For example, <div class="TClass">TEXT 1</div> <div class="Tlass">TEXT 2</div> 1. $(‘.TClass’).text() This will combine all the contents of the matched elements, get “TEXT 1 TEXT 2” …
jQuery wrap() is used to wrap HTML element around each of the matched elements. For example, <div class="innerBox">Ip man vs Iron man</div> <div class="innerBox">Ip man 2 vs Iron man 2</div> Wrap it with a div tag that contains a class name of ‘wrapBox’. $(‘.innerBox’).wrap("<div class=’wrapBox’></div>"); The new contents will become : <div class=’wrapBox’> <div class="innerBox">Ip …
jQuery tutorial with full example, including jQuery selectors, DOM traversing, common practice, event handling (form, browser, mouse ,keyboard), animations effects and Ajax stuff
jQuery comes with three handy methods to create the sliding effect easily. slideUp() – Hide the matched elements with slide up effect. slideDown() – Display the matched elements with slide down effect. slideToggle() – If the matched element is displayed, it will hide with a slide up effect; if hidden, it will display with a …
Both jQuery prepend() and prependTo() methods are doing the same task, add a text or html content before the content of the matched elements. The major difference is in the syntax. For example, <div class="box">I’m a big box</div> <div class="box">I’m a big box 2</div> 1. $(‘selector’).prepend(‘new text’); $(‘.box’).prepend("<div class=’newbox’>I’m new box by prepend</div>"); 2. $(‘new …
jQuery comes with three handy methods to create the fading effect easily. fadeIn() – Display the matched elements with fade in effect. fadeOut() – Hide the matched elements with fade out / transparent effect. fadeTo() – Fading the matched elements to certain opacity. Above three methods are support duration as parameter : slow, fast, or …
Both jQuery mouseup() and mousedown() events are self-explanatory, to verify the mouse button is pressed or released. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #mouseup, #mousedown{ float:left; padding:8px; margin:8px; border:1px solid red; width:200px; height:150px; background-color:#999999; } </style> </head> <body> <h1>jQuery mouseup() and mousedown() examples</h1> <div id="mouseup"> <h2>mouseup</h2> Fire when mouse over this …
jQuery resize() event is fire when the size of the browser is changed, and this event is only bind to $(window). $(window).resize(function () { $(‘#msg’).text(‘Browser (Width : ‘ + $(window).width() + ‘ , Height :’ + $(window).height() + ‘ )’); }); To get the browser’s width and height details, use $(window).width() and $(window).height(). Try it …
jQuery comes with five common form events to handle the form elements’ action. 1. focus() Fire when an element is on focus. $("input,select,textarea").focus(function () { //do something }); 2. blur() Fire when an element is loses focus. $("input,select,textarea").blur(function () { //do something }); 3. change() Fire when an element value is changed, e.g update checkbox, …
The toggleClass() method means if matched elements do not have the class name, then add it; if matched elements already have the class name, then remove it. Let see an example, a simple ‘p’ tag. <p>This is paragraph</p> Call $(‘p’).toggleClass(‘highlight’), it will add a highlight class to the ‘p’ tag. <p class="highlight">This is paragraph</p> Call …
jQuery html() is used to get the html contents of the first element of the matched elements; While html(‘new html content’) is used to replace or set the html contents of all the matched elements. For example, two div elements that contains same class name “AClass”. <div class="AClass">ABC 1</div> <div class="AClass">ABC 2</div> 1. $(‘.AClass’).html() This …
jQuery click() and dblclick() events are the most common used mouse events : click() – Fire when mouse single click on the matched element. dblclick() – Fire when mouse double clicks on the matched element. Try it yourself <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #singleClick, #doubleClick{ float:left; padding:8px; margin:16px; border:1px solid blue; width:150px; height:150px; …
jQuery comes with three keyboard events to capture the keyboard activities – keyup(), keydown() and keypress(). keyup() – Fire when user releases a key on the keyboard. keydown() – Fire when user presses a key on the keyboard. keypress() – Fire when user presses a key on the keyboard. In general statement, the keydown() is …
jQuery comes with a hover() mouse event to allow attach two event handlers to the matched elements, executed when the mouse enters and leaves the matched elements. $("#id").hover(A, B); A – function to call when the mouse enters the matched element. B – function to call when the mouse leaves the matched element. This is …
In jQuery, both mouseover() and mouseenter() events are fire when the mouse enters the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios : 1. NO child element If the matched elements have no child element, both mouseover() and mouseenter() events are work …
A simple select / drop down box, with a id=”country”. <select id="country"> <option value="None">– Select –</option> <option value="China">China</option> <option value="United State">United State</option> <option value="Malaysia">Malaysia</option> </select> 1. To display the selected drop down box value. $(‘#country’).val(); 2. To set a drop down box value to ‘China’. $("#country").val("China"); 3. To set a drop down box value to …
Often times, users like to press a few times on the submit button to make sure the button is surely clicked, and causing the double form submission issue. The common solution is disables the submit button after user clicked on it. 1. Enable / Disable submit button 1.1 To disable a submit button, you just …
Delicious, the best bookmark website, provides many APIs to let developers to deal with the bookmarks’ data. Here’s an example to use jQuery to retrieve the total number bookmark count of a given URL. Delicious API To get a total number of bookmark, use this http://feeds.delicious.com/v2/json/urlinfo/data?url=xxx.com&callback=? jQuery Ajax jQuery, comes with an easy but powerful …
To check if jQuery library is loaded, use the following JavaScript code : if (typeof jQuery != ‘undefined’) { alert("jQuery library is loaded!"); }else{ alert("jQuery library is not found!"); } Alternative? In some blogs and forum mention about the following alternative code : if (jQuery) { alert("jQuery library is loaded!"); } else { alert("jQuery library …
jQuery filter function is a useful feature to extract your elements from a set of the matched elements, by using the matched selector or the function’s test. 1. filter(selector) In a set of matched elements, get the elements that are match the filter() selector only. For example, $("div").filter("#div1").css(‘background-color’, ‘blue’); Matched all the div elements, and …
jQuery comes with a trigger() function to execute the event handlers that attached to elements. For instance, A single click event bind to a button with an Id of “button1”. $("#button1").bind("click", (function () { alert("Button 1 is clicked!"); })); A single click event bind to a button with an Id of “button2”. and a trigger …
jQuery bind() function is used to attach an event handler to elements, while the unbind() is used to detached an existing event handler from elements. Examples Simple html code for the demonstration. <div id="BoxId"> Mouseover Me, Click Me or Double Click Me </div> <span></span> 1. bind() jQuery has full supports of the JavaScript event types …
Both jQuery empty() and remove() are used to remove the matched elements, just the former is used to remove the child of the matched elements; while the latter is used to remove all the matched elements totally. Example 2 div tags – “BBox” is a child element to “ABox”. <div class="ABox"> I’m a A box …
To detect copy, paste and cut behavior, you just need to bind the corresponding event type. $("#textA").bind(‘copy’, function() { $(‘span’).text(‘copy behaviour detected!’) }); $("#textA").bind(‘paste’, function() { $(‘span’).text(‘paste behaviour detected!’) }); $("#textA").bind(‘cut’, function() { $(‘span’).text(‘cut behaviour detected!’) }); If you are using jQuery 1.4x, it’s support the multiple events declaration like following : $("#textA").bind({ copy : …
jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements. 1. Clone the html elements For example, you are going to clone the following html code. <div class="smallBox"> I’m a small …
In general, the “DOCTYPE” tag is tells your web browser how to validate or process your web page according to the w3c rules and avoid some web browsers (especially IE) to turn itself into “Quirks mode“. Quirks mode is disaster Let go thought an example to know how quirks mode mess up your web page. …
Problem This jQuery error message is caused by loading the cross domain content. Error: [Exception… "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" It’s means you are loading some content that are not belong to or located at your site (different domain name). See this jQuery example to load the cross domain (yahoo.com) …
Both jQuery before() and insertBefore() methods are doing the same task, add a text or html content before the matched elements. The major difference is in the syntax. For example, <div class="prettyBox">I’m a ipman</div> <div class="prettyBox">I’m a ipman 2</div> 1. $(‘selector’).before(‘new content’); $(‘.prettyBox’).before("<div class=’newPrettybox’>Iron man</div>"); 2. $(‘new content’).insertBefore(‘selector’); $("<div class=’newPrettybox’>Iron man</div>").insertBefore(‘.prettyBox’); Result Both methods above …
Here’s a simple idea to create a tooltips message with jQuery. Idea… Identify the “target” that need to show the tooltips message. Create a tooltips message and CSS style for it. Three functions, – showTooltips, hideTooltips, changeTooltipsPosition. While mouseenter the “target“, use showTooltips to show the tooltips message and initial the position with changeTooltipsPosition. While …
To increase the website performance and reduce the total file’s size return, you may consider to load JavaSript (.js) file when it’s required. In jQuery, you can use the $.getScript function to load a JavaScript file at runtime or on demand. For example, $("#load").click(function(){ $.getScript(‘helloworld.js’, function() { $("#content").html(‘Javascript is loaded successful!’); }); }); when a …
The “enter” key is represent by code “13”, check this ASCII charts. To check if an “enter” key is pressed inside a textbox, just bind the keypress() to the textbox. $(‘#textbox’).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ alert(‘You pressed a "enter" key in textbox’); } }); To check if an …
Mashable, best known as social media resources website, created an awesome floating effect while user scrolling the page. Here’s a simple idea to clone this floating effect with jQuery. Idea… Create a floating box. Initial the floating box location, put it beside the body content. While user scrolling the page, keep checking the scroll bar …
jQuery comes with two methods to check if an element has a certain class name. Both methods have the same functionality. is(‘.classname’) hasClass(‘.classname’) For example, to check if div element has a class name of ‘redColor’. 1. is(‘.classname’) $(‘div’).is(‘.redColor’) 2. hasClass(‘.classname’) $(‘div’).hasClass(‘.redColor’) Example If the div element has a class name of ‘redColor’, then change …
The next() function is used to get the immediate following sibling element in the set of matched elements. Only the following sibling’s element is select, it’s child element will be ignore. This next() function is allow to filter it by ‘selector’. For example, next(‘div’) is used to get the immediate following sibling elements that are …