Home
Search results “Set style css jquery”
jQuery video tutorial 10 - jQuery CSS Method
 
11:07
jQuery CSS() Method: The jQuery CSS() method is used to set one or more CSS style(s) to the selected HTML element(s). It is also used to get the value of a CSS style applied to the selected HTML element(s). Setting the single CSS style or property: Syntax: $(selector).css(“css-property”,”value”); It helps us to select any html element(s) targeted by the given selector and apply the given CSS property. Ex: $(“#firstp”).css(“background-color”,”red”); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS property background color to red . Setting multiple CSS styles or properties: Syntax: $(selector).css({“css-property1”:”value1”,” css-property2”:”value2”,….}); It helps us to select any html element(s) targeted by the given selector and apply the given set of CSS properties. Ex: $(“#firstp”).css({“background-color”:”green”,”color”:”white”}); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS properties background color green and text color white . Getting the value of a single CSS style or property: Syntax: $(selector).css(“css property”); It helps us to select any html element(s) targeted by the given selector and return the value of a given CSS property. Ex: alert($(“#firstp”).css(“background-color”)); It selects any html element(s) whose id attribute value is set to firstp and returns the value of background-color CSS property. The current implementation of the CSS() method in jQuery allows us to set multiple CSS properties to the selected HTML element(s), but only allows us to get one CSS property at a time. ======================================================== Follow the link for next video: https://youtu.be/HpRdrhCq158 Follow the link for previous video: https://youtu.be/UvMuWgBzIHc ========= For more benefits & Be up to date =================== Subscribe to the channel: https://www.youtube.com/chidrestechtu... Like the Facebook fan page: https://www.facebook.com/ManjunathChidre Visit to Chidre's Tech Tutorials website: http://www.chidrestechtutorials.com ========================================================
jQuery add or remove class
 
15:46
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-add-or-remove-class.html In this video we will discuss 1. How to check if an element has a css class 2. How to add or remove css classes 3. How to toggle css classes hasClass - Returns true if an element has the specified class otherwise false addClass - Adds one or more specified classes. To add multiple classes separate them with a space. removeClass - Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name. toggleClass - Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <style> .boldClass { font-weight: bold; } .italicsClass { font-style: italic; } .colorClass { color: red; } </style> <script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('p').addClass('colorClass'); }); $('#btn2').click(function () { $('p').removeClass('colorClass'); }); $('#btn3').click(function () { $('p').addClass('colorClass italicsClass'); }); $('#btn4').click(function () { $('p').removeClass('colorClass italicsClass'); }); $('#btn5').click(function () { $('p').addClass('colorClass italicsClass boldClass'); }); $('#btn6').click(function () { $('p').removeClass(); }); }); </script> </head> <body style="font-family:Arial"> <p>Pragim Technologies</p> <table> <tr> <td> <input id="btn1" style="width:250px" type="button" value="Add Color Class" /> </td> <td> <input id="btn2" style="width:250px" type="button" value="Remove Color Class" /> </td> </tr> <tr> <td> <input id="btn3" style="width:250px" type="button" value="Add Color and Italics Classes" /> </td> <td> <input id="btn4" style="width:250px" type="button" value="Remove Color and Italics Classes" /> </td> </tr> <tr> <td> <input id="btn5" style="width:250px" type="button" value="Add Color, Italics & Bold Classes" /> </td> <td> <input id="btn6" style="width:250px" type="button" value="Remove All Classes" /> </td> </tr> </table> </body> </html>
Views: 50973 kudvenkat
jQuery CSS - Custom File Input
 
12:52
This tutorial is about " How to create a custom file input using CSS and jQuery " + some added functionality after the user selects some file, hope you guys will like this tutorial. Check out t-vac products : https://gumroad.com/akshayejh
Views: 14815 TVAC Studio
jQuery selected selector
 
07:41
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-selected-selector.html In this video we will discuss jQuery :selected selector. To select all checked checkboxes or radio buttons, we use :checked selector. To select all selected options of a select element use :selected selector. How to get selected option from single select dropdown in jquery : We want to get the selected option text and value Replace < with LESSTHAN symbol and > with GREATERTHAN symbol. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#selectCountries').change(function () { var selectedOption = $('#selectCountries option:selected'); $('#divResult').html('Value = ' + selectedOption.val() + ', Text = ' + selectedOption.text()); }); }); </script> </head> <body style="font-family:Arial"> Country: <select id="selectCountries"> <option selected="selected" value="USA">United States</option> <option value="IND">India</option> <option value="UK">United Kingdom</option> <option value="CA">Canada</option> <option value="AU">Australia</option> </select> <br /><br /> <div id="divResult"></div> </body> </html> How to get all selected options from multi select dropdown in jquery : We want to get all the selected options text and value. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#selectCountries').change(function () { var selectedOptions = $('#selectCountries option:selected'); if (selectedOptions.length > 0) { var resultString = ''; selectedOptions.each(function () { resultString += 'Value = ' + $(this).val() + ', Text = ' + $(this).text() + '<br/>'; }); $('#divResult').html(resultString); } }); }); </script> </head> <body style="font-family:Arial"> <select id="selectCountries" multiple="multiple"> <option selected="selected" value="USA">United States</option> <option value="IND">India</option> <option value="UK">United Kingdom</option> <option value="CA">Canada</option> <option value="AU">Australia</option> </select> <br /><br /> <div id="divResult"></div> </body> </html> Please note : Hold down the CTRL key, to select more than one item.
Views: 80868 kudvenkat
jQuery attribute selector
 
08:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-attribute-selector.html In this video we will discuss selecting elements 1. That have specified attribute 2. That have specified attribute values Syntax : $('[attribute]') $('[attribute="value"]') $('[title]') // Selects all elements that have title attribute $('div[title]') // Selects all div elements that have title attribute $('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle $('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle Selects all elements with title attribute and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('[title]').css('border', '5px solid red'); }); [/script] [/head] [body] [div title="div1Title"] DIV 1 [/div] [br /] [div title="div2Title"] DIV 2 [/div] [p title="pTitle"] This is a paragraph [/p] [span title="div1Title"] SAPN 1 [/span] [br /][br /] [span] SPAN 2 [/span] [/body] [/html] Selects all div elements with title attribute and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title]').css('border', '5px solid red'); }); [/script] Selects all elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with both title and style attributes, and sets 5px solid black border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title][style]').css('border', '5px solid black'); }); [/script] [/head] [body] [div title="divTitle" style="background-color:red"] Red DIV [/div] [br /] [div title="divTitle" style="background-color:green"] Green DIV [/div] [br /] [div title="divTitle"] Normal Div [/div] [br /] [div] Normal Div without any attributes [/div] [/body] [/html] Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title="divTitle"][style="background-color:red"]').css('border', '5px solid black'); }); [/script] Selects all div elements with either title or style attributes, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title],[style]').css('border', '5px solid black'); }); [/script]
Views: 105763 kudvenkat
Make a Website - HTML CSS & JavaScript (jQuery)
 
13:34
Welcome to a quick tutorial series on making your very own website! In episode 1, we will start by setting up our development environment using Brackets, create the files necessary for our website to function, and begin coding in HTML! Subscribe: http://bit.ly/1MkNvXO Support my channel on Patreon: http://bit.ly/1zfwkhj Get episode updates via Twitter: http://bit.ly/2dB0o4i
Views: 13378 Indie Programmer
Sticky NavBar With JQuery | HTML, CSS & JavaScript
 
09:50
This Tutorial Can Give You The Basic Idea How Can You Create Scroll Activated Navigation Bar Using JQuery. Check out My New Video To Get Idea How You Can Make The Sticky Navbar "Responsive" ! Watch it Here : https://www.youtube.com/watch?v=ZeL2IL-dLuM Source Code : http://123link.vip/MYP7 JQuery Cdn : https://code.jquery.com/ Background Image : https://wallpaperscraft.com/image/girl_mountains_backpack_114178_5458x3705.jpg ---------------- Social Media ---------------- Personal Account : https://www.instagram.com/harrnish/ Facebook : https://www.facebook.com/codegridweb/ Instagram : https://www.instagram.com/codegridweb/ Twitter : https://twitter.com/codegridweb/ Thanks For Watching ! Music : Song: Jordan Schor - Cosmic (feat. Nathan Brumley) [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/LVh4PFKNzMA Download/Stream: http://ncs.io/CosmicYO Song: Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release] Music provided by NoCopyrightSounds. Watch: https://www.youtube.com/watch?v=2DGxm1csQQM&list=PLRBp0Fe2Gpgm0WF6DEGmb7ab4qHAGlPzg&index=36 Credits: Levianth • https://soundcloud.com/levianth • https://www.facebook.com/Levianth/ • https://twitter.com/LevianthMusic Axol • https://soundcloud.com/axol_music • https://www.facebook.com/axolmusic • https://twitter.com/AxolMusic The Tech Thieves • https://soundcloud.com/thetechthieves... • https://www.facebook.com/TheTechThiev... • https://twitter.com/TheTechThieves Song: Ship Wrek & Zookeepers - Ark [NCS Release] Music provided by NoCopyrightSounds. Watch: https://www.youtube.com/watch?v=8xlDwukxjnA&index=42&list=PLRBp0Fe2Gpgm0WF6DEGmb7ab4qHAGlPzg Credits: Shipwrek • https://soundcloud.com/theshipwrek • https://www.facebook.com/theshipwrek • https://www.facebook.com/theshipwrek • https://www.youtube.com/user/theshipwrek Zookeepers • https://soundcloud.com/zookeepersdk • https://www.facebook.com/zookeepers • https://www.instagram.com/zookeepersdk/
Views: 373113 Codegrid
Increase decrease font size using jquery
 
