javamitra, Samastipur
Friday, December 21, 2012
Tuesday, December 18, 2012
Make a html page editable
The Contenteditable Attribute Isn't Really New
The
contenteditable attribute was first introduced in Internet Explorer 5.5, and is supported by Chrome, Firefox (3), Opera (9), and Safari (3). In fact the only place this attribute doesn't really work is in older mobile browsers like iOS 4, but most people have got the more recent iOS 5 or iOS 6 versions, where the attribute is supported.
It is considered a new attribute because it wasn't added to the HTML specification until HTML5. But if you put it in an HTML 4 document it will work.
How to Use Contenteditable
This attribute is very easy to use. You simply add it to the HTML element you want to be editable in the browser window. For example, to make a
DIVelement editable you would write:
<div contenteditable="true">
While you can leave off the
="true" bit, I don't recommend it, as it's not as clear what you mean. On the other hand, some older browsers interpret any instance of the attribute as meaning "true" even if you have explicitly said contenteditable="false"so if you plan on turning this attibute on and off without removing it from the element, be sure to test extensively.Create a Simple To-Do List in Your Browser with Contenteditable
The
contenteditable attribute makes it easy to create a simple to-do list in your web browser. In this example, I will also show you how to use localStorage to save the to-do list for later, so you can close the browser and re-open it and have your list to look at later.- Open your web page in an HTML editor. You should be able to add attributes to HTML tags and some simple scripts to the page with your editor, but it can be WYSIWYG or a text editor, whichever you're more comfortable with.
- Create a single bullet unordered list can call it "myTasks":
<ul id="myTasks">
<li></li>
</ul> - Add the
contenteditableattribute to theULelement:
Once you've done this, you have a to-do list that is editable. But you can't turn off the browser or leave the page, or all your tasks will disappear. So you need to add a simple script to save the tasks to localStorage.<ul id="myTasks" contenteditable="true"> - Add a link to jQuery in the
HEADof your document.
I like using the Google CDN but you can host it yourself or use another CDN if you prefer.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> - At the bottom of your page, just above the
</body>tag, add your script:
This is the start of the jQuery document ready function, and tells the browser to load this script after the document has fully loaded.<script>
$(document.ready(function() {
});
</script> - Inside the document ready function add your script to load the tasks into localStorage and get any tasks that were saved there previously:
$(document.ready(function() {
$("#myTasks").blur(function() { // when the cursor leaves the #myTasks element
localStorage.setItem('myTasksData', this.innerHTML); // save to localStorage
});
if ( localStorage.getItem('myTasksData')) { // if there is content in the localStorage
$("#myTasks").html(localStorage.getItem('myTasksData')); // put content on page
}});
The HTML for the entire page looks like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
<li></li>
</ul>
<script>
$(document).ready(function(){
$("#myTasks").blur(function() {
localStorage.setItem('myTasksData', this.innerHTML);
});
if ( localStorage.getItem('myTasksData') ) {
$("#myTasks").html(localStorage.getItem('myTasksData'));
}
});
</script>
</body>
</html>
content collected from http://webdesign.about.com/od/html5tags/a/how-to-use-contenteditable-attribute.htm?nl=1
Saturday, August 25, 2012
Swing:FileFilter
- First of all create a subclass of FileFilter as follows:
- Following subclass of FileFilter will allow the JFileChooser to show only gif files or folders.
public
class GifFilter
extends FileFilter{
public boolean accept(File f){
return f.getName().toLowerCase().endsWith(".gif")
|| f.isDirectory();
}
public String getDescription(){
return "GIF Image";}
}
Once we have a file filter object, we can use the setFileFilter() method of the JFileChooser class to install it into the JFileChooser object.
fileChooser.setFileFilter(new GifFilter());
Tuesday, January 31, 2012
Java is dead? 9 million devs disagree
Java is dead? 9 million devs disagree
Java is not dead, in fact, it's got more than enough energy to kick your app in the butt. Pure Java, used properly, is an awesome language, even more so than Klingon. It will continue to improve and will not go away anytime soon. The effort should not be on replacing pure Java, but using it together with other JVM languages where it makes sense.
--
Amit Ranjan
Java developer
.............................
P please consider the environment before printing e-mail-- SAVE PAPER!
Java is not dead, in fact, it's got more than enough energy to kick your app in the butt. Pure Java, used properly, is an awesome language, even more so than Klingon. It will continue to improve and will not go away anytime soon. The effort should not be on replacing pure Java, but using it together with other JVM languages where it makes sense.
--
Amit Ranjan
Java developer
.............................
P please consider the environment before printing e-mail-- SAVE PAPER!
Subscribe to:
Posts (Atom)