Home
Search results “Javascript jquery style object”
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: 98976 kudvenkat
Cool Stuff With jQuery - The jQuery Object
 
18:41
Checkout JS Dojo https://getjsdojo.com The jQuery object is returned when you invoke jQuery. It is in an array-like object with a zero-indexed collection of matched elements.
Views: 2316 JS Dojo
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: 132486 LearnWebCode
Javascript + jQuery components: data filter
 
07:16
Creating a data filter that allows you to select an item and it will display only its information. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-jquery-components/
Views: 4331 Thomas Bradley
Javascript + jQuery DOM: selecting HTML elements
 
05:41
Selecting elements in the HTML document using Javascript and jQuery so they can be manipulated—with both plain Javascript & jQuery. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/dom/
Views: 2707 Thomas Bradley
Append/Add and Remove HTML Elements: jQuery
 
05:59
http://technotip.com/2021/append-add-and-remove-html-xml-elements-jquery/ Video tutorial to illustrate adding or appending an html element or removing an html element from the web page using jQuery: DOM (Document Object Model) jQuery uses: .append(); and .remove(); functions to accomplish this task. We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document. jQuery Video Tutorial List: http://technotip.com/2514/jquery-tutorial-list/
Views: 34767 Satish B
Modular Javascript #2 - Converting jQuery to an Object Literal Module
 
21:41
In this video, we'll convert plain jQuery code to an object literal module. It will still use jQuery, but the pattern will be much cleaner and easier to maintain. Missed video #1? http://youtu.be/HkFlM73G-hk Source code for this video: http://codepen.io/anon/pen/OVZpqO?editors=101 Web developers often don't see the value of changing the way they write javascript code - this is often due to the fact that they have never had to code a large application. Code that doesn't look messy at first gets VERY messy when you need a lot of code doing a lot of things. This video will show how to take that messy jQuery code and clean it up into a self-encapsulated module that is easy to work with. Modular JS #1 - Object Literal Pattern pt 1: https://www.youtube.com/watch?v=HkFlM73G-hk&index=1&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f Modular JS #2 - Object Literal Pattern pt 2: https://www.youtube.com/watch?v=m-NYyst_tiY&index=2&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f Modular JS #3 - Revealing Module Pattern: https://www.youtube.com/watch?v=pOfwp6VlnlM&index=3&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f -~-~~-~~~-~~-~- Learning Web Development? Watch the FREE COURSE: "Web Development for Absolute Beginners"! https://www.youtube.com/watch?v=gQojMIhELvM -~-~~-~~~-~~-~-
Views: 105283 LearnCode.academy
Javascript + jQuery effects: trigger animations & transitions on SVGs
 
10:00
Triggering animations and transitions on SVG graphics using Javascript and jQuery. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-effects/
Views: 26597 Thomas Bradley
JavaScript Tutorial - Attribute vs Property
 
09:31
Every HTML element in the HTML markup is represented by JavaScript DOM object. After HTML parsing each element object is converted to DOM object. Every DOM object is a collection of properties and some properties are directly related to the HTML attribute name-value pair. https://github.com/webtunings https://www.facebook.com/pages/WebTunings/339234242822202 I highly recommend this book for beginners as well as advanced programmers: http://www.amazon.com/gp/product/0596805527/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0596805527&linkCode=as2&tag=webtuningscom-20
Views: 4526 WebTunings
Javascript + jQuery effects: waypoints
 
07:34
Using waypoints on our website: Javascript and jQuery will detect a specific scroll location and trigger a function. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/javascript-jquery-effects/
Views: 50484 Thomas Bradley
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: 148471 Easy Tutorials
jQuery #id selector
 