07:58
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/increase-decrease-font-size-using-jquery.html In this video we will discuss how to increase, decrease and reset font size using jQuery Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <style> .divClass { font-size: 16px; background-color: #E3E3E3; width: 500px; padding: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#linkIncrease').click(function () { modifyFontSize('increase'); }); $('#linkDecrease').click(function () { modifyFontSize('decrease'); }); $('#linkReset').click(function () { modifyFontSize('reset'); }) function modifyFontSize(flag) { var divElement = $('#divContent'); var currentFontSize = parseInt(divElement.css('font-size')); if (flag == 'increase') currentFontSize += 3; else if (flag == 'decrease') currentFontSize -= 3; else currentFontSize = 16; divElement.css('font-size', currentFontSize); } }); </script> </head> <body style="font-family:Arial"> Font-Size: <a id="linkIncrease" href="#">Increase</a> <a id="linkDecrease" href="#">Decrease</a> <a id="linkReset" href="#">Reset</a> <br /><br /> <div id="divContent" class="divClass"> <b>jQuery Tutorial</b> <ul> <li>What is jQuery</li> <li>What is $(document).ready(function() in jquery</li> <li>Benefits of using CDN</li> <li>#id selector</li> <li>Element Selector</li> <li>class selector</li> <li>attribute selector</li> <li>attribute value selectors</li> <li>case insensitive attribute selector</li> <li>jQuery input vs :input</li> </ul> </div> </body> </html>
Views: 24337 kudvenkat
Simple Text Animation || CSS, HTML & jQuery - Codingle
 
14:34
In this tutorial, I am going to make a text animation using CSS3 animations and bit of jQuery. This animation is really simple to make but gives a beautiful effect. And the best part is that it can be adjusted in a way that is best for your project . Remember to subscribe and give me thumbs up if you like my videos. See you next time
Views: 207649 Codingle
jQuery Tutorial for Beginners #13 - CSS with jQuery
 
06:41
Yo class, in this jQuery tutorial for beginners, we'll take a look at how we can manipulate the CSS of elements on a web page. We can use the CSS method to either check the value of a CSS property or set the value of a CSS property. We can also pass through an object to the CSS method in order to change multiple CSS properties at once. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 6688 The Net Ninja
jQuery tutorial in Hindi Part 3: jQuery CSS Tutorial in Hindi | jQuery Multiple CSS Methods
 
11:42
Welcome all, we will see the jQuery CSS Tutorial in Hindi and How to change CSS using jQuery. jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. Set Multiple CSS Properties To set multiple CSS properties, use the following syntax: css({"propertyname":"value","propertyname":"value",...}); #jquerycss
Views: 5282 Thapa Technical
Front-End Development, HTML & CSS, Javascript & jQuery by Jon Duckett | Book Review
 
05:56
Front End Development Book Review | HTML & CSS and JavaScript & JQuery by Jon Duckett. Learning is so important and although there is an abundance of online learning platforms for front-end development, a good book about HTML, CSS, and JavaScript may just be what the doctor ordered. I bought these book years ago and I have to say it’s refreshing to see a book about programming and code that is written by a human for actual humans. It’s billed as Don't forget to subscribe https://goo.gl/6vCw64 👍 HTML & CSS - http://amzn.to/2rTJuH7 JavaScript & JQuery - http://amzn.to/2slKsxk “A book about code that doesn't read like a 1980s VCR manual... It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages…” I agree with that statement. If you are new to Front-End Development, code, website creation, JavaScript, Or have added scripts to your web page but want a better idea of how they work? Then this book is for you. -------------------------------------------------------- Website http://www.jesseshowalter.com - Subscribe: https://www.youtube.com/c/JesseShowalterTV - Twitter: http://twitter.com/iamjesseshow Instagram: https://www.instagram.com/iamjesseshow Medium: https://medium.com/@iamjesseshow - Vlogging Camera - Canon EOS M3: http://amzn.to/2hT54bo - Drone- DJI Phantom P3-STANDARD Quadcopter Drone with 2.7K HD Video Camera http://amzn.to/2n5iSQV
Views: 51030 Jesse Showalter
Using Animate.css and jQuery for easy Web Animation
 
11:17
Simple tutorial on how to use Animate.css and jQuery together in your website or web app! 🔥Subscribe for more like this: https://goo.gl/LUEkN1
Views: 306403 Wes Bos
Move Placeholder To Top on Focus And While Typing - Pure CSS Tutorial - No Javascript
 
14:57
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 34396 Online Tutorials
How To Define Multiple CSS Attributes In JQuery
 
01:42
Please visit http://technomark.in/Define-Multiple-CSS-Attributes-In-JQuery.aspx for more information. How To Define Multiple CSS Attributes In JQuery, Define Multiple CSS Attributes In JQuery, Define Multiple CSS Attributes, Multiple CSS Styles In JQuery, Multiple CSS Styles In JavaScript, jQuery add styles, jQuery add multiple styles, multiple style, Multiple CSS Attributes, jQuery, HTML, php
Views: 91 Admin Technomark
Access elements and contents inside an iFrame using jQuery
 
03:31
Access elements and contents inside an iFrame using jQuery is simple. We can use contents() method to access the elements inside an iFrame. To know more Visit www.codeexpertz.com.
Views: 7063 Anishnirmal
Set DIV to 100% Height of Its Parent Using jQuery
 
15:40
In this tutorial, you'll learn how get your DIVs to be 100% of the height of their container using jQuery. Here's the link for the AJAX and PHP course: http://johnmorrisonline.com/go?id=ajaxphp&utm_campaign=ytWc2I-JU50Ls Get the source code in the Code Snippets section here: http://www.johnmorrisonline.com/web-developer-resources/ Training Center: http://www.johnmorrisonline.com/training Subscribe on YouTube: http://youtube.com/johnmorrisonline Subscribe on SoundCloud: http://soundcloud.com/johnmorrisonline Subscribe on iTunes: http://goo.gl/RggnXW -~-~~-~~~-~~-~- Please watch: "Ryan Carson: How to Get an IT Job WITHOUT a College Degree" https://www.youtube.com/watch?v=wxetW3hmPd0 -~-~~-~~~-~~-~- #php #webdev
Views: 5445 John Morris
How To Create A Preloader Screen In jQuery - Show Loading Screen While Page Load with jQuery
 
11:31
Loading Page Animation Effects Tutorial : https://www.youtube.com/watch?v=lJwDoT3ccpE Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Name : Spring In My Step by Silent Partner from YouTube Audio Library Music URL : https://www.youtube.com/watch?v=siCmqvfw_1g Used Video in This Tutorial : https://www.youtube.com/watch?v=SAcpESN_Fk4
Views: 18380 Online Tutorials
A Simple jQuery Script to Change an iFrame Source
 
06:14
A demonstration of one way you can use jQuery to change the source attribute of an embedded iframe. In this case, we are embedding videos from vimeo.com and swapping the video source when clicking another link on the page.
Views: 18094 Neal Legler
5 - change css properties with jquery, change the border and background
 
05:21
You can change and modify the border and background CSS properties using jquery's ".css" method. This video will show you how to: a) change html element's appearance with jquery, b) make webpage objects move across the screen by adjusting the absolute positioning properties left, right, top, and bottom. You can then "animate" CSS properties to give the appearance of movement. #javascript #jquery #learntocode #programmer #programming
jQuery - Styling DOM #06
 
23:34
In this video we will learn to style DOM using jQuery. Tutorial: https://goo.gl/i8Geb7 Subscribe: http://goo.gl/cFA9in Video: https://youtu.be/y5JeOthu6Jg jQuery - Selectors https://youtu.be/aLBzEb3kEpQ jQuery - Chaining Methods https://youtu.be/W2mUxZX7RYs YouTube Playlist: https://www.youtube.com/playlist?list=PLG6ePePp5vvbfbvBuv_Ny2QpkzI4Q4hMu GitHub repository: https://github.com/yusufshakeel/jquery-project HTML Playlist: https://www.youtube.com/watch?v=5gVxlxwBcCU&list=PLG6ePePp5vvYI1n1aFlELPfh9sfGcIHal CSS Playlist: https://www.youtube.com/watch?v=5ueRHotsM3A&list=PLG6ePePp5vvay3bbTde2X36BqUt7osZ3e JavaScript Playlist: https://www.youtube.com/watch?v=6jJHw9YJnQY&list=PLG6ePePp5vvZrPZCp85dssGxQ7QLfujt7 thanks for watching see you in the next video stay happy and keep smiling :-)
Views: 366 Yusuf Shakeel
jQuery Tutorial for Beginners - 46 - Tab styling
 
