Home
Search results “Jquery add style id”
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: 48356 kudvenkat
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: 153456 kudvenkat
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: 52515 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: 60357 kudvenkat
jQuery attribute selector
 
08:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-attribute-selector.html In this video we will discuss selecting elements 1. That have specified attribute 2. That have specified attribute values Syntax : $('[attribute]') $('[attribute="value"]') $('[title]') // Selects all elements that have title attribute $('div[title]') // Selects all div elements that have title attribute $('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle $('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle Selects all elements with title attribute and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('[title]').css('border', '5px solid red'); }); [/script] [/head] [body] [div title="div1Title"] DIV 1 [/div] [br /] [div title="div2Title"] DIV 2 [/div] [p title="pTitle"] This is a paragraph [/p] [span title="div1Title"] SAPN 1 [/span] [br /][br /] [span] SPAN 2 [/span] [/body] [/html] Selects all div elements with title attribute and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title]').css('border', '5px solid red'); }); [/script] Selects all elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with title attribute value - div1Title, and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('div[title="div1Title"]').css('border', '5px solid red'); }); [/script] Selects all div elements with both title and style attributes, and sets 5px solid black border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div[title][style]').css('border', '5px solid black'); }); [/script] [/head] [body] [div title="divTitle" style="background-color:red"] Red DIV [/div] [br /] [div title="divTitle" style="background-color:green"] Green DIV [/div] [br /] [div title="divTitle"] Normal Div [/div] [br /] [div] Normal Div without any attributes [/div] [/body] [/html] Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title="divTitle"][style="background-color:red"]').css('border', '5px solid black'); }); [/script] Selects all div elements with either title or style attributes, and sets 5px solid black border [script type="text/javascript"] $(document).ready(function () { $('div[title],[style]').css('border', '5px solid black'); }); [/script]
Views: 100778 kudvenkat
jQuery tutorial in Hindi Part 3: jQuery CSS Tutorial in Hindi | jQuery Multiple CSS Methods
 
11:42
Welcome all, we will see the jQuery CSS Tutorial in Hindi and How to change CSS using jQuery. jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. Set Multiple CSS Properties To set multiple CSS properties, use the following syntax: css({"propertyname":"value","propertyname":"value",...}); #jquerycss
Views: 2128 Thapa Technical
jQuery video tutorial 10 - jQuery CSS Method
 
