Home
Search results “Style after with jquery”
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: 65763 kudvenkat
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: 51000 kudvenkat
Responsive Touch Slider Using Html CSS & jQuery - 3D Responsive Slider Using Swiper.js
 
11:28
Plugin URL : http://idangero.us/swiper/demos/ Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Cadmium - Melody (feat. Jon Becker) Link: https://youtu.be/9MiFRbymQXQ
Views: 57063 Online Tutorials
jQuery insert element before and after
 
07:04
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-insert-element-before-and-after.html In this video we will discuss how to insert elements before and after certain elements on the page. To insert an element before another element before insertBefore To insert an element after another element after inserAfter Since these methods modify DOM, they belong to DOM manipulation category. jquery before example Replace < with LESSTHAN symbol and > with GREATERTHAN symbol. Consider the following HTML <span>Training Courses</span> <div>jQuery</div> <div>C#</div> <div>ASP.NET</div> The following line of code inserts h3 element before each of the div elements $('div').before('<h3>Programming</h3>'); So the HTML in the DOM would now look as shown below. Notice that h3 element is added before every div element <span>Training Courses</span> <h3>Programming</h3><div>jQuery</div> <h3>Programming</h3><div>C#</div> <h3>Programming</h3><div>ASP.NET</div> jquery insertbefore example : insertbefore method methods perform the same task as before. The only difference is in the syntax. With before method we first specify the target elements and then the content that we want to insert, where as we do the opposite with insertbefore method. $('<h3>Programming</h3>').insertBefore('div'); jquery after example Consider the following HTML <span>Training Courses</span> <div>jQuery</div> <div>C#</div> <div>ASP.NET</div> The following line of code inserts h3 element after each of the div elements $('div').after('<h3>Programming</h3>'); So the HTML in the DOM would now look as shown below. Notice that h3 element is added after every div element <span>Training Courses</span> <div>jQuery</div><h3>Programming</h3> <div>C#</div><h3>Programming</h3> <div>ASP.NET</div><h3>Programming</h3> jquery insertafter example : insertafter method methods perform the same task as after. The only difference is in the syntax. With after method we first specify the target elements and then the content that we want to insert, where as we do the opposite with insertafter method. $('<h3>Programming</h3>').insertAfter('div'); jquery insert existing element before or after another element : These methods (before, insertBefore, after, inserAfter) can also select an existing element on the page and insert it before or after another element. Consider the following HTML <span>Training Course</span> <div>jQuery</div> <div>C#</div> <div>ASP.NET</div> The following line of code inserts span element after each of the div elements $('div').after($('span')); So the HTML in the DOM would now look as shown below. <div>jQuery</div><span>Training Course</span> <div>C#</div><span>Training Course</span> <div>ASP.NET</div><span>Training Course</span>
Views: 43379 kudvenkat
Image Comparison Slider with jQuery & CSS3 - Simple jQuery Plugin tutorials
 
06:04
Plugin URL : http://www.jqueryscript.net/other/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty.html Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 4782 Online Tutorials
5: How to make elements appear and disappear in jQuery - Learn jQuery front-end programming
 
12:29
How to make elements disappear in jQuery - Learn jQuery front-end programming. In this lesson we will learn how to make HTML elements appear and disappear inside our websites. We will do this using the jQuery effects called show, hide, and fade. Download lesson files: http://mmtuts.net/course.php?c=jquery&l=5 -- mmtuts is a YouTube channel that focuses on teaching beginner and advanced courses in various multimedia related skills. We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs. jQuery for beginners is a how to series that teaches the jQuery framework to people who are just starting out learning programming. The course teaches how jQuery scripting can be made easy and teaches how to build many features on websites through behavior using jQuery. Creating behavior on websites with jQuery is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners. If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.
Views: 16591 mmtuts
Show an Image PopUp after Page Load using HTML CSS and jQuery
 
26:15
Welcome, all we will see jQuery Display Image PopUp after Page Load. Source Code Link: https://www.thapatechnical.com/2018/10/show-image-popup-after-page-load-using.html on page load popup in bootstrap lightbox popup on page load jquery modal popup on page load css popup on page load open popup window on page load jquery jquery popup on page load demo show modal on page load jquery jquery popup on page load example #popupjQuery Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadur... Youtube Link: https://www.youtube.com/channel/UCwfa...
Views: 5511 Thapa Technical
Top 10 Stunning CSS Effects
 