07:29
In this jQuery video we will cover styling the tab. HTML Code: http://pastebin.com/heRBw3KZ CSS Code: http://pastebin.com/GYG4zpGG
Views: 6637 EJ Media
Table Column and Row Highlight by using Jquery CSS
 
11:23
Webdevelopment tutorial on Table row and column highlighting with jquery and CSS. Highlight Table row and column with Jquery CSS. Jquery highlighting selected columns only in a HTML Table. Jquery Table Row Column Highlight on Hover. How to highlight table row record on hover with Jquery. Video Tutorial on Highlighting HTML Table columns with jQuery and CSS. Source Code - http://www.webslesson.info/2016/10/table-column-and-row-highlight-by-using-jquery-css.html
Views: 2769 Webslesson
Build a responsive navigation with CSS and jQuery - with a bonus dropdown effect using CSS clip-path
 
50:43
In this video I look at how to create a responsive menu using jQuery. It’s a bit of a long video where we build out the menu from scratch with HTML, then styling the menu with CSS, before finally using a bit of jQuery to get it to work. Once it's all set up and working, I use a CSS clipping path to give it a bit of a cool animation for when it toggles in and out. I also create my own hamburger menu using pseudo elements and some CSS, creating a custom animation for it with another CSS class and a bit more jQuery. If you’d like to skip to any specific part, the times for all the steps are below, and if you want to play with the code, it's on Codepen - http://codepen.io/kevinpowell/pen/PWNwZm Starting at 02:20 I look at simply building out a vertical menu. At 12:20 I add the hamburger menu At 19:50 I use a little simply bit of jQuery to get the mobile menu to toggle on and off Starting at 24:50 I look at animating the hamburger menu. Then at 28:46 I look at adding in some icons with Font Awesome With the mobile version done, at 37:50 I add a media query so that it is a normal, horizontal navigation on larger screens. Then at 42:00, with the whole thing wrapped up, I change the animation to use clip-path to make the toggling animation a little more interesting, and then fix up a few little loose ends. --- Music by Chillhop: http://youtube.com/chillhopdotcom Mo Anando - In Bloom: https://soundcloud.com/moanando If you have your own channel, check out Chillhop for some awesome music.
Views: 76009 Kevin Powell
jquery css function - part 97
 
03:55
This video explains about jquery css function. using css function we can get and set the style properties of given elements. I need you to try these cases on your machine and also do try few crazy scenarios if you can. If you get stuck or if you have any query then please do comment below and let me know. I will try to reply you as soon as possible.
Views: 33 dnanetwork
Css Image Hover Effects - Pure Css Tutorial - How To Create Image Hover Overlay Effects
 
13:47
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 65360 Online Tutorials
jquery floating div
 
13:36
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-floating-div.html In this video we will discuss, how to create floating div using jQuery. We want the div element in the sidebar to be floating and always visible as we scroll down the page. Example : In this example we are using position() and scrollTop() functions. The object returned by position() function has top and left properties, which can be used to know the current top and left positions (coordinates). We are using this function to find the top position of the div element that we want to keep floating as we scroll down. To get the current vertical position of the scroll bar, we are using scrollTop() function. As we scroll and when the current vertical position of the scroll bar becomes GREATER THAN the top position of the div element, then we want the div element to start floating. To do this set position style to fixed. A fixed position element is positioned relative to the browser window. So as you scroll down it will be floating in the browser window. If the current vertical position of the scroll bar becomes LESS THAN the top position of the div element, then we don't want the div element to float, so we set position style to relative. A relative position element is positioned relative to itself. So if you set position to relative and top to 0, it will continue to stay where it is without floating. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var floatingDiv = $("#divfloating"); var floatingDivPosition = floatingDiv.position(); $(window).scroll(function () { var scrollPosition = $(window).scrollTop(); if (scrollPosition >= floatingDivPosition.top) { floatingDiv.css({ 'position': 'fixed', 'top' : 3 }); } else { floatingDiv.css({ 'position': 'relative', 'top' : 0 }); } }); }); </script> </head> <body style="font-family:Arial;"> <table align="center" border="1" style="border-collapse:collapse"> <tr> <td style="width:500px"> Main Page Content </td> <td style="width:150px; vertical-align:top"> Side panel content <br /><br /> <div id="divfloating" style="background-color:silver; width:150px; height:150px"> Floating Div - Keeps floating as you scroll down the page </div> </td> </tr> </table> </body> </html>
Views: 32085 kudvenkat
Side or Vertical Navigation bar tutorial || HTML, CSS, jQuery
 
13:47
Hey ! FOLLOW THIS LINK TO GET -50% DISCOUNT OF MY UDEMY COURSE, THAT IS ONLY 10 EUR (OR ABOUT 11 USD): https://www.udemy.com/learn-how-to-design-and-code-responsive-website-from-scratch/?couponCode=DesignDevelop In this tutorial you are going to learn how to make side or vertical navigation bar. We are not going to get deep into styling it, but once you grasp the concept of this nav, you won't have problems adjusting it to your own projects. Code available here: https://github.com/reinis-berzins/tutorial-files Please be sure to contact me if you have some questions or suggestions
Views: 101632 Rinkans
jQuery 8 SET TEXT HTML VALUE ATTRIBUTE CALLBACK IN HINDI
 
