CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other
Showing posts with label JqueryUI. Show all posts
Showing posts with label JqueryUI. Show all posts

16 January, 2019

JqueryUI - Position

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Position     No comments   

JqueryUI - Position

In this chapter we shall see one of the utility methods of jqueryUi, the position() method. The position() method allows you to position an element with respect to another element or mouse event.
jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person. Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.

Syntax

The following is the syntax of the position() method −
.position( options )
Where options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned. Following table lists the different options that can be used with this method −
Sr.No.Option & Description
1my This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value is center.
2at This option is of type String and specifies the location of the target element against which to align the re-positioned elements. Takes the same values as the my option. By default its value is center.
3of This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.
4collision This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.
5using This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.
6within This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.

Example

The following example demontstrates the use of position method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI position method Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.positionDiv {
position
: absolute;
width
: 75px;
height
: 75px;
background
: #b9cd6d;
}
#targetElement {
width
: 300px;
height
: 500px;
padding
-top:50px;
}
</style>

<script>
$
(function() {
// Position the dialog offscreen to the left, but centered vertically
$
( "#position1" ).position({
my
: "center",
at
: "center",
of
: "#targetElement"
});
$
( "#position2" ).position({
my
: "left top",
at
: "left top",
of
: "#targetElement"
});
$
( "#position3" ).position({
my
: "right-10 top+10",
at
: "right top",
of
: "#targetElement"
});
$
( document ).mousemove(function( event ) {
$
( "#position4" ).position({
my
: "left+3 bottom-3",
of
: event,
collision
: "fit"
});
});
});
</script>
</head>

<body>
<div id = "targetElement">
<div class = "positionDiv" id = "position1">Box 1</div>
<div class = "positionDiv" id = "position2">Box 2</div>
<div class = "positionDiv" id = "position3">Box 3</div>
<div class = "positionDiv" id = "position4">Box 4</div>
</div>
</body>
</html>
Let us save the above code in an HTML file positionmethodexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In this example we see that −
  • Box 1 is aligned to center (horizontally and vertically) of the div element.
  • Box 2is aligned to left top (horizontally and vertically) of the div element.
  • Box 3is displayed in the top right corner of the window, but leave some padding so that the message stands out more. This is done using the horizontal and vertical values of my or at.
  • For Box 4, the of value is set as an event object. This is an event associated with a pointer and moves with the mouse event.

 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Position

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Position     No comments   

JqueryUI - Position

In this chapter we shall see one of the utility methods of jqueryUi, the position() method. The position() method allows you to position an element with respect to another element or mouse event.
jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person. Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.

Syntax

The following is the syntax of the position() method −
.position( options )
Where options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned. Following table lists the different options that can be used with this method −
Sr.No. Option & Description
1 my This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value is center.
2 at This option is of type String and specifies the location of the target element against which to align the re-positioned elements. Takes the same values as the my option. By default its value is center.
3 of This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.
4 collision This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.
5 using This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.
6 within This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.

Example

The following example demontstrates the use of position method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>
Let us save the above code in an HTML file positionmethodexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In this example we see that −
  • Box 1 is aligned to center (horizontally and vertically) of the div element.
  • Box 2is aligned to left top (horizontally and vertically) of the div element.
  • Box 3is displayed in the top right corner of the window, but leave some padding so that the message stands out more. This is done using the horizontal and vertical values of my or at.
  • For Box 4, the of value is set as an event object. This is an event associated with a pointer and moves with the mouse event.

 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Toggle Class

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Toggle Class     No comments   

JqueryUI - Toggle Class, JqueryUI, 

This chapter will discuss the toggleClass() method, which is a useful new class for manipulation. toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

Syntax

Added in Version 1.0 of jQueryUI

The toggleClass() method has its basic syntax as follows −
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
Sr.No.Parameter & Description
1className
This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2switch
This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3duration
This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
4easing
The name of the easing function to be passed to the animate() method.
5complete
This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.
.toggleClass( className [, switch ] [, options ] )
Sr.No.Parameter & Description
1className
This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2switch
This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3options
This represents all animation settings. All properties are optional. Possible values are −
  • duration − A string or number determining how long the animation will run.. Its default value is 400.
  • easing − A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here.
  • complete − This is a callback method called for each element when the effect is complete for this element.
  • children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.
  • queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Examples

