Posts

Showing posts with the label jquery

Make Switch Button with Jquery Mobile

By Karan Ratta
Image
You have seen facebook messenger or any other android  applications which have On and Off switch button.Today we discuss about how you can make a simple and attractive switch button using a Jquery Mobile.You need a Jquery Mobile  Framework to do this creative thing.I must say you have to try this. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Facebook Messenger Style Switch Using Jquery Mobile</title> <link rel="stylesheet"  href="css/jquery.mobile-1.2.1.css" /> <link rel="stylesheet"  href="css/jquery.mobile-1.2.1.min.css" /> <link rel="stylesheet"  href="css/jquery.mobile.theme-1.2.1.min.css" /> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.2.1.js"></script> <scr...
Post a Comment
Read more

Displaying data on Hover using Jquery and HTML

By Karan Ratta
Image
This feature is used to display the details relating to each photo when the user's mouse is in that area of the page.For our first pass at displaying this information, we use the .hover() method. When the cursor enters a photo's boundary, the associated information fades in to 70 percent opacity, and when it leaves, the information fades back out.There are, of course, multiple ways to perform this task. Since a portion of each handler is the same, it's possible to combine the two handlers to reduce code duplication. You can download the source code of this topic.   JavaScript.js <script type="text/javascript"> $(document).ready(function() { $('.photo').hover(function() { $(this).find('.details').fadeTo('fast', 0.7); }, function() { $(this).find('.details').fadeOut('fast'); }); }); </script>
Post a Comment
Read more