33:06
Buy HTML5,CSS3,jQuery,JavaScript books (affiliate): HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) https://amzn.to/2MMlVfi HTML & CSS: The Complete Reference https://amzn.to/2PXwgmu Web Design with HTML, CSS, JavaScript and jQuery https://amzn.to/2NdfGQY HTML and CSS: Design and Build Websites https://amzn.to/2NF75DP Learning PHP, MySQL & JavaScript with jQuery, CSS & HTML5 https://amzn.to/2CkbBXk HTML5 : Up And Running- Dive into the Future of Web Development https://amzn.to/2PZz0ji HTML 5 Foundations https://amzn.to/2PwXDmt HTML5 & CSS3 for the Real World https://amzn.to/2NgcuV6 Unraveling Html5, Css3, and Javascript https://amzn.to/2C9Nudw HTML5 and CSS3 Transition, Transformation, and Animation (Open Source) https://amzn.to/2Ckca3o Responsive Web Design with HTML5 and CSS3 https://amzn.to/2PXnAwt Single Page Web Applications: JavaScript end-to-end https://amzn.to/2N8W7JD ------------------------------------- jQuery 8 SET TEXT HTML VALUE ATTRIBUTE CALLBACK IN HINDI
Views: 3239 LearnEveryone
jQuery append elements
 
08:18
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-append-elements.html In this video we will discuss how to append and prepend elements To append elements we have append() appendTo() To prepend elements we have prepend() prependTo() Since these methods modify DOM, they belong to DOM manipulation category. jquery append example : The following example appends the specified HTML to all div elements <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').append('<b> Tutorial</b>'); }); </script> </head> <body style="font-family:Arial"> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> jquery appendto example : The above example can be rewritten using appendTo as shown below. $('<b> Tutorial</b>').appendTo('div'); What is the difference between append and appendTo Both these methods perform the same task. The only difference is in the syntax. With append method we first specify the target elements and then the content that we want to append, where as we do the opposite with appendTo method. jquery prepend example : The following example prepends the specified HTML to all div elements <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').prepend('<b>Tutorial </b>'); }); </script> </head> <body style="font-family:Arial"> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> jquery prependTo example : The above example can be rewritten using prependTo as shown below. $('<b>Tutorial </b>').prependTo('div'); What is the difference between prepend and prependTo Both these methods perform the same task. The only difference is in the syntax. With prepend method we first specify the target elements and then the content that we want to prepend, where as we do the opposite with prependTo method. jQuery append existing element example : These methods (append, appendTo, prepend, prependTo) can also select an element on the page and insert it into another <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').append($('#mySpan')); }); </script> </head> <body style="font-family:Arial"> <span id="mySpan"> Programming</span> <div id="div1">jQuery</div> <div id="div2">C#</div> <div id="div3">ASP.NET</div> </body> </html> Difference between prepend and append prepend method, inserts the specified content to the beginning of each element in the set of matched elements, where as append method inserts the specified content to the end of each element in the set of matched elements.
Views: 55350 kudvenkat
jquery draggable widget
 
12:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-draggable-widget.html In this video we will discuss jquery draggable widget jquery draggable widget allow elements to be moved using the mouse. This widget is in interactions category on the jQuery UI website. http://jqueryui.com/draggable/ Consider the following HTML <div id="draggableDiv" class="divClass"> Drag me around </div> .divClass { height: 200px; width: 200px; background-color: red; color: white; display:table-cell; vertical-align:middle; text-align:center; } To make the above div element draggable $('#draggableDiv').draggable(); Some of the useful options to customize the draggable widget axis - Constrains dragging to either x or y axis containment - Constrains dragging to within the bounds of the specified element or region cursor - The CSS style of the cursor during the drag operation opacity - opacity during the drag operation revert - Boolean property that specifies if the element should revert to its start position when dragging stops revertDuration - The duration of the revert animation, in milliseconds snap - Specifies whether the element being dragged should snap to other elements. Value can be boolean or a selector. When set to true, the element will snap to all other draggable elements. When a selector is specified the element being dragged will snap to the element specified by the selector snapTolerance - The distance in pixels between the element being dragged and the element to which to snap to, at which snapping should occur. cancel - Prevents dragging from starting on specified elements Constrains dragging to x axis $('#draggableDiv').draggable({ axis : 'x' }); Constrains dragging to within the bounds of the parent element HTML <div id="containerDiv" style="height:300px; width:300px; border:3px solid black"> <div id="draggableDiv" class="divClass"> Drag me around </div> </div> jQuery $('#draggableDiv').draggable({ containment : 'parent' }); Changes the cursor style to "move" during the drag operation $('#draggableDiv').draggable({ cursor: 'move' }); Changes the opacity to 0.3 during the drag operation $('#draggableDiv').draggable({ opacity : '0.3' }); Reverts the div element to its start position when dragging stops. Revert animation completes in 1000 milli-seconds. $('#draggableDiv').draggable({ revert: true, revertDuration : 1000 }); The following example 1. Snaps the coloured div elements to the div element with thick black border. 2. The snapping occurs as soon as the distance between any of the coloured div element and the div element with thick black border is 50 pixels 3. The cancel option cancels dragging from starting on the div element with thick black border HTML <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <div id="greeDiv" class="divClass" style="background-color: green"> Green Div </div> <div id="blueDiv" class="divClass" style="background-color: blue"> Blue Div </div> <div id="brownDiv" class="divClass" style="background-color: brown"> Brown Div </div> <br /> <br /> <div id="snapDiv" style="height: 400px; width: 400px; border: 5px solid black"> </div> Style .divClass { height: 200px; width: 200px; color: white; display: table-cell; vertical-align: middle; text-align: center; } jQuery $('div').draggable({ snap: '#snapDiv', snapTolerance: 50, cancel : '#snapDiv' });
Views: 24493 kudvenkat
jQuery add event handler to dynamically created element
 
