JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

How to Center any Element Using jQuery

August 8, 2017 by Krishna Srinivasan Leave a Comment

In CSS, there are a few different ways that you can center HTML elements. If you’re working with block-level elements, you can use the margin: 0 auto trick, which uses margins to place any block-level element in the exact center of their parent element. That trick looks like this:

div{
   margin: 0 auto;
}

If you’re centering text, then you’ll probably use the simple and straightforward text-align property, like this:

p{
   text-align: center;
}

For elements that aren’t block-level or text (typically, text tags are block-level elements unless they’ve been assigned a different display property), it’s a little bit more tricky to center them. A good hack for this situation is to set the positioning to absolute or relative, and then give the left property a value of 50%.

.inline-div{
   position: absolute;
   left: 50%;
}

If none of these tried and true CSS methods are working for you, there’s also a way that you can center just about any element to the middle of a page using only jQuery code. The following snippet shows you how to create a function that you can add to your scripts that should be able to center anything:

jQuery.fn.centerElement = function () {
   this.css ("position", "absolute");
   this.css ("top", ($ (window). height () - this.height ()) / 2 + $ (window). scrollTop () + "px");
   this.css ("left", ($ (window). width () - this.width ()) / 2 + $ (window). scrollLeft () + "px")
   return this;
}

The code above actually works by manipulating the CSS properties of the element that you choose to pass through your function. First we add position: absolute to the element. Then we add a value to the top property that we calculate using an equation (we subtract the height of the element from the height of the window, then divide that by the vertical position of the scrollbar, plus 2, plus px, so that our answer is in pixels). For the left property, we use almost the exact same equation to find the number that should be the property’s value, except we find the horizontal position of the scrollbar, rather than the vertical. So basically, this jQuery code acts in a very similar way to the hack above (the one where we used the element’s positioning and left value to horizontally center it).

The difference between the jQuery code and the CSS code is that it centers the element both horizontally and vertically. Additionally, the numbers in the top and left properties are calculated very precisely. To use this function, you’ll just need to choose the element (or elements) that you’d like to center and then pass it through your new function, like this:

$('.center-me').centerElement();

That’s all it takes to use jQuery to center your element on a page. Using jQuery to center elements shouldn’t be your first instinct, because it is slower than using CSS. But if you find yourself in a situation where for whatever reason CSS isn’t working, or you’d like to be able to dynamically center your elements, this is a good option for you.

Filed Under: jQuery

Using jQuery to Create a Click Counter

January 23, 2017 by Krishna Srinivasan Leave a Comment

Here’s a cool jQuery snippet that you can use to create a click counter. The way it works is that each time an element is clicked, the counter (which starts at 0) goes up by one. The counter can be applied to the clicking of any particular elements or multiple elements, and you can choose whether or not to display it somewhere on your page or site, or log the counter to the console, or use the counter in a function.

The code for creating a counter isn’t too complicated and shouldn’t be more than a handful of lines of code. While it doesn’t have to be a counter that is triggered by a click (it could be triggered by any number of events), in this particular example, it is a click counter. Feel free to customize the code so that its functionality appeals to you and so that it works with your HTML and with your desired elements.

$(element)
    .data('counter', 0) // begin counter at zero
    .click(function() {
        var counter = $(this).data('counter'); // get
        $(this).data('counter', counter + 1); // set
        // do something else...
    });

Filed Under: JavaScript, jQuery Tagged With: Click Counter, jQuery

5 jQuery Plugins for Form Validation

November 1, 2016 by Krishna Srinivasan Leave a Comment

Writing your own custom validation rules is sometimes necessary, but it can also be really time-consuming. Any of the following lightweight plugins will do most of the validation code writing for you.

1. quickValidation.js

quickValidation allows you to define the validation rules directly within the HTML input tags. You can also use this plugin to insert custom some custom error text.

2. Ketchup Plugin

Ketchup comes with 18 validations, but you can easily expand on these by writing your own (or tweaking the existing ones). The plugin is also really lightweight.

3. jQuery Validation Plugin

Screen Shot 2016-11-01 at 11.25.48 AM

This client side validation plugin has many validations methods included with the install, but as with the Ketchup plugin, it’s pretty easy to write your own.

4. Validatr

Screen Shot 2016-11-01 at 11.27.32 AM

