Home
Search results “Html style type text javascript”
Where should the script tag be placed in html
 
09:40
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/2014/11/where-should-script-tag-be-placed-in.html In this video we will discuss, where should the script tag be placed in the html. Should it be placed in the body or head section of the page. In general the script tag can be placed either in the head or body section. Let's look at a few examples : Example 1 : Script tag in the head section [html] [head] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/head] [body] [form id="form1" runat="server"] [/form] [/body] [/html] Example 2 : Script tag in the body section [html] [head] [/head] [body] [form id="form1" runat="server"] [/form] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/body] [/html] In Example 1 we placed the script tag in the head section and in Example 2, we placed it in body section. In both the cases JavaScript works as expected. Example 3 : Sets the background color of the TextBox to red. [html] [head] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/body] [/html] Example 4 : This is same as Example 3, except we moved the script tag to the head section. In this case the script will not work as expected. Depending on the browser you are using you get one of the following JavaScript error. Firefox - TypeError: document.getElementById(...) is null Chrome - Uncaught TypeError: Cannot read property 'style' of null IE - Unable to get property 'style' of undefined or null reference To see these JavaScript errors press F12 which launches developer tools. F12 works for all the 3 browsers. [html] [head] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [/body] [/html] Why did the JavaScript did not work in this case JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into browser DOM (Document Object Model). This is the reason JavaScript can't find the textbox and throws a NULL reference error. In Part 6, we discussed that, in general it is a good practice to store JavaScript in an external .js file. So, if the JavaScript is present in an external file and if you are referencing it on a page using [script] element, where should such [script] element be placed. To answer this question, first let's understand what happens when a browser starts loading a web page. 1. The browser starts parsing the HTML 2. When the parser encounters a [script] tag that references an external JavaScript file. The parser stops parsing the HTML and the browser makes a request to download the script file. Until the download is complete, the parser is blocked from parsing the rest of the HTML on the page. 3. When the download is complete, that's when the parser will resume to parse the rest of the HTML. This means the page loading is stopped until all the scripts are loaded which affects user experience. In general, the suggested good practice is to place the [script] tag just before the closing [body] tag, so it doesn't block the HTML parser. However, modern browsers support async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded. But even with these attributes, from a performance standpoint it is still better to place [script] tag just before closing [body] tag. According to HTTP/1.1 specification browsers download no more than two components in parallel. So, if the page has several images to download and if you place [script] tags at the top of the page, the script files start to download first which blocks the images download which adds to the total page load time.
Views: 103379 kudvenkat
9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial
 
16:01
CSS text styling tutorial | Basics of CSS | Learn HTML and CSS | HTML tutorial. In this HTML tutorial you will learn how to style text using CSS, which is important to make your content stand out on your website, and make it readable to the website visitors. Using CSS to change text is easy, and you will learn to style text in no time. When it comes to styleing headers or paragraphs using CSS, it is done the same way, however there might be a few differences which we will discuss in this video. CSS units list: https://www.w3schools.com/CSSref/css_units.asp Adobe Color Wheel: https://color.adobe.com/ ➤ GET ACCESS TO MY LESSON MATERIAL HERE! First of all, thank you for all the support you have given me! I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you! I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach. I hope you will find it helpful :) Material for this lesson: https://www.patreon.com/posts/html-9-download-15593539
Views: 76011 mmtuts
CSS - ( Part 1 ) Simple Input Text Box
 
02:35
Code used : http://codepen.io/zFunx/pen/GWPQNz Part 2 ( Adding Icon ) : https://youtu.be/rWjntaq4FW4 Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
Pure JavaScript Type Writer Effect
 
36:25
In this project we will create a little website with a type writer effect using pure vanilla JavaScript. We will also do some CSS (Flexbox, etc) Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Carlos Mafla Dev Channel: https://www.youtube.com/channel/UCnFRgYETwUg6eoeHACuVkcA 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Code: https://codepen.io/bradtraversy/pen/jeNjwP Pexels Image: https://www.pexels.com/photo/city-lit-up-at-night-316902/ Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia
Views: 42668 Traversy Media
Javascript Typing Text Effect Tutorial Timed Loops and Array Programming
 
10:38
Lesson Code: http://www.developphp.com/video/JavaScript/Typing-Text-Animation-Tutorial-Array-Loop-Programming Learn to program arrays and timed loops in JavaScript to animate typing text.
Views: 45726 Adam Khoury
HTML Forms - Learn 18 HTML Input Types | HTML5
 
06:57
Learn 18 different HTML Form Input Types. I make this video as short as possible. 18 HTML Input Types are: * Text * Password * Submit * Reset * Radio * Checkbox * Button * Color * Date * Datetime-local * Email * Month * Number * Range * Search * Time * Url * Week How to connect HTML Form to MySQL Database using PHP in 4 Minutes - 2017 = https://youtu.be/OHjkg_rifTw w3schools : https://goo.gl/dhupXB Twitter : https://twitter.com/CodeAndCoins Google+ : https://goo.gl/7vjhrp Facebook : https://www.facebook.com/CodeAndCoins Blog : https://goo.gl/1C7dNw Share this Video and Subscribe to my channel #CodeAndCoins #HTMLInputTypes
Views: 90734 Code And Coins
Change Style Sheet Using Javascript Tutorial CSS Swap Stylesheet
 
04:46
Lesson Code: http://www.developphp.com/video/JavaScript/Change-Style-Sheet-Using-Tutorial-CSS-Swap-Stylesheet Learn to change the entire style of your web page with a click using JavaScript that is targeting the href attribute of your familiar link element using the setAttribute method of JavaScript. DEMO: http://www.adamkhoury.com/demo/js_swap_css_stylesheet/
Views: 46585 Adam Khoury
Text Typing Animation Effect using HTML/CSS [No JavaScript]
 
04:30
In this video, I'll show you how to add text typing animation effect in your webpage using HTML & CSS (Keyframes + Animation).
Views: 30899 Codingflag
HTML video tutorial - 47 - html input tag and type="text"
 