09:15
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-add-event-handler-to-dynamically.html In this video we will discuss, how to add event handlers to dynamically created elements. Let us understand this with an example. The following example, allows us to dynamically create new list item (li), attach a click event handler and add it to the unordered list (ul). This happens when you click "Add a New List Item" button. The problem with this approach is that we are binding a click event handler to every list item. This means if you have 500 list items, then there will be 500 event handlers in the memory and this may negatively affect the performance of your application. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').on('click', function () { $(this).fadeOut(500); }); $('#btnAdd').on('click', function () { var newListItem = $('<li>New List Item</li>').on('click', function () { $(this).fadeOut(500); }); $('ul').append(newListItem); }); }); </script> </head> <body style="font-family:Arial"> <input id="btnAdd" type="button" value="Add a New List Item" /> <ul> <li>List Item</li> <li>List Item</li> </ul> </body> </html> A better way of doing the same from a performance standpoint is shown below. In this example, the click event handler is attached to the listitem (li) parent element (ul). Even if you have 500 list items, there is only one click event handler in memory. So how does this work 1. When you click on a list item (li), the event gets bubbled up to its parent (ul) as the list item (li) does not have an event handler 2. The bubbled event is handled by the the parent (ul) element, as it has a click event handler. 3. When a new list item is added dynamicaly, you don't have to add the click event handler to it. Since the newly created list item (li) is added to the same parent element (ul), the click event of this list item also gets bubbled upto the same parent and will be handled by it. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('ul').on('click', 'li', function () { $(this).fadeOut(500); }); $('#btnAdd').on('click', function () { $('ul').append('<li>New List Item</li>'); }); }); </script> </head> <body style="font-family:Arial"> <input id="btnAdd" type="button" value="Add a New List Item" /> <ul> <li>List Item</li> <li>List Item</li> </ul> </body> </html>
Views: 65700 kudvenkat
How To Create Image Gallery In HTML, CSS and Javascript | Lightbox Gallery
 
12:24
In this video you will learn to design image gallery with HTML and CSS and Javascript. If you have query or you want this code? then write in the comment section. Please like this video and subscribe my channel Subscribe us ► https://goo.gl/tTFmPb Watch Responsive Website Tutorial ► https://youtu.be/dtTWD0ystG0
Views: 195490 Easy Tutorials
Scroll Activated Animation || HTML, CSS, jQuery
 
10:15
Hello everybody ! FOLLOW THIS LINK TO GET -50% DISCOUNT OF MY UDEMY COURSE, THAT IS ONLY 10 EUR (OR ABOUT 11 USD): https://www.udemy.com/learn-how-to-design-and-code-responsive-website-from-scratch/?couponCode=DesignDevelop Today i am going to teach you how to make scroll activated animations. Once you understand how it work, you will have no problem creating your own animations by experimenting with CSS3 animations. Code is available right here: https://github.com/reinis-berzins/tutorial-files Sorry for quiet audio ! If you have any question about this tutorial or about HTML, CSS, JavaScript and jQuery please contact me at my e-mail - [email protected] Also let me know what do you want me to show how to make in future tutorials ! Have a great day.. Bye !
Views: 75439 Rinkans
How to Create Beautiful Datepicker in HTML
 
08:39
Source code here: http://datainflow.com/create-bootstrap-datepicker-html/ Please visit http://datainflow.com/programming/ DataInFlow is a platform, where you can the get text tutorial and video tutorial of different kind of programming language like PHP, HTML, Javascript, Jquery, CSS3 and get some programming tutirial. If you are a programmer you much like DataInFlow.com because it provides you to ask any kind of programming questions and get answer in quick time. Also you can answer any others question if you know. http://datainflow.com/queries/
Views: 38365 yesuus
CSS - Simple Checkbox Styling
 
08:21
Code used : http://codepen.io/zFunx/pen/dWbevd Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
jQuery scroll event
 
10:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-scroll-event.html In this video we will discuss scroll event and how to handle it using jQuery. scroll event is raised when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll. In the following exampe, notice that the div element overflow style is set to scroll. The div element has a scrollbar and as you scroll up and down the div element, the scroll event is raised and handled. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').scroll(function () { $('h3').css('display', 'inline').fadeOut(1000); }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> PRAGIM Speciality in training arena unlike other training institutions. Training delivered by real time software experts having more than 10 years of experience. Interview questions and real time scenarios discussion on topics covered for the day. Realtime projects discussion relating to the possible interview questions. Trainees can attend training and use lab untill you get a job. Resume preperation and mock up interviews. 100% placement assistance. 24 hours lab facility. PRAGIM Technologies offers professional real time projects for studetns in their final semester. Course completion and project completion certificates will also be provided upon successful completion of the course. We have partnered with major multinational companies to place freshers with our clients on their course completion. </div> <br /> <h3 style="display:none; color:red">Scroll event handled</h3> </body> </html> The following example, keeps track of how many times the scroll event is raised. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var count = 0; $('div').scroll(function () { $('span').text(count += 1); }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> DIV CONTENT </div> <br /> <h3 style="color:red">Scroll event handled <span>0</span> time(s)</h3> </body> </html> The following example, keeps track of whether the user scrolled up or down. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var lastScrollTop = 0; $('div').scroll(function () { var currentScrollPosition = $(this).scrollTop(); if (currentScrollPosition > lastScrollTop) { $('h3').text('You scrolled down'); } else { $('h3').text('You scrolled up'); } lastScrollTop = currentScrollPosition; }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> DIV CONTENT </div> <br /> <h3 style="display:inline; color:red"></h3> </body> </html>
Views: 50857 kudvenkat
How to change style sheet dynamically using Jquery in Tamil
 
03:58
Click Event in JQuery dblClick Event in JQuery Mouse Events in JQuery Hover Event in JQuery FadeIn Event in Jquery FadeOut Event in Jquery FadeToggle Effect in Jquery FadeTo Effect in Jquery Animate Effect in Jquery Animate Using Relative Values in Jquery Animate Using Continuous Values in Jquery Callback Function in Jquery Without Callback Function in Jquery How to Use Chaining in Jquery Get Methods in Jquery Set Methods in Jquery Append Method in Jquery Selectors in Jquery Filters in Jquery Hierarchy Filters in Jquery Filter Using Attributes in Jquery Use Traversing Methods in Jquery Use Before and After Methods in Jquery Use Remove Method in Jquery Use Empty Method in Jquery Remove Classes Using Jquery Add Classes Using Jquery Toggle Between Classes in Jquery Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search Using selectors and filters to extract information Creating, inserting, and manipulating webpage content Understanding jQuery statement chaining Using CSS to position content Building event handlers Showing, hiding, and fading page elements with jQuery Creating custom animations Accessing external data with AJAX jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn in Tamil Complete Jquery in Tamil Tutor Joes Jquery Tamil Tutorial google image search style gallery jquery google images effect google image search style gallery google image likeness search How to Remove Table Row tr in jQuery on Button Click in Tamil How to Add Table Row tr in jQuery on Button Click In Tamil How To Read The Value Of HTML Table by Jquery in Tamil Check for file extension before uploading By Jquery In Tamil How to Get Selected Radio Button Value in jQuery In Tamil Show Password Using jQuery on Checkbox Click Event In Tamil Inserting Data Into MySql Database Using Jquery Post and PHP Event In Tamil How to change style sheet dynamically using Jquery in Tamil For Free source code and Free Project Please visit : http://www.tutorjoes.com/ http://www.facebook.com/tutorjoes http://www.youtube.com/tutorjoes
Views: 905 Tutor Joe's Stanley
Setting up bootstrap
 