Validatr uses HTML input attributes to perform validation and will use native validation wherever possible.

5. jQuery Super Labels Plugin

This plugin is a lot like the ones listed above, except it comes with a little bit of smooth animation. When an input item is focused on, the label will slide to the left of the input, and then the label will fade out after a value is entered.

Filed Under: jQuery Tagged With: Form Validation, JQuery Plugins

5 Plugins to Post JavaScript Code Snippets on your WordPress Site

October 16, 2016 by Krishna Srinivasan Leave a Comment

Are you a Java developer that runs a tutorial site or writes the occasional tut? If you are, you might be on the lookout for some easy ways to post formatted code snippets into your WordPress posts. Take a look at any of these plugins to learn more about how to easily add JavaScript code (or HTML, CSS, etc) to your posts and tutorials.

1. Code Markup

Code Markup makes it easy to include code snippets in your pages. The plugin can intuitively tell which tags and characters should be displayed as part of the code snippet and which should be rendered as HTML/JavaScript, etc.

2. CodeColorer

CodeColorer is a code snippet plugin that inserts code that is formatted with the appropriate syntax and highlighting depending on the language.

3. Developer Formatter

Developer Formatter uses a highlight system and includes support for over 110 languages, which makes it a one-size-fits-all plugin and reduces the number of plugins you might need for your site if you include tutorials for many different languages.

4. Google Syntax Highlighter

This plugin will highlight your code snippets according to Alex Gorbatchev’s syntax highlighting and supports over 10 languages, including JavaScript, Java, and VB.

5. File Inliner

File Inliner will display the whole content of a file in a WordPress post — perfect to use if your code snippets are particularly long, or if you want to include many elements (<head>, <body>, <scripts>, etc).

Filed Under: CSS, HTML, jQuery, Wordpress Tagged With: Code Markup, CodeColorer, Developer Formatter, File Inliner, Google Syntax Highlighter

JavaScript Libraries to Keep Your Projects On-Trend

August 23, 2016 by Krishna Srinivasan Leave a Comment

Staying on top of modern design trends and learning how to execute them for your websites and projects can be a full-time job…unless you take advantage of these libraries and plugins. The following list of jQuery and JavaScript libraries and plugins will help you integrate some trendy effects (watercolors, video embeds, and fading transitions, to name a few) into your website quickly and easily so you can keep your designs modern and on-trend without having to sacrifice a lot of time.

1. Aquarelle

Screen Shot 2016-08-16 at 12.02.00 PM

Aquarelle is a library for creating beautiful and vibrant watercolor effects that can be applied to images as animations.

2. TwentyTwenty

Screen Shot 2016-08-16 at 12.08.02 PM

TwentyTwenty allows you to place an image on top of another with a smooth sliding effect to go back and forth between the two images. It’s a great interactive tool to use to compare two images.

3. SuperEmbed.js

Embedding a video to use as a site’s background is becoming an increasingly popular design trend. The SuperEmbed.js library allows for videos to be embedded from sites such as YouTube, Vine, and Vimeo, and will make them completely responsive.

4. Magnific Popup

Screen Shot 2016-08-16 at 12.17.03 PM

Magnific Popup is a JavaScript plugin that creates a lightbox effect. Perfect to add to an image gallery, but the plugin also works with embedded YouTube videos and Google Maps.

5. Tabslet

Screen Shot 2016-08-16 at 12.19.39 PM

Tabs are a great design trend that work well to display different types of content. The Tabslet plugin makes it incredibly easy to add sleek, smooth, and even animated tabs to any of your projects.

6. Choices.js

Screen Shot 2016-08-16 at 12.24.00 PM

Choices is a jQuery plugin to style input fields and dropdown lists. It’s completely configurable and adds a trendy and modern touch to any form.

7. Slinky

Screen Shot 2016-08-16 at 12.26.19 PM

Creating mobile-friendly menus can be a daunting task, but it doesn’t have to be. With Slinky, you can easily create a light-weight, responsive menu that would look great on any modern site.

8. Animsition

Screen Shot 2016-08-16 at 12.28.59 PM

Animsition is a plugin that offers 58 different and beautifully animated transition effects for you to use on your projects. It’s easy to use and lightweight.

 

Filed Under: JavaScript, jQuery Tagged With:  Aquarelle, Animsition, Choices.js, Magnific Popup, Slinky, Tabslet, TwentyTwenty, uperEmbed.js