02:50
Our Android App for SOURCE CODE : https://play.google.com/store/apps/details?id=com.mtz.onlinetutorials ------------------------ Also Watch : Top5 Cool CSS Effects https://www.youtube.com/watch?v=94fkYwohMZE Also Watch : Top10 CSS Effects https://www.youtube.com/watch?v=yI0X4e7bxHU 3More Stunning CSS Hover Effects and Animation https://www.youtube.com/watch?v=vUR2AuK6RIc Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ All Video URL Change Full Screen Image on Hover | Html CSS & Javascript https://www.youtube.com/watch?v=o8DTzU0Iol8 CSS Custom Checkbox List Design | Html and CSS" https://www.youtube.com/watch?v=uGJwDq86LwI CSS3 3D Rotation Animation Effects https://www.youtube.com/watch?v=bqL4FqihRQg Pure Css Custom Checkbox Design https://www.youtube.com/watch?v=z3TgmTi42ic Glowing Gradient Button Animation Effects on Hover Using Html and CSS https://www.youtube.com/watch?v=pdH5X2mXzPk Pure CSS Leaves Animation Effects https://www.youtube.com/watch?v=fD_AuhsheuU Blur Everything Except The Hovered https://www.youtube.com/watch?v=iAsptnx_dig CSS 3D Flipping Card Hover Effect https://www.youtube.com/watch?v=aTK3vCzjzCo Glowing Dots on Hover https://www.youtube.com/watch?v=4GfKFi4lb4U Pure CSS Animated Snake Border https://www.youtube.com/watch?v=Vm_te-D25D4 ------------------------------------------------- Track: Cadmium - Melody (feat. Jon Becker) Link: https://youtu.be/9MiFRbymQXQ
Views: 196409 Online Tutorials
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: 373912 Codegrid
jQuery Tutorial: before() and after()
 
04:29
http://www.frameworktv.com | LearnToProgram is now Framework. Visit and join for free daily videos teaching digital skills like coding and design. SUBSCRIBE TO THE FRAMEWORK CHANNEL http://www.youtube.com/subscription_center?add_user=UC4msOaZNMfPwMe_ztV5jFH SUBSCRIBE TO OUR EMAIL LIST (LEARN FOR FREE!) http://www.frameworktv.com/?src=YOUTUBE VISIT US ON FACEBOOK https://www.facebook.com/frameworkTechnicallySpeaking/ FOLLOW ON TWITTER https://twitter.com/fw_social INSTAGRAM https://www.instagram.com/frameworksocial/
How to Make an Animation Alert using JavaScript
 
09:36
In this video javascript tutorial how to make an alert within animation using the sweet alert javascript. Follow me ========================================== facebook : @anggariskys twitter: @anggariskys google+: plus.google.com/+anggariskysetiawan instagram: pandastwn
Views: 121215 Angga Risky
modal popup closing automatically after few seconds using jquery 3.3.1
 
06:05
#closedialog #automaticallypopupclose #jquerymodelpopup jquery snippet to close modal popup automatically after 5 or 10 seconds
Css Image Hover Effects - Pure Css Tutorial - How To Create Image Hover Overlay Effects
 
13:47
Our Android App for SOURCE CODE : https://play.google.com/store/apps/details?id=com.mtz.onlinetutorials ------------------------ Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 65732 Online Tutorials
jQuery image gallery
 
