Home
Search results “Jquery style width set”
jQuery Tutorial in Hindi #21: jQuery Dimension Methods | width and height Method in jQuery Hindi
 
13:25
Welcome, all we will see width and height method in jQuery in Hindi. Source Code Link: https://www.thapatechnical.com/ jQuery width() and height() Methods The width() method sets or returns the width of an element (excludes padding, border and margin). The height() method sets or returns the height of an element (excludes padding, border and margin).
Views: 498 Thapa Technical
43 - ( jQuery Tutorial ) jQuery HTML / CSS : [ Dimension ] = width, innerWidth, outerWidth
 
06:34
- شرح كيفيه االتحكم بالـ Dimension لعناصر الـ html من خلال الـ jQeury - شرح الـ Mehtod الاتيه : width, innerWidth, outerWidth - شرح ما الفرق بين الـ width و بين innerwidth و بين outerWidth
Full Screen Image Slider With HTML, CSS & JS
 
27:26
In this video we will be creating a full screen image slider with HTML, CSS and JavaScript. We will not be using any 3rd party libraries like jQuery. All Images are free stock images from pexels.com SPONSOR: Check out Coding Dojo - http://www.codingdojo.com/l/yt/tr CODE: https://codepen.io/bradtraversy/pen/boydaE BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia
Views: 140594 Traversy Media
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: 22755 kudvenkat
Jquery How do I retrieve the width and height of a specified div element?
 
06:06
How do I retrieve the width and height of a specified div element using jquery The width() method sets or returns the width of an element (excludes padding, border and margin). The height() method sets or returns the height of an element (excludes padding, border and margin).
Views: 265 Go Freelancer
Equal Height Columns In Row - How to Create Equal Height and Width Columns  - Pure Html CSS Tutorial
 
12:26
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 12936 Online Tutorials
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: 22058 kudvenkat
Change Height At Any Screen Width Using jQuery
 
00:49
https://wp.me/p1lTu0-hpR These jQuery code snippets enable you to control the height of a div or the height of a background image at any screen width.
Views: 69 Brad Dalton
jquery selectmenu widget
 
08: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/07/jquery-selectmenu-widget.html In this video we will discuss jQuery selectmenu widget with examples. jQuery selectmenu duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. <select id="selectMenu" style="width:200px"> <option value="1">USA</option> <option value="2" selected="selected">India</option> <option value="3">UK</option> <option value="4">Australia</option> <option value="5">Canada</option> </select> To use the jQuery selectmenu widget, call jQuery selectmenu() function on the select element $('#selectMenu').selectmenu(); Select element with optgroup elements : The optgroup element is used to group related options in a drop-down list. In this example, we are grouping cities by country. You can only select the elements of a group but not the group itself. <select id="selectMenu"> <optgroup label="USA"> <option value="1">New York</option> <option value="2">Los Angeles</option> </optgroup> <optgroup label="India"> <option value="3">New Delhi</option> <option value="4">Bangalore</option> </optgroup> </select> Dropdownlist button icon : Button icon is the image that you see on the right handside of the dropdownlist. The default button icon is ui-icon-triangle-1-s. You can change button icon using the icons option $('#selectMenu').selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } }); List of all jQuery icons http://api.jqueryui.com/theming/icons To control the width of the selectmenu, use width option. The width is in pixels. $('#selectMenu').selectmenu({ width : 200 }); How to retrieve the selected item value and label : Use the select event of the selectmenu. This event is raised when an item is selected. $('#selectMenu').selectmenu({ select: function (event, ui) { alert('Label = ' + ui.item.label + ' ' + 'Value = ' + ui.item.value); } });
Views: 15850 kudvenkat
jQuery Tutorial: Dynamically Resizing elements
 
04:22
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/
Уроки jQuery #9 | Манипуляции с DOM.Offset,Position,Height,innerHeight
 