JQueryUI Selectable Widget Example

November 13, 2014 by itadmin Leave a Comment

jQueryUI provides selectable widget which allows selecting elements individually or in group elements by using the mouse. It also possible to select elements with the mouse hovering on the elements by dragging a box. Elements can be selected by clicking on the element or by dragging the element and also allows selecting of multiple elements on the webpage. Hold down the Ctrl key to select the multiple elements.

also read:

  • JQuery Keydown, Keypress and Keyup
  • JQUery Setting Drop Down Value
  • JQuery prepend() and prependTo()

The selectable method can be used in the following forms:

  • $(selector, context). selectable (options)
  • $(selector, context). selectable (“actions”, [params])

The following example demonstrates a simple example of selectable widget:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe {
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe .ui-selected{
background: orange;
}
.myList {
background: gray;
border: 1px solid cyan;
}
</style>
<script>
$(function(){
$("#selectMe").selectable();
});
</script>
</head>
<title>JQueryUI Example</title>
<body>
<h2>Select the Countries</h2>
<ul id="selectMe">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
<li class="myList">China</li>
<li class="myList">Japan</li>
<li class="myList">Italy</li>
<li class="myList">France</li>
<li class="myList">Canada</li>
<li class="myList">Brazil</li>
</ul>
</body>
</html>
[/code]

  • The above simple script defines selecting elements individually or in group elements by using the mouse. It selects elements by dragging a box.
  • When we click on the element or dragged the elements, the color will get change to orange color which indicates the selected elements in the list.

Run JQueryUI Simpe Selectable Demo

JQueryUI Simple Selectable Example

Selectable Widget Options

The selectable method contains following options:

Option Description Default Value
appendTo It appends the specified element while selecting. body
autoRefresh The position and size of selectable elements should be refreshed or not at the beginning of selection when it is set to true. true
cancel It is used to cancel the selection operation on the specified element . input, textarea, button, select, option
delay It specifies the delay time in milliseconds when selection operation starts. 0
disabled It disables the selection of elements when it is set to true i.e. it stops selecting the elements. false
distance It determines the displacement when selection of elements should start in the form of pixels. 0
filter It determines which elements will be made able to be selected or can be made part of the selection. *
tolerance It is used for testing whether the selection helper should select an item. touch

The following example demonstrates usage of delay and distance options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe1,#selectMe2{
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe1 .ui-selected, #selectMe2 .ui-selected{
background: orange;
}
#selectMe1 .ui-selecting, #selectMe2 .ui-selecting{
background: red;
}
.myList {
background: gray;
border: 1px solid cyan;
}

</style>
<script>

$(function(){
$("#selectMe1").selectable({
delay: 500
});
$("#selectMe2").selectable({
distance:100
});
});
</script>

<title>JQueryUI Example</title>
</head>
<body>

<h2>Starts after Delay of 500ms </h2>
<ul id="selectMe1">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
</ul>
<h2>Moves after the distance of 100px</h2>
<ul id="selectMe2">
<li class="myList">China</li>
<li class="myList">Japan</li>
<li class="myList">Italy</li>
<li class="myList">France</li>
<li class="myList">Canada</li>
<li class="myList">Brazil</li>
</ul>
</body>
</html>

[/code]

  • When we run the above script, we will get two parts of list of country names i.e. one for delay option and another for distance option.
  • The delay option specifies time in milliseconds when selection operation starts. Here, we have defined 500ms i.e. we can select the elements after the 500 ms.
  • The distance option determines the displacement when selection of elements should start in the form of pixels. In the script, it’s defined as 100px i.e. we can starts selecting the elements after mouse moves distance of 100px.
  • These two options uses particular ID selector and also for using different CSS styles which display the result with specified values.

Run JQueryUI Selectable Options Demo

JQueryUI Selectable Options Example

The following example shows usage of cancel option:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe{
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe .ui-selected{
background: orange;
}
.myList {
background: gray;
border: 1px solid cyan;
}
.blocked {
background: green;
border: 1px solid cyan;
}
</style>
<script>
$(function(){
$("#selectMe").selectable({
cancel: ".blocked"
});
});
</script>
</head>
<title>JQueryUI Example</title>
<body>
<h2>Starts after Delay of 500ms </h2>
<ul id="selectMe">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
<li class="myList">China</li>
<li class="blocked">Japan</li>
<li class="myList">Italy</li>
<li class="blocked">France</li>
<li class="myList">Canada</li>
<li class="blocked">Brazil</li>
</ul>
</body>
</html>
[/code]

  • The script uses option called cancel which stops selecting the elements with matching selector.
  • We have used the class blocked, which specifies the blocked elements where we can’t able to select the element and these elements are displayed with green background color.

Run JQueryUI Selectable Options Demo1

JQueryUI Selectable Options Example1

The following example demonstrates usage of filter option:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe{
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe .ui-selected{
background: orange;
}
.myList {
background: gray;
border: 1px solid cyan;
}
.myClass {
background: green;
border: 1px solid cyan;
}
</style>
<script>
$(function(){
$("#selectMe").selectable({
filter: "li:not(.myClass)"
});
});
</script>
</head>
<title>JQueryUI Example</title>
<body>
<h2>Starts after Delay of 500ms </h2>
<ul id="selectMe">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
<li class="myList">China</li>
<li class="myClass">Japan</li>
<li class="myList">Italy</li>
<li class="myClass">France</li>
<li class="myList">Canada</li>
<li class="myClass">Brazil</li>
</ul>
</body>
</html>
[/code]

  • The script uses filter option indicates which elements can be part of the selection.
  • When we run the script, we could select the all the elements except the elements which are related to the class myClass.
  • The matching elements child elements will be made selectees and the elements which are defined within the class myClass will not get selected and these are displayed within green background color.

Run JQueryUI Selectable Options Demo2

JQueryUI Selectable Options Example2

Selectable Widget Methods

The following table shows some of the methods which are used with selectable widget:

Method Description
destroy() It removes the selectable functionality .
disable() This method disables the selectable operation.
enable() This method enables the selectable operation.
options() It returns the options property. It sets selectable operation with specified option name.
refresh It refreshes the position and size of the selected elements.
widget()</ It defines selectable element with jQuery object.

The following example demonstrates usage of disable and option methods:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe1, #selectMe2{
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe1 .ui-selected, #selectMe2 .ui-selected{
background: orange;
}
#selectMe1 .ui-selecting, #selectMe2 .ui-selecting{
background: red;
}
.myList {
background: gray;
border: 1px solid cyan;
}
</style>
<script>
$(function(){
$("#selectMe1").selectable();
$("#selectMe1").selectable(‘disable’);
$("#selectMe2").selectable();
$("#selectMe2").selectable("option", "distance", 1);
});
</script>
</head>
<title>JQueryUI Example</title>
<body>
<h2>Using Disable Method</h2>
<ul id="selectMe1">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
</ul>
<h2>Using Options Method</h2>
<ul id="selectMe2">
<li class="myList">China</li>
<li class="myList">Japan</li>
<li class="myList">Italy</li>
<li class="myList">France</li>
<li class="myList">Canada</li>
<li class="myList">Brazil</li>
</ul>
</body>
</html>
[/code]

  • The above script uses selectable methods disable and option.
  • The disable method disables the selectable elements which does not accept any arguments.
  • The option method returns the options property. It sets the selectable operation with specified option name. In the script, we are using distance option which determines the displacement when selection of elements should start in the form of pixels.
  • Both the methods uses particular ID selector to define different CSS styles, when they will get appear on the webpage.

Run JQueryUI Selectable Methods Demo

JQueryUI Selectable Methods Example

Selectable Widget Events

The following table shows events which are used with selectable widget:

Event Description
create(event, ui) It fires when selectable element is created.
selected(event, ui) It fires when each element selected.
selecting(event, ui) It fires when each element is about to get selected.
start(event, ui) It fires when selectable operation starts.
stop(event, ui) It fires when selectable operation ends.
unselected(event, ui) It fires when each element is unselected.
unselecting(event, ui) It fires when each element is about to get unselected.