10:19
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-image-gallery.html In this video we will discuss how to create an image gallery with thumbnails using jQuery. We discussed how to do exactly the same thing using raw JavaScript in Part 41 of JavaScript tutorial. When you click on the image thumnail, the respective image should be displayed in the main section of the page. For the purpose of this demo we will be using the images that can be found on any windows machine at the following path. C:\Users\Public\Pictures\Sample Pictures Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo. Step 2 : Right click on the Project Name in Solution Explorer in Visual Studio and create a new folder with name = Images. Step 3 : Copy images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project. Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page. It should automatically add HTMLPage1.htm. Step 5 : Add a reference to the download jQuery file. I am using jquery-1.11.2.js version for this demo. Step 6 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <style type="text/css"> .imgStyle { width: 100px; height: 100px; border: 3px solid grey; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#divId img').on({ mouseover: function () { $(this).css({ 'cursor': 'hand', 'border-Color': 'red' }); }, mouseout: function () { $(this).css({ 'cursor': 'default', 'border-Color': 'grey' }); }, click: function () { var imageURL = $(this).attr('src'); $('#mainImage').fadeOut(500, function () { $(this).attr('src', imageURL); }).fadeIn(500); } }); }); </script> </head> <body> <img id="mainImage" style="border:3px solid grey" src="/Images/Hydrangeas.jpg" height="500" width="540" /> <br /> <div id="divId"> <img class="imgStyle" src="/Images/Hydrangeas.jpg" /> <img class="imgStyle" src="/Images/Jellyfish.jpg" /> <img class="imgStyle" src="/Images/Koala.jpg" /> <img class="imgStyle" src="/Images/Penguins.jpg" /> <img class="imgStyle" src="/Images/Tulips.jpg" /> </div> </body> </html> In our next video, we will discuss how to make this image gallery a bit more efficient using the concept of event bubbling.
Views: 50037 kudvenkat
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: 7096 Anishnirmal
Sticky Navbar After Scroll | Fixed Navigation Bar | HTML, CSS & jQuery Tutotial 2019
 
06:10
Learn to create a simple sticky navigation on scroll using the power of JavaScript/jQuery to toggle classes. Don't forget to like, comment, and subscribe! More from me: https://bit.ly/2Q3pCiB Disclaimer: To save time, I rarely include css vendor prefixes for cross browser compatibility. If you plan to use this code please make sure that you use a prefixer. ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MUSIC: Music provided by NoCopyrightSounds. ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ IGNORE: sticky header, sticky navbar after scroll, sticky navbar with jquery, html tutorial, css tutorial, sticky navigation, sticky navigation bar, fixed navbar on scroll, fixed navbar after scroll, fixed header, css fixed header, css sticky header, css sticky navbar, html fixed header, html sticky header, Sticky Navbar On Scroll CSS, Sticky NavBar With JQuery, Animated Scrolling Navigation Bar, Scrolling Navbar Jquery, sticky navbar on scroll 2019, sticky navbar 2019, fixed nav
Views: 545 Coding with Julio
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: 906 Tutor Joe's Stanley
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka
 
01:15:34
( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** ) This video on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this video. Following topics are covered in the video: 2:45 What is JavaScript? 3:51 Why use jQuery? 5:25 What is jQuery? 6:22 Install jQuery 9:06 The DOM 9:54 jQuery Selectors 17:49 jQuery Methods – before() 19:08 jQuery Methods – after() 19:50 jQuery Methods – text() 22:35 jQuery Methods – html() 24:30 jQuery Methods – css() 27:20 jQuery Methods – attr() 33:12 jQuery Methods – val() 39:36 jQuery Methods – addClass() 43:20 jQuery Methods – removeClass() 43:30 jQuery Methods – toggleClass() 44:36 jQuery Events – click() 46:54 jQuery Events – on() 47:15 jQuery Events – keypress() 50:51 jQuery Effects - hide() 51:15 jQuery Effects - show() 51:19 jQuery Effects - toggle() 55:15 jQuery Effects - fadeOut() 55:30 jQuery Effects - fadeIn() 55:33 jQuery Effects - fadeToggle() 1:02:53 jQuery Effects - slideDown() 1:03:08 jQuery Effects - slideUp() 1:03:13 jQuery Effects - slideToggle() 1:06:37 jQuery UI - draggable() 1:06:41 jQuery UI- droppable() 1:13:21 jQuery UI- datepicker() Link to download Visual Studio Code: https://code.visualstudio.com/ Link to CDN: (paste this within the head tags in your html file) https://docs.google.com/document/d/1E4lmAY3nstQdKWuMvELXSBM5lElrRCSzkPk_ceq2ZZ8/edit?usp=sharing Link to HTML video: www.youtube.com/watch?v=a2L8ra2TOMg&list=PL9ooVrP1hQOH2k1SANK5rvq_EAgUKTPoK Link to JavaScript video: www.youtube.com/watch?v=J4UKL355sUo Subscribe to our Edureka YouTube channel and hit the bell icon to get video updates: https://goo.gl/6ohpTV -------------------------------------------------------------------------------------------------------- Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka ------------------------------------------------------------------------------------------------------- About The Course: Full Stack Web Development Masters Program makes you proficient in skills to work with back-end and front-end web technologies. It includes training on: 1. Web Development, 2. jQuery, Angular, 3. NodeJS, 4. ExpressJS, and 5. MongoDB. The curriculum has been determined by extensive research on 5000+ job descriptions across the globe. ------------------------------------------------------------------------------------------------------- How It Works? 1. This is a 21 Week Instructor-led Online Course, 125 hours of assignment and 125 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of each course, there will be a project, post completion of that project you will be given a certificate ---------------------------------------------------------------------------------------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at [email protected] or call us at IND: 9606058406 / US: 18338555775 (toll free).
Views: 30227 edureka!
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: 55374 kudvenkat
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: 50884 kudvenkat
Create Flat Styled Google Maps with jQuery and Flat UI
 
25:38
In today's screencast you can learn how to make custom flat styled Google Maps with jQuery and Flat UI - https://designmodo.com/google-maps-jquery-flat-ui/ How to create custom map styles using flat colors and Flat UI styling. After the design and code work is finished, East explains how to link your finished product into the Designmodo affiliate program
Views: 51542 designmodo
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: 14831 TVAC Studio
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: 306556 Wes Bos
Jquery UI Tutorial | Custom Style Datepicker
 
06:57
Jquery UI Tutorial | Custom Style Datepicker Download code? Explore at http://rathor.me/ln
Views: 727 Tech. Rudranshi
Animated Sticky Navbar - Resizing Header on Scroll - Sticky Header On Scroll with CSS and Javascript
 
16:46
Our Android App for SOURCE CODE : https://play.google.com/store/apps/details?id=com.mtz.onlinetutorials ------------------------ Part 1 : https://www.youtube.com/watch?v=_pZrP3r1rMo (Animated Sticky Header) Part 2 : https://www.youtube.com/watch?v=NTyvENRwJK4 (Responsive Design) Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 91791 Online Tutorials
JQUERY Функции : prepend, append, before, after, JavaScript. Обучение Уроки п 19
 
08:46
▶Плей лист с задания по курсу "JQUERY. JavaScript. Веб. Курс. Обучение" https://www.youtube.com/playlist?list=PLmaZf_calrAbt7J_W10Q9AkNDQnL7OnZW prepend() - добавляет код внутрь выбранного объекта до всего его содержимого (англ. : prepend - перед именем) append() - добавляет код внутрь выбранного объекта после всего его содержимого (англ. : append - добавлять в конец) before() - добавляет код до выбранного объекта (англ. : before - до, перед ) after() - добавляет код после выбранного объекта (англ. : after - после, спустя) 19.1 Самостоятельно: на основании №19 добавьте в самый конец (div id="wrapper") новый div с картинкой и текстом и дайте этому объекту id="lesson_19_1". Затем сделайте цвет фона этого объекта оранжевым, текст синим и рамку 2px. Покажите результат преподавателю. Остальные уроки https://24navo.com/ Толковый Словарь Русского Языка. С. И. Ожегов Н. Ю. Шведова https://24navo.com/lessons/html_list/i/m/Ozhegov.Dictionary.html Словарь иностранных слов современного русского языка. Т. В. Егорова https://24navo.com/lessons/html_list/i/m/Egorov_Dictionary_of_foreign_words_of_modern_Russian_language.pdf функция,JQUERY,функция prepend,append,before,after,Cascading Style Sheets, каскадные таблицы стилей,изменение веб-страниц,JavaScript,js,обучение,курс,программирование,практика,для новичков,с нуля,обучение программированию,примеры,на руском,на русском,на руском языке
jQuery append() and after(): Difference between append and after Methods in jQuery
 
06:43
https://www.udemy.com/jquery-web-development-made-easy/?couponCode=TUBECUST Practical jQuery: Build 8 jQuery Projects https://www.udemy.com/jquery-ui-practical-build-jquery-ui-projects/?couponCode=YOU-CUST jQuery UI in Action: Build 5 jQuery UI Projects https://www.udemy.com/hands-on-jquery-jquery-examples/?couponCode=YouCust Hands-On jQuery: jQuery Examples Find all our Udemy courses here: https://www.udemy.com/user/cryptersinfotech/ jQuery append() and after(): Difference between append and after Methods in jQuery. Do you know the difference between the append and after methods in jQuery? The append method inserts data or element inside the selected item at the last index. Hence the new element or the data will become the child of the selected element. The after method inserts inserts data or element after the selected element. Hence the new data or the element will be the sibling of the selected element. Let us see the difference between these two methods with the help of an example. To know how to write jQuery code easily, see this video: http://youtu.be/ifus3baASaQ
Views: 315 Crypters Infotech
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: 105836 kudvenkat
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: 56771 kudvenkat
jQuery checked selector
 
10:35
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-checked-selector.html In this video we will discuss the jQuery :checked selector. The :checked selector selects all checked checkboxes or radio buttons. Let us understand this with an example. Selects all checked radio button elements $('input[type="radio"]:checked') Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed. When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed. 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 () { $('#btnSubmit').click(function () { var result = $('input[type="radio"]:checked'); if (result.length > 0) { $('#divResult').html(result.val() + " is checked"); } else { $('#divResult').html("No radio button checked"); } }); }); </script> </head> <body style="font-family:Arial"> Gender : <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female <br /><br /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html> Selects all checked checkbox elements $('input[type="checkbox"]:checked') Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed. When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnSubmit').click(function () { var result = $('input[type="checkbox"]:checked'); if (result.length > 0) { var resultString = result.length + " checkboxe(s) checked<br/>"; result.each(function () { resultString += $(this).val() + "<br/>"; }); $('#divResult').html(resultString); } else { $('#divResult').html("No checkbox checked"); } }); }); </script> </head> <body style="font-family:Arial"> Skills : <input type="checkbox" name="skills" value="JavaScript" />JavaScript <input type="checkbox" name="skills" value="jQuery" />jQuery <input type="checkbox" name="skills" value="C#" />C# <input type="checkbox" name="skills" value="VB" />VB <br /><br /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html>
Views: 102434 kudvenkat
jQuery UI DatePicker: How to Mark Holidays (Style Some of the Dates) in jQuery UI Date Picker
 
14:38
https://www.udemy.com/jquery-web-development-made-easy/?couponCode=TUBECUST Practical jQuery: Build 9 jQuery Projects https://www.udemy.com/jquery-ui-practical-build-jquery-ui-projects/?couponCode=YOU-CUST jQuery UI in Action: Build 7 jQuery UI Projects https://www.udemy.com/hands-on-jquery-jquery-examples/?couponCode=YouCust Hands-On jQuery: jQuery Examples Find all our Udemy courses here: https://www.udemy.com/user/cryptersinfotech/ To learn jQuery from scratch and to increase your productivity as a web developer, click this link!! jQuery UI DatePicker: How to Mark Holidays (Style Some of the Dates) in jQuery UI Date Picker We have already seen how to add a date picker using jQuery UI and make the required dates non-selectable in the video at http://youtu.be/vUUNH0zUeOg We used the beforeShowDay option for this. We can also apply styles (increase font size, change the color etc) using the same beforeShowDay option. In this video, we mark holidays in the calendar as per by changing the color of the date to red. We store the holiday details in an array and then apply a CSS class for those dates. To know how to write jQuery code easily, see this video: http://youtu.be/ifus3baASaQ To know how to reference jQuery UI files correctly, see the video at http://www.youtube.com/watch?v=vUUNH0zUeOg To know how to disable required dates in jQuery UI datepicker https://youtu.be/vUUNH0zUeOg To know how to enable dates before/after specific dates in jQuery UI datepicker https://youtu.be/tNAmUH_RsrI To know how to format selected date in jQuery UI datepicker https://youtu.be/zlZnAqYPZVc
Views: 7303 Crypters Infotech
jQuery DOM manipulation methods
 
16:55
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-dom-manipulation-methods.html In this video we will discuss 1. What are jQuery DOM manipulation methods 2. How to set attribute values using jQuery attr() method 3. How to retrieve attribute values using jQuery attr() method 4. How to set multiple attribute values using jQuery attr() method 5. How to remove an attribute using jQuery removeAttr() method What are jQuery DOM manipulation methods jQuery DOM manipulation methods manipulate the DOM in some manner. The complete list of jQuery DOM manipulation methods can be found at the following link. http://api.jquery.com/category/manipulation/ jQuery attr method is used to set or retrieve attribute values of html elements. Retrieves the title attribute value of the first matching element $('div').attr('title') Example : In this example we have 2 DIV elements. Since attr() function retrieves only the attribute value of first matching element, we only get the title attribute value of the first DIV element. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { alert($('div').attr('title')); }); </script> </head> <body style="font-family:Arial"> <div id="div1" title="My DIV1"> DIV 1 </div> <div id="div2" title="My DIV2"> DIV 2 </div> </body> </html> To retrieve the title attribute value of all the matching elements, jQuery each() method can be used. <script type="text/javascript"> $(document).ready(function () { $('div').each(function () { alert($(this).attr('title')); }); }); </script> Sets the title attribute value of all the matching elements to "new div title" $('div').attr('title', 'new div title'); Example : If you want to set the same value for the title attribute of all the elements, then there is no need to loop thru each element. All the div elements in this case will have 'new div title' as the title attribute value. <script type="text/javascript"> $(document).ready(function () { // set the same title attribute value for all the DIV elements $('div').attr('title', 'new div title'); // Retrieve and alert the title attribute value of all DIV elements $('div').each(function () { alert($(this).attr('title')); }); }); </script> If you want to set a different value for the title attribute, then you may need to loop thru each element. <script type="text/javascript"> $(document).ready(function () { // sets a different title attribute value for each DIV element $('div').each(function (i) { $(this).attr('title', 'div ' + (i + 1) + ' title'); }); // Retrieve and alert the title attribute value of all DIV elements $('div').each(function () { alert($(this).attr('title')); }); }); </script> How to set multiple attribute values : Using a JSON object to set multiple attribute values <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var config = { 'title': 'New Div Title', 'style': 'border:3px solid red;', 'name': 'My Div' }; $('div').attr(config); var result = ''; $('div').each(function () { result += 'title = ' + $(this).attr('title') + '<br/>'; result += 'style = ' + $(this).attr('style') + '<br/>'; result += 'name = ' + $(this).attr('name') + '<br/><br/>'; }); $('#resultSpan').html(result); }); </script> </head> <body style="font-family:Arial"> <div id="div1" title="My DIV1"> DIV 1 </div> <br /> <div id="div2" title="My DIV2"> DIV 2 </div> <br /> <span id="resultSpan"> </span> </body> </html> Instead of creating a separate JSON object (config) and then passing it to attr() method, you can create the JSON object inline. $('div').attr({ 'title': 'New Div Title', 'style': 'border:3px solid red;', 'name': 'My Div' });
Views: 70704 kudvenkat
How to Use Before and After Methods in Jquery in Tamil
 
