<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI removeClass 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> <style> .elemClass { width: 200px; height: 50px; background-color: #b9cd6d; } .myClass { font-size: 40px; background-color: #ccc; color: white; } </style> <script type = "text/javascript"> $(document).ready(function() { $('.button').click(function() { if (this.id == "add") { $('#animTarget').addClass("myClass", "fast") } else { $('#animTarget').removeClass("myClass", "fast") } }) }); </script> </head> <body> <div id = animTarget class = "elemClass"> Hello! </div> <button class = "button" id = "add">Add Class</button> <button class = "button" id = "remove">Remove Class</button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI hide 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-1 { width: 500px; height: 200px; } #button-1 { padding: .5em 1em; text-decoration: none; } #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script> $(function() { function runEffect() { $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback ); }; // callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // set effect from select menu value $( "#button-1" ).click(function() { runEffect(); return false; }); }); </script> </head> <body> <div class = "toggler-1"> <div id = "effect-1" class = "ui-widget-content ui-corner-all"> <h3 class = "ui-widget-header ui-corner-all">Hide</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. </p> </div> </div> <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI hide 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" ).hide( "blind", {times: 10, distance: 100}, 1000, callback ); }; // callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; $( "#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">Hide</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">Blind Effect Hide</a> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI effect 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> #box-2 { height: 100px; width: 100px; background: #b9cd6d; } </style> <script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "explode", easing: "easeInExpo", pieces: 4, duration: 5000 }); }); }); </script> </head> <body> <div id="box-2"></div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more