The following example demonstrates usage of selected event:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#selectMe{
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}
#selectMe .ui-selected{
background: orange;
}
.myList {
background: gray;
border: 1px solid cyan;
}
</style>
<script>
$(function(){
$("#selectMe").selectable({
selected: function(event, ui){
var selected=$("li[class$=’ui-selected’]").length;
$("#myval").html("you selected " +selected+ " countries");
}
});
});
</script>
</head>
<title>JQueryUI Example</title>
<body>
<h2>Using Selected Event</h2>
<ul id="selectMe">
<li class="myList">India</li>
<li class="myList">Srilanka</li>
<li class="myList">Australia</li>
<li class="myList">South Africa</li>
<li class="myList">China</li>
<li class="myList">Japan</li>
<li class="myList">Italy</li>
<li class="myList">France</li>
<li class="myList">Canada</li>
<li class="myList">Brazil</li>
</ul><br>
<span id="myval" style="color:green;">selected 0 countries.</span>
</body>
</html>
[/code]

  • The script makes use of selectable option called selected which fires when each element is selected in the list.
  • When we selecting the elements from the list, we will get statement, for instance “Selected 2 countries” like this it will go on increasing the numbers while selecting the elements.

Run JQueryUI Selectable Events Demo

JQueryUI Selectable Events Example

Filed Under: jQuery Tagged With: JQuery Events

JQuery UI Draggable Example

November 13, 2014 by itadmin Leave a Comment

The drag is a common feature which is an event, enables dragging by allowing DOM elements to be moved using the mouse. It is something like, when we grab an object and drag it to a different location. It is an intuitive way for user to interact with website or application. Once the element is draggable, we can drag the element anywhere within the viewport by clicking the mouse. A drag operation could be performed using mouse events and the drop operation could be triggered by the mouse being released. This drop event occurs, when the dragged data is dropped to a different location in the viewport.

  • Create Buttons using jQueryUI
  • How to detect jQuery version
  • How To Find CSS Class in a Element

The drag operation could be used to perform some tasks such as moving email messages or any contents to the folders, rearranging list of items etc. The draggable method can be used in following forms:

  • $(selector, context).draggable(options)
  • $(selector, context).draggable(“actions”, [params])

The following is a simple example of draggable widget:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#DragMe {
width: 150px;
height:150px;
padding:0.5em;
background:orange;
text-align:center;
}
</style>
<script type="text/javascript">
$(function () {
$(‘#DragMe’).draggable();
});
</script>
</head>
<body>
<div id="DragMe">
<p>Drag me</p>
</div>
</body>
</html>
[/code]

The above script uses draggable() method which moves elements to a different location in the viewport. We are using the id selector “DragMe” within the div element and providing different CSS styles using this selector for displaying result as specified values.

JQueryUI-Draggable-SimpleExample-Demo

JQueryUI Draggable Simple Example

Draggable Widget Options

The draggable method contains following options:

Option Description Default Value
addClasses It possible to prevent ui-draggable class from being added, set this option with false in the list of DOM elements. true
appendTo It appends the specified element while dragging. parent
cursor It specifies the mouse pointer when an element moves. auto
containment It drags the element within bounds of the region. false
axis It defines the axis which the dragged elements moves on the values such as horizontal or vertical axis. null
cancel It is used to cancel the dragging operation on the specified element. input, textarea, button, select, option
cursorAt It specifies the offset to the mouse pointer false
delay It specifies the delay time in milliseconds when the movement of mouse is taken into account . 0
disabled It disables the movement of elements when it is set to true i.e. it stops draggable. 1
distance It determines the displacement before moving the cursor in the form of pixels. 1
grid It drags the elements to grid system with x and y pixels in the form of [x,y]. false
handle The handle that start the draggable. false
helper It provides helper element for dragging display. original
opacity It provides opacity of the element when moving. false
revert It reverts the element back to its original position after completion of move. false
revertDuration It determines the duration in milliseconds when element revert back to its original position. 500
scope It defines sets of draggable and droppable of items. default
scroll It scrolls the element when it is moved outside the viewport of window. true
scrollSpeed It displays the scrolling speed. 20
snap It display the elements which are being moved on the other elements. false
snapMode It determines adjustment between the moved element and options.snap . both
snapTolerance It specifies maximum number of pixels to establish the adjustment. 20
stack It brings the matched element from the set of elements to the fron. false
zIndex It initialize the Z-index for the helper while being dragged. false

Example using Options

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#DragMe { width: 200px; height: 200px; background:orange;}
#DragHelper { width: 200px; height: 200px; background: red; }
</style>
<script type="text/javascript">
$( init );
function init() {
$(‘#DragMe’).draggable( {
cursor: ‘move’,
containment: ‘document’,
helper: myHelper
} );
}
function myHelper( event ) {
return ‘<div id="DragHelper">Please drag me!!!</div>’;
}
</script>
</head>
<body>
<div id="mydemo">
<div id="DragMe">Drag to see helper element</div>
</div>
</body>
</html>
[/code]