11:07
jQuery CSS() Method: The jQuery CSS() method is used to set one or more CSS style(s) to the selected HTML element(s). It is also used to get the value of a CSS style applied to the selected HTML element(s). Setting the single CSS style or property: Syntax: $(selector).css(“css-property”,”value”); It helps us to select any html element(s) targeted by the given selector and apply the given CSS property. Ex: $(“#firstp”).css(“background-color”,”red”); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS property background color to red . Setting multiple CSS styles or properties: Syntax: $(selector).css({“css-property1”:”value1”,” css-property2”:”value2”,….}); It helps us to select any html element(s) targeted by the given selector and apply the given set of CSS properties. Ex: $(“#firstp”).css({“background-color”:”green”,”color”:”white”}); It selects any html element(s) whose id attribute value is set to firstp and applies the CSS properties background color green and text color white . Getting the value of a single CSS style or property: Syntax: $(selector).css(“css property”); It helps us to select any html element(s) targeted by the given selector and return the value of a given CSS property. Ex: alert($(“#firstp”).css(“background-color”)); It selects any html element(s) whose id attribute value is set to firstp and returns the value of background-color CSS property. The current implementation of the CSS() method in jQuery allows us to set multiple CSS properties to the selected HTML element(s), but only allows us to get one CSS property at a time. ======================================================== Follow the link for next video: https://youtu.be/HpRdrhCq158 Follow the link for previous video: https://youtu.be/UvMuWgBzIHc ========= For more benefits & Be up to date =================== Subscribe to the channel: https://www.youtube.com/chidrestechtu... Like the Facebook fan page: https://www.facebook.com/ManjunathChidre Visit to Chidre's Tech Tutorials website: http://www.chidrestechtutorials.com ========================================================
jQuery 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: 76374 kudvenkat
Change the CSS of an Element Using jQuery, jQuery in freeCodeCamp
 
02:05
In this challenge we learn how to change and manipulate our css, by selecting our target1 ID, and applying the .css color of red.
Views: 531 We Will Code
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: 30758 kudvenkat
JQuery tutorial 7 - ID and class selectors
 
06:03
In this tutorial I show you to select elements on your web page by ID and by Class. . Follow me on Facebook: www.facebook.com/quentin.watt Follow me on Twitter: www.twitter.com/QuentinWatt Don't forget to subscribe: www.youtube.com/QuentinWatt Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS
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: 47567 kudvenkat
jQuery class selector
 
10:57
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-class-selector.html In this video we will discuss jQuery class selector i.e selecting elements using their class name Syntax : $('.class') jQuery class selectors uses JavaScript's native getElementsByClassName() function if the browser supports it. $('.small') // Selects all elements with class small $('.small,.big') // Selects all elements with class small or big $('div.small,.big') // Selects div elements with class small and any element with class big Selects all elements with class "small" and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [span class="small"] Span 1 [/span] [br /][br /] [div class="small"] Div 1 [/div] [br /] [span class="big"] Span 2 [/span] [p class="big"]This is a paragraph[/p] [/body] [/html] Selects all elements with class "small" or "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, .big').css('border', '5px solid red'); }); [/script] Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border [script type="text/javascript"] $(document).ready(function () { $('.small, span.big').css('border', '5px solid red'); }); [/script] Selects all elements with class small that are nested in a an element with id=div2 and sets 5px solid red border [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#div2 .small').css('border', '5px solid red'); }); [/script] [/head] [body] [div id="div1" class="small"] DIV 1 [/div] [br /] [div id="div2"] Div 2 [br /] [div class="small"] DIV 3 [/div] [br /] [span class="small"] SPAN [/span] [/div] [/body] [/html] Selects all elements with class small and sets 5px solid red border. Notice div1 has 2 classes - small and big. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [/div] [/body] [/html] Selects all elements that has both the classes - small and big. There should be no space between the class names. [script type="text/javascript"] $(document).ready(function () { $('.small.big').css('border', '5px solid red'); }); [/script] If you have a space between the two class names then we are trying to find descendants, i.e. find elements with class big that are descendants of an element with class small. [html] [head] [title][/title] [script src="Scripts/jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('.small .big').css('border', '5px solid red'); }); [/script] [/head] [body] [div class="small big"] DIV 1 [/div] [br /] [div class="small"] DIV 2 [div class="big"] DIV 3 [/div] [/div] [/body] [/html] Another way to selects all elements that has both the classes - small and big is by using filter method. But this approach is slower because it will first create a list of objects with class "small" and then removes elements that does not have class "big" [script type="text/javascript"] $(document).ready(function () { $('.small').filter('.big').css('border', '5px solid red'); }); [/script]
Views: 104322 kudvenkat
NoteToSelf: jQuery .css() Method Adds Inline Styles
 
09:37
When using jQuery's .css() method, you may run into confusing scenarios where your rendered styles do not match what you are expecting. This video uses a simple example of how jQuery's .css() method writes inline styles in an HTML div element. Do to the specificity of an inline style, the outer styles will be overridden. Furthermore, this video will show you how you can easily remove the inline style by passing an empty string to the .css() method.
Views: 101 jalbao
Change ID of Form Element Using Jquery
 
01:50
Please visit http://www.technomark.in/Change-The-ID-Of-An-Element-Using-Jquery.aspx for more information. Change ID of Form Element Using Jquery, Change ID of Form Element Using JavaScript, Change ID of Form Element, Change ID of Element Using Jquery, Change ID of Element, Remove ID of Element Using jQuery, Replace ID of Form Element Using Jquery, Replace ID of Form Element, Replace ID of Element Using Jquery, jQuery, From element, HTML, PHP
Views: 177 Admin Technomark
Part 16 - Jquery Effects - Add/Remove CSS class | addClass, removeClass, toggleClass and hasClass
 
18:50
OVERVIEW:: In this video I have explained, How to add/remove CSS class in jquery ( addClass, removeClass, toggleClass and hasClass) SOCIAL : Find Us on FB : http://facebook.com/technotipstutorial Subscribe US : http://youtube.com/aapkanigam Follow us on Twitter : @technotipsMVC OR @aapkanigam VISIT OUR BLOG HERE :http://technotipstutorial.blogspot.com INTRODUCTION : #Visibility Effects 1. show(): To display hidden elements 2. hide(): To hide elements 3. toggle(): To show and hide elements with single button #Sliding effects 1. slideUp(): Hide elements with animation effect from down to up direction. 2. slidedown(): Display elements with animation effect from up to down direction. 3. slideToggle(): Hide and show the element with animation effect. It does the task of both slideUp and slideDown #Fading effects 1. fadeIn(): Display elements by increasing opacity. 2. fadeOut(): Hide elements by decreasing opacity.. 3. fadeToggle(): Display and Hide elements by increasing and decreasing opacity. It does the task of both fadeIn and fadeOut methods. 4. fadeTo(): fade to the specified opacity with animation effects #Adding Removing CSS class 1. addClass(): add CSS class to an element 2. removeClass(): remove CSS class from an element 3. toggleClass(): add and remove CSS class 4. hasClass(): return true if element consist specified class name RECOMMENDATION: Part 1. What is Jquery? : https://www.youtube.com/watch?v=hq3AtjlAjgw Part 2: https://www.youtube.com/watch?v=rareeV-lMUE Part 3. What are selectors? : https://www.youtube.com/watch?v=Qh8Gk-NKVuc Part 4. Element selectors :https://www.youtube.com/watch?v=x4Q9cFM0Kug Part 5. Attribute selectors: https://www.youtube.com/watch?v=-npNwso54YU What is jquery show hide toggle slideUp slidedown slideToggle fadeIn fadeOut fadeToggle fadeTo addClass removeClass toggleClass hasClass Jquery effects step by step jquery tutorial Id selectors Class selectors Element selectors Attribute selectors Jquery Plugins Jquery tutorial technotips ashish technotips tutorial asp.net mvc with jquery best video in jquery Jquery Plugins Jquery AJAX JSON object
Views: 909 Technotips - Ashish
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: 45768 kudvenkat
jQuery Element Selector
 
11:54
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-element-selector.html In this video we will discuss jQuery Element Selector, i.e selecting elements by tag name. To select the elements by tag name use jQuery Element Selector Syntax : $(element) $('td') // Selects all td elements $('div a') // Select all anchor elements that are descendants of div element $('div, span, a') // Selects all div, span and anchor elements Alerts the total count of td elements on the page [script type="text/javascript"] $(document).ready(function () { alert($('td').length); }); [/script] Selects all the tr elements on the page and changes their background colour to red [script type="text/javascript"] $(document).ready(function () { $('tr').css('background-Color', 'red'); }); [/script] Alerts the HTML content of the table [script type="text/javascript"] $(document).ready(function () { alert($('table').html()); }); [/script] Alerts the HTML content of each table row [script type="text/javascript"] $(document).ready(function () { $('table tr').each(function () { alert($(this).html()); }); }); [/script] Select and changes the background colour of all the div, span and anchor elements [script type="text/javascript"] $(document).ready(function () { $('div, span, a').css('background-Color', 'yellow'); }); [/script] Select all anchor elements that are descendants of div element [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('div a').css('background-Color', 'yellow'); }); [/script] [/head] [body] [div] [a href="http://pragimtech.com"]PragimTech[/a] [/div] [br /] [a href="http://microsoft.com"]Microsoft[/a] [/body] [/html] Changes the background color of even rows to gray and odd rows to yellow in both the tables. [script type="text/javascript"] $(document).ready(function () { $('tr:even').css('background-Color', 'gray'); $('tr:odd').css('background-Color', 'yellow'); }); [/script] To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector. [script type="text/javascript"] $(document).ready(function () { $('#table1 tr:even').css('background-Color', 'gray'); $('#table1 tr:odd').css('background-Color', 'yellow'); }); [/script]
Views: 133354 kudvenkat
jQuery video tutorial 14 - jQuery id selector
 
05:59
jQuery ID selector : To select html element(s) by their id attribute value, we use jQuery id selector Syntax of jQuery ID selector: $(“CSS ID selector”).action(parameters); To the jQuery function, if we pass the CSS ID selector then it is called as jQuery ID selector I.e. a jQuery function with CSS ID selector as a parameter is called as jQuery ID selector Ex: $("#firstp").css( {"border":"2px solid blue"} ); It selects any HTML element whose id attribute value is set to “firstp” and applies the border of 2px solid blue Note: in CSS hash(#) symbol indicates ID selector and id attribute value should be unique ======================================================== Follow the link for next video: https://youtu.be/l5Y8wADOXBY Follow the link for previous video: https://youtu.be/v5ZE2zi48sQ ========= 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 ========================================================
Target Elements by ID Using jQuery, jQuery in freeCodeCamp
 
02:04
In this lesson we learn how to select ID elements, and we give our ID element 'target3' the .addClass("fadeOut).
Views: 799 We Will Code
How to select li item inside ul element using jquery selector
 
02:39
In this tutorial I will show you that how can we select li item inside ul element using jquery selector.
Views: 3691 Mr. Developer
jQuery: CSS and classes
 
05:32
Learn how to use jQuery to modify CSS and classes with the css, addClass, removeClass, and toggleClass methods. 💻 Code: https://codepen.io/beaucarnes/pen/pryoXJ 🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau - Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on technology: https://medium.freecodecamp.com And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp
Views: 4113 freeCodeCamp.org
7. JQuery for Beginners - Class / Id Selectors
 
03:13
FREE Educational tutorials http://villageparksource.com/village-park-university/
Views: 1237 Village Park Source
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: 24965 Adam Khoury
How to add Smooth Scrolling to your one page website with jQuery
 
19:50
Smooth scrolling not only looks cool but, for one-page sites, it can also help make for a better user experience. In this video, I take a look at how you can add smooth scrolling to your site with just a few lines of jQuery. Not only do I look at smooth scrolling though, but the demo site I'm using it based on Bootstrap, which has a nice 'active' link class which highlights one of the links in the navigation. I look at how, with a few more lines of jQuery, we can have that active link class switch between links in the navigation as we scroll down the page, once again helping with the user experience! And sure, you could find some scripts out there that do it for you, but being able to write your own jQuery can be really useful. You're writing the exact code that you need in your one case and not something which is bloated and heavy for no reason. My goal with this video isn't just for you to be able to copy my code, but to understand a bit more of how jQuery is working and to be able to write a bit of your own scripts going forward. Find the codepen here: http://codepen.io/kevinpowell/pen/dWzGox -- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Views: 47281 Kevin Powell
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: 67434 kudvenkat
jquery animate function
 
12:26
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-animate-function.html jQuery animate function let's us animate CSS properties. The following example animates the div element, while changing the font-size property of the div element from its initial size to 50 pixels over a period of 2000 milli-seconds (2 seconds). <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myButton').click(function () { $('#myDiv').animate({ 'font-size': '50' }, 2000); }); }); </script> </head> <body style="font-family:Arial"> <input type="button" id="myButton" value="Animate" /> <br /><br /> <div id="myDiv"> jQuery animate function </div> </body> </html> Syntax of jquery animate function .animate( properties [, duration ] [, easing ] [, complete ] ) Animate function has 4 parameters. Only the first parameter (properties) is the required parameter. Rest 3 are optional. properties - An object of CSS properties and values duration - The duration for animation in milliseconds. Default is 400. easing - Easing function to use for the transition. Default is swing. You could also use linear. complete - A function to call once the animation is complete What is jQuery easing Easing is a technique where the speed and/or direction of animation are changed while the animation is in progress. Easing can make the animation start off slow and gradually speed up, start up fast and gradually slow down, and a whole host of other effects. The difference between linear and swing easing is very subtle. The following page shows all the easings provided by jQuery UI https://jqueryui.com/easing The following example increases the height and width of the image to 400 pixels on mouseover. On mouseout the height and width are reduced to 100 pixels. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').on({ mouseover: function () { $(this).animate({ 'height': 400, 'width': 400, }, 3000); }, mouseout: function () { $(this).animate({ 'height': 100, 'width': 100, }, 3000); } }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" src="/Images/Tulips.jpg" /> </body> </html> In the following example, several calls to animate() method are chained together. By default these calls are placed into a queue to be executed one after the other in series rather than executing all of them simultaneously in parallel. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#myImage').click(function () { $(this) .animate({ 'left': '300' }) .animate({ 'top': '200' }) .animate({ 'left': '10' }) .animate({ 'top': '10' }); }); }); </script> </head> <body style="font-family:Arial"> <img id="myImage" height="100" width="100" style="position:absolute" src="/Images/Tulips.jpg" /> </body> </html> Please note: By default, all HTML elements have a static position, and cannot be moved. To modify the position , set the CSS position property of the element to fixed, absolute or relative.
Views: 40271 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: 23216 kudvenkat
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: 4177 Shinerweb
jQuery each function
 