10:15
В этом уроке мы рассмотрим последнюю часть манипуляции с DOM элементами в jQuery. Уроки jQuery на этом не заканчиваются. Я вам рекомендую рассмотреть остальные методы в документации на официальном сайте. ======================================================== ПОДПИШИСЬ на канал "Web Developer Blog" - https://goo.gl/Ai4OGa И не пропускай новые видео!!! ======================================================== ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - https://goo.gl/rxsyeX Основы JavaScript - https://goo.gl/Cw7Vqv Уроки Bootstrap 4 - https://goo.gl/65gmmS Уроки Framework для верстки Foundation 6 - https://goo.gl/Yi2jfc Рубрика "Основы за 10 минут" - https://goo.gl/QIvpDD Верстка сайта на Foundation 6 - https://goo.gl/gVS45o Основы препроцессора SASS - https://goo.gl/f4BDww Уроки по Sublime text 3 - https://goo.gl/SjiKM2 Видео про заработок на YouTube - https://goo.gl/VxdirI Создаем интернет магазин на PrestaShop - https://goo.gl/jop7M4 Уроки jQuery - https://goo.gl/xPnZE9 ======================================================== ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - https://goo.gl/6mO5GL ======================================================== Мой заработок на YOUTUBE - ►https://goo.gl/C8Jzpv
Views: 5007 Web Developer Blog
Bootstrap Tutorial | Responsive Image Slider Using HTML , CSS , BOOTSTRAP & Jquery
 
25:56
Bootstrap Tutorial | Responsive Image Slider Using HTML , CSS , BOOTSTRAP & Jquery Download code? Explore at http://rathor.me/ln
Views: 25478 Tech. Rudranshi
44 - ( jQuery Tutorial ) jQuery HTML / CSS : [ Dimension ] = height, innerHeight, outerHeight
 
02:55
- شرح كيفيه االتحكم بالـ Dimension لعناصر الـ html من خلال الـ jQeury - شرح الـ Mehtod الاتيه : height, innerheight, outerheight - شرح ما الفرق بين الـ heightو بين innerheight و بين outerheight
How To Code A Full Width Mobile Navigation With CSS & Jquery | Code Examples
 
12:26
In this video I show you how to code a full width mobile navigation with css and jquery.
Views: 221 Garrett Sanderson
Colorful Animated Horizontal Fixed Width Menu Bar- No JQuery
 
23:50
Source Code now at dropbox https://www.dropbox.com/s/itbw00kc4fcvpdd/team.zip?dl=0 Improved & advanced JQuery version here http://youtu.be/UxHaOFSLQaU Colorful Animated Horizontal Fixed Width Menu Bar Only css/ css3 and html5 was used in this easy to create but very colorful and attractive animated menu bar Mohit Manuja of http://QualityLessons.Net
26. JQuery for Beginners - DIMENSIONS .width()
 
06:38
FREE Educational tutorials http://villageparksource.com/village-park-university/
Views: 769 Village Park Source
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: 30228 kudvenkat
Show an Image PopUp after Page Load using HTML CSS and jQuery
 
26:15
Welcome, all we will see jQuery Display Image PopUp after Page Load. Source Code Link: https://www.thapatechnical.com/2018/10/show-image-popup-after-page-load-using.html on page load popup in bootstrap lightbox popup on page load jquery modal popup on page load css popup on page load open popup window on page load jquery jquery popup on page load demo show modal on page load jquery jquery popup on page load example #popupjQuery Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadur... Youtube Link: https://www.youtube.com/channel/UCwfa...
Views: 1141 Thapa Technical
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: 47378 kudvenkat
Set DIV to 100% Height of Its Parent Using jQuery
 
15:40
In this tutorial, you'll learn how get your DIVs to be 100% of the height of their container using jQuery. Here's the link for the AJAX and PHP course: http://johnmorrisonline.com/go?id=ajaxphp&utm_campaign=ytWc2I-JU50Ls Get the source code in the Code Snippets section here: http://www.johnmorrisonline.com/web-developer-resources/ Training Center: http://www.johnmorrisonline.com/training Subscribe on YouTube: http://youtube.com/johnmorrisonline Subscribe on SoundCloud: http://soundcloud.com/johnmorrisonline Subscribe on iTunes: http://goo.gl/RggnXW -~-~~-~~~-~~-~- Please watch: "Ryan Carson: How to Get an IT Job WITHOUT a College Degree" https://www.youtube.com/watch?v=wxetW3hmPd0 -~-~~-~~~-~~-~- #php #webdev
Views: 5038 John Morris
Progress Bar like Youtube | webdlabs | weblab | Html | CSS | jQuery | JS
 
12:28
Welcome to #webdlabs guys, In this web lab tutorial I will show you how easily you can create a progress bar loader / progress bar website like youtube using html, css, and jQuery. brief of the concept for progress bar is :: 1. calculate total no of elements 2. divide 100 by total no of elements, to equally divide bar with among them and get percent value to increase at once 3. if element is loaded increase the bar width by adding the percent value calculated in step 2 4. if bar width becomes 100% then fade out the bar It is very simple tutorial. watch till end. #download source code :: https://codepen.io/divD/pen/NXQbGy Thanks for watching guys please do #subscribe to my channel #webdlabs Follow WebdLabs on fb also :: https://facebook.com/webdlabs Other best videos from #WebDLabs ------------------------------------------------------------------------------------------------------- Create Typewriter Effect :: https://youtu.be/fwekqnsQJTo ------------------------------------------------------------------------------------------------------- Blooming Flower CSS Animation :: https://youtu.be/-IoeqquFj3E ------------------------------------------------------------------------------------------------------- #WebCodeEditor ( Final Year project idea ) :: https://youtu.be/SN0jgoP6iww ------------------------------------------------------------------------------------------------------- Make Razor Blade div background image :: https://youtu.be/7XKUkJ0SWkQ ------------------------------------------------------------------------------------------------------- Make Slanted/rotated/skewed div :: https://youtu.be/X0PA4ahEtO8 ------------------------------------------------------------------------------------------------------- Make Responsive circle using css :: https://youtu.be/MgN9ZueOT8I ------------------------------------------------------------------------------------------------------- Create Facebook Profile Picture Frame :: https://youtu.be/DP_RbwKtAXs ------------------------------------------------------------------------------------------------------- Landing Page Animations :: https://youtu.be/h0ghTbkzCMI ------------------------------------------------------------------------------------------------------- Counting Number Animation :: https://youtu.be/6aPE3okhbcc ------------------------------------------------------------------------------------------------------- Capture a URL screencshot :: https://youtu.be/ylnNSObjLPs
Views: 399 webD Labs
Change Opacity on Scroll Using jQuery | Html CSS And Javascript - Tutorial
 
07:25
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Sinner's Heist - Streetlight People (feat. Harley Bird) [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/-RZjoHj78fM Free Download / Stream: http://ncs.io/StreetlightPeopleYO
Views: 4290 Online Tutorials
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: 132277 LearnWebCode
Slick jquery slider - Fix image width
 
01:55
How to fix image width = slick carousel jquery slider.. (1) just add variableWidth: true in javascript : $(".regular").slick({ variableWidth: true, }); (2) and set css : .slider { width: 63%; margin: 100px auto; } .slick-slide img { width: 250px; height: 250px; } ---------------------- -- just share --
Views: 5571 Ambar Hasbiyatmoko
jQuery Resizable Widget
 
13:44
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-resizable-widget.html In this video we will discuss jQuery Resizable Widget jQuery Resizable Widget allows you to change the size of an element using the mouse Consider the following HTML and CSS <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <style> .divClass { font-family: Arial; height: 150px; width: 150px; text-align: center; color:white } </style> To make the div element resizable $(document).ready(function () { $('#redDiv').resizable(); }); jQuery Resizable Widget Options alsoResize - Allows to resize one or more elements synchronously with the resizable element animate - Animates to the final size after resizing. Include .ui-resizable-helper class to display outline while resizing aspectRatio - Specifies whether the element should preserve aspect ratio autoHide - Specifies whether the resize handles should hide when the user is not hovering over the element containment - Constrains resizing to within the bounds of the specified element or region ghost - specifies whether a semi-transparent helper element should be shown for resizing maxHeight - The maximum height you can resize to minHeight - The minimum height you can resize to maxWidth - The maximum width you can resize to minWidth - The minimum width you can resize to jQuery Resizable Widget Events start - Triggered at the start of a resize operation stop - Triggered at the end of a resize operation resize - Triggered during the resize operation Resizing redDiv will also resize blueDiv HTML <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <br /> <div id="blueDiv" class="divClass" style="background-color: blue"> Red Div </div> jQuery $(document).ready(function () { $('#redDiv').resizable({ alsoResize:'#blueDiv' }); }); Constrains resizing to within the bounds of the container div HTML <div id="container" style="border: 3px solid black; height: 300px; width: 300px; padding:5px"> <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> </div> jQuery $('#redDiv').resizable({ containment: '#container' });
Views: 13203 kudvenkat
How to use Slick Slider for your website | JQuery Slick Slider Tutorial
 
10:00
How to use Slick Slider for your website | JQuery Slick Slider Tutorial Hello viewers, in this video I am going to make an image slider by using of jquery and Slick Slider Plugin. Watch the video till the end to have a complete idea about how to use this slider plugin. Visit the Slider Plugin Website from the following link http://kenwheeler.github.io/slick/ Follow this Channel on: Facebook : https://www.facebook.com/Divinector/ Twitter : https://twitter.com/Divinector Google Plus : https://plus.google.com/+Divinector
Views: 24186 Divinector
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: 39605 kudvenkat
jQuery scroll event
 
10:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-scroll-event.html In this video we will discuss scroll event and how to handle it using jQuery. scroll event is raised when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll. In the following exampe, notice that the div element overflow style is set to scroll. The div element has a scrollbar and as you scroll up and down the div element, the scroll event is raised and handled. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div').scroll(function () { $('h3').css('display', 'inline').fadeOut(1000); }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> PRAGIM Speciality in training arena unlike other training institutions. Training delivered by real time software experts having more than 10 years of experience. Interview questions and real time scenarios discussion on topics covered for the day. Realtime projects discussion relating to the possible interview questions. Trainees can attend training and use lab untill you get a job. Resume preperation and mock up interviews. 100% placement assistance. 24 hours lab facility. PRAGIM Technologies offers professional real time projects for studetns in their final semester. Course completion and project completion certificates will also be provided upon successful completion of the course. We have partnered with major multinational companies to place freshers with our clients on their course completion. </div> <br /> <h3 style="display:none; color:red">Scroll event handled</h3> </body> </html> The following example, keeps track of how many times the scroll event is raised. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var count = 0; $('div').scroll(function () { $('span').text(count += 1); }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> DIV CONTENT </div> <br /> <h3 style="color:red">Scroll event handled <span>0</span> time(s)</h3> </body> </html> The following example, keeps track of whether the user scrolled up or down. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var lastScrollTop = 0; $('div').scroll(function () { var currentScrollPosition = $(this).scrollTop(); if (currentScrollPosition > lastScrollTop) { $('h3').text('You scrolled down'); } else { $('h3').text('You scrolled up'); } lastScrollTop = currentScrollPosition; }); }); </script> </head> <body style="font-family:Arial"> <div style="width:300px; height:200px; border:1px solid black; overflow:scroll"> DIV CONTENT </div> <br /> <h3 style="display:inline; color:red"></h3> </body> </html>
Views: 47109 kudvenkat
Welcome Screen CSS3 Text Animation | HTML CSS JQUERY
 
08:41
Hey, in this episode you will learn how to create welcome screen text animation. This is an update episode to previous video that i did on similar text animation, but because a lot of you guys wanted to know how to add additional features i made this episode. Hope you like it ;) Episode 10 ↓ VIDEO GUIDE ↓ 00:18 About This Episode 00:42 HTML 01:58 CSS 06:27 JQUERY 08:03 Final Work 08:19 LIKE for some appreciation 08:23 SUBSCRIBE for more inspiration Subscribe For More Tutorials → https://www.youtube.com/user/rinkanschannel 🔥 eCourse With 50% Discount (ONLY 10 EUR Or About 11 USD): https://www.udemy.com/learn-how-to-design-and-code-responsive-website-from-scratch/?couponCode=DesignDevelop DOWNLOAD RESOURCES https://www.dropbox.com/sh/hnn8rp2v9cdqp7h/AAC0vFJKKXJIe-S-XBpZDAKQa?dl=0 ✉️ REACH ME [email protected] https://www.behance.net/rinkanscon51f3 COPYRIGHTS Music by Joakim Karud http://youtube.com/joakimkarud Mulle https://soundcloud.com/mulleofficial Thank You For Watching
Views: 9338 Rinkans
jquery menu widget
 
11: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-menu-widget.html In this vide we will discuss jquery menu widget with examples 2 simple steps to get the jQuery menu widget on a page Step 1 : Create an HTML structure with parent/child relationship. The most commonly used element is the unordered list. To disable a menu item add ui-state-disabled class to that list item element. <ul id="menu"> <li>USA <ul> <li>Virginia</li> <li>Maryland</li> </ul> </li> <li>India <ul> <li>AP</li> <li class="ui-state-disabled">MP</li> <li>Karnataka <ul> <li>Bangalore</li> <li>Mangalore</li> <li>Mysore</li> </ul> </li> </ul> </li> <li>UK</li> <li>Australia</li> </ul> Step 2 : Find the unordered list element in the DOM and call menu() function $('#menu').menu(); To control the width, set the preferred with in the .ui-menu class. This class is applied to the unordered list by jquery ui. You can see this using the browser developer tools. <style> .ui-menu{ width:150px } </style> Please note : Another way you can control the width of the menu widget is by placing it as a child element in another element and setting the width of the parent element. <div style="width:150px"> Menu HTML here </div> You can add an icon to a menu item, by applying class names. For the list of icons provided by jQuery http://api.jqueryui.com/theming/icons/ <ul id="menu"> <li><span class="ui-icon ui-icon-flag"></span>USA <ul> <li>Virginia</li> <li>Maryland</li> </ul> </li> ... </ul> To associate a different icon to a submenu, use icons option $('#menu').menu({ icons: { submenu: 'ui-icon-circle-arrow-e' } }); To disable the menu, set disabled option to true $(document).ready(function () { $('#menu').menu({ disabled: true }); }); To get the selected item text, use the select event $('#menu').menu({ select: function (event, ui) { alert(ui.item.text()); } });
Views: 16450 kudvenkat
JQuery Colorful Animated Horizontal Fixed Width Menu Bar
 
04:31
Source Code now at dropbox https://www.dropbox.com/s/itbw00kc4fcvpdd/team.zip?dl=0 Simple uncomplicated pure css version here http://youtu.be/vKfhENP_exU ; explained word to word JQuery Colorful Animated Horizontal Fixed Width Menu Bar Mohit Manuja of QualityLessons.Net
CSS Tutorial 14 - Styling Divs (Height, Width, Borders)
 
08:27
In this tutorial, we talk about how to style divs using CSS, which is pretty important when it comes to designing and laying out webpages and websites. In particular, we talk about how to change a div's height, width, and border, and specifically talking about a border's width, color, and style. Please feel free to leave a comment with any questions, comments, or suggestions! Thank you for watching! TechnicalCafe Blog: http://TechnicalCafe.com TechnicalCafe Forms: http://TechnicalCafe.net TechnicalCafe Twitter: http://Twitter.com/TechnicalCafe Jamie's Twitter: http://Twitter.com/Jamiemcg
Views: 11210 TechnicalCafe
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: 45072 kudvenkat
style switcher or color pallate with jquery
 
39:27
This tutorial is about custom and advance color pallate or style switcher. https://www.mediafire.com/?7ar354h32e73r50 Facebook group ---------------------- https://web.facebook.com/groups/1246390702141412/ full file --------- http://www.mediafire.com/file/2zv65v95nt6chdz/Style+Switcher+with+jquery.zip Tags: how to create a color pallate. how to create a color pallate with jquery. bangla color pallate. color pallate bangla tutorials with bangla. style switcher with jquery. bangla style switcher tutorials. custom color pallate html css. style switcher bangla tutorials. custom style switcher tutorials. Thanks.
Views: 1139 Masud Rana Parvaz
jQuery: How to change the attribute of a HTML tag
 
04:33
Attributes are properties of tag. For example hyperlink "a" has tag "href" and "img" has "src". You can easily change these attributes of tag using jquery.
Views: 775 WebTecho Tutorials
How To Make Equal Height Columns Using jQuery
 
06:06
Learn how to create equal columns using jquery. How to make same height divs. Easy way to make equal height divs using jquery. Equal height column problem solution by jquery. Equal column height with jquery.
Views: 926 Webslesson
How To Create Jquery Slick Slider in bangla tutorial
 
51:48
How to fix image width = slick carousel jquery slider.. (1) just add variableWidth: true in javascript : $(".regular").slick({ variableWidth: true, }); (2) and set css : .slider { width: 63%; margin: 100px auto; } .slick-slide img { width: 250px; height: 250px; }
Views: 1299 Shagor 360
[ jQuery In Arabic ] #15 - Html - Dimensions
 
37:14
شرح كل ما يخص الابعاد بالجيكويري width() innerWidth() outerWidth() height() innerHeight() outerHeight()
Views: 14939 Elzero Web School
A Simple jQuery Script to Change an iFrame Source
 
06:14
A demonstration of one way you can use jQuery to change the source attribute of an embedded iframe. In this case, we are embedding videos from vimeo.com and swapping the video source when clicking another link on the page.
Views: 16399 Neal Legler
jQuery Advanced Tutorials in Urdu/Hindi Part 21 - Height & width
 
07:58
In this tutorial, you'll learn about jQuery Web Development in Urdu/Hindi, it's the advanced course of jQuery, you can buy this complete course in DVD by visiting this link: http://www.onlineustaad.com/buy-a-course-in-dvd/courses/all/ If you buy the complete jQuery course in DVD then you'll learn creating Image Slider in jQuery, you'll learn Ajax & PHP as well and many other advance things in jQuery. Also, you can visit my website http://www.onlineustaad.com for all of my video tutorials in Urdu/Hindi.
Views: 5712 OnlineUstaad.Com
jQuery Размены блока width height длинна и высота JQuery динамическая смена размеров блока пример
 
09:09
jQuery Размены блока width height длинна и высота JQuery динамическая смена размеров блока пример ------------------------------------------------------------------------------- Наш канал поможет вам выучить то, что вы не могли запомнить с другими, мы стараемся сделать процесс обучения максимально простым и быстрым в котором даже не требуется говорить, так как вы смотрите и улавливаете посыл с самой первой секунды. Мы делаем то что поможет вашей дальнейшей карьере разработчика, от самого начала до конца нет границ, всегда есть то, что можно рассказать на пальцах так чтоб ты понял и остался доволен тем что не зря провел время за просмотром очередного урока. Готовые примеры скриптов наш не стандартный подход и техника разработки помогут от стара до мала. ----------------------------------- Если помочь Материально то уроки будут выходить бытрее! Яндекс.Деньги - 41001930003473 Web Money - R359625668999 QIWI - 89628411602 ----------------------------------- В этом видео мы с вами научимся : динамически узнавать длину и высоту блока а так же научимся ей манипулировать в реальном времени. ----------------------------------- наш сайт http://codly.ru страница vk https://vk.com/lifestyl_e ----------------------------------- Если мы чем то помогли тебе подпишись и поставь лайк чтоб не потерять. -----------------------------------
Views: 139 Web Samodelkin
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: 36504 kudvenkat
47 - ( jQuery Tutorial ) jQuery HTML / CSS :  offset & position
 
04:41
- شرح الـ Method الاتيه : offset , position - شرح ما الفرق بين الـ offset وبين position
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: 14700 kudvenkat
JQuery Tutorial: Fethcing an elements dimensions
 
17:35
we can fetch an elements dimensions including padding border and margin this way
How to make a div slider with controls using jQuery | Javascript Tips & Tricks
 
08:52
In this video I will teach you the easiest way to create a div slider with functioning controls (next & previous). For the purpose of ease we will be using jQuery! ~If you have any questions make sure to leave them in the comment section below! ~ Subscribe for more videos! https://goo.gl/WgQ0fE ~ Want something cool made by me? https://www.fiverr.com/codingtuts ~ Like my page to be the first to learn about a new video and also to see daily updates! https://www.facebook.com/CodingTuts ~ Follow me to be the first one to see my videos and to learn about amazing giveaways! https://goo.gl/XzmVOU Enjoy the video! ==================================== EXTRA TAGS (ignore): HTML HTML5 CSS CSS3 Javascript jQuery jQuery Plugin Framework PHP MySQL Python C++ Ruby On Rails Programming Web development Web design Game development Front-end developer Back-end developer Front end developer Back end developer HTML website HTML5 website HTML and CSS website HTML5 and CSS3 website HTML, CSS and Javascript website HTML5, CSS3 and Javascript website HTML, CSS, Javascript and PHP website HTML5, CSS3, Javascript and PHP website Responsive website Professional website Interactive website Professional HTML website Professional website Professional responsive website Professional interactive website Responsive and Interactive website Professional responsive and interactive website PHP Database PHP website MySQL website ====================================
Views: 11071 CodingTuts
Hi Slider Course: How to change jquery slider thumbnail image width and height?
 
01:11
This Video Tutorial is mainly show you how to change jquery slider thumbnail image width and height. For more information or quick tutorial ask in comment or visit http://www.hislider.com/faq/how-to-change-jquery-slider-thumbnail-image-width-and-height.html
Views: 469 Hi Slider
Adjust section height with window height with js/jquery EN/FR
 
03:00
============================== Code : https://codepen.io/pen/dmQMjL ============================== Facebook : https://www.facebook.com/ZED7GFX Instagram : https://www.instagram.com/zaid.geek7 ============================== Music by: https://www.soundcloud.com/ikson ============================== Tags : Bootstrap, css, html, tutorial, html5, html and css, html (programming language), css3, html css, css tutorial, html tutorial, cascading style sheets (programming language), javascript, learn html, html tutorial for beginners, уроки css, css tutorial for beginners, site, web, js, website, how to, jquery, web design (interest), javascript (programming language)
Views: 63 ZED7 GFX
31. JQuery for Beginners - DIMENSIONS .outerHeight()
 
01:21
FREE Educational tutorials http://villageparksource.com/village-park-university/
Views: 319 Village Park Source
jquery multiple sliders on page
 
10:20
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-multiple-sliders-on-page.html In this video, we will discuss how to control the height, width and opacity of an image using multiple sliders on the page. HTML <div id="sliderHeight"></div> <br /> <div id="sliderWidth"></div> <br /> <div id="divOpacity"></div> <br /> <div id="divDimensions"></div> <br /> <img id="myImg" src="Tulips.jpg" style="width: 100px; height: 100px" /> jQuery $(document).ready(function () { $('#sliderHeight, #sliderWidth').slider({ min: 100, max: 500, slide: refreshImage }); $('#divOpacity').slider({ min: 0, max: 100, value: 100, slide: refreshImage }); function refreshImage() { var height = $('#sliderHeight').slider('value'); var width = $('#sliderWidth').slider('value'); var opacity = $('#divOpacity').slider('value') $('#myImg').css({ height: height, width: width, opacity: opacity / 100 }); $('#divDimensions').html('Height : ' + height + ' Pixels<br/>' + 'Width : ' + width + ' Pixels<br/>' + 'Opacity : ' + opacity / 100); } });
Views: 15813 kudvenkat

A cover letter images
Merchandising assistant cover letter examples
Cover letter for debt collector resume sample
Sample cover letter for student radiologic technologist
Paper writing service