03:54
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 For Free source code and Free Project Please visit : http://www.tutorjoes.com/ http://www.facebook.com/tutorjoes http://www.youtube.com/tutorjoes
Views: 642 Tutor Joe's Stanley
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: 80922 kudvenkat
Sticky Div when after scrolling with jquery
 
09:11
Hi, dear viewer , today i will going to show how use sticky js. stick div when after scrolling
Views: 2417 Web Developer
jQuery/HTML/CSS BANGLA part 14( append, prepend, after, before )
 
08:56
ফ্রি বাংলা টিউটোরিয়াল সহজে শিখুন jQuery/HTML/CSS ভিডিওটি যদি ভাল লাগে অবশ্যেই Like, comment and Subscribe করবেন। FREE BANGLA TUTORIALS __ You can easily learn professional web programming and development by watching these videos
Views: 157 SOFTTECH- IT24
How to show and hide content using select dropdown box using Jquery
 
06:28
Step 1 : First hide your content which you want to hide by using style="display: none;" and also set id id="mobileno_textbox" Step 2 : call function in select box code like onchange="fun_showtextbox()" Step 3 : create function fun_showtextbox() in your js file function fun_showtextbox() { var select_status=$('#messagetype').val(); /* if select personal from select box then show my text box */ if(select_status == 'Personal') { $('#mobileno_textbox').show();// By using this id you can show your content } else { $('#mobileno_textbox').hide();// otherwise hide } } Note : * must be sure your jquery.min.js is included first https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js I created this video with the YouTube Video Editor (http://www.youtube.com/editor) -~-~~-~~~-~~-~- Please watch: "how to change php version in godaddy within 1 minute" https://www.youtube.com/watch?v=UTjF2A3xvsE -~-~~-~~~-~~-~-
Views: 5464 Shinerweb
Animated Scrolling Navigation Bar
 
10:48
Examples: https://jsfiddle.net/DZuz14/0zu0ybzv/ (transparent to black shrinking nav) https://jsfiddle.net/DZuz14/b7woctx6/ (shrinking nav with no color change) https://jsfiddle.net/DZuz14/op177v4u/ (black to red with no shrinking of navbar height) How to animate and colorize your navigation bar when a user scrolls on a page with jquery and some basic css.
Views: 192255 Dan Zuzevich
jQuery Floating Div Sidebar on Scroll Down
 
06:04
Learn how to create a jQuery scroll div (floating sidebar) that follows your screen when you scroll down after a certain amount of height in pixels. Text Tutorial: http://html-tuts.com/?p=8566 ► Subscribe via E-mail: http://goo.gl/GAHXJt ► Visit Official Site for More Tutorials: http://html-tuts.com/ ------------------------------- Music used: September Sky by Per Kiilstofte https://machinimasound.com/music/sept... Licensed under Creative Commons Attribution 4.0 International (http://creativecommons.org/licenses/b...)
Views: 12674 HTML-TUTS.com
Responsive Sticky Navbar With JQuery | HTML, CSS & JavaScript
 
09:15
This Tutorial Can Give You The Basic Idea How Can You Create Responsive Scroll Activated Navigation Bar Using JQuery. Source Code : http://123link.vip/MYP7 JQuery Cdn : https://code.jquery.com/ Bootstrap Font Awesome Cdn : https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css ---------------- 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 : Uplink - To Myself (feat. NK) [NCS Release] | Official Video Music provided by NoCopyrightSounds. Watch Video : https://www.youtube.com/watch?v=fugQAnzL1uk Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release] Music provided by NoCopyrightSounds. Watch Video : https://www.youtube.com/watch?v=2DGxm1csQQM Ship Wrek & Zookeepers - Ark [NCS Release] Music provided by NoCopyrightSounds. Watch Video : https://www.youtube.com/watch?v=8xlDwukxjnA
Views: 134413 Codegrid
How to Create Bootstrap Card Hover Effect ( jQuery )
 
10:58
How to Create Bootstrap Card Hover Effect ( jQuery ) In this tutorial, we are creating bootstrap hovercard effect with jquery. Download Source Code https://www.file-upload.com/su80gkdtnvxj If you have any question then comment me in the video comment section. Like this video. Learn More From Our Website:- www.dailywebtuition.com Attribution Icon made by monkik from www.flaticon.com Music: https://www.bensound.com Photos: https://www.pexels.com More videos : How to Create Bootstrap Carousel (Slider) - Complete Guide https://youtu.be/CH-m8KWWTXg Create Website Using HTML & CSS Tutorial - Daily Tuition https://youtu.be/U35Ab1AFTGU How to Create Bootstrap Landing Page Design for Website https://youtu.be/X97hhAcPAbs Asp net Login Form Design with MySql Database - Part 2 https://youtu.be/8SE05tBYMjE Asp net Login Page Design Using Bootstrap Part-1 https://youtu.be/W424GXzcTKo How to Make Homepage Design with Bootstrap https://youtu.be/9swvH-7MBQA Asp net Login Page Using MySql Database C# - Part 2 https://youtu.be/BMjvWjN1PiM Asp net Login Page Using CSS Design - Part 1 https://youtu.be/q5KSbVZGklw Login System with Php and Mysql Database https://youtu.be/tGT4NJd0-g4 Create Shopping Cart Using PHP and Mysql https://youtu.be/IO5ezsURqyg User Registration Form with PHP and MySQL with Validation https://youtu.be/pDCrn7_ATB0 Online Electronic Store Design Tutorial Part-1 https://youtu.be/tpJQ0IGYfpA Online Electronic Store Design Tutorial Part-2 https://youtu.be/eK2KRq-eXrw Online Electronic Store Design Tutorial Part-3 https://youtu.be/FxmLNLuDTKk Online Electronic Store Design Tutorial Part-4 https://youtu.be/8MSb9_yt7nA Online Electronic Store Project (E-Commerce Website) https://youtu.be/CNI-Sq8THzM Asp.net Login Page Design 3D & Transparent Page using Bootstrap https://youtu.be/uobgLvafC50 How To Create Homepage in Asp.net with Image Fade In Effect Jquery https://youtu.be/IgvnT2W8yPs Animated Login Form in Asp.net Tutorial https://youtu.be/-UE4yrt5xWI How to Make Corner Folding Effect On Div Tag Tutorial in Hindi https://youtu.be/R6RJQTlKCqw Animated Homepage Website - HTML5/CSS & Animated.css https://youtu.be/X8cotMzES0o Design Login Page in Html5 CSS - Responsive Page https://youtu.be/hRCFLjCIgio Login System Using PHP & SQL Database https://youtu.be/bJ8oTeRg_aA Design Video Blog Using Bootstrap for Blogger https://youtu.be/HNmAj_K55Hw Create Homepage of Website using Bootstrap Studio ( Tutorial ) https://youtu.be/htl07adn2u8 Atom Editor Live Preview in Hindi https://youtu.be/rQdKpALUfZM How to Install Photoshop Color Efex Pro 4 Crack in Hindi https://youtu.be/up74-kMPmOQ Asp.net Login Page Design using Bootstrap https://youtu.be/-P90tOJYf9o Asp.net Project With C# https://youtu.be/1xVs3QkE9UU Run Project Visual Studio Asp.net https://youtu.be/lvfXqqpl_Hw Add Existing Files into .NET https://youtu.be/wKxDwE_2_ZU Add Refference In Visual Studio https://youtu.be/Cwn6nrGujjI Working Java Class In Asp.net 100% https://youtu.be/eNG-Md1mle8 If you have any question please comment me on my video or you can write it on channel discussion. Thank You...!
Views: 20119 Daily Tuition
Parallax effect | 2 different ways to add it with jQuery
 
21:33
A look at two ways to add a parallax scrolling effect to your website using jQuery, the first is having a background image scroll at a different speed, and the second is having an element move at a different speed. Parallax scrolling is used a lot these days, and often people are using complicated ways to set it up, but it doesn't have to be complicated at all! Honestly, if you want to have parallax scrolling on your website, you can do it yourself without too much trouble at all. The background version won't work for more than one div on a page... this should fix that - https://codepen.io/kevinpowell/pen/YVOLGz Find this on GitHub - https://github.com/kevin-powell/How-to-build-a-responsive-website-from-scratch --- 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: 54552 Kevin Powell
jQuery Tutorial: AJAX Load Content With No Page Refresh
 
14:53
In this jQuery tutorial, you'll learn how to load content into a div on click using the AJAX load method. Here's the special discount link for Rob's course: http://www.johnmorrisonline.com/coupon-code-for-the-complete-web-developer-course-on-udemy/?utm_campaign=ytae-FqAt_VCA 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 -~-~~-~~~-~~-~-
Views: 45643 John Morris
Terminal Effect | Typewriter Effect | t.js - JQuery
 
06:44
// Terminal Effect CSS / Typewriter Effect CSS / HTML & CSS / JavaScript / JQuery // Source Code - https://bit.ly/2P3CP9J t.js Plugin - https://bit.ly/2OvUuYf ---------------- 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 ! My friend has started a youtube channel. Check it out for back-end stuff ! Link - https://bit.ly/2PKRfIk Music : (free) 90s Old School Boom Bap type beat hip hop instrumental | 'The Creator' prod by SMOKEONEBEATS Video - https://www.youtube.com/watch?v=5Q68JJSDHUk MUSIC CREDIT - SmokeOneBeats ✘ YT ⇒ https://www.youtube.com/channel/UCFDz... ✘ buy / lease ⇒ [email protected] ✘ original name ⇒ beat #70 ✘ BC ⇒ https://smokeonebeats.bandcamp.com/ ✘ IG ⇒ https://www.instagram.com/smokeonebeats/ ✘ FB ⇒ https://www.facebook.com/SmokeOneOffi... ✘ SC ⇒ https://soundcloud.com/smokeonebeats
Views: 11243 Codegrid
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: 42230 kudvenkat
jQuery wrap elements
 
06:52
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-wrap-elements.html In this video we will discuss how to wrap and unwrap elements The following jquery methods are used to wrap and unwrap elements. Since these methods modify DOM, they belong to DOM manipulation category. wrap unwrap wrapAll wrapInner wrap - Wrap an HTML structure around each element in the set of matched elements. Consider the following HTML <div id="div1"> DIV 1 </div> <div id="div2"> DIV 2 </div> <div id="div3"> DIV 3 </div> The following line of code wraps each of the above div element with another div element. $('div').wrap('<div class="containerDiv"></div>'); So the HTML in the DOM would now look as shown below. To view the DOM HTML use the browser developer tools. <div class="containerDiv"> <div id="div1"> DIV 1 </div> </div> <div class="containerDiv"> <div id="div2"> DIV 2 </div> </div> <div class="containerDiv"> <div id="div3"> DIV 3 </div> </div> Example : <html> <head> <title></title> <style> .containerDiv { background-color:red; color:white; font-weight:bold; margin: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { alert($('div.containerDiv').length); $('div').wrap('<div class="containerDiv"></div>'); alert($('div.containerDiv').length); }); </script> </head> <body style="font-family:Arial"> <div id="div1"> DIV 1 </div> <div id="div2"> DIV 2 </div> <div id="div3"> DIV 3 </div> </body> </html> unwrap - Remove the parents of the set of matched elements from the DOM. Example : <html> <head> <title></title> <style> .containerDiv { background-color:red; color:white; font-weight:bold; margin: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { alert($('div.containerDiv').length); $('div').wrap('<div class="containerDiv"></div>'); alert($('div.containerDiv').length); $('div').unwrap(); alert($('div.containerDiv').length); }); </script> </head> <body style="font-family:Arial"> <div id="div1"> DIV 1 </div> <div id="div2"> DIV 2 </div> <div id="div3"> DIV 3 </div> </body> </html> wrapAll - Wrap an HTML structure around all elements in the set of matched elements. Consider the following HTML <div id="div1"> DIV 1 </div> <div id="div2"> DIV 2 </div> <div id="div3"> DIV 3 </div> The following line of code wraps all of the matching div element with another div element. $('div').wrapAll('<div class="containerDiv"></div>'); So the HTML in the DOM would now look as shown below. <div class="containerDiv"> <div id="div1"> DIV 1 </div><div id="div2"> DIV 2 </div><div id="div3"> DIV 3 </div> </div> wrapInner - Wrap an HTML structure around the content of each element in the set of matched elements. Consider the following HTML <div id="div1"> DIV 1 </div> <div id="div2"> DIV 2 </div> <div id="div3"> DIV 3 </div> The following line of code wraps each of the above div element content with another div element. $('div').wrapInner('<div class="containerDiv"></div>'); So the HTML in the DOM would now look as shown below. <div id="div1"> <div class="containerDiv"> DIV 1 </div> </div> <div id="div2"> <div class="containerDiv"> DIV 2 </div> </div> <div id="div3"> <div class="containerDiv"> DIV 3 </div> </div>
Views: 47889 kudvenkat
Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)
 
13:07
Learn how to create a "sticky" navigation (element should use "fixed" position once it would normally scroll out of view). Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to the demo files shown in the lesson: http://learnwebcode.com/sticky-navigation-tutorial/ Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos: https://www.youtube.com/watch?v=1vMFpT0h-WI&list=UUHRp19HU7Y2LwfI0Ai6WAGQ https://www.youtube.com/watch?v=gIvR-WX5lIQ&list=UUHRp19HU7Y2LwfI0Ai6WAGQ
Views: 137150 LearnWebCode
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: 76102 Kevin Powell
Как Изменять Стили after и before псевдоелементов через JavaScript и JQuery
 
08:18
Вы узнаете каким способом можно изменять стили after и before псевдоелементов с помощью javascript и jquery. Ссылка на статью: https://a-devel.com/blog/kak-izmenyat-stili-psevdoelementov-after-i-before-cherez-javascript-i-jquery/ Ссылка на блог: https://a-devel.com/blog/
Views: 39 Anthony Hale