15:38
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-each-function.html In this video we will discuss 1. Use of jQuery each function 2. How to exit from each function in jQuery 3. Implicit iteration in jQuery 4. Performance considerations when using jquery each function jQuery each function is used to iterate over the items in a collection. For each item in the collection the anonymous function is called. The index of the element and the element itself are passed to the anonymous function. $('li').each(function (index, element) { alert(index + ' : ' + $(element).text()); }); To refer to the current element that we are iterating over you can also use this keyword. $('li').each(function (index) { alert(index + ' : ' + $(this).text()); }); If you don't care about the index and just need the text of the list item, then you can get rid of the index parameter $('li').each(function () { alert($(this).text()); }); Replace < with LESSTHAN symbol and > with GREATERTHAN symbol How to exit from each function in jQuery : To exit from each function, return false. <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { if ($(this).text() == 'UK') { return false; } alert($(this).text()); }); }); </script> Implicit iteration in jQuery : The $('li') selector returns all list item elements. Notice that we are calling the css() jquery function on the jquery collection itself. In this case, css() method implicitly iterates over each element in the entire collection. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').css('color', 'red'); }); </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> There is no need to explicitly iterate over each element in the collection. Most jQuery methods implicitly iterate over the entire collection. <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { $(this).css('color', 'red'); }); }); </script> Performance considerations when using jquery each function <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('li').each(function () { $('#divResult').html($('#divResult').html() + '<br/>' + $(this).text()) }); }); </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="divResult"></div> </body> </html> From a performance standpoint, there are 2 problems with the above code. 1. jQuery needs to search the DOM for div element with id = divResult, for each list item in the collection. Since there are 5 list items, jquery searches the DOM 5 times for the same div element with id = divResult. The performance of the above code can be improved by caching the divResult element. 2. The DOM element (div element with id = divResult) is being updated on each iteration. Again this is bad for performance. To improve the performance build a string variable with the required data on each iteration of the loop. Once the loop has completed, update the DOM element with the value that is present in the string varibale. This will ensure that the DOM element is updated only once and this is much better for performance. The following is much better from a performance standpoint. <script type="text/javascript"> $(document).ready(function () { var result = ''; $('li').each(function () { result += '<br/>' + $(this).text(); }); $('#divResult').html(result); }); </script>
Views: 84257 kudvenkat
jquery no geek zone 4 - document object model, css, html id class selectors
 
07:57
Explain jQuery Document Object Model and its relationship to HTML element, css, id and class selectors - using non technical language. I explain that selecting parts of your web page is like selecting a graphic in a drawing program, but instead of using the mouse, we use Document Object Model aka D.O.M.
Views: 76 Chriss Gaines
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: 22704 kudvenkat
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: 248 WebTecho Tutorials
jquery show hide password
 
11:01
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-show-hide-password.html In this video we will discuss how to toggle password visibility using show / hide password checkbox. Here is what we want to achieve 1. When Show password checkbox IS NOT CHECKED, the password should be masked 2. When Show password checkbox IS CHECKED, the password should be in clear text and visible to the user One of the simplest ways of achieving this is by changing the type attribute of the password field depending on the checked status of Show password checkbox 1. If the Show password checkbox is CHECKED change the type to text 2. If the Show password checkbox is NOT CHECKED change the type to password Replace < with LESSTHAN symbol and > with GREATERTHAN symbol The following is the HTML and jQuery code <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#cbShowPassword').click(function () { $('#txtPassword').attr('type', $(this).is(':checked') ? 'text' : 'password'); }); }); </script> </head> <body style="font-family:Arial"> Password : <input type="password" id="txtPassword" /> <input type="checkbox" id="cbShowPassword" />Show password </body> </html> The problem with the above approach is that it does not work in IE 8 and earlier versions. This is because with IE8 and earlier versions the type attribute of input elements cannot be changed once set. The following code works in all browsers including IE8 and earlier versions. When Show password checkbox is clicked 1. Retrieve the value the from the password textbox and store it in a variable for later use. 2. Delete the password input filed. 3. If the "Show password" checkbox is CHECKED, then add a new input filed of type text, else add a new input filed of password. In both the cases set the value attribute of the input element = the variable created in Step 1. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#cbShowPassword').click(function () { var currentPassowrdFiled = $('#txtPassword'); var currentPassword = currentPassowrdFiled.val(); currentPassowrdFiled.remove(); if ($(this).is(':checked')) { $(this).before('<input type="text" id="txtPassword" value="' + currentPassword + '">'); } else { $(this).before('<input type="password" id="txtPassword" value="' + currentPassword + '">'); } }); }); </script> </head> <body style="font-family:Arial"> Password : <input type="password" id="txtPassword" /> <input type="checkbox" id="cbShowPassword" />Show password </body> </html>
Views: 26528 kudvenkat
4.1 Type (Tag), Class, and ID Selectors
 
08:14
HTML5, CSS3, and jQuery with Adobe Dreamweaver CS5.5: Learn by Video . 1. Introduction to HTML5, CSS3, and jQuery 2. Using the Right Tools in Dreamweaver CS5.5 3. Practical HTML5 4. Everyday CSS Selectors 5. CSS3 Effects Without Images 6. CSS3 Backgrounds 7. CSS Media Queries for Phones, Tablets, and Desktops 8. Advanced CSS Selectors 9. Introduction to jQuery 9.1 JavaScript Refresher 9.2 jQuery Basics 10. Enhancing Forms with jQuery . . .. With HTML5 and CSS3 bursting onto the scene far more quickly than anticipated and the rapid spread of web-enabled smartphones and tablets, designing and building a website has suddenly become more complex. Fortunately, JavaScript libraries like jQuery reconcile browser incompatibilities and make light work of adding dynamic features, and Dreamweaver CS5.5 has risen to the challenge by providing the tools you need to build modern websites with HTML5, CSS3, and jQuery. In this course, experienced author and trainer David Powers explains which parts of HTML5 and CSS3 you can use now and how to convert existing pages to HTML5 or build new ones from scratch. You'll learn how to adapt a website that was originally designed for desktop computers so that it works properly on mobile phones and tablets and how to use CSS media queries to apply different styles depending on screen width, viewing the changes in real time in Dreamweaver´s Live view. You'll also learn the basics of jQuery and how to use it to enhance forms, how to create CSS3 effects without images, how to choose the right CSS selector, and much more. HTML5 (Programming Language),JQuery (Software),Cascading Style Sheets (Programming Language),JavaScript,Dreamweaver,Adobe Dreamweaver (Software),CS5,html5 template,html5 tutorial,html5 video tutorial,html5 video tutorials,html5 editor,html5 and css3,html5 css3 tutorial,html5 css3 examples,html5 demos,w3c html5 validator,html5 vs flash,Marketing,jquery slider,jquery plugins,jquery modal,ui jquery,tooltip jquer,jquery horizontal menu,jquery slide show,accordion jquery,jquery animation
Views: 385 Programming
jQuery Tutorial, How to Select by ID and Class
 
04:55
Access the entire course and source code on Zenva Academy https://academy.zenva.com/product/programming-for-entrepreneurs-jquery/?zva_src=youtube jQuery is the world’s most used JavaScript library to create rich web applications that just feel natural to use. In this comprehensive course you’ll learn how to use jQuery to work with the DOM, use events, effects and animations, AJAX, JSON and to create interactive AJAX forms. This course is 100% jQuery 2.x compliant! This course is taught by Pablo Farias Navarro, founder of ZENVA and web application developer. Pablo has been using jQuery since 2007. More than 20,000 students are learning how to code with our courses, in particular our Programming for Entrepreneurs course series. This course builds on our previous HTML and JavaScript free courses and takes you to the next step, which is to make your website or HTML5 interactive and dynamic. Some of the things you will learn in this course: When to use jQuery 1.x or 2.x. CSS selectors and DOM traversing functions in depth to find any element you want. DOM manipulation to add or remove custom HTML content anywhere, whenever you decide. Working with events to create interactive sites. Listen to changes in select dropdowns and checkboxes. jQuery animations and effects. Slide, fade, show, hide. AJAX to load dynamic HTML from the server. Working with JSON from the server. Interactive forms that display extra fields according to the values of other fields. AJAX form submission the easy way. Dealing with cache issues in AJAX requests. Learn jQuery in a 2.x compliant manner. Homepage: http://zenva.com YouTube: http://youtube.com/fariazz2 GameDev Academy: http://gamedevacademy.org HTML5 Hive: http://html5hive.org De Idea A App: http://deideaaapp.org Facebook: http://facebook.com/ZenvaDev Twitter: @ZenvaTweets Medium: https://medium.com/@zenva
Views: 572 Zenva
jQuery Tutorial: Selection by CSS Style
 
03:59
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 call wcf service using jquery
 
12: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/06/how-to-call-wcf-service-using-jquery.html In this video we will discuss, how to call wcf service using jquery ajax Step 1 : Create SQL Server table and insert employee data Create table tblEmployee ( Id int primary key identity, Name nvarchar(50), Gender nvarchar(10), Salary int ) GO Insert into tblEmployee values ('Mark', 'Male', 50000) Insert into tblEmployee values ('Sara', 'Female', 60000) Insert into tblEmployee values ('John', 'Male', 45000) Insert into tblEmployee values ('Pam', 'Female', 45000) GO Step 2 : Create a stored procedure to retrieve employee data by ID Create procedure spGetEmployeeById @Id int as Begin Select ID, Name, Gender, Salary from tblEmployee where ID = @Id End Step 3 : Create new asp.net web application project. Name it Demo. Step 4 : Include a connection string in the web.config file to your database. <add name="DBCS" connectionString="server=.;database=SampleDB;integrated security=SSPI" /> Step 5 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code. namespace Demo { public class Employee { public int ID { get; set; } public string Name { get; set; } public string Gender { get; set; } public int Salary { get; set; } } } Step 6 : Add a new WCF Service (Ajax-enabled). Name it EmployeeService.svc. Copy and paste the following code. using System; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.ServiceModel; using System.ServiceModel.Activation; namespace Demo { [ServiceContract(Namespace = "")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class EmployeeService { [OperationContract] public Employee GetEmployeeById(int employeeId) { Employee employee = new Employee(); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetEmployeeById", con); cmd.CommandType = CommandType.StoredProcedure; SqlParameter parameter = new SqlParameter(); parameter.ParameterName = "@Id"; parameter.Value = employeeId; cmd.Parameters.Add(parameter); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { employee.ID = Convert.ToInt32(rdr["Id"]); employee.Name = rdr["Name"].ToString(); employee.Gender = rdr["Gender"].ToString(); employee.Salary = Convert.ToInt32(rdr["Salary"]); } } return employee; } } } Step 7 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and jQuery code <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnGetEmployee').click(function () { var empId = $('#txtId').val(); $.ajax({ url: 'EmployeeService.svc/GetEmployeeById', method: 'post', contentType: "application/json;charset=utf-8", data: JSON.stringify({ employeeId: empId }), dataType: 'json', success: function (data) { $('#txtName').val(data.d.Name); $('#txtGender').val(data.d.Gender); $('#txtSalary').val(data.d.Salary); }, error: function (err) { alert(err); } }); }); }); </script> </head> <body style="font-family:Arial"> ID : <input id="txtId" type="text" style="width: 86px" /> <input type="button" id="btnGetEmployee" value="Get Employee" /> <br /><br /> <table border="1" style="border-collapse: collapse"> <tr> <td>Name</td> <td><input id="txtName" type="text" /></td> </tr> <tr> <td>Gender</td> <td><input id="txtGender" type="text" /></td> </tr> <tr> <td>Salary</td> <td><input id="txtSalary" type="text" /></td> </tr> </table> </body> </html>
Views: 33552 kudvenkat
jQuery dynamic menu from database in asp net
 
24:37
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-dynamic-menu-from-database-in.html In this video we will discuss, how to build a jQuery menu using data from a database table. Menu.cs class using System.Collections.Generic; namespace Demo { public class Menu { public int Id { get; set; } public string MenuText { get; set; } public int? ParentId { get; set; } public bool Active { get; set; } public List<Menu> List { get; set; } } } MenuHandler.ashx using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; using System.Web.Script.Serialization; namespace Demo { public class MenuHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; List<Menu> listMenu = new List<Menu>(); using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetMenuData", con); cmd.CommandType = CommandType.StoredProcedure; con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Menu menu = new Menu(); menu.Id = Convert.ToInt32(rdr["Id"]); menu.MenuText = rdr["MenuText"].ToString(); menu.ParentId = rdr["ParentId"] != DBNull.Value ? Convert.ToInt32(rdr["ParentId"]) : (int?)null; menu.Active = Convert.ToBoolean(rdr["Active"]); listMenu.Add(menu); } } List<Menu> menuTree = GetMenuTree(listMenu, null); JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(menuTree)); } public List<Menu> GetMenuTree(List<Menu> list, int? parent) { return list.Where(x => x.ParentId == parent).Select(x => new Menu { Id = x.Id, MenuText = x.MenuText, ParentId = x.ParentId, Active = x.Active, List = GetMenuTree(list, x.Id) }).ToList(); } public bool IsReusable { get { return false; } } } } HTML & jQuery code <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <link href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: 'MenuHandler.ashx', method: 'get', dataType: 'json', success: function (data) { buildMenu($('#menu'), data); $('#menu').menu(); }, error: function (err) { alert(err.statusText); } }); function buildMenu(parent, items) { $.each(items, function () { var li = $("<li>" + this.MenuText + "</li>"); if (!this.Active) { li.addClass('ui-state-disabled'); } li.appendTo(parent); if (this.List && this.List.length > 0) { var ul = $("<ul></ul>"); ul.appendTo(li); buildMenu(ul, this.List); } }); } }); </script> </head> <body style="font-family: Arial"> <form id="form1" runat="server"> <div style="width: 150px"> <ul id="menu"> </ul> </div> </form> </body> </html>
Views: 37192 kudvenkat
jQuery tabs in asp net
 
16:07
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-tabs-in-aspnet.html In this video we will discuss how to use jQuery tabs in an ASP.NET web forms application. jQuery tabs widget is a single content area with multiple panels, each associated with a header in a list. This is similar to Accordion widget, which we discussed in Part 74 and 75. a) Tabs must be in either an ordered or unordered list b) Each tab "title" must be inside of a list item and wrapped by an anchor element with an href attribute c) Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab. Steps to retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application. We will use the country webservice that we worked with in the previous video session. We want to retrieve data from the following database table tblEmployee and display it using jQuery tabs widget in an asp.net web forms application Add a WebForm to the project. Copy and paste the following code. Notice that we are using 2 repeater controls to produce the HTML that the jQuery tabs widget expects. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <link href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $('#tabs').tabs({ collapsible: true, active: 1, event: 'mouseover' }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="tabs" style="width: 600px"> <ul> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <a href="#C_<%#Eval("ID")%>"><%#Eval("Name") %> </a> </li> </ItemTemplate> </asp:Repeater> </ul> <asp:Repeater ID="Repeater2" runat="server"> <ItemTemplate> <div id="C_<%#Eval("ID")%>"> <%#Eval("CountryDescription")%> </div> </ItemTemplate> </asp:Repeater> </div> </form> </body> </html> Copy and paste the following code in the code-behind file using System; namespace Demo { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Services.CountryServiceSoapClient client = new Services.CountryServiceSoapClient(); Services.Country[] countries = client.GetCountries(); Repeater1.DataSource = countries; Repeater1.DataBind(); Repeater2.DataSource = countries; Repeater2.DataBind(); } } } jQuery Tabs Widget Options collapsible - By default, atleast one panel need to be active. If you want to collapse all the panels, including the one that is active, set this option to true. active - This option can be set to a boolean value or integer. Setting active to false will collapse all panels. This requires the collapsible option to be true. An Integer value will make the corresponding panel active. Panels use zero-based index. event - The type of event that the tabs should react to in order to activate the tab. The default is "click". To activate on hover, use "mouseover".
Views: 24824 kudvenkat
jquery background color animate
 
06: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/07/jquery-background-color-animate.html In this video we will discuss animating colors using jquery. With the basic jQuery functionality, animate() method cannot animate non-numeric style properties like color, background-color, and border-color. jQuery UI adds the ability to animate color properties. In the example below a reference to jQuery UI is included, hence the color animations work. If we remove the reference, color animations will not work, but other numeric style properties (font-size, border-width) continue to work. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function () { var toggleColor = false; $('#btnAnimate').click(function () { var divElement = $('#myDiv'); if (toggleColor) { divElement.animate({ 'font-size': '15', 'border-width': '1', 'background-color': 'red', 'color': 'white', 'border-color': 'green' }, 2000); } else { divElement.animate({ 'font-size': '20', 'border-width': '10', 'background-color': 'green', 'color': 'white', 'border-color': 'red' }, 2000); } toggleColor = !toggleColor; }); }); </script> <style> </style> </head> <body style="font-family: Arial"> <form id="form1" runat="server"> <div id="myDiv" style="width: 500px; border: 1px solid black; padding: 5px; font-size: 15px"> At Pragim Technologies, training is 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. </div> <br /> <input type="button" id="btnAnimate" value="Animate" /> </form> </body> </html>
Views: 14959 kudvenkat
14. JQuery for Beginners - addClass() CSS
 
03:53
FREE Educational tutorials http://villageparksource.com/village-park-university/
Views: 2356 Village Park Source
Remove Style Using jQuery Css Function
 
01:34
Please visit http://technomark.in/Remove-Style-Using-jQuery-Css-Function.aspx for more information. Remove Style Using jQuery Css Function, Remove Style Using jQuery, Remove Style Using jQuery Function, Best Way To Remove Style Using jQuery, Remove Style, Remove Style In jQuery, jQuery Css Remove style, Remove background Using jQuery, Remove height Using jQuery, Remove Width Using jQuery, jQuery
Views: 127 Admin Technomark
Id and class selectors in jquery Telugu-05-vlr training
 
03:18
To Learn complete jQuery trining videos in telugu https://www.instamojo.com/rameshvch/webdesign-and-digital-marketing-training-vid/  https://goo.gl/OAapdu Id and class selectors in jquery Telugu-05 For Telugu https://www.youtube.com/watch?v=kQVrZ5tmZbw For English https://www.youtube.com/watch?v=OSTSC1yiHfg website:http://www.vlrtrain.com/ WordPress training videos in telugu http://www.vlrtrain.com/p/wordpress-training-videos-in-telugu.html WordPress training videos in English http://www.vlrtrain.com/p/wordpress-training-videos-in-english.html JavaScript training videos telugu http://www.vlrtrain.com/p/javascript-training-videos-telugu.html JavaScript training videos English http://www.vlrtrain.com/p/javascript-training-videos-english.html Html and Css Training Videos In Telugu http://www.vlrtrain.com/p/html-and-css-training-videos-in-telugu.html HTML and CSS Training Videos In English http://www.vlrtrain.com/p/html-and-css-training-videos-in-english.html jQuery Selectors jquery, selector for class within id How do I select an item using class or ID? ID Selector jquery combine id and class selector jquery multiple class selectors jquery access class Key Words: wordpress tutorial for beginners wordpress tutorial for beginners step by step wordpress training videos telugu wordpress training videos how to learn wordpress wordpress website development tutorial wordpress training classes
Views: 3604 VLR Training
Dropdown Button onClick with Html, CSS and Javascript - Simple jQuery Tutorial For Beginners
 
08:25
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Views: 11743 Online Tutorials
How to add or remove css class from html element using jquery - JQUERY TRAINING CLASSES
 
04:50
JQUERY TRAINING CLASSES, * In this video tutorial we will learn how to add or remove 1 or more css class in any html element using jquery. * First of all including jquery library js file. * 1 more thing you should always remember is, always write jquery code after close body tag or end of file before close html tag. * we create 3 css class with 3 different attribute and also create 3 divs and assign them an id. * Adding class using addclass function of jquery. We can add 1 more more class at a time with giving space after each class if adding more than 1 class. * Removing css class using remove class function of jquery. * As you can see in our tutorial. ---------------------------------------------- PLEASE LIKE, SHARE & SUBSCRIBE OUR CHANNEL _____________________________________________________ LEARN HOW TO REMOVE CSS CLASS USING JQUERY, CHANGE CSS CLASS USING JQUERY DYNAMICALLY, LEARN HOW TO ADD CSS CLASS USING JQUERY, ADD or REMOVE CSS CLASS USING JQUERY, DYNAMICALLY ADD REMOVE OR CHANGE CSS CLASS USING JQUERY, CHANGE CSS CLASS USING JQUERY, ----------------------------------------------------------------------- JQUERY TRAINING CLASSES , JQUERY ON PAGE LOAD , JQUERY TRAINING COURSES , JQUERY UI CDN , LEARN JQUERY , JQUERY DEVELOPERS , JQUERY TAB , JQUERY PLUGIN DEVELOPMENT , JQUERY TRAINING , JQUERY WEBSITE TEMPLATE , JQUERY CLASS , JQUERY BUTTONS , JQUERY TUTORIALS FOR BEGGINERS , JQUERY FILE UPLOAD , JQUERY SLIDESHOW TUTORIAL , FILE UPLOAD JQUERY , JQUERY BUTTON , LEARNING JQUERY , JQUERY UPLOAD , JQUERY UPLOAD FILE , JQUERY CLASSES , JQUERY AJAX TUTORIAL , JQUERY TABS TUTORIAL , JQUERY FILE UPLOADER
how to add remove css attribute of any class or html element using jquery -
 
05:47
JQUERY ON PAGE LOAD , * In this video tutorial we will learn how to add or remove 1 or more css property of any html element using jquery. * First of all including jquery library js file. * 1 more thing you should always remember is, always write jquery code after close body tag or end of file before close html tag. * Creating a div, assigning it an id and changing css property of color using jquery like this. * Now adding other css attribute font size & background color. * you can overwrite any css attribute using this or if want to disable any css property using this ++++++++++++++++++++++++++++++++++++ Please like and share our video _____________________________________________ CHANGE CSS VALUES USING JQUERY, GET CSS VALUE USING JAQUERY, HOW TO CHANGE CSS PROPERTY VALUE USNING JQUERY, GET VALUE OF CSS PROPERTY USING JQUERY, LEARN HOW TO CHANGE CSS DOM USING JQUERY, OVERWRITE CSS VALUE USING JQUERY, LEARN HOW TO USE JQUERY FOR GET OR SET CSS VALUE OF HTML ELEMENT, DYNAMICALLY CHANGE CSS PROPERTY USING JQUERY, _______________________________________________________ JQUERY TRAINING CLASSES , JQUERY ON PAGE LOAD , JQUERY TRAINING COURSES , JQUERY UI CDN , JQUERY DEVELOPERS , JQUERY TABS TUTORIAL , JQUERY TAB , JQUERY PLUGIN DEVELOPMENT , JQUERY SLIDESHOW TUTORIAL , JQUERY TUTORIALS FOR BEGGINERS , FILE UPLOAD JQUERY , LEARNING JQUERY , JQUERY FILE UPLOAD , JQUERY WEBSITE TEMPLATE , JQUERY UPLOAD FILE , JQUERY CLASS , JQUERY BUTTONS , JQUERY TRAINING , LEARN JQUERY , JQUERY UPLOAD , JQUERY CLASSES , JQUERY AJAX TUTORIAL , JQUERY BUTTON , JQUERY FILE UPLOADER
Views: 1191 Programming Tutorial
jQuery - Selecting HTML Elements Using ID or Class Name
 
04:43
Learn how to easily select HTML elements using jQuery. You will also see the difference between traditional JavaScript and jQuery code. (jQuery version 1.9.1 was used in this video) Procure Eminence Official Website: http://www.ProcureEminence.com/
Views: 1099 Procure Eminence
Countdown clock in JS using HTML & CSS | JAVASCRIPT & JQUERY
 
11:14
Here my website design course here now - https://www.udemy.com/build-a-real-world-responsive-website-with-html-5-css-3-js/?couponCode=LEARN_SOMETHING Checkout my Bestselling courses here now - https://www.udemy.com/user/51a26aa6-9abe-4763-9c39-8909b6290c6a/ -------------------------------------------------------------------- Download the source file here - https://drive.google.com/open?id=13VNp6cLq8DaMvHXptqdBzmxkCF5uWN2H ** COMPLETE WEBSITE DESIGNING COURSES HERE ------------------------------------------------------------------------------- HTML5|| CSS3 || BOOTSTRAP|| JAVASCRIPT || JQUERY || PHP || MYSQLI || WORDPRESS ------------------------------------------------------------------------------- ** COMPLETE WEBSITE DEVELOPING COURSES ARE COMING NOW ------------------------------------------------------------------------------- JAVASCRIPT|| NODE.JS || RUBY ON RAILS|| CODEIGNITER || GO || SHOPIFY |||| In this video we will create complete Countdown clock in JS using HTML & CSS | JAVASCRIPT & JQUERY. And at the last you will be having a beautiful countdown clock for your responsive website or landing page design. Hope this video help you alot in website design carrier. Subscribe the channel here https://www.youtube.com/channel/UC8xTHK97Ng__KZvGcO_K7CA?sub_confirmation=1 Join the group here - https://www.facebook.com/groups/328971707545530/ Music Credit Track: Clement Anatra - If You Know Me (feat. Brenton Mattheus) Link: https://youtu.be/_kuc3hgVKcY
Views: 2806 Online web ustaad
JQuery - CSS Advanced Selectors
 
04:20
JQuery - CSS Advanced Selectors Watch More Videos at https://www.tutorialspoint.com/videotutorials/index.htm Lecture By: Mr. Mahesh, Tutorials Point India Private Limited.

Complex processes essay topics
Banquos role in macbeth essay questions
Describe the second messenger hypothesis of hormone action is regulated
Nuclear power disadvantages essay outline
How long is the essay portion of sat