JQueryUI-Draggable-Options-Demo
JQueryUI Draggable Options Example

Draggable Widget Methods

The following table shows some of the methods which are used with draggable widget:

Method Description
destroy() It removes the draggable functionality.
disable() This method disables the drag action.
enable() This method enables the drag action.
instance() It creates the draggable instance object.
options() It returns the options property. It sets draggable option with specified option name.
widget() It defines draggable element object.

Example using Methods

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#mydiv1
{
width:60%;
height:40px;
background:orange;
}
#mydiv2
{
width:60%;
height:40px;
background:pink;
}
</style>
</head>
<body>
<div id="mydiv1" style="border:1px solid red;">
<p>This is disabled element.</p>
</div>
<div id="mydiv2" style="border:1px solid green;">
<p>This is enabled element.</p>
</div>
<script>
$("#mydiv1 p").draggable ();
$("#mydiv1 p").draggable (‘disable’);
$("#mydiv2 p").draggable ();
$("#mydiv2 p").draggable (‘enable’);
</script>
</body>
</html>
[/code]

JQueryUI-Draggable-Methods-Demo

JQueryUI Draggable Methods Example

Draggable Widget Events

The following table shows events which are used with draggable widget:

Event Description
create It fires when draggable element is created.
start It calls when starts dragging element.
drag It is called when mouse is moved during the dragging.
stop It fires when a drag is ended.

Example using Events

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="mydiv1" style="border:1px solid red;">
<p>Welcome to JQuery UI!!!</p>
</div>
<script type="text/javascript">
$(‘#mydiv1 p’).draggable( {
cursor: ‘move’,
stop:function(event, ui){
alert("Drag is Ended!!!");
}
});
</script>
</body>
</html>
[/code]

JQueryUI-Draggable-Events-Demo

JQueryUI Draggable Events Example

Filed Under: jQuery Tagged With: JQuery Events

JQuery ajaxStart Example

November 13, 2014 by itadmin Leave a Comment

The ajaxStart() method triggers when an Ajax request begins and there is no other requests are in active process. This method is used to show the graphics, when the data is loading from the server. When AJAX request begins, then the AjaxStart() method add to the function.

  • Create Buttons using jQueryUI
  • How to detect jQuery version
  • How To Find CSS Class in a Element

jQuery ajaxStart Syntax

[code lang=”xml”]
$(selector).ajaxStart(callback())
[/code]

In the above syntax ‘callback’ is used as parameter. It is used to represents a function to be invoked. This function runs when the Ajax request is start. ajaxStart() method is a Ajax event.

jQuery ajaxStart Example

[code lang=”xml”]
<html>
<head>
<title>ajaxStart method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("div").ajaxStart(function(){

});
$("button").click(function () {
$("div").load("demo.txt");
});
});
</script>
<body>
<div><h2>ajaxStart() Method Example</h2></div>
<button>Click</button>
</body>
</html>
[/code]

  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model(DOM) is ready for JavaScript code to execute.
  • The ‘.ajaxStart()’ method triggers when an Ajax request begins.
  • $(“button”).click(function()) line defines the click method which occurs when an element is clicked.
  • $(“div”).load(“demo.txt”); statement loads the text file from the server and it returns data into the selected element.

When you run the above example, you would get the following output :
jQuery ajaxStart Method Example

When you click on load button it loads the file and displays the following output:
jQuery ajaxStart Method Example1

Filed Under: jQuery Tagged With: JQuery AJAX

JQuery Enabled Selector Example

November 9, 2014 by Krishna Srinivasan Leave a Comment

It selects all the enabled elements in the form. In general, it makes activate for doing operations on elements such as input type text elements, button element etc in the document. It is recommended that it must start with tag name, otherwise by defult it selects all the elements in the form by using defualt type “:enabled”. It is often used on the form elements. It represents the elements that are in an enabled state. Such elements have a corresponding disabled state, in which they can’t be activated or accept inputs. The enabled selector matches every element in the document. It can be used with some of HTML elements such as button, select, option, input and textarea elements.