09:13
setup bootstrap using bootstrap with asp.net web forms simple bootstrap web page simple bootstrap page bootstrap sample page code bootstrap example page bootstrap files list bootstrap 3 folder structure twitter bootstrap folder structure how to use bootstrap in html step by step how to include bootstrap in html bootstrap first page template first bootstrap page In this video we will discuss how to download, set up and create our first bootstrap web page To get started with Bootstrap the first step is to download Bootstrap from http://getbootstrap.com. This website also has all the documentaion you need to get started with bootstrap. As of this recording the version is 3.3.6. With the download you get a single zip folder which contains all the required bootstrap components. Unzip the ZIP folder and you should see the following folder structure. Notice there are 3 sub-folders (css, fonts & js). Let us understand the use of each file, folder by folder. Files in "css" folder bootstrap.css - This is the core css for BootStrap that defines all the style for various controls and components bootstrap.css.map - When debugging the minified code, the line numbers do not refer to the orignal files. The file that has the .map extension which is also called as source map file fixes this problem by allowing the web debuggers to refer to the original context from where the code was generated. This file is useful during development. bootstrap.min.css - This is the compressed version meaning all the whitespaces, line breaks and any other extra characters have been removed. As a result the size of the minified file is smaller than the non-minified file. Minified version is usually used on a production server for efficient download where as the non minified version is used in development environment as it is more readable and easy to debug if there are issues. bootstrap.min.css.map - Source map file for bootstrap.min.css bootstrap-theme.css - As the name suggests this is the theme for bootstrap. Adding the core bootstrap.css is enough for bootstrap to work. The theme file is optional and is usually used for a visually enhanced experience. For example if you want 3D effects, gradients, shadows etc. bootstrap-theme.css.map - Source map file for bootstrap-theme.css bootstrap-theme.min.css - Minified version of bootstrap-theme.css bootstrap-theme.min.css.map - Source map file for bootstrap-theme.min.css Files in "fonts" folder There are 5 different font files from Glyphicons. These 5 different files are just different format of the Glyphicons font, to support different browsers. Files in "js" folder : These JavaScript files are optional. These are required if you want to use bootstrap widgets like picture carousel, dropdown menus, collapsible accordian etc. One important thing to keep in mind is that boostrap JavaScript has a dependency on jQuery, so a reference to jQuery must also exist on the page where you want to use Bootstrap. bootstrap.js - This is the non-minified readable version that is usually used during development. bootstrap.min.js - Minified version of bootstrap.js optimised for faster download. This is the version that is usually used in a production environment. npm.js - npm is a file from Node.js and is used for npm installing bootstrap. If you are new to Node.js, don't worry, this is not going to come in the way to understand bootstrap. For this course I am going to use Visual Studio 2013 as the editor. You can use any editor of your choice. Here are the steps to create your first web page with Bootstrap 1. Create a new empty ASP.NET web application project. Name it BootstrapDemo 2. To use bootstrap in your website, copy the folder that contains 3 sub-folders (css, fonts, & js) in your website project folder. 3. Add a new HTML file to the project. Name it index.html. 3. There is a basic template available at the following link. Copy and paste the template code in index.html http://getbootstrap.com/getting-started/#template Please note : The viewport meta tag ensure proper rendering and touch zooming on a mobile device. Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2016/05/setting-up-bootstrap.html
Views: 302086 kudvenkat
jquery animate function
 
12:26
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-animate-function.html jQuery animate function let's us animate CSS properties. The following example animates the div element, while changing the font-size property of the div element from its initial size to 50 pixels over a period of 2000 milli-seconds (2 seconds). <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myButton').click(function () { $('#myDiv').animate({ 'font-size': '50' }, 2000); }); }); </script> </head> <body style="font-family:Arial"> <input type="button" id="myButton" value="Animate" /> <br /><br /> <div id="myDiv"> jQuery animate function </div> </body> </html> Syntax of jquery animate function .animate( properties [, duration ] [, easing ] [, complete ] ) Animate function has 4 parameters. Only the first parameter (properties) is the required parameter. Rest 3 are optional. properties - An object of CSS properties and values duration - The duration for animation in milliseconds. Default is 400. easing - Easing function to use for the transition. Default is swing. You could also use linear. complete - A function to call once the animation is complete What is jQuery easing Easing is a technique where the speed and/or direction of animation are changed while the animation is in progress. Easing can make the animation start off slow and gradually speed up, start up fast and gradually slow down, and a whole host of other effects. The difference between linear and swing easing is very subtle. The following page shows all the easings provided by jQuery UI https://jqueryui.com/easing The following example increases the height and width of the image to 400 pixels on mouseover. On mouseout the height and width are reduced to 100 pixels. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').on({ mouseover: function () { $(this).animate({ 'height': 400, 'width': 400, }, 3000); }, mouseout: function () { $(this).animate({ 'height': 100, 'width': 100, }, 3000); } }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" src="/Images/Tulips.jpg" /> </body> </html> In the following example, several calls to animate() method are chained together. By default these calls are placed into a queue to be executed one after the other in series rather than executing all of them simultaneously in parallel. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').click(function () { $(this) .animate({ 'left': '300' }) .animate({ 'top': '200' }) .animate({ 'left': '10' }) .animate({ 'top': '10' }); }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" style="position:absolute" src="/Images/Tulips.jpg" /> </body> </html> Please note: By default, all HTML elements have a static position, and cannot be moved. To modify the position , set the CSS position property of the element to fixed, absolute or relative.
Views: 42212 kudvenkat
jQuery class selector
 
10:57
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-class-selector.html In this video we will discuss jQuery class selector i.e selecting elements using their class name Syntax : $('.class') jQuery class selectors uses JavaScript's native getElementsByClassName() function if the browser supports it. $('.small') // Selects all elements with class small $('.small,.big') // Selects all elements with class small or big $('div.small,.big') // Selects div elements with class small and any element with class big Selects all elements with class "small" and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [span class="small"] Span 1 [/span] [br /][br /] [div class="small"] Div 1 [/div] [br /] [span class="big"] Span 2 [/span] [p class="big"]This is a paragraph[/p] [/body] [/html] Selects all elements with class "small" or "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, .big').css('border', '5px solid red'); }); [/script] Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, span.big').css('border', '5px solid red'); }); [/script] Selects all elements with class small that are nested in a an element with id=div2 and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#div2 .small').css('border', '5px solid red'); }); [/script] [/head] [body] [div id="div1" class="small"] DIV 1 [/div] [br /] [div id="div2"] Div 2 [br /] [div class="small"] DIV 3 [/div] [br /] [span class="small"] SPAN [/span] [/div] [/body] [/html] Selects all elements with class small and sets 5px solid red border. Notice div1 has 2 classes - small and big. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [/div] [/body] [/html] Selects all elements that has both the classes - small and big. There should be no space between the class names. [script type="text/javascript"] $(document).ready(function () { $('.small.big').css('border', '5px solid red'); }); [/script] If you have a space between the two class names then we are trying to find descendants, i.e. find elements with class big that are descendants of an element with class small. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small .big').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [div class="big"] DIV 3 [/div] [/div] [/body] [/html] Another way to selects all elements that has both the classes - small and big is by using filter method. But this approach is slower because it will first create a list of objects with class "small" and then removes elements that does not have class "big" [script type="text/javascript"] $(document).ready(function () { $('.small').filter('.big').css('border', '5px solid red'); }); [/script]
Views: 109293 kudvenkat
Multiple languages using Jquery and Json
 
05:56
Jquery Library: http://code.jquery.com/jquery-1.11.3.min.js
Views: 31351 Chun Dany
JQuery - Facebook Read More / Show More Link using JQUERY,HTML AND CSS
 
07:35
Dynamically shortened Text with “Show More” link using jQuery. Facebook like read more or show more.
Views: 19074 Hack Smile
jQuery disabled selector
 
04:29
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-disabled-selector.html In this video we will discuss 1. jQuery disabled selector 2. jQuery enabled selector 3. Where you can find jquery selectors documentation Selects all disabled elements $(':disabled') Selects all disabled elements and sets a 3px solid red border [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $(':disabled').css('border', '3px solid red'); }); [/script] [/head] [body style="font-family:Arial"] [table] [tr] [td]First Name [/td] [td][input type="text" disabled="disabled" /][/td] [/tr] [tr] [td]Last Name [/td] [td][input type="text" disabled="disabled" /][/td] [/tr] [tr] [td]Email [/td] [td][input type="text" /][/td] [/tr] [tr] [td]Gender [/td] [td] [select id="selectGender" disabled="disabled"] [option value="Male"]Male[/option] [option value="Female"]Female[/option] [/select] [/td] [/tr] [tr] [td]Comments[/td] [td][textarea][/textarea][/td] [/tr] [tr] [td colspan="2"] [input type="submit" value="Submit" disabled="disabled"/] [/td] [/tr] [/table] [/body] [/html] Selects all input elements that are disabled and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('input:disabled').css('border', '3px solid red'); }); [/script] Selects all input elements with type=text that are disabled and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('input[type="text"]:disabled').css('border', '3px solid red'); }); [/script] Selects all enabled elements $(':enabled') Selects all enabled textarea elements and sets a 3px solid red border [script type="text/javascript"] $(document).ready(function () { $('textarea:enabled').css('border', '3px solid red'); }); [/script] Where can you find jquery selectors documentation https://api.jquery.com/category/selectors
Views: 56737 kudvenkat
JQuery - Change DIV text (html property) the easy way. Step by Step
 
08:08
How to change the text (html) of a a DIV using JQuery. Step by Step
Views: 7806 Calvin Brown
How to Inject Custom HTML and CSS into an iFrame
 
14:22
Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task.
Views: 105103 Tuts+ Code
jQuery Crash Course [3] - DOM Manipulation
 
20:59
In this video Ill show you how to add, remove and change things in the DOM using jQuery. We will look at methods like append, prepend, html, and text My 10 Project jQuery/JS Course - https://www.eduonix.com/affiliates/id/16-10039 Project Files - https://github.com/bradtraversy/jquery_crash_course
Views: 43289 Traversy Media
SET DESIGN OF JQUERY MOBILE LOGIN PAGE
 
09:59
in this tutorial user can easily understand to set design using jquery mobile and css
Views: 269 Nisarg Trivedi
Counter Up | How to set counter up jquery plugin? | HTML,  CSS & Jquery
 
06:21
Counter Up | How to set up counter up jquery plugin?. Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it). 41,932 WordPress Themes & Website Templates From $2 WordPress themes, web templates and more. Brought to you by the largest global community of creatives. Premium Template Download from here... https://themeforest.net/user/uttaraitpark/portfolio?ref=uttaraitpark
Views: 90 Mamunur Roshid
Change Style Sheet Using Javascript Tutorial CSS Swap Stylesheet
 
04:46
Lesson Code: http://www.developphp.com/video/JavaScript/Change-Style-Sheet-Using-Tutorial-CSS-Swap-Stylesheet Learn to change the entire style of your web page with a click using JavaScript that is targeting the href attribute of your familiar link element using the setAttribute method of JavaScript. DEMO: http://www.adamkhoury.com/demo/js_swap_css_stylesheet/
Views: 43815 Adam Khoury