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 - Toggle Class. Show all posts
Showing posts with label JqueryUI - Toggle Class. Show all posts

16 January, 2019

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
Older Posts Home

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...

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 (69)
  • 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

  • July (4)
  • 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