JQuery Enabled Selector Syntax

[code lang=”xml”]
$(“:enabled”)
[/code]

It specifies enabled state which selects all the enabled elements in the document.

JQuery Enabled Selector Example

[code lang=”xml”]
<!doctype html>
<head>
<title>JQuery Enabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Enabled Selector Example</h2>
<style>
.myval
{
color:green;
}
</style>
<script>
$(document).ready(function(){
$("input:enabled").css("border-color", "orange");
});
</script>
<body>
<form>
Name:<input type="text" name="uname" class="myval" placeholder="This is enabled textbox"><br>
Password:<input type="password" name="pwd" disabled="disabled"><br><br>
<input type="submit" value="Submit" class="myval">
</form>
</body>
</html>
[/code]

  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“input:enabled”).css(“border-color”, “orange”); line defines enabled selector which represents all the enabled elements in the document and uses input HTML element.
  • When we run the above script, we will get two input type elements one with enabled and other one with disabled and enabled button. The enabled elements will display with orange color border and text with green color which uses CSS property styles.

JQuery Enabled Selector Demo

When you run the above example, you would get the following output:

It can also use enabled selector with div element as follows:

[code lang=”xml”]
<!doctype html>
<head>
<title>JQuery Enabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Enabled Selector Example</h2>
<style>
.myval
{
color:green;
}
</style>
<script>
$(document).ready(function(){
$("#Disable").click(function(){
$(".myval *").prop(‘disabled’,true);
});
$("#Enable").click(function(){
$(".myval *").prop(‘disabled’,false);
});
});
</script>
<body>
<div class="myval">
Fname:<input type="text" placeholder="First Name"/>
Lname:<input type="text" placeholder="Last Name"/>
</div>
<input type="button" id="Disable" value="Disable the Elements"/>
<input type="button" id="Enable" value="Enable the Elements"/>
</body>
</html>
[/code]

The above script uses class of div element which sets enabled property for the input elements. The prop method returns properties and values of the selected elements. It get the value of property for the matching elements in the document. The myclass * indicates select the all elements which are defined under div element. If prop method sets true value then it disables the all elements or else if it set to false then it enables all the elements in the document.

When you run the above example, you would get the following output:

Enabled Selector Demo

EnabledSelector1Picture

Filed Under: jQuery Tagged With: JQuery Selectors

JqueryUI Accordion Example

November 8, 2014 by Krishna Srinivasan Leave a Comment

The jQueryUI provides collapsible widget called accordion is a view of hierarchy so that only the roots of each branch are visible. It is widely used to manage large content and navigation lists on the website. We can easily create collapsing division within a webpage which is used to build accordion navigation, content boxes etc. It is jQueryUI based collapsible content panels, displays the information in a limited amount of space which is broken into logical sections and looks like tabs.

The accordion widget contains series of containers, all of which are closed except for one. Each container includes heading which opens the container and display the content. When we click on the heading, its content is displayed. When we click on the other heading, the current content will hide and new content will be shown.

also read:

  • JQuery Keydown, Keypress and Keyup
  • JQUery Setting Drop Down Value
  • JQuery prepend() and prependTo()

The accordion method can be used in the following forms:

  • $(selector, context). accordion (options)
  • $(selector, context). accordion(“actions”, [params])

The following example demonstrates simple accordion technique:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion();
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

  • The above script uses accordion widget which is collapsible content holder and broken into sections, much like tabs.
  • The accordion method uses ID selector “#myaccordion”, defines different content sections which will be activated and displays the content when user clicks on the particular section.

Run JQueryUI Simple Accordion Demo

JQueyUI Simple Accordion Example

Accordion Widget Options

The accordion method contains following options:

Option Description Default Value
active It specifies currently opened content tab. 0
animate It indicates how to animate the panels. { }
collapsible It allows to collapse the panel by clicking on it when it is set to true. false
disabled It disables the accordion when it is set to true i.e. it stops collapsable operation. false
event It selects an accordion header to activate the particular panel. click
header It specifies the header element for the accordion element. > li > :first-child,> :not(li):even
heightStyle It specifies height of the accordion and panel. auto
icons It specifies the icons for the headers. { “header”: “ui-icon-triangle-l-e”, “activeHeader”: “ui-icon-triangle-l-s”}