The following example demonstrates the use of toggleClass() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.class1 {
border
-width : 10px;
border
-color : grey;
background
-color : #cedc98;
color
: black;
}
</style>

<script>
function toggle () {
$
("#para").toggleClass ("class1", 1000);
}
</script>
</head>

<body>
<button onclick = toggle()> Toggle </button>
<p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
</body>
</html>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Toggle Class

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Toggle Class     No comments   

JqueryUI - Toggle Class, JqueryUI, 

This chapter will discuss the toggleClass() method, which is a useful new class for manipulation. toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

Syntax

Added in Version 1.0 of jQueryUI

The toggleClass() method has its basic syntax as follows −
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
Sr.No. Parameter & Description
1 className
This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2 switch
This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3 duration
This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
4 easing
The name of the easing function to be passed to the animate() method.
5 complete
This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.
.toggleClass( className [, switch ] [, options ] )
Sr.No. Parameter & Description
1 className
This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2 switch
This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3 options
This represents all animation settings. All properties are optional. Possible values are −
  • duration − A string or number determining how long the animation will run.. Its default value is 400.
  • easing − A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here.
  • complete − This is a callback method called for each element when the effect is complete for this element.
  • children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.
  • queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Examples

The following example demonstrates the use of toggleClass() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Toggle

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Toggle     No comments   

JqueryUI - Toggle, JqueryUI, 

This chapter will discuss the toggle() method of jQueryUI visual effects. toggle() method toggles the show () or hide () methods depending on whether the element is hidden or not.

Syntax

The toggle() method has the following syntax −
.toggle( effect [, options ] [, duration ] [, complete ] )
Sr.No.Parameter & Description
1effect
This is a String indicating which effect to use for the transition.This is a String and represents the effect to use when adjusting the element visibility. The effects are listed in the table below.
2options
This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
3duration
This is of type Number or String and determines how long the animation will run. Its default value is 400.
4complete
This is a callback method called for each element when the effect is complete for this element.

jQueryUI Effects

The following table describes the various effects that can be used with the effects() method −
Sr.No.Effect & Description
1blind
Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.
2bounce
Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
3clip
Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
4drop
Shows or hides the element by making it appear to drop onto, or drop off of, the page.
5explode
Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
6fade
Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.
7fold
Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
8highlight
Calls attention to the element by momentarily changing its background color while showing or hiding the element.
9puff
Expands or contracts the element in place while adjusting its opacity.
10pulsate
Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
11scale
Expands or contracts the element by a specified percentage.
12shake
Shakes the element back and forth, either vertically or horizontally.
13size
Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.
14slide
Moves the element such that it appears to slide onto or off of the page.
15transfer
Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.

Example

The following example demonstrates the use of toggle() method with different effect listed in the above table.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Toggle Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>

<script>
$
(function() {
function runEffect() {
$
( "#effect" ).toggle('explode', 300);
};
$
( "#button" ).click(function() {
runEffect
();
return false;
});
});
</script>
</head>

<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
</body>
</html>a
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Toggle

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Toggle     No comments   

JqueryUI - Toggle, JqueryUI, 

This chapter will discuss the toggle() method of jQueryUI visual effects. toggle() method toggles the show () or hide () methods depending on whether the element is hidden or not.

Syntax

The toggle() method has the following syntax −
.toggle( effect [, options ] [, duration ] [, complete ] )
Sr.No. Parameter & Description
1 effect
This is a String indicating which effect to use for the transition.This is a String and represents the effect to use when adjusting the element visibility. The effects are listed in the table below.
2 options
This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
3 duration
This is of type Number or String and determines how long the animation will run. Its default value is 400.
4 complete
This is a callback method called for each element when the effect is complete for this element.

jQueryUI Effects

The following table describes the various effects that can be used with the effects() method −
Sr.No. Effect & Description
1 blind
Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.
2 bounce
Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
3 clip
Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
4 drop
Shows or hides the element by making it appear to drop onto, or drop off of, the page.
5 explode
Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
6 fade
Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.
7 fold
Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
8 highlight
Calls attention to the element by momentarily changing its background color while showing or hiding the element.
9 puff
Expands or contracts the element in place while adjusting its opacity.
10 pulsate
Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
11 scale
Expands or contracts the element by a specified percentage.
12 shake
Shakes the element back and forth, either vertically or horizontally.
13 size
Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.
14 slide
Moves the element such that it appears to slide onto or off of the page.
15 transfer
Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.

