PORTFOLIO CONVERSION OUR TEAM BLOG

10 Light On Off with toggle smooth switch using JQuery CSS Search...
04
Adding toggle is an one of the easy way to use jQuery plugin that adds toggle in a seconds to any Hack and PHP Blog
websites. Nowadays toggle are very customizable and available with multiple skins. Here I can
Follow Page 1.2K followers
enhance the light switch on off with smooth toggle using jQuery. Live demo will show you the
implementation of flip switch. The flip switch is used mostly for binary on/off or true/false data
inputs. Basically this flip switch is nothing but a select with two options, we can make either one
of the options selected by default i.e., off. Here link is acting as the toggle switch, by default it is
off. When the same link is clicked, we hide the off and show on. At the same time it triggers the
bulb to glow.

SOCIAL OAUTH LOGIN

PERSONALIZED MAP NAVIGATION

ONLINE IMAGE COMPRESSION TOOL

Image Compression

ADVERTISEMENT

Toggle Switch - CSS:

view plain copy to clipboard print ?

01. .toggle {
02. position: relative;
03. display: block;
04. margin: 0 auto;
05. width: 150px;
06. height: 60px;
07. color: white;
08. outline: 0;
09. text-decoration: none;
10. border-radius: 100px;
11. border: 2px solid #546E7A;
12. background-color: #263238;
13. transition: all 500ms;
14. }
15.
16. .toggle:active { background-color: #1c2429; }
RECENT POSTS
17.
18. .toggle:hover:not(.toggle-moving):after { background-color: #455A64; } « Personalized Map Navigation
19.
20. .toggle:after { « Remjs solves the problem of mobile
21. display: block; terminal adaptation
22. position: absolute;
23. top: 4px; « Picture centered vertically
24. bottom: 4px;
25. left: 4px; « Colorful Diwali Wishes Share Via
26. width: calc(50% - 4px);
27. line-height: 45px; Whatsapp and Facebook
28. text-align: center;
29. text-transform: uppercase;
 30. font-size: 20px; « Get City and State by ZipCode Using
31.
32. PORTFOLIO
color: white;
background-color: #37474F; CONVERSION OUR TEAM BLOG Google Map Geocoding API
33. border: 2px solid;
34. transition: all 500ms;
35. }
36.
37. .toggle-on:after {
38. content: 'On';
39. border-radius: 50px 5px 5px 50px;
40.
41. }
color: #66BB6A;
CATEGORIES
42.
43. .toggle-off:after { « Google Map
44. content: 'Off';
45. border-radius: 5px 50px 50px 5px; « Security
46. transform: translate(100%, 0);
47. color: #f44336; « CSS HTML
48. }
49. « PHP
50. .toggle-moving { background-color: #1c2429; }
51. « PHP Mysql
52. .toggle-moving:after {
53. color: transparent; « Jquery Ajax
54. border-color: #435862;
55. background-color: #222c31; « Codeigniter
56. transition: color 0s, transform 500ms, border-radius 500ms, background-
color 500ms; « Javascript
57. }
58. « Bootstrap
59. #light-bulb2 {
60. width: 150px;
61. height: 150px;
62. background: url(https://lh4.googleusercontent.com/-
katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-
repeat 0 0;
63. }
64.
65. #light-bulb {
66. position: absolute;
67. width: 150px;
68. height: 150px;
69. top: 5%;
70. left: 40%;
71. background: url(https://lh4.googleusercontent.com/-
katLGTSCm2Q/UJC0_N7XCrI/AAAAAAAABq0/6GxNfNW-Ra4/s300/lightbulb.png) no-
repeat -150px 0;
72. cursor: move;
73. z-index: 800;
74. }

jQuery:
view plain copy to clipboard print ?

01. $('.toggle').click(function(e) {
02. var toggle = this;
03.
04. e.preventDefault();
05.
06. $(toggle).toggleClass('toggle-on')
07. .toggleClass('toggle-off')
08. .addClass('toggle-moving');
09. if ($('.toggle').hasClass('toggle-on')) {
10. $('#light-bulb2').css({
11. 'opacity': '1'
12. });
13. } else {
14. $('#light-bulb2').css({
15. 'opacity': '0'
16. });
17. }
18. setTimeout(function() {
19. $(toggle).removeClass('toggle-moving');
20. }, 200)
21. });
 PORTFOLIO CONVERSION OUR TEAM BLOG

By Thirumani Raj posted on - 10th Apr 2016

Live Demo Download Script

« previous article

Other Articles

Check Domain Name Gmail Style Clone Login Page

Availability Using PHP Ajax and Validation Using PHP,
Jquery, Ajax an [..]

CONTACT-US HACK & PHP QUICK LINKS WEBSITE STATISTICS

« About PHP Website Statistics from 18.01.2016
Your email
« About Hack
« About HHVM Total visitors 123700
Your message « Advantages Disadvantages of HHVM
Belarus 117
« Conclusion of HHVM
« Our Team
Yesterday (N.V) 15
« Portfolio
Today (N.V) 11
« English to Tamil Conversion
« English to Hindi Conversion Online 2
« English to Bengali Conversion
United States
« English to Malayalam Conversion
« English to Telugu Conversion 7 hours ago
« English to Kannada Conversion Visited: Colorful Diwali Wish...
« Blog From: Arrived Directly
You're a : human robot Send
« Sitemap

© 2015-2024. hackandphp.com Made in india. All rights reserved the content is copyrighted to Thirumani Raj - Advertise