The following example demonstrates usage of header, collapsible and active options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion({
header: ‘h2’,
collapsible: true,
active: false,
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

  • The script makes use of accordion options i.e. header, collapsible and active and accordion widget uses ID selector “#myaccordion”, to perform actions of above specified options.
  • The header option specifies selector for header element to override the default pattern. In the script, the widget referring to header “h2” for identifying the header elements.
  • The collapsible option allows collapsing the active section by clicking on it when it is set to true.
  • The active option indicates the index of the menu when the panel is currently open.

Run JQueryUI Accordion Options Demo

JQueyUI Accordion Options Example

The following example demonstrates usage of heightStyle and event options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion({
heightStyle: "content",
event: "mouseover"
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

  • The above program contains accordion widget options such as heightStyle and event.
  • The heightStyle option controls the height of the accordion and each panel. Here, we have set value of the heightStyle to content, where each panel will be as tall as its content.
  • The event option specifies the event used to select an accordion header. When we mouse over on the particular element, it will show the contents, present in it.

Run JQueryUI Accordion Options Demo1

JQueyUI Accordion Options Example1

Accordion Widget Methods

The following table shows some of the methods which are used with accordion widget:

Method Description
destroy() It removes the accordion functionality completely.
disable() This method disables the collapsible operation i.e. it disables the all content panels.
enable() This method enables the accordion operation i.e. it reactivates the all menus.
options() It returns the options property. It sets accordion operation with specified option name.
refresh It adds or removes the headers and panels in the DOM and it does not accept any arguments.
widget() It defines the accordion widget element with jQuery object.

The following example demonstrates usage of enable and disable methods:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#enable, #disable{
color: red;
border: 1px solid green;
}
</style>
<script type="text/javascript">
$(function() {
$("#myAccordion").accordion();

$("#enable").click(function() {
$("#myAccordion").accordion("enable");
});

$("#disable").click(function() {
$("#myAccordion").accordion("disable");
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using Accordion Methods</h2>
<div id="myAccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements. External Style Sheets can save a lot of work.External Style Sheets are stored in CSS files.
</div>
</div><br>
<button id="enable">Enable the Accordion!</button>
<button id="disable">Disable the Accordion!</button>
</body>
</html>
[/code]

  • The program uses the accordion methods called, enable() and disable().
  • The enable method enables the accordion element i.e. it reactivate all the menus.
  • We add click handler for the enable button by using the line “$(“#enable”).click(function())” and enable the accordion by using the line “$(“#myAccordion”).accordion(“enable”);”.
  • Like enable, we add click handler for the disable button by using the line “$(“#disable”).click(function())” and disable the accordion by using the line “$(“#myAccordion”).accordion(“disable”);” .
  • Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.

Run JQueryUI Accordion Methods Demo
JQueyUI Accordion Methods Example

Accordion Widget Events

The following table shows events which are used with accordion widget:

Event Description
activate(event, ui) This event fires when the accordion operation starts and triggers after the activation of a panel.
create(event, ui) It fires when an accordion is created.
beforeActivate(event, ui) This event fires before the activation of a panel.

The following example shows usage of activate and beforeActivate events:

[code lang=”xml”]
<!doctype html>
<head>
<title>Example of Accordion</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
$("#myAccordion").accordion({
collapsible: true,
active: true,
activate: function (event, ui) { alert("activate"); },
beforeActivate: function (event, ui) { alert("before activate"); }
});
});
</script>
<body>
<h2>Using Accordion Events</h2>
<ul>
<div id="myAccordion">
<li>
<h2>First Heading</h3>
<div>
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
</li>
<li>
<h2>Second Heading</h2>
<div>
<ul>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</div>
</ul>
</body>
</html>
[/code]

  • The script uses accordion events such as activate and beforeActivate events.
  • The activate event triggers when a menu is activated. It fires after animation completes. It is not fired for the initial panel when the accordion widget is created. When a panel activates, it displays the message through alert box as specified in the script.
  • The beforeActivate event fires before a panel is activated. It will display the message through alert box saying “before activate”, when we click the panel at the initial stage.
  • Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.

Run JQueryUI Accordion Events Demo

JQueyUI Accordion Events Example
JQueyUI Accordion Events Example1

Filed Under: jQuery Tagged With: jQuery UI

  • 1
  • 2
  • 3
  • …
  • 10
  • Next Page »

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved