jquery4u.com - Archives (mai 2016)
1 jQuery Fan Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets.
This quick tip describes how to have your browser remember the state of checkboxes once a page has been refreshed or a user navigates away from your site to come back at a later date.
[author_more]
It might be useful to Persist Checkbox Checked State if, for example, you use checkboxes to allow your users to set site-specific preferences, such as opening external links in a new window or hiding certain page elements.
For the impatient among you, there's a demo of the technique at the end of the article.
The Checkbox Markup
So, the first thing we'll need are some checkboxes. Here are some I made earlier:
<div id="checkbox-container">
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label>
<input type="checkbox" id="option2">
</div>
<div>
<label for="option3">Option 3</label>
<input type="checkbox" id="option3">
</div>
<button>Check All</button>
</div>
You'll notice that I've included a Check All button to allow a user to select or deselect all of the boxes with one click. We'll get to that later.
You'll hopefully also notice that I'm using labels for the text pertaining to each of the boxes. It goes without saying that form fields should have labels anyway, but in the case of checkboxes this is particularly important, as it allows users to select/deselect the box by clicking on the label text.
Finally, you'll see that I'm grouping the labels and check boxes inside block-level elements (<div> elements in this case), so that they appear beneath each other and are easier to style.
Responding to Change
Now let's bind an event handler to the checkboxes, so that something happens whenever you click them. I'm using jQuery for this tutorial although, of course, this isn't strictly necessary. You can include it via a CDN thus:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
Now the JavaScript:
$("#checkbox-container :checkbox").on("change", function(){
alert("The checkbox with the ID '" + this.id + "' changed");
});
Here I'm using jQuery's psuedo-class :checkbox selector, preceded by the ID of the containing <div> element (checkbox-container). This allows me to target only those checkboxes I am interested in and not all of the checkboxes on the page.
Persist Checkbox Checked State
As you're probably aware HTTP is a stateless protocol. This means that it treats each request as an independent transaction that is unrelated to any previous request. Consequently if you check a checkbox then refresh the page, the browser has no way of remembering the checkbox's prior state and—in the example above—will render it in its unchecked form (although some browsers will cache the value).
Continue reading %Quick Tip: Persist Checkbox Checked State after Page Reload%
This popular article was updated in May, 2016, to reflect the current state of text highlighter plugins.
Many applications or websites provide a way for users to search for specific terms. To make this process faster, offer a great user experience, and generally help users find the content they're searching for, you can highlight these search terms dynamically on the given page.
Here are 10 jQuery text highlighter plugins you can use to make this possible.
1. mark.js
A keyword highlighter for search terms or custom regular expressions, written in ES6 and based on several dozen cross-browser unit tests as well as code quality monitoring. It's been developed to cater for every use case, and includes all options from the text highlighter plugins below and more (e.g. diacritics, synonyms and iframes).
See the Pen mark.js demo by SitePoint (@SitePoint) on CodePen.
2. highlight
A very simple and tiny text highlighting plugin that laid the basis for many forks. Because it doesn't allow any customization, its strength is the small file size (1.4 KB).
See the Pen highlight demo by SitePoint (@SitePoint) on CodePen.
3. jquery.highlight
A fork of highlight (#2 above) that adds the base options to specify a custom element and class name as well as an option caseSensitive and wordsOnly. Unfortunately, this plugin is not maintained (last commit from 2010, no fork rebasing) and has disabled issues, so it should be used with caution.
See the Pen jquery.highlight demo by SitePoint (@SitePoint) on CodePen.
Continue reading %10 jQuery Text Highlighter Plugins%