06:40
HTML video tutorial - 47 - html input tag and type="text" HTML - form tag and HTML input tag How to create text box using html input tag? html input tag: is used to create various form fields attributes: type="text" : creates a text box maxlength : controls the number of character to be input value : default value of the input field name: uniquely identify the field in scripts id: uniquely identify the field in scripts ========================================= Follow the link for next video: HTML video tutorial - 48 - html input tag and type="password" https://youtu.be/a_jkWXdAbgM Follow the link for previous video: HTML video tutorial - 46 - html form tag https://youtu.be/3VZiqUj_9z8 ======= HTML Questions & Answers ========== 1.The ______ attribute of HTML input tag specifies the default value. a. placeholder b. default c. value d. required Answer: c =========================================
Views: 14365 Chidre'sTechTutorials
Simple Text Animation Just By Using HTML & CSS
 
04:29
join our group in facebook https://www.facebook.com/groups/704904666369941/ like our page https://www.facebook.com/darkcode0/ Paypal Donation Link https://paypal.me/YBenlachheb Take Files From Here https://goo.gl/zbMbcf tags simple css text animation effects simple text animation css simple text animation in css simple text animation css3 _Music___ Cold Funk - Funkorama by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...) Source: http://incompetech.com/music/royalty-... Artist: http://incompetech.com/ Music promoted by Audio Library https://youtu.be/Vhd6Kc4TZls
Views: 242026 DarkCode
Text Typing Animation Effects Using Html and CSS - Pure CSS Typing Effect - No Javascript
 
06:14
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Cadmium - Melody (feat. Jon Becker) Link: https://youtu.be/9MiFRbymQXQ
Views: 20388 Online Tutorials
Real Time Text Input Filter tutorial Program Textarea Javascript HTML Tutorial
 
14:43
Lesson Code: http://www.developphp.com/video/JavaScript/Real-Time-Text-Input-or-Textarea-Filter-Tutorial In this Javascript programming lesson you can learn Real-Time Filtering of Text Input. You can learn how to program real time strict text fields that will strip or replace unwanted characters from the field as the user types. Using the search or replace String object methods in Javascript along with the RegExp object gives us a wide of logic possibilities in our Javascript pattern matching with regular expressions.
Views: 51719 Adam Khoury
HTML5 tutorial Autocomplete Form Field Text Input Datalist List Attribute
 
04:02
Lesson Code: http://www.developphp.com/video/HTML/Autocomplete-Text-Input-Datalist-List-Attribute-Tutorial Learn to code the list attribute into your input tags and associate them with a datalist that renders an autocomplete feature while people are typing into your HTML5 web form fields. Used for dynamic autocompletion of search fields primarily, and your datlist can be tied to Ajax and PHP to render autocompletion for your database information.
Views: 60351 Adam Khoury
How to write text on image using  HTML and CSS
 
08:55
In this video tutorial, I am going to tell you how you can write some text on image by using HTML and CSS. Here I use CSS position attribute. By using position= absolute I break the flow of heading and place it in the middle of the banner image. You can also see this video for: text on image tutorial html and css overlay text on image text on image css text over image html how to add text on image in html how to put text on image in html  how to write text on image in html  how to add text over image with html and css  how to add text on image css html  text over image with html and css  text over image html and css  add text over image using html and css  text over image html css  how to put text on image with html 2018 text on image  text on image html  write text on image  webseotips my another video links: Bootstrap 4 progress bars : https://youtu.be/tQpUUOZQhKs How to customize navbar - bootstrap4 tutorial - https://youtu.be/PRMtNdlSpzY Bootstrap 4 Tutorial - Responsive Navbars - https://youtu.be/hj_ayO9P3R4 Google Penguin Update and Penguin Recovery Process in 2017 - https://youtu.be/MrKHpS588Fs Google Panda Update AND Recovery Process from Panda - https://youtu.be/OzZq-nmonaU how to add numeric counter on website- https://youtu.be/AQYv14sY_q8 How to find best Profitable keyword for Your Website 2018 part 1- https://youtu.be/QdMMfSwU15M How to find best Profitable keyword for Your Website in 2018 part2- https://youtu.be/t3hHUA5KiQI Introduction To Keyword Match Types In Google AdWords 2018- https://youtu.be/Re3rfgYdkG8 Bootstrap 4 tutorial – card : https://youtu.be/qIPdaBIQXtg Bootstrap 4 card slider- https://youtu.be/mglq2tBjRxk bootstrap 4 testimonial - https://www.youtube.com/watch?v=gbNhlAoHQkI&t=793s Transparent navbar with full screen background image landing page-Bootstrap https://youtu.be/SvpyyIE5vG0 Bootstrap Transparent menu with Responsive Slider - https://youtu.be/2vSc6VJtz4s How to Create Mega Menu with Bootstrap 4 with CODE : https://youtu.be/932hSm1yNII How to create Responsive LightBox Gallery with Bootstrap 4: https://youtu.be/k-RtYiiB47E How to customize owl carousel slider navigation 2018 with Bootstrap : https://youtu.be/nVNv1jUitCk scrolling effect on Navbar -bootstrap 4 tutorial: https://youtu.be/cskDxDRD1Kw bootstrap 4 dropdown on hover - Bootstrap 4 tutorial: https://youtu.be/2vwrwrMd1NM Customize Navbar Bootstrap 4 tutorial 2018 : https://youtu.be/rgukBRi1CSU Bootstrap 4 website built from scratch in 1 hour 2018 (with code) : https://youtu.be/xVjYT-Eu-N8
Views: 30501 webseotips
Learn HTML/CSS - #10 - Styling text with CSS [1080p]
 
03:43
In this tutorial, we will be styling text using CSS. I will show you how to change the following elements of the text: • Font Family • Font Size • Font Weight (Bold) • Underline • Color Twitter: http://twitter.com/coders_guide Donate: http://goo.gl/mfMep
Views: 18698 Neil Rowe
Styling HTML 5 Forms #4 - Styling Text Inputs
 
06:19
----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/styling-html5-forms-playlist + Atom editor - https://atom.io/ CSS Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT HTML Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 9916 The Net Ninja
[HTML] Show/Hide Form Elements Using JavaScript [HD]
 
10:29
Using HTML a Web Designer can easily show and hide HTML form elements using simple JavaScript code. Download the source: http://tech-tutors.net/index.php/categories/tutorials/software-tutorials/36-programming-tutorials/8-html-show-hide-form-elements-using-javascript Please like, comment, and subscribe! Visit http://tech-tutors.net
Views: 84604 John DeVries
Javascript Form Select Change Options Tutorial Dynamic List Elements HTML5
 
16:08
Lesson Code: http://www.developphp.com/video/JavaScript/Form-Select-Change-Dynamic-List-Option-Elements-Tutorial In this Javascript video lesson you will learn how to program dynamic select form list elements. To demonstrate the logic we will show how to change options of a select list based on the selection the user makes from the first list. A web application developer will definitely need to know how to do this when they get into form programming that involves data intake of categories and subcatories from a user.
Views: 240576 Adam Khoury
Move Placeholder To Top on Focus And While Typing - Pure CSS Tutorial - No Javascript
 
14:57
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 45162 Online Tutorials
Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery
 
12:17
Our Android App for SOURCE CODE : https://play.google.com/store/apps/details?id=com.mtz.onlinetutorials ------------------------ Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 265953 Online Tutorials
Visual Studio Code: HTML, CSS & JS Tips
 
21:30
WordPress Dev Course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL Front-End Workflow Course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL HTML & CSS Course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBEDEAL WordPress for Beginners Course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL One of my favorite hobbies is mispronouncing babel. Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Views: 277927 LearnWebCode
Typed.js - How to create a typing animation like a type writter with - HTML, CSS, Jquery || 2018
 
05:52
Typed.js - How to create a typing animation like a type writter with - HTML, CSS, Jquery || 2018 Clik here to download the typed.js plugin : https://mattboldt.com/demos/typed-js/ Please Like this video ! Comment this video !! Share this video !!! Subscribe my this channel !!!! sajidz tech Join with me in my group : Like my facebook page : https://www.facebook.com/sajidztech/ Follow me in Twitter : https://twitter.com/MdSajid1514283 Follow me in LinkedIn : https://www.linkedin.com/in/ekrokha-chele-431552139/ Follow me on Instagram : https://www.instagram.com/mohammedraaz/ My website : http://www.sajidhasan360.com/ typing animation jquery .css typing animation multiple lines. animated typing text generator. typing text javascript. typewriter effect website. typed.js alternative. handwriting animation css typewriter effect text animation html text js jquery is visible jquery replace element javascript typing effect typewriter script javascript text animation text animation css jquery typing effect jquery replace html jquery textarea jquery select text types of animation typings jquery jquery text html jquery text animation examples jquery text animation jquery input text typed javascript typewriter animation jquery typewriter typing animation css css typing animation javascript typewriter effect jquery type jquery text function jquery find text typewriter plugin typewriter javascript javascript select text jquery toggle text text types typing effect javascript jquery typewriter effect jquery highlight text javascript typeof jquery label text typing effect jquery change html jquery element type typing text javascript jquery input type text jquery button text jquery text method typescript jquery animate examples typing effect css type d plug css animation effects typing text typewriter effect jquery js typeof typing animation jquery typewriter effect online typewriter effect javascript jquery typing jquery string functions jquery write text typed js example jquery animate typewriter text set text jquery animate js jquery set input text html typing text effect jquery effects jquery type text jquery animation effects animated typing after effects typewriter effect plugin typing text animation typeit typewriter text effect jquery typing animation get innertext jquery typing jquery option text jquery get innertext typewriter code typewriter after effects text typing animation css jquery text effects typed js text writing animation jquery animate css jquery typer jquery edit css typing animation javascript jquery textarea text jquery get type typewriter typing jquery search text typelive jquery demo typing text effect jquery textbox change javascript typing animation typewriter plugin after effects jquery animation examples with code jquery text typing effect jquery show animation jquery effects demo jquery insert text jquery text animation effects typing web css text animation effects typewriter css animated text css jquery javascript simulate typing after effects text typewriter ajax text jquery trim text jquery animate text change jquery text plugin typewriter text after effects jquery append text animated typewriter text generator textcontent jquery jquery text rotator typing text animation css css text animation examples after effects typewriter plugin jquery animation demo css3 text animation css typewriter typing script css effects typing simulator jquery text effects examples jquery blink text jquery blink text carousel jquery typing tricks jquery animation types jquery blink text effect text animation js typewriter html jquery highlight text input text animation jquery plugin jquery add text to input animation effects html text effects typing machine font after effects type animation type text javascript animated typing text generator text replace jquery jquery button name jquery text transition jquery text animation effects demo typing text html jquery link text jquery moving text css text effects css blink animation jquery dropdown text text javascript jquery convert html to text jquery convert text to html types of typewriter jquery cursor jquery hover text convert text to html jquery truncate text javascript after effects typewriter animation jquery edit text cool javascript animations javascript text typing animation script type for jquery css animation types typing animation using css animated letters jquery display text select input text jquery typewriter font text animation jquery demo jquery get text content jquery change html tag.
Views: 6729 sajidz Tech
Event bubbling in JavaScript
 
15:01
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/01/event-bubbling-in-javascript.html What is event bubbling Let us understand this with an example. HTML elements can be nested inside each other. For example a button element can be nested inside a span element and the span element inturn can be nested inside a div element. Notice that we have onclick attribute specified for all the 3 elements. [html] [head] [style type="text/css"] .styleClass { display: table-cell; border: 1px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div class="styleClass" onclick="alert('Div click handler')"]DIV element [span class="styleClass" onclick="alert('Span click handler')"]Span element [input type="button" value="Click me" onclick="alert('Button click handler')" /] [/span] [/div] [/body] [/html] A click on the button, causes a click event to be fired on the button. The button click event handler method handles the event. The click event then bubbles up to the button element parent (span element), which is handled by the span element event handler method. The click event then bubbles up to the span element parent (div element). This is called event bubbling. Notice that if you click on the [span] element, it's event handler and it's parent([div]) element event handler are called. If you click on the [div] element, just the [div] element event handler method is called. So, the event bubbling process starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy. The following example is similar to the one above, except we removed the onclick attribute from button and span elements. Because of event bubbling, when you click on the button or the span element, the event gets handled by the div element handler. [html] [head] [style type="text/css"] .styleClass { display: table-cell; border: 1px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div class="styleClass" onclick="alert('Click event handled by DIV element')"]DIV element [span class="styleClass"]Span element [input type="button" value="Click me"/] [/span] [/div] [/body] [/html] When the event gets bubbled, the keyword this references the current element to which the event is bubbled. In the example below, we are using "this" keyword to reference the current div element and change it's border color. When you click on the innermost [div] element, all the 3 [div] elements border get changed due to event bubbling. [html] [head] [style type="text/css"] .divStyle { display: table-cell; border: 5px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div id="DIV1" class="divStyle"] DIV 1 [div id="DIV2" class="divStyle"] DIV 2 [div id="DIV3" class="divStyle"] DIV 3 [/div] [/div] [/div] [script type="text/javascript"] var divElements = document.getElementsByTagName('div'); for (var i = 0; i [ divElements.length; i++) { divElements[i].onclick = function () { this.style.borderColor = "red"; alert(this.getAttribute("id") + " backgound changed"); } } [/script] [/body] [/html] Stopping event bubbling : If you don't want the event to be bubbled up, you can stop it. With Internet Explorer 8 and earlier versions event.cancelBubble = true With Internet Explorer 9 (and later versions) & all the other browsers event.stopPropagation()
Views: 57799 kudvenkat
1.3: Getting Text form User: Text Input - Programming with Text
 
17:31
In this video, I demonstrate how you can get text input from a user with DOM elements ("input" and "textarea" in combination with the p5.dom.js library. Next Video: https://youtu.be/0Mq2CxspF5s Introduction to Programming from A to Z: http://shiffman.net/a2z/intro/ Support this channel on Patreon: https://patreon.com/codingtrain Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics Contact: https://twitter.com/shiffman GitHub Repo with all the info for Programming from A to Z: https://github.com/shiffman/A2Z-F16 Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code p5.js: https://p5js.org/ Processing: https://processing.org createInput() reference: https://p5js.org/reference/#/p5/createInput Drag and Drop with p5.js video: https://www.youtube.com/watch?v=o4UmGrPst_c For More Programming from A to Z videos: https://www.youtube.com/user/shiffman/playlists?shelf_id=11&view=50&sort=dd For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Help us caption & translate this video! http://amara.org/v/V9bp/
Views: 57914 The Coding Train
Javascript - Changing Text with Button Click
 
07:11
You can change the text of HTML by button click with the help of JavaScript. For more guides & tutorials: http://learnbuildingwebsite.com Join Facebook group: https://www.facebook.com/groups/learnbuildingwebsites
JavaScript - How To Add Edit Remove Selected Table Row From Input Text In Javascript [ with code ]
 
44:12
Add Update Delete HTML Table Row Using Javascript Source Code: http://1bestcsharp.blogspot.com/2017/04/javascript-add-edit-remove-table-row.html Javascript Tutorials For Beginners ➜ http://bit.ly/2k7NMWq Javascript Course ➜ http://bit.ly/2IvBCFC Build dynamic Web Applications (affiliate link) ➜ http://bit.ly/WebAppsCourse visit our blog https://1bestcsharp.blogspot.com/ subscribe: http://goo.gl/nRjPKk In This Javascript Tutorial we will see How To : - add row to html table from input tag - show selected table row data into input text - update selected table row cells value from textboxes - delete selected table row Using JS In Netbeans Editor . TAB OF CONTENT: 00:00 - Project Overview 02:00 - Create The Table, Inputs ( text fields and buttons ) 06:00 - Create The Style 09:10 - Create a Function To Add a Row To The HTML Table From The Text Fields 15:50 - Create a Function To Display The Selected Table Row To Input Text 27:17 - Create a Function To Edit The Selected HTML Table 32:15 - Create a Function To Remove The Selected HTML Table 36:28 - Create a Function To Check If The Input Text Fields Are Empty Javascript Tutorials : How to get value of selected radio button https://www.youtube.com/watch?v=uzwUBDQfpkU How to append Value to an array https://www.youtube.com/watch?v=KVdY8n6lCy4 javascript images slider 1 https://www.youtube.com/watch?v=QkcemPr4xaU Convert String To Number https://www.youtube.com/watch?v=JMfZG7o_QtE JavaScript Show And Hide Input Password Text https://www.youtube.com/watch?v=Cmo9sjx5eFE change div class name in js https://www.youtube.com/watch?v=X_SDJxKI6HE using checkbox with js https://www.youtube.com/watch?v=yFYEHSh2iTQ get And Set Value To An Input https://www.youtube.com/watch?v=AfRHl3soLDg calculate two numbers https://www.youtube.com/watch?v=oDUjP4N_MtQ Search Element In Array https://www.youtube.com/watch?v=LIsjSMr9bJU Add Search Remove Array Element https://www.youtube.com/watch?v=ppLbuVWf6zM Add HTML Table Row https://www.youtube.com/watch?v=FVSfp8yT8lA Get Mouse Position https://www.youtube.com/watch?v=LVi5DN2vtdo Show Text Letter By Letter https://www.youtube.com/watch?v=dbdYazO4IZ4
Views: 87074 1BestCsharp blog
CSS - ( Part 2 : Adding Icon ) Simple Input Text Box
 
06:07
Code used : https://codepen.io/zFunx/pen/XRyqvx Part 1 : https://youtu.be/omJfspwjnZk Get started with Font Awesome : http://fontawesome.io/get-started/ Learn more about aria-hidden : http://csskarma.com/blog/difference-rolepresentation-aria-hiddentrue/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
Events in JavaScript
 
17:08
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/01/events-in-javascript.html What is an event An event is a signal from the browser that something has happened. For example, 1. When a user clicks on an HTML element, click event occurs 2. When a user moves the mouse over an HTML element, mouseover event occurs When events occur, we can execute JavaScript code or functions in response to those events. To do this we need to associate JavaScript code or functions to the events. The function that executes in response to an event is called event handler. In JavaScript, there are several ways to associate an event handler to the event 1. Using the attributes of an HTML tag 2. Using DOM object property 3. Using special methods In this video we will discuss associating event handler methods to events using the attributes of HTML tags. In the following example, the code to execute in response to onmouseover & onmouseout events is set directly in the HTML markup. The keyword "this" references the current element. In this example "this" references the button control. [input type="button" value="Click me" id="btn" onmouseover="this.style.background= 'red'; this.style.color = 'yellow'" onmouseout="this.style.background= 'black'; this.style.color = 'white'" /] The above example, can be rewritten as shown below. In this case the code to execute in response to the event is placed inside a function and then the function is associated with the event. [input type="button" value="Click me" id="btn" onmouseover="changeColorOnMouseOver()" onmouseout="changeColorOnMouseOut()" /] [script type="text/javascript"] function changeColorOnMouseOver() { var control = document.getElementById("btn"); control.style.background = 'red'; control.style.color = 'yellow'; } function changeColorOnMouseOut() { var control = document.getElementById("btn"); control.style.background = 'black'; control.style.color = 'white'; } [/script] Events are very useful in real-world applications. For example they can be used to 1. Display confirmation dialog box on submitting a form 2. Form data validation and many more How to show confirmation dialog in JavaScript [input type="submit" value="Submit" id="btn" onclick="return confirmSubmit()" /] [script type="text/javascript"] function confirmSubmit() { if (confirm("Are you sure you want to submit")) { alert("You selected OK"); return true; } else { return false; confirm("You selected cancel"); } } [/script] JavaScript form validation example : In this example, both First Name and Last Name fields are required fields. When you type the first character in any of the textbox, the background colour is automatically changed to green. If you delete all the characters you typed or if you leave the textbox without entering any characters the background colour changes to red indicating the field is required. We made this possible using onkeyup and onblur events. onkeyup occurs when the user releases a key. onblur occurs when an element loses focus. [table] [tr] [td] First Name [/td] [td] [input type="text" id="txtFirstName" onkeyup="validateRequiredField('txtFirstName')" onblur="validateRequiredField('txtFirstName')"/] [/td] [/tr] [tr] [td] Last Name [/td] [td] [input type="text" id="txtLastName" onkeyup="validateRequiredField('txtLastName')" onblur="validateRequiredField('txtLastName')"/] [/td] [/tr] [/table] [script type="text/javascript"] function validateRequiredField(controlId) { var control = document.getElementById(controlId); control.style.color = 'white'; if (control.value == "") { control.style.background = 'red'; } else { control.style.background = 'green'; } } [/script]
Views: 74256 kudvenkat
Javascript - how to make html input text Allow only Numeric values In JS [ with source code ]
 
04:21
Input Text Accept Only Numbers In Javascript Source Code: https://1bestcsharp.blogspot.com/2018/02/javascript-input-text-allow-only-numbers.html Javascript Tutorials For Beginners ➜ http://bit.ly/2k7NMWq Javascript Course For Beginners ➜ http://bit.ly/2IvBCFC visit our blog https://1bestcsharp.blogspot.com/ facebook: https://www.facebook.com/1BestCsharp twitter: https://www.twitter.com/1BestCsharp_ subscribe: http://goo.gl/nRjPKk In This Javascript Tutorial we will See How To Create An Input Text That Allow Only Numbers On KeyPress Event By Creating A Function And Name It "test" and you can also allow backspace and delete keys if you want to using JS programming language And Netbeans Editor . More Javascript Tutorials : How to get value of selected radio button https://www.youtube.com/watch?v=uzwUBDQfpkU How to append Value to an array https://www.youtube.com/watch?v=KVdY8n6lCy4 javascript images slider 1 https://www.youtube.com/watch?v=QkcemPr4xaU Convert String To Number https://www.youtube.com/watch?v=JMfZG7o_QtE JavaScript Show And Hide Input Password Text https://www.youtube.com/watch?v=Cmo9sjx5eFE change div class name in js https://www.youtube.com/watch?v=X_SDJxKI6HE using checkbox with js https://www.youtube.com/watch?v=yFYEHSh2iTQ How To Calculate Two Numbers In JavaScript : sum, minus, duplication, division https://youtu.be/oDUjP4N_MtQ share this video: https://youtu.be/6bKvevjR7GM
Views: 17289 1BestCsharp blog
Learn JavaScript in 12 Minutes
 
12:01
Learn the fundamental features of JavaScript - the language used to add dynamic, interactive content to websites. I teach you how to get started with JavaScript, how to use variables, operators, arrays, properties, methods, custom functions, conditionals and loops. In 12 minutes. LEARN HTML IN 12 MINUTES http://youtu.be/bWPMSSsVdPk LEARN CSS IN 12 MINUTES http://youtu.be/0afZj1G0BIE LEARN PHP IN 15 MINUTES http://youtu.be/ZdP0KM49IVk Support this channel at https://www.patreon.com/jakewright ---------- Text Editors ---------- For Windows users, I recommend using Notepad++ to edit HTML files: http://notepad-plus-plus.org For Mac users, I recommend Sublime Text: http://www.sublimetext.com ---------------------------------------- SUBSCRIBE FOR MORE http://youtube.com/subscription_center?add_user=jaketvee TWITTER http://twitter.com/jakewrightuk FACEBOOK https://www.facebook.com/jakewrightuk INSTAGRAM http://instagram.com/jakewrightuk http://jakewright.net
Views: 1912484 Jake Wright
HTML div tag Example and Tutorial using CSS
 
09:06
http://www.LittleWebHut.com This video demonstrates how to use the HTML / XHTML div tag and how to style it with CSS. The examples will cover the basic usage for the div tag and demonstrate the CSS color, text-align, background, float, and width properties.
Views: 491766 tutor4u
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: 147579 kudvenkat
jQuery add or remove class
 
15:46
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-add-or-remove-class.html In this video we will discuss 1. How to check if an element has a css class 2. How to add or remove css classes 3. How to toggle css classes hasClass - Returns true if an element has the specified class otherwise false addClass - Adds one or more specified classes. To add multiple classes separate them with a space. removeClass - Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name. toggleClass - Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <style> .boldClass { font-weight: bold; } .italicsClass { font-style: italic; } .colorClass { color: red; } </style> <script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('p').addClass('colorClass'); }); $('#btn2').click(function () { $('p').removeClass('colorClass'); }); $('#btn3').click(function () { $('p').addClass('colorClass italicsClass'); }); $('#btn4').click(function () { $('p').removeClass('colorClass italicsClass'); }); $('#btn5').click(function () { $('p').addClass('colorClass italicsClass boldClass'); }); $('#btn6').click(function () { $('p').removeClass(); }); }); </script> </head> <body style="font-family:Arial"> <p>Pragim Technologies</p> <table> <tr> <td> <input id="btn1" style="width:250px" type="button" value="Add Color Class" /> </td> <td> <input id="btn2" style="width:250px" type="button" value="Remove Color Class" /> </td> </tr> <tr> <td> <input id="btn3" style="width:250px" type="button" value="Add Color and Italics Classes" /> </td> <td> <input id="btn4" style="width:250px" type="button" value="Remove Color and Italics Classes" /> </td> </tr> <tr> <td> <input id="btn5" style="width:250px" type="button" value="Add Color, Italics & Bold Classes" /> </td> <td> <input id="btn6" style="width:250px" type="button" value="Remove All Classes" /> </td> </tr> </table> </body> </html>
Views: 53925 kudvenkat
Inline vs external javascript
 
06:30
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/2014/11/inline-vs-external-javascript.html In this video we will discuss 1. Different places where JavaScript can be present 2. Advantages of external JavaScript over inline JavaScript JavaScript can be stored either inline on the page or in an external .js file. Let's look at an example of both the approaches. Inline JavaScript example : In this example, IsEven() JavaScript function is present inline on the page. [html] [head] [script type="text/javascript"] function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } } [/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html] External JavaScript example : Steps to store JavaScript in an external .js file 1. In Visual Studio, right click on the project name in Solution Explorer and select add select Add =] New Item 2. From the "Add New Item" dialog box select "JScript File". Name the file "ExternalJavaScript.js" and click Add. 3. Copy and paste the following JavaScript function in the "ExternalJavaScript.js" file function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } } 4. On your webform in the head section include a reference to the external JavaScript file using script element as shown below [script type="text/javascript" src="ExternalJavaScript.js"][/script] 5. At this point the HTML on your webform should be as shown below. [html] [head] [script type="text/javascript" src="ExternalJavaScript.js"][/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html] Advantages of external JavaScript over inline JavaScript : Here are some of the general advantages of external JavaScript over inline JavaScript Maintainability : JavaScript in external files can be referenced on multiple pages without having to duplicate the code inline on every page. If something has to change, you only have one place to change. So external JavaScript code can be reused and maintenance will be much easier. Separation of Concerns : Storing JavaScript in a separate external .js file adheres to Separation of concerns design principle. In general it is a good practice to separate HTML, CSS and JavaScript as it makes it easier working with them. Also allows multiple developers to work simultaneously. Performance : An external JavaScript file can be cached by the browser, where as an inline JavaScript on the page is loaded every time the page loads.
Views: 114032 kudvenkat
How to add text over image - HTML and CSS
 
03:27
This video is about how to text over an image using HTML and CSS -- -- -- Online tools used in this tutorial: 1. Google Fonts: https://fonts.google.com ---- ------ ------ ------ ------ ------ - Code Editor: Brackets - Recorded with : OBS Studio ----- -------- ------- -------- -------- ------- ------- • Music Info: Title: don't leave me here alone Artist: Artificial Music Genre: Hip Hop & Rap Mood: Bright Download: https://goo.gl/BtGV37 ––– • Licence: don't leave me here alone by Artificial.Music https://soundcloud.com/artificial-music Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0 http://creativecommons.org/licenses/b... ------ -------- --------- --------- -------- --------- Video Created By: R.Y Baskara
Views: 77626 Code Instinct
Countdown clock in JS using HTML & CSS | JavaScript Tutorials | Web Development Tutorials
 
15:24
This video is about creating a countdown clock in JS using HTML & CSS. Website: http://samsolomonprabu.com/ Donate & Support: https://www.verkkonet.com/downloads/donate.php?id=j2 Source code for "Countdown clock in JS": https://verkkonet.com/downloads/index.php?id=j2
Views: 147539 VerkkoNet
Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
 
14:08
Once you're done with this, checkout lesson #2 - introduction to CSS: https://www.youtube.com/watch?v=gBi8Obib0tw How to put your website online (with coupon): https://www.youtube.com/watch?v=tq7dqdHCc7U How to build webpages with html, css, javascript tutorial for beginners. In this video, we'll cover how to develop websites using just the computer you have already. I'm using Sublime Text editor http://www.sublimetext.com/ and Google Chrome Other great text editors: Atom.io Brackets.io Notepad++ Now, if you just want a website and don't want to be a web developer, don't mess with learning all of this, get a site from squarespace.com and use squarespace plugins from http://thecustomsquare.com to make your site unique. Learn how to develop your own websites using the computer you already have. The basics of web development is the html file, which is centered around html tags. In this first lesson, we'll cover the basic html tags and how to use them to build a web page. Once you learn HTML, you can use CSS to add style to your pages and JavasScript to add animation and fun features. Learn Javascript with the Javascript tutorials for beginners: https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv -~-~~-~~~-~~-~- Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device" https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-
Views: 3516344 LearnCode.academy
CSS - Show Text Over An Image On Hover Without JavaScript ( With And Without Footer Text)
 
09:47
Note : This may not a SEO friendly approach. Learn how to place / show text over an image on hover without JavaScript ( with And without footer text) + On hover zoom effect. About me : https://www.youtube.com/c/zfunx/about Check the latest cross browser code at (updated on 4-sep-2017) : https://codepen.io/zFunx/pen/GveLaQ CSS used in this video ( without footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:100%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.6); color:#fff; padding:0 8px; opacity:0; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ opacity:1; top:0; padding:8px; } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ------------------------------------------------------------- CSS used in this video ( with footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:90%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.3); color:#fff; padding:0 8px; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ top:0; padding:8px; background-color:rgba(0,0,0,0.6); } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ----------------------------------------------------- Image used : http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg
ASP NET TextBox and JavaScript
 
09:16
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/aspnet-textbox-and-javascript.html In this video we will discuss 1. JavaScript focus method 2. JavaScript select method 3. How to count the number of characters as you type in a textbox and display that count in a label control JavaScript focus method : focus() method is used to put the keyboard cursor in a particular textbox when the web page loads so that we can start typing without having to first click in the textbox with the mouse. For example, when a web page with the following HTML and JavaScript is loaded, the keyboard cursor is already in the textbox waiting for the user to type his input. There is no need for the user to first click in the textbox with his mouse. Name : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [script type="text/javascript"] document.getElementById("TextBox1").focus(); [/script] focus() method can be used with most HTML elements. For example, when a web page with the following HTML and JavaScript is loaded, the keyboard focus is set to DropDownList1 control. You can change the Gender value in the DropDownList by pressing ALT + Down Arrow keys simultaneously. Since we are using focus() method there is no need to first click on the DropDownList with the mouse. [table style="border:1px solid black"] [tr] [td]Name[/td] [td][asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Gender[/td] [td] [asp:DropDownList ID="DropDownList1" runat="server"] [asp:ListItem Text="Male" Value="Male"][/asp:ListItem] [asp:ListItem Text="Female" Value="Female"][/asp:ListItem] [/asp:DropDownList] [/td] [/tr] [/table] [script type="text/javascript"] document.getElementById("DropDownList1").focus(); [/script] JavaScript select method : select() method is used to select the contents of a text field, so when you start typing, the new text that you have typed will automatically replace the existing selected text. You can use select() method with textbox and textarea controls. When a web page with the following HTML and JavaScript is loaded, the text in the textarea element is selected and when you start typing, the new text that you typed will replace the existing selected text. [table style="border:1px solid black"] [tr] [td]Name[/td] [td][asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Comments[/td] [td] [asp:TextBox ID="TextBox2" TextMode="MultiLine" runat="server" Text="Type your comments here"][/asp:TextBox] [/td] [/tr] [/table] [script type="text/javascript"] document.getElementById("TextBox2").select(); [/script] How to count the number of characters as you type in a textbox and display the count in a label control Name : [asp:TextBox ID="TextBox1" runat="server" onkeyup="CountCharacters();"] [/asp:TextBox] [asp:Label ID="Label1" runat="server"][/asp:Label] [script type="text/javascript"] function CountCharacters() { document.getElementById("Label1").innerHTML = document.getElementById("TextBox1").value.length + " charactes"; } [/script]
Views: 36021 kudvenkat
jquery image slideshow with thumbnails
 
15:25
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-slideshow-with-thumbnails.html In this video, we will discuss creating a simple image slideshow using jQuery. We will be using setInterval() and clearInterval() JavaScript methods to achieve this. We discussed these functions in detail in Part 34 of JavaScript Tutorial. When you click "Start Slide Show" button the image slideshow should start and when you click the "Stop Slide Show" button the image slideshow should stop. 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 Here are the steps to create the image slideshow using jQuery 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 the 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. Also add a jQuery file. Step 5 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page. <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 () { var imageURLs = new Array(); var intervalId; var btnStart = $('#btnStartSlideShow'); var btnStop = $('#btnStopSlideShow'); $('#divId img').each(function () { imageURLs.push($(this).attr('src')); }); function setImage() { var mainImageElement = $('#mainImage'); var currentImageURL = mainImageElement.attr('src'); var currentImageIndex = $.inArray(currentImageURL, imageURLs); if (currentImageIndex == (imageURLs.length - 1)) { currentImageIndex = -1; } mainImageElement.attr('src', imageURLs[currentImageIndex + 1]) } btnStart.click(function () { intervalId = setInterval(setImage, 500); $(this).attr('disabled', 'disabled'); btnStop.removeAttr('disabled'); }); btnStop.click(function () { clearInterval(intervalId); $(this).attr('disabled', 'disabled'); btnStart.removeAttr('disabled'); }).attr('disabled', 'disabled'); }); </script> </head> <body style="font-family:Arial"> <input id="btnStartSlideShow" type="button" value="Start Slideshow" /> <input id="btnStopSlideShow" type="button" value="Stop Slideshow" /> <br /><br /> <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>
Views: 35460 kudvenkat
jQuery checked selector
 
10:35
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-checked-selector.html In this video we will discuss the jQuery :checked selector. The :checked selector selects all checked checkboxes or radio buttons. Let us understand this with an example. Selects all checked radio button elements $('input[type="radio"]:checked') Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed. When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnSubmit').click(function () { var result = $('input[type="radio"]:checked'); if (result.length > 0) { $('#divResult').html(result.val() + " is checked"); } else { $('#divResult').html("No radio button checked"); } }); }); </script> </head> <body style="font-family:Arial"> Gender : <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female <br /><br /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html> Selects all checked checkbox elements $('input[type="checkbox"]:checked') Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed. When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnSubmit').click(function () { var result = $('input[type="checkbox"]:checked'); if (result.length > 0) { var resultString = result.length + " checkboxe(s) checked<br/>"; result.each(function () { resultString += $(this).val() + "<br/>"; }); $('#divResult').html(resultString); } else { $('#divResult').html("No checkbox checked"); } }); }); </script> </head> <body style="font-family:Arial"> Skills : <input type="checkbox" name="skills" value="JavaScript" />JavaScript <input type="checkbox" name="skills" value="jQuery" />jQuery <input type="checkbox" name="skills" value="C#" />C# <input type="checkbox" name="skills" value="VB" />VB <br /><br /> <input id="btnSubmit" type="submit" value="submit" /> <br /><br /> <div id="divResult"> </div> </body> </html>
Views: 109213 kudvenkat
JavaScript event capturing
 
08:36
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/01/javascript-event-capturing.html Event capturing is the opposite of event bubbling. We discussed event bubbling in detail in Part 40 of JavaScript tutorial. With event bubbling the event bubbles up from the inner most element to the outer most element in the DOM hierarchy. With event capuring the opposite happens, the event gets captured from the outer most element to innermost element. In real world event capturing is rarely used. Let us understand this with an example. In the following example we have 3 [div] nested elements. Notice that we are using addEventListener() method to assign event handler to each [div] element. To enable event capturing we have set the third parameter (phase) of addEventListener() method to true. Now when you click on the innermost [div] (DIV3), notice that the events are fired from the outermost [div] to innermost [div] (DIV1 =] DIV 2 =] DIV 3). [html] [head] [style type="text/css"] .divStyle { display: table-cell; border: 5px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div id="DIV1" class="divStyle"] DIV 1 [div id="DIV2" class="divStyle"] DIV 2 [div id="DIV3" class="divStyle"] DIV 3 [/div] [/div] [/div] [script type="text/javascript"] var divElements = document.getElementsByTagName('div'); for (var i = 0; i [ divElements.length; i++) { divElements[i].addEventListener("click", clickHandler, true); } function clickHandler() { alert(this.getAttribute("id") + " click event handled"); } [/script] [/body] [/html] Please note : IE8 and earlier versions does not support addEventListener() method. This implies that event capturing is not supported in IE8 and earlier versions, and hence the above code will not work in IE 8 and earlier versions. Stopping event capturing : Stopping event capturing is very similar to stopping event bubbling. With the example below, when you click on any [div] element notice that DIV 1 element handles the click event and it does not get captured down. [html] [head] [style type="text/css"] .divStyle { display: table-cell; border: 5px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div id="DIV1" class="divStyle"] DIV 1 [div id="DIV2" class="divStyle"] DIV 2 [div id="DIV3" class="divStyle"] DIV 3 [/div] [/div] [/div] [script type="text/javascript"] var divElements = document.getElementsByTagName('div'); for (var i = 0; i [ divElements.length; i++) { divElements[i].addEventListener("click", clickHandler, true); } function clickHandler(event) { event.stopPropagation(); alert(this.getAttribute("id") + " click event handled"); } [/script] [/body] [/html] Using addEventListener() method with last argument set to true is the only way to enable event capturing. If the thid parameter (phase) is set to true event capturing is enabled and if it is set to false event bubbling is enabled. If you want both even bubbling and capturing to be enabled, then assign handlers 2 times, once with the phase parameter set to false and once with the phase parameter set to true as shown below. [html] [head] [style type="text/css"] .divStyle { display: table-cell; border: 5px solid black; padding: 20px; text-align: center; } [/style] [/head] [body] [div id="DIV1" class="divStyle"] DIV 1 [div id="DIV2" class="divStyle"] DIV 2 [div id="DIV3" class="divStyle"] DIV 3 [/div] [/div] [/div] [script type="text/javascript"] var divElements = document.getElementsByTagName('div'); for (var i = 0; i [ divElements.length; i++) { divElements[i].addEventListener("click", clickHandler, false); divElements[i].addEventListener("click", clickHandler, true); } function clickHandler() { alert(this.getAttribute("id") + " click event handled"); } [/script] [/body] [/html] With both event capturing and bubbling enabled, events are first captured from the outermost element to the innermost element and then bubbles up from the innermost to the outermost element.
Views: 39016 kudvenkat
Form validation with JavaScript (on user registration form)
 
21:59
Source code: https://goo.gl/sihxZ7 Support me on Patreon: https://goo.gl/hv7yjB Using JavaScript, the input fields of the registration page are validated individually. Form submitting is prevented if all the form validation rules are not fulfilled. Styled error messages are displayed underneath each field and the user is prompted to re-enter the correct value. To learn how to insert in the database, check out this video: https://www.youtube.com/watch?v=gTQU_veJ6Kk - - - - - - - - - - - - - - - - - - - C O U R S E S - - - - - - - - - - - - - - - - - - - { B O O T C A M P S } - - The Web Developer Bootcamp: http://bit.ly/2NpDcKR - - The Complete Web Developer in 2018: Zero to Mastery: http://bit.ly/2N0ZW4F { P H P } - - PHP for Beginners - Become a PHP Master - CMS Project: http://bit.ly/2u5QMIw - - Create a REAL Social Network like Facebook in PHP + MySQL: http://bit.ly/2wUv3om - - PHP with Laravel for beginners - Become a Master in Laravel: http://bit.ly/2QcbeRf - - PHP OOP - Understand Object Oriented Programming in PHP: http://bit.ly/2CysNs3 { P Y T H O N } - - Complete Python Bootcamp: Go from zero to hero in Python 3: http://bit.ly/2wSybRs - - Complete Python Masterclass: http://bit.ly/2oNWfQW { J A V A S C R I P T } - - Modern JavaScript From The Beginning: http://bit.ly/2wUHdwD - - The Complete JavaScript Course 2018: Build Real Projects!: http://bit.ly/2wUlZ1L - - Modern React with Redux: http://bit.ly/2QcWBx0 - - MERN Stack Front To Back: Full Stack React, Redux & Node.js: http://bit.ly/2CAaeDY
Views: 324267 Awa Melvine
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: 44159 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: 72080 kudvenkat
Responsive Navigation Bar with HTML CSS and Javascript | Responsive Menu
 
11:27
My Amazon Shop link : https://www.amazon.in/shop/onlinetutorials ------------------------ Responsive Dropdown Navigation Bar with HTML and CSS https://www.youtube.com/watch?v=krZvPvpOHm4 Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Views: 230232 Online 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: 29152 kudvenkat
Colour Type Text Effects | Text Typing Animation Tutorial Using html and CSS
 
07:15
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Credit Track: Tobu - Roots [NCS Release] Music provided by NoCopyrightSounds. https://www.youtube.com/watch?v=7wNb0pHyGuI
Views: 7375 Online Tutorials
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: 111121 kudvenkat
Partial Print Document JavaScript Tutorial HTML div Content
 
05:16
Lesson Code: http://www.developphp.com/video/JavaScript/Partial-Print-Document-Tutorial-HTML-div-Content Learn to allow users to print specific parts of your documents instead of printing the entire web page. We will apply print buttons near each printable portion of the document.
Views: 90565 Adam Khoury