10:53
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-id-selector.html In this video we will discuss 1. What are jQuery selectors 2. Different selectors in jQuery 3. #id selector in jquery What are jQuery selectors One of the most important concept in jQuery is selectors. jQuery selectors allow you to select and manipulate HTML elements. Different selectors in jQuery jQuery selectors allow you to select html elements in the DOM by 1. Element ID 2. Element Tag Name 3. Element Class Name 4. Element attribute 5. Element Attribute values and many more Id selector in jquery To find an HTML element by ID, use the jQuery #id selector Example : The following example finds button with ID button1 and attaches the click event handler. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').click(function () { alert('jQuery Tuorial'); }); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] Changes the background colour of the button to yellow $(document).ready(function () { $('#button1').css('background-color', 'yellow'); }); Important points to remember about jQuery #id selector 1. jQuery #id selector uses the JavaScript document.getElementById() function 2. jQuery #id selector is the most efficient among all jQuery selectors. If you know the id of an element that you want to find, then always use the #id selector. 3. HTML element IDs must be unique on the page. jQuery #id selector returns only the first element, if you have 2 or more elements with the same ID. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').css('background-Color', 'yellow'); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [input id="button1" type="button" value="Click Button" /] [/body] [/html] 4. JavaScript's document.getElementById() function throws an error if the element with the given id is not found, where as jQuery #id selector will not throw an error. To check if an element is returned by the #id selector use length property. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { if ($('#button1').length ] 0) { alert('Element found') } else { alert('Element not found') } }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] 5. JavaScript's document.getElementById() and jQuery(#id) selector are not the same. document.getElementById() returns a raw DOM object where as jQuery('#id') selector returns a jQuery object that wraps the DOM object and provides jQuery methods. This is the reason you are able to call jQuery methods like css(), click() on the object returned by jQuery. To get the underlying DOM object from a jQuery object write $('#id')[0] 6. document.getElementById() is faster than jQuery('#id') selector. Use document.getElementById() over jQuery('#id') selector unless you need the extra functionality provided by the jQuery object.
Views: 150669 kudvenkat
Simple JavaScript Slideshow In 5 Minutes
 
04:58
Lets build a really simple image slideshow using just Javascript. We will not use any jQuery or fancy libraries, just plain old JavaScript. This is for absolute beginners Code (fiddle): https://jsfiddle.net/bradtraversy/74owmd01/ Code (zip): http://www.traversymedia.com/downloads/simpleslideshow.zip My Courses: http://traversymedia.com/eduonix-courses: Donate - Any donation is greatly appreciated: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KLVYJVNUJ5NV4
Views: 106496 Traversy Media
Multiple languages using Jquery and Json
 
05:56
Jquery Library: http://code.jquery.com/jquery-1.11.3.min.js
Views: 26335 Chun Dany
Javascript + jQuery DOM: event delegation
 
07:30
Attaching events to HTML elements that may not exist yet on the page by delegating the event with the parent element. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/dom/
Views: 5731 Thomas Bradley
JAVASCRIPT/JQUERY How to animate DIV movement
 
04:35
In this Javascript/JQuery exercise I`m trying to move DIV element around the screen - left, right, up and down by changin marginLeft and marginTop parameters. Also, I`m gonna make a function that will toggle our element color - from black to red; from red to black. ===================================== SUBSCRIBE FOR MORE: http://www.youtube.com/subscription_center?add_user=UC4_BmI7ztL9eJC4liCp0qjQ =====================================
Views: 7297 SIMPLECODE
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: 30298 kudvenkat
Develop a Quiz App with Javascript - Object Oriented Programming
 
45:08
Best Javascript Book : http://amzn.to/2iQZpjN 2nd Javascript Book : http://amzn.to/2iaF9Kn Best Java Book : http://amzn.to/2yxz28S Best Angular JS Book: http://amzn.to/2iSzCHX Best Angular 5 Book: http://amzn.to/2iQFMIk Donate Us: http://paypal.me/tipawais Udemy Courses AutoCAD Course : https://www.udemy.com/autocad2017/?couponCode=AWAIS65 Revit Course : https://www.udemy.com/revit2017/?couponCode=AWAISYOU50 Wordpress Course : https://www.udemy.com/wordpress-essentials-ecommerce/?couponCode=AWAIS501 JavaScript with JSON - Essentials: https://www.youtube.com/watch?v=5TP5vaiaVe8&list=PLz5rnvLVJX5W6rTAXKX7XN5JM1ijDet5X&index=18 In this JavaScript object oriented programming tutorial, you will learn how to make a complete quiz application for web. You will learn, how to design models and controllers for different functionalities with in the app. Plus you will learn how to design the interface of our app with html and css. Quiz App Code: https://drive.google.com/drive/folders/0B8qiHDiC8qnbREljdGdUeWZfcEk Facebook Group: https://www.facebook.com/groups/996305460498149/ JavaScript with JSON - Essential Training: https://www.youtube.com/watch?v=5TP5vaiaVe8 Image Pop up with jquery: https://www.youtube.com/watch?v=sm7JjYnTigs Dynamic menu with jquery: https://www.youtube.com/watch?v=okOawR7jgro Password conformation with jquery: https://www.youtube.com/watch?v=DWW_uF1Qo88 auto complete dropdown with javascript: https://www.youtube.com/watch?v=LEhmmrruNLg Follow me : Twitter: https://goo.gl/9rmbxI Youtube: https://goo.gl/mmFkgB GooglePlus: https://plus.google.com/u/1/+AwaisMirza1 Follow Umair : Facebook: https://www.facebook.com/umair.jameel.904
Views: 132995 Awais Mirza
jQuery: How to modify multiple CSS properties in one statement
 
05:55
To avoid adding multiple statements to modify one object , one can use an object with values to pass to jquery functions. An object is represented by { }
Views: 242 WebTecho 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: 71064 Rinkans
Using jQuery to Update HTML Without Refresh (Part 2 of 2)
 
07:46
In this video, I'll show you how to update only a portion of the HTML on a page using jQuery. This is in contrast to the last video where I used a JSON object to update the page. This is also applicable to single page applications (SPA). Get the code here: https://prettyprinted.com/blog/577464/using-jquery-to-update-html-without-refresh
Views: 2768 Pretty Printed
Move Object with Mouse | No Plug-In | CSS - JQUERY Tutorial
 
08:13
In this video we will Move Object with Mouse using CSS and JQUERY. We can also move background with the help of this code. There is no need to add external JQUERY Plug-In to move object. Code and Stuff Available At : https://github.com/DaftCreation/Move-Object Web site design tutorials. Including : HTML, CSS, JavaScript, CSS Layouts, Responsive Design
Views: 9846 Daft Creation
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: 51519 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: 58717 kudvenkat
Coding Connect Four Game with Javascript & jQuery
 
01:00:00
Follow me on twitter! https://twitter.com/CodyLSeibert In this programming tutorial, I'll create a basic two player connect four game using Javascript, jQuery, CSS, and HTML. This tutorial is geared towards people who understand the basics of web technologies, but maybe want to watch how another developer builds a connect four application. Feel free to fork the repo for yourself here: https://github.com/codyseibert/js-connect-four
Views: 2469 Cody Seibert
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: 12123 mmtuts
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: 102589 kudvenkat
Partial Print Document JavaScript Tutorial HTML div Content
 
05:16
Lesson Code: http://www.developphp.com/video/JavaScript/Partial-Print-Document-Tutorial-HTML-div-Content Learn to allow users to print specific parts of your documents instead of printing the entire web page. We will apply print buttons near each printable portion of the document.
Views: 75719 Adam Khoury
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: 34921 Traversy Media
JAVASCRIPT INTERVIEW QUESTIONS
 
26:35
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 ------------------------------------- Find JAVASCRIPT INTERVIEW QUESTIONS on this link - https://viden.io/knowledge/javascript-interview-questions?utm_campaign=creator_campaign&utm_medium=referral&utm_source=youtube&utm_term=ajaze-khan-1
Views: 73961 LearnEveryone
JavaScript & jQuery Tutorial for Beginners - 1 of 9 - Getting Started
 
13:03
http://www.LittleWebHut.com Getting Started. This tutorial demonstrates how to get started with JavaScript and jQuery. This is a good tutorial for beginners. Link to the code used in this video. http://www.littlewebhut.com/javascript/getting_started/ jQuery website http://jquery.com jQuery Browser Compatibility http://docs.jquery.com/Browser_Compatibility
Views: 548298 tutor4u
jQuery event object
 
11:53
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-event-object.html In this video we will discuss 1. How to retrieve event data using event object 2. How to convert JavaScript event object to jQuery event object Whenever an event (like click, mouseover, mouseout etc) occurs, the relevant data about that event is placed into the event object. For example, the event object contains event data like, the X and Y coordinates of the mouse pointer when the event occurred, the HTML element that fired the event, which mouse button is clicked etc. Obtaining the event object is straightforward. The event object is always passed to the event handler method. Let us understand this with an example. When we click the button, we want to capture the following event data 1. Event name 2. Mouse X coordinate when the event occured 3. Mouse Y coordinate when the event occured 4. The control that raised the event 5. The HTML tag name that raised the event Notice that in the example below, we are passing event object to getEventDetails() method. This object is the raw JavaScript event object. The type property gives us the event name that occured. pageX and pageY properties return the X and Y coordinates of the mouse pointer. Target property returns the HTML element that raised the event. Target, pageX and pageY properties are supported by all modern browsers and Internet Explorer 9 and above. The following code will not work in Internet Explorer 8 and earlier versions. In addition to click event, the following example returns mouseover and mouseout event data. 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 () { $('#btn').click(function () { getEventDetails(event); }).mouseover(function () { getEventDetails(event); }).mouseout(function () { getEventDetails(event); }); function getEventDetails(event) { var eventDetails = "Event = " + event.type + "<br/> X = " + event.pageX + "<br/>Y = " + event.pageY + "<br/>Target Type = " + event.target.type + "<br/>Target Tag Name = " + event.target.tagName; $('#divResult').html(eventDetails); } }); </script> </head> <body style="font-family:Arial"> <input id="btn" type="button" value="Click me" /><br /><br /> <div id="divResult"></div> </body> </html> Cross-browser solution : For the above code to work in all browsers including Internet Explorer 8 and earlier versions, modify getEventDetails() function as shown below. Notice that we are converting JavaScript event object to jQuery event object using $.event.fix() function getEventDetails(event) { var e = $.event.fix(event); var eventDetails = "Event = " + e.type + "<br/> X = " + e.pageX + "<br/>Y = " + e.pageY + "<br/>Target Type = " + e.target.type + "<br/>Target Tag Name = " + e.target.tagName; $('#divResult').html(eventDetails); }
Views: 37070 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: 22147 kudvenkat
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: 22809 kudvenkat
javaScript Method chaining tutorial ( function chaining)
 
12:18
We will learn how to jquery style chain functions ( Methods) using pure javaScript. in Jquery we can do $('.class').addClass('new').removeClass('old'). we can achive similar chaining using pure javascript. Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement without requiring variables to store the intermediate results. javascript advance tutorials javascript function chaining jquery like function chaining javascript how to chain functions java script function chaining method chaining chaining module method calls method cascading ECMAScript 5 ECMAScript6
Views: 37432 techsith
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: 66292 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: 45162 kudvenkat
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 ========================================================
Javascript + jQuery DOM: manipulating classes
 
04:49
Manipulating classes on HTML elements, following a best practice naming convention. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/dom/
Views: 790 Thomas Bradley
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: 4835 Anishnirmal
AJAX Crash Course (Vanilla JavaScript)
 
01:09:43
In this video we will dive into AJAX with Vanilla JS and NO JQUERY. We will examine the XHR object and how it works. This is a beginner friendly tutorial for anyone that has very basic JavaScript knowledge. We will make xhr requests to a txt file, local json files, an external API and even PHP files. CODE: Files for this course http://www.traversymedia.com/downloads/ajaxcrash.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia NEW DISCORD CHAT SERVER: https://discord.gg/traversymedia
Views: 113866 Traversy Media
jQuery case insensitive attribute selector
 
09:03
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-case-insensitive-attribute.html In this video we will discuss, how to write a jQuery case-insensitive attribute value selector. Let us understand this with an example. The following example, only selects DIV 1. This is because jQuery attribute value selector is case-sensitive. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title="DivTitle"]').css('border', '3px solid red'); }); [/script] [/head] [body] [div title="DivTitle"] DIV 1 [/div] [br /] [div title="DIVTITLE"] DIV 2 [/div] [br /] [div title="divtitle"] DIV 3 [/div] [/body] [/html] Use the following code to make the jQuery attribute value selector case-insensitive [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return $(this).attr('title').toLowerCase() == 'divtitle'; }).css('border', '3px solid red'); }); [/script] The above script should select all the 3 divs. Now let us look at an example of making attribute contains selector [name*="value"], case-insensitive. The following example, selects only DIV 1 element. This is because the attribute contains selector is case-sensitive. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title*="Div"]').css('border', '3px solid red'); }); [/script] [/head] [body] [div title="DivTitle1"] DIV 1 [/div] [br /] [div title="DIVTITLE2"] DIV 2 [/div] [br /] [div title="divtitle3"] DIV 3 [/div] [/body] [/html] To make attribute contains selector case-insensitive, use filter() method and regular expression as shown below. [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return (/Div/i).test($(this).attr('title')); }).css('border', '3px solid red'); }); [/script] OR [script type="text/javascript"] $(document).ready(function () { $('div[title]').filter(function () { return RegExp('Div','i').test($(this).attr('title')); }).css('border', '3px solid red'); }); [/script] The above script should select all the 3 divs. Visual Studio Keyboard Shortcuts Convert Selected Text to Upper Case - CTRL + SHIFT + U Convert Selected Text to Lower Case - CTRL + U
Views: 73407 kudvenkat
jQuery method chaining
 
11:40
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-method-chaining.html In this video we will discuss 1. What is method chaining 2. How method chaining works 3. When will method chaining not work Let us understand this with an example. Consider the following HTML <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> Our jQuery code should do the following 1. Change the color of all the list items to blue 2. All the list items should slide down (animation) 3. All the list items should slide up (animation) 4. Change the title attribute of all the list items to MY TITLE One way to do this is by using the following jQuery code. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').css('color','blue'); $('li').slideUp(1000); $('li').slideDown(1000); $('li').attr('title', 'MY TITLE'); }); </script> </head> <body style="font-family:Arial"> <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> </body> </html> Instead the jQuery methods can be chained as shown below. <script type="text/javascript"> $(document).ready(function () { $('li').css('color', 'blue').slideUp(1000).slideDown(1000).attr('title', 'MY TITLE'); }); </script> How does method chaining work 1. $('li') returns a jquery collection object that contains all the elements that match the selector 2. On the collection object css() method is called. This method applies the color to all the elements in the collection and returns the collection again. 3. On the collection that is returned by the css() method, the slideUp() method is called. 4. This process continues until we reach the last method in the chain. When chaining methods like this, the line of code will become quite long and the readability will be lost. To improve the readability of the code you can format chained methods as shown below. <script type="text/javascript"> $(document).ready(function () { $('li') .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script> When will method chaining not work Method chaining will not work if a method in the chain does not return an object. In the example below, text() method returns a string that contains the text of all the list items and not an object. Hence the chaining does not work in this case. <script type="text/javascript"> $(document).ready(function () { $('li') .text() .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script> With the same example, method chaining works, if you use text() method to set the value for the list item. In this case, text() method sets a value for each list item in the jQuery collection object and returns that collection object. Hence the chaining works. <script type="text/javascript"> $(document).ready(function () { $('li') .text('MY VALUE') .css('color', 'blue') .slideUp(1000) .slideDown(1000) .attr('title', 'MY TITLE'); }); </script>
Views: 54542 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: 47479 kudvenkat
Creating a Stopwatch in JavaScript from Scratch
 
31:45
A tutorial for creating a stopwatch in HTML/CSS/JavaScript with a focus on object-oriented programming and closures. Link to Code: https://git.io/v55oC --- GitHub: https://github.com/saadq Twitter: https://twitter.com/saadquadri
Views: 17735 Saad
JavaScript and jQuery Tutorial (for Beginners)
 
21:05
In this lesson we learn what JavaScript is used for and how to leverage the popular JavaScript library named jQuery. 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 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 Link to the examples shown in the video: http://learnwebcode.com/javascript-and-jquery-tutorial-for-beginners/ Want to learn more? Check out the second lesson in this JavaScript series: https://www.youtube.com/watch?v=gIvR-WX5lIQ&list=UUHRp19HU7Y2LwfI0Ai6WAGQ
Views: 80941 LearnWebCode
Custom Data Attributes HTML JavaScript CSS Tutorial
 
11:58
Source: http://www.developphp.com/video/JavaScript/Custom-Data-Attributes-HTML-JavaScript-CSS-Tutorial Learn to use custom data attributes. Custom data attributes allow authors to create custom data to apply to their HTML elements when no other attributes make sense to use to store extra data. They help extend the information that html elements can communicate to a program or script. Custom data attributes can be accessed through both JavaScript and CSS.
Views: 24456 Adam Khoury
4 - How to Animate Elements with jQuery by Changing CSS properties
 
06:30
This video will show you how to animate objects/html elements using the jQuery animate function. You will set css properties and then apply a certain amount of time in milliseconds over which the modification will take place/occur. This javascript technique shows you how to move things on your webpage.
Difference between $ each and  each
 
10:13
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/difference-between-each-and-each.html In jQuery there are 2 versions of each() method 1. .each() 2. $.each() or jQuery.each() Please note : $ is shortcut for jQuery. What is the difference .each is used to iterate over the items in a jQuery collection Example : In this example, the jQuery selector $('li') returns a jQuery object collection. So to loop thru the objects in the jQuery collection we are using .each() method. Notice this method is called on the jQuery object collection, that the selector returns, so the .each() method knows the items it has to iterate over. The callback method has 2 parameters 1) index - The index of the element 2) element - The DOM element that we are currently iterating over Since the element is a raw DOM object, to use use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below. $(element) Instead of using element parameter, you can also use this keyword, which also refers to the raw DOM element that we are currently iterating over. To use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below. $(this) 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 () { var result = ''; $('li').each(function (index, element) { result += 'Index = ' + index + ', Value = ' + $(element).text() + '<br/>'; //or //result += 'Index = ' + index + ', Value = ' + $(this).text() + '<br/>'; }); $('#resultDiv').html(result); }); </script> </head> <body style="font-family:Arial"> <ul> <li>US</li> <li>India</li> <li>UK</li> <li>Canada</li> <li>Australia</li> </ul> <div id="resultDiv"></div> </body> </html> $.each() or jQuery.each() is used for iterating over javascript objects and arrays. Example : In the example below intArray is a JavaScript array. So to loop thru the elements in the array we are using $.each() function. Notice this function has 2 parameters 1) The JavaScript object or array that we want to iterate over 2) The callback function that will execute on each iteration If you want to use .each() instead of $.each() function on the intArray object, wrap it using the jQuery wrapper $ as shown below. $(intArray).each(function (index, element) { result += 'Index = ' + index + ', Value = ' + element + '<br />'; }) <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var intArray = [100, 200, 300, 400, 500]; var result = ''; $.each(intArray, function (index, element) { result += 'Index = ' + index + ', Value = ' + element + '<br/>'; }); $('#resultDiv').html(result); }); </script> </head> <body style="font-family:Arial"> <div id="resultDiv"></div> </body> </html> Using $.each() to iterate over a JavaScript object : In this example, jsObject is a JavaScript object. In this example, $.each() is used to iterate over the JavaScript object properties. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var jsObject = { 'USA': 'Washington D.C.', 'India': 'New Delhi', 'UK': 'London', 'Australia': 'Canberra' }; var result = ''; $.each(jsObject, function (key, value) { result += key + ' - ' + value + '<br/>'; }); $('#resultDiv').html(result); }); </script> </head> <body style="font-family:Arial"> <div id="resultDiv"></div> </body> </html> In summary, .each() method is used to iterate over the items in a jQuery collection where as $.each() method is used to iterate over javascript objects or arrays.
Views: 43565 kudvenkat
jquery tooltip widget
 
08:32
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/06/jquery-tooltip-widget.html In this video we will discuss jQuery tooltip widget with examples. To get a tooltip without using jQuery all you do is set the title attribute. At this point when we hover over the element the content that is specified as the value for the title attribute will be displayed as the tooltip. jQuery Tooltip widget replaces native tooltip and allows lot of customization 1. Display other content than just the title, like inline footnotes or extra content retrieved via Ajax. 2. Customize the positioning, e.g., to center the tooltip above elements. 3. Add extra styling to customize the appearance, for warning or error fields. In the following example label element display the native tooltip where as the textbox displays jQuery tooltip HTML <label id="lblName" for="txtName" title="Full Name">Name</label> <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip(); In the following example we are calling tooltip() function on the document object, so this will display jQuery tooltip for all the elements that have title attribute $(document).tooltip(); You can also use the content option, to specify the content for tooltip. When both title attribute and content options are specified, the content specified by the content option will override the content specified by the title attribute. HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ content : '<u>content option</u> tooltip overriding title attribute tooltip' }); content option supports multiple types. string or a function. HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $(document).ready(function () { $('#txtName').tooltip({ content: toolTipFunction }); function toolTipFunction() { return 'Tooltip from a function'; } }); Set track option to true to make the tooltip follow the mouse HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ track: true }); show and hide options can be used to animate the showing and hiding of the tooltip. Both of these options support multiple types. For the detailed description please check the following jquery documentation page http://api.jqueryui.com/tooltip In the following example we are using a JavaScript object, to specify the animation duration, effect and delay while the tooltip is being shown and hidden HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ show : {delay:10, duration:500, effect: 'slideDown'}, hide: { delay: 10, duration: 500, effect: 'slideUp' } });
Views: 19259 kudvenkat

Human resources assistant cover letter example
It faculty cover letter
Polizeiwissenschaft newsletter formats
Quality assurance assistant cover letter
How to write a general cover letter for an internship