Example

The following example demonstrates the use of toggle() method with different effect listed in the above table.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Toggle Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).toggle('explode', 300);
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
   </body>
</html>a
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Switch Class

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Switch Class     No comments   

JqueryUI - Switch Class, JqueryUI, 

This chapter will discuss the switchClass() method, which is a useful new class for manipulation. switchClass() method move from one CSS one CSS class to another, animating the transition from one state to the other.

Syntax

Added In Version 1.0 of jQueryUI

The switchClass() method has its basic syntax as follows −
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No.Parameter & Description
1removeClassName
This is a String and represents the CSS class name, or space-delimited list of class names, to be removed.
2addClassName
This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.
3duration
This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
4easing
The name of the easing function to be passed to the animate() method.
5complete
This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.
.switchClass( removeClassName, addClassName [, options ] )
Sr.No.Parameter & Description
1removeClassName
This is a String and represents the CSS class name, or space-delimited list of class names, to be removed.
2addClassName
This is of type String and represents one or more class names (space separated) to be added to the class attribute of each matched element.
3options
This represents all animation settings. All properties are optional. Possible values are −
  • duration − A string or number determining how long the animation will run.. Its default value is 400.
  • easing − A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here.
  • complete − This is a callback method called for each element when the effect is complete for this element.
  • children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.
  • queue − This is of type String/Boolean indicating whether to place the animation in the effects queue..

Examples

The following example demonstrates the use of switchClass() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.LargeClass {
font
-family: Arial;
font
-size: large;
font
-weight: bold;
color
: Red;
}
.NormalClass {
font
-family: Arial;
font
-size: small;
font
-weight: bold;
color
: Blue;
}
</style>

<script>
$
(function() {
$
('#btnSwitch').click(function() {
$
(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$
(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>

<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>

 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Show

 Programing Coderfunda     January 16, 2019     JqueryUI, JqueryUI - Show     No comments   

JqueryUI - Show, JqueryUI, 

This chapter will discuss the show() method, which is one of the methods used to manage jQueryUI visual effects. show() method displays an item using the indicated effect.
show() method toggles the visibility of the wrapped elements using the specified effect.

Syntax

The show() method has the following syntax −
.show( effect [, options ] [, duration ] [, complete ] )
Sr.No.Parameter & Description
1effect
This is a String indicating which effect to use for the transition.This is a String and represents the effect to use when adjusting the element visibility. The effects are listed in the table below.
2options
This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects.
3duration
This is of type Number or String and determines how long the animation will run. Its default value is 400.
4complete
This is a callback method called for each element when the effect is complete for this element.

jQueryUI Effects

The following table describes the various effects that can be used with the effects() method −
Sr.No.Effect & Description
1blind
Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.
2bounce
Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
3clip
Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
4drop
Shows or hides the element by making it appear to drop onto, or drop off of, the page.
5explode
Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
6fade
Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options.
7fold
Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
8highlight
Calls attention to the element by momentarily changing its background color while showing or hiding the element.
9puff
Expands or contracts the element in place while adjusting its opacity.
10pulsate
Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
11scale
Expands or contracts the element by a specified percentage.
12shake
Shakes the element back and forth, either vertically or horizontally.
13size
Resizes the element to a specified width and height. Similar to scale except for how the target size is specified.
14slide
Moves the element such that it appears to slide onto or off of the page.
15transfer
Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.

Examples

The following example demonstrates the use of show() method.

Show with Shake Effect

The following examples demonstrates show() method with shake effect.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>

<script>
$
(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$
( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
};

//callback function to bring a hidden box back
function callback() {
setTimeout
(function() {
$
( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
$
( "#button" ).click(function() {
runEffect
();
return false;
});
$
( "#effect" ).hide();
});
</script>
</head>

<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
Let us save the above code in an HTML file showexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Click on the Add Class and Remove Class buttons to see the effect of classes on the box.

Show with Blind Effect

The following example demonstrates the use of show() method with blind effect.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>

<script>
$
(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$
( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
};

//callback function to bring a hidden box back
function callback() {
setTimeout
(function() {
$
( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};

// set effect from select menu value
$
( "#button" ).click(function() {
runEffect
();
return false;
});
$
( "#effect" ).hide();
});
</script>
</head>

<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Older Posts Home

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda