Home
Search results “Javascript pointer style” for the 2015
Create DIV Boxes with Arrows and Pointers, using CSS
 
08:46
CSS is used to create boxes with arrows that point towards content. These are often used as tooltips and quick instructions that pop up to guide you along a website. This tutorial shows how to create these divs with arrows, and the logic behind the CSS code. Here's the code block used in this tutorial: //The main box .arrowBox{ width: 200px; height: 30px; background-color: #ffc728; border-radius: 5px; position: fixed; top: 3em; left: 230px; padding: 10px; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22px; color: #313333; text-align: center; } //The arrow pointer .arrowBox:after{ content: ' '; width: 0px; height: 0px; border-top: 10px solid #ffc728; border-left: 10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid transparent; position: absolute; left: 50%; top: 100%; margin-left: -10px; } Background music by: YouTube Free Music (End of Summer, and Pas de Deux)
Views: 35511 Arjun Khara
Image gallery with thumbnails in JavaScript
 
13:13
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/image-gallery-with-thumbnails-in.html In this video we will discuss creating image gallery with thumbnails in JavaScript. When you click on the image thumnail, the respective image should be displayed in the main section of the page. For the purpose of this demo we will be using the images that can be found on any windows machine at the following path. C:\Users\Public\Pictures\Sample Pictures Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo. Step 2 : Right click on the Project Name in Solution Explorer in Visual Studio and create a new folder with name = Images. Step 3 : Copy images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project. Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page. It should automatically add HTMLPage1.htm. Step 5 : Copy and paste the following HTML and JavaScript code in HTMLPage1.htm page. [html] [head] [style type="text/css"] .imgStyle { width:100px; height:100px; border:3px solid grey; } [/style] [/head] [body] [img id="mainImage" height="500px" width="540x" src="/Images/Hydrangeas.jpg" style="border:3px solid grey"/] [br /] [div id="divId" onclick="changeImageOnClick(event)"] [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] [script type="text/javascript"] var images = document.getElementById("divId").getElementsByTagName("img"); for (var i = 0; i [ images.length; i++) { images[i].onmouseover = function () { this.style.cursor = 'hand'; this.style.borderColor = 'red'; } images[i].onmouseout = function () { this.style.cursor = 'pointer'; this.style.borderColor = 'grey'; } } function changeImageOnClick(event) { event = event || window.event; var targetElement = event.target || event.srcElement; if(targetElement.tagName == "IMG") { mainImage.src = targetElement.getAttribute("src"); } } [/script] [/body] [/html] Finally run the application and test it.
Views: 63020 kudvenkat
Step progress bar Tutorial, CSS.
 
09:29
Make sure to checkout Kodhus UI library: https://kodhus.com Demo: http://fbfriends.nailfashionsweden.se/default.html In this tutorial, you learn how to create a step progress bar fully in CSS and html. Step progress bar is used in multi step forms and multi step procedures that the start of a step/level is dependent on the previous step to be finished first. Do not forget to subscribe to the channel to get notified for new cool tutorials. Happy coding! Let me know in the comments, if you have any question or feedback.
Views: 183161 FrontendTips
Pointer polyfill - Mobile Web Development
 
00:28
This video is part of an online course, Mobile Web Development. Check out the course here: https://www.udacity.com/course/cs256.
Views: 207 Udacity
jquery, javascript - content editable div, insert text, set caret position, summernote
 
00:50
jquery, javascript - content editable div, insert text, set caret position, summernote code: https://github.com/a1y25/content-editable-div-summernote-insertText-at-cursor-caret
Views: 4940 Code Travel / Arjun
jQuery image gallery
 
10:19
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-image-gallery.html In this video we will discuss how to create an image gallery with thumbnails using jQuery. We discussed how to do exactly the same thing using raw JavaScript in Part 41 of JavaScript tutorial. When you click on the image thumnail, the respective image should be displayed in the main section of the page. For the purpose of this demo we will be using the images that can be found on any windows machine at the following path. C:\Users\Public\Pictures\Sample Pictures Step 1 : Open Visual Studio and create a new empty asp.net web application project. Name it Demo. Step 2 : Right click on the Project Name in Solution Explorer in Visual Studio and create a new folder with name = Images. Step 3 : Copy images from C:\Users\Public\Pictures\Sample Pictures to Images folder in your project. Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page. It should automatically add HTMLPage1.htm. Step 5 : Add a reference to the download jQuery file. I am using jquery-1.11.2.js version for this demo. Step 6 : Copy and paste the following HTML and jQuery code in HTMLPage1.htm page. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <style type="text/css"> .imgStyle { width: 100px; height: 100px; border: 3px solid grey; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#divId img').on({ mouseover: function () { $(this).css({ 'cursor': 'hand', 'border-Color': 'red' }); }, mouseout: function () { $(this).css({ 'cursor': 'default', 'border-Color': 'grey' }); }, click: function () { var imageURL = $(this).attr('src'); $('#mainImage').fadeOut(500, function () { $(this).attr('src', imageURL); }).fadeIn(500); } }); }); </script> </head> <body> <img id="mainImage" style="border:3px solid grey" src="/Images/Hydrangeas.jpg" height="500" width="540" /> <br /> <div id="divId"> <img class="imgStyle" src="/Images/Hydrangeas.jpg" /> <img class="imgStyle" src="/Images/Jellyfish.jpg" /> <img class="imgStyle" src="/Images/Koala.jpg" /> <img class="imgStyle" src="/Images/Penguins.jpg" /> <img class="imgStyle" src="/Images/Tulips.jpg" /> </div> </body> </html> In our next video, we will discuss how to make this image gallery a bit more efficient using the concept of event bubbling.
Views: 48406 kudvenkat
jquery caret -  get last text Cursor Position in textarea
 
01:07
jquery caret - get last text Cursor Position in textarea music by: nocopyrightsound
Views: 1462 Code Travel / Arjun
JavaScript event object
 
11:19
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-object.html Whenever an event (like click, mouseover, mouseout etc) occurs, the relevant data about that event is placed into the event object. For example, the event object contains event data like, the X and Y coordinates of the mouse pointer when the event occurred, the HTML element that fired the event, which mouse button is clicked etc. Obtaining the event object is straightforward. The event object is always passed to the event handler method. Let us understand this with an example. When we click the button, we want to capture the following event data 1. Event name 2. Mouse X coordinate when the event occured 3. Mouse Y coordinate when the event occured 4. The control that raised the event 5. The HTML tag name that raised the event Notice that in the example below, we are passing event object as a parameter to the event handler method. The type property gives us the event name that occured. clientX and clientY properties return the X and Y coordinates of the mouse pointer. Target property returns the HTML element that raised the event. Target property is supported by all modern browsers and Internet Explorer 9 and above. The following code will not work in Internet Explorer 8 and earlier versions. In addition to click event, the following example returns mouseover and mouseout event data. [input type="button" value="Click me" id="btn" onclick="displayEventDetails(event)" onmouseover="displayEventDetails(event)" onmouseout="displayEventDetails(event)" /] [br /][br /] [div id="resultDiv"][/div] [script type="text/javascript"] function displayEventDetails(event) { var eventDetails = "Event = " + event.type + "[br/] X = " + event.clientX + "[br/]Y = " + event.clientY + "[br/]Target Type = " + event.target.type + "[br/]Target Tag Name = " + event.target.tagName; document.getElementById("resultDiv").innerHTML = eventDetails; } [/script] The following code works in all browsers including Internet Explorer 8 and earlier versions. IE 8 and earlier versions use srcElement property to return the HTML element that raised the event. IE 9 and all the other modern browsers use target property. So this is a cross browser solution. [input type="button" value="Click me" id="btn" onclick="displayEventDetails(event)" onmouseover="displayEventDetails(event)" onmouseout="displayEventDetails(event)" /] [br /][br /] [div id="resultDiv"][/div] [script type="text/javascript"] function displayEventDetails(event) { var sourceElement; if (event.srcElement) { sourceElement = event.srcElement; } else { sourceElement = event.target; } var eventDetails = "Event = " + event.type + "[br/] X = " + event.clientX + "[br/]Y = " + event.clientY + "[br/]Target Type = " + sourceElement.type + "[br/]Target Tag Name = " + sourceElement.tagName; document.getElementById("resultDiv").innerHTML = eventDetails; } [/script] The following example retrieves mousemove event data. Notice that as you move the mouse pointer over the button, the X & Y coordinates changes. [input type="button" value="Click me" id="btn" onmousemove="displayEventDetails(event)" /] [br /][br /] [div id="resultDiv"][/div] [script type="text/javascript"] function displayEventDetails(event) { var sourceElement; if (event.srcElement) { sourceElement = event.srcElement; } else { sourceElement = event.target; } var eventDetails = "Event = " + event.type + "[br/] X = " + event.clientX + "[br/]Y = " + event.clientY + "[br/]Target Type = " + sourceElement.type + "[br/]Target Tag Name = " + sourceElement.tagName; document.getElementById("resultDiv").innerHTML = eventDetails; } [/script]
Views: 41647 kudvenkat
Pointer events - Mobile Web Development
 
01:13
This video is part of an online course, Mobile Web Development. Check out the course here: https://www.udacity.com/course/cs256.
Views: 822 Udacity
Css shape
 
07:04
Kako pravilno da rasporedite text oko slike
Views: 4967 Danilo Vesovic
programare c/c++ variabila de tip char si pointer char
 
01:53
PAYPAL https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=P32WDH568LWH4 YOUTUBE https://www.youtube.com/user/slevin741/videos BLOGSPOT http://rotechtips.blogspot.ro FACEBOOK https://www.facebook.com/rotechtips TWITTER https://twitter.com/rotechtips GMAIL [email protected] YAHOO [email protected] HOTMAIL [email protected] Tutoriale din domeniul IT cum ar fi limbajele de programare html,css,javascript, jquery,php,mysql,c/c++. Tutoriale despre software,sisteme de operare Devc++,metatrader 4,windows 7,linux,phpmyadmin,xampp,codeigniter cascading style sheets,responsive web development,mobile development,hardware,cpu, videocard,ram,memory,windows tweaks Tutoriale din domeniul IT cum ar fi limbajele de programare html,css,javascript, jquery,php,mysql,c/c++. Tutoriale despre software,sisteme de operare Devc++,metatrader 4,windows 7,linux,phpmyadmin,xampp,codeigniter cascading style sheets,responsive web development,mobile development,hardware,cpu, videocard,ram,memory,windows tweaks STIRI din lumea it,tutoriale scrise,tutoriale video,grup de google+ discutii despre ultimele trenduri in tehnologie,configurari hardware,tranzactii valutare forex, software trading,bursa sportiva betfair,pariuri sportive,android,aplicatii google play,iphone,programare web design,programare grafica corel,photoshop, autocad,photoscape,windows server,microsoft office,excel,word,power point, devirusare,instalari software,depanare windows,helpdesk
Views: 307 stripes
Make a Div Clickable as a Link
 
04:08
Make a div tag clickable as a link using simple javascript. Add the following code to the div tag: onclick="location.href='http://www.google.com';" style="cursor:pointer;" Change the link to whatever link you wish to use. Link to website post: http://startwebdesign.co.uk/tutorials/?p=33
Views: 15592 StartWebTutorials
CSS Tutorial - 27: Cursor Properties
 
04:08
Thanks for watching! Check out my other tutorials at: https://www.youtube.com/user/madhurbhatia89?feature=guide
Views: 1204 The Bad Tutorials
Custom Cursor in CSS
 
01:59
Views: 3391 TheMymTutorial
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: 23307 kudvenkat
jQuery selectable filter
 
13:29
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-selectable-filter.html In this video we will discuss jQuery selectable filter option with an example. Along the way we will also discuss destory method. This is continuation to Part 97. Please watch Part 97 from jQuery Tutorial before proceeding. Here is what we want to be able to do When "Exclude Weekends" checkbox is checked, we should not be able to select weekends (Sat and Sun) When "Exclude Weekends" checkbox is not checked, we should be able to select all days including weekends (Sat and Sun) Code used in the demo <%@ 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 () { var selectableList = $('#selectable'); selectableList.selectable({ stop: getSelectedItems }); function getSelectedItems() { var selectedItems = ''; $('.ui-selected').each(function () { selectedItems += $(this).text() + '<br/>'; }); $('#result').html(selectedItems); } function createSelectableList(filterValue) { selectableList.selectable('destroy').selectable({ stop: getSelectedItems, filter: filterValue }); $('#selectable li').removeClass('ui-selected'); $('#result').empty(); var weekends = $('li[data-value="weekend"]'); if (filterValue == '*') { weekends.removeClass('excluded'); } else { weekends.addClass('excluded'); } } $('#cbExclude').click(function () { if ($(this).is(':checked')) { createSelectableList('li[data-value="weekday"]'); } else { createSelectableList('*'); } }); }); </script> <style> li { display: inline-block; border: 1px solid black; padding: 20px; cursor: pointer; } .ui-selecting { background-color: grey; color: white; } .ui-selected { background-color: green; color: white; } .excluded { background-color: red; color:white; cursor:default } </style> </head> <body style="font-family: Arial"> <form id="form1" runat="server"> Exclude Weekends : <input id="cbExclude" type="checkbox"/> <ul id="selectable"> <li data-value="weekday">Mon</li> <li data-value="weekday">Tue</li> <li data-value="weekday">Wed</li> <li data-value="weekday">Thu</li> <li data-value="weekday">Fri</li> <li data-value="weekend">Sat</li> <li data-value="weekend">Sun</li> </ul> You selected : <div id="result"></div> </form> </body> </html>
Views: 14532 kudvenkat
JavaScript Tutorial For Beginners #40 - The onClick Event
 
08:05
Hey ninjas / ninjarettes, in this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites. In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. Any questions, fire away :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== 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: 78004 The Net Ninja
JavaScript popup window
 
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/01/javascript-popup-window_22.html In this video we will discuss, how to open a popup window using JavaScript. To open a popup window, use window.open() method. All the parameters are optional. window.open(URL, name, features, replace) URL - URL of the page to open. If URL is not specified, a new window with about:blank is opened name - Specifies the target attribute or the name of the window. _blank - URL is loaded into a new window. This is the default value if not specified. _parent - URL is loaded into the parent frame _self - URL replaces the current page _top - URL replaces any framesets that may be loaded name - name of the window features - Must be a comma-separated list. Some of the browsers does not support these features. menubar (yes/no) - Shows or hides the browser menu toolbar (yes/no) - Shows or hides the browser navigation bar location (yes/no) - Shows or hides the address field status (yes/no) - Shows or hides the status bar resizable (yes/no) - Whether or not the window is resizable scrollbars (yes/no) - Whether or not to display scroll bars top(pixels) - The top position of the window left(pixels) - The left position of the window height (pixels) - The height of the new window width (pixels) - The width of the new window replace - Specifies whether the URL creates a new entry or replaces the current entry in the browser history. Works only if the url is loaded into the same window. true - URL replaces the current document in the browser history list false - URL creates a new entry in the browser history list No parameters are passed to window.open() method. Since URL is not specified, a new window with about:blank will be opened. [input type="button" value="Open popup" onclick="window.open()" /] Most modern browsers open new tabs instead of separate windows. If you want to open the popup in a new window, one workaround I have found is to specify the URL, name, and features(height and width) parameters. This may not work in all browsers and it also depends on user's browser preferences. [input type="button" value="Open popup" onclick="window.open('http://google.com', '_blank', 'height=200,width=200')" /] When name parameter is set to _self, the new window replaces the current window [input type="button" value="Open popup" onclick="window.open('http://google.com', '_self')" /] Specify where you want the new popup window to be positioned using top and left features. [input type="button" value="Open popup" onclick="window.open('http://google.com', 'My Window', 'height=300,width=300, top=400, left=400')" /] Disable scrollbars and resizing. Works in IE but not in Chrome. [input type="button" value="Open popup" onclick="window.open('http://google.com', 'My Window', 'height=300,width=300, scrollbars=no, resizable=no')" /] To close pouup use window.close() method. [input type="button" value="Open popup" onclick="openPopup()" /] [input type="button" value="Close popup" onclick="closePopup()" /] [script type="text/javascript"] var popup; function openPopup() { popup = window.open("http://google.com","My Window", "height=300,width=300") } function closePopup() { popup.close(); } [/script]
Views: 131831 kudvenkat
jQuery mouse events
 
12:21
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-mouse-events.html In this video we will discuss jQuery mouse events If you want to follow along with the example, you will need the help image and the HTML that is available on my blog at the following link http://csharp-video-tutorials.blogspot.com/2015/04/jquery-mouse-events.html When the mouse is over the help icon, we want to display the help text, when the mouse is out, hide the help text. To achieve this mouseover and mouseout events can be used as shown below. $(document).ready(function () { $('img[src="help.png"]').mouseover(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }).mouseout(function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } }); mouseenter and mouseleave events can also be used. $(document).ready(function () { $('img[src="help.png"]').mouseenter(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }).mouseleave(function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } }); We can also achieve the same using hover. hover() function accepts two function arguments, one for mouseenter event and one for mouseleave event. $( selector ).hover( handlerIn, handlerOut ) is shorthand for $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ) $(document).ready(function () { $('img[src="help.png"]').hover(function () { $('#' + getDivId(this)).fadeIn(400); $(this).css('cursor', 'pointer'); }, function () { $('#' + getDivId(this)).fadeOut(400); }); function getDivId(helpIcon) { var helpIconId = $(helpIcon).attr('id'); return helpIconId.replace('img', 'div'); } });
Views: 43937 kudvenkat
jQuery event object
 
11:53
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-event-object.html In this video we will discuss 1. How to retrieve event data using event object 2. How to convert JavaScript event object to jQuery event object Whenever an event (like click, mouseover, mouseout etc) occurs, the relevant data about that event is placed into the event object. For example, the event object contains event data like, the X and Y coordinates of the mouse pointer when the event occurred, the HTML element that fired the event, which mouse button is clicked etc. Obtaining the event object is straightforward. The event object is always passed to the event handler method. Let us understand this with an example. When we click the button, we want to capture the following event data 1. Event name 2. Mouse X coordinate when the event occured 3. Mouse Y coordinate when the event occured 4. The control that raised the event 5. The HTML tag name that raised the event Notice that in the example below, we are passing event object to getEventDetails() method. This object is the raw JavaScript event object. The type property gives us the event name that occured. pageX and pageY properties return the X and Y coordinates of the mouse pointer. Target property returns the HTML element that raised the event. Target, pageX and pageY properties are supported by all modern browsers and Internet Explorer 9 and above. The following code will not work in Internet Explorer 8 and earlier versions. In addition to click event, the following example returns mouseover and mouseout event data. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn').click(function () { getEventDetails(event); }).mouseover(function () { getEventDetails(event); }).mouseout(function () { getEventDetails(event); }); function getEventDetails(event) { var eventDetails = "Event = " + event.type + "<br/> X = " + event.pageX + "<br/>Y = " + event.pageY + "<br/>Target Type = " + event.target.type + "<br/>Target Tag Name = " + event.target.tagName; $('#divResult').html(eventDetails); } }); </script> </head> <body style="font-family:Arial"> <input id="btn" type="button" value="Click me" /><br /><br /> <div id="divResult"></div> </body> </html> Cross-browser solution : For the above code to work in all browsers including Internet Explorer 8 and earlier versions, modify getEventDetails() function as shown below. Notice that we are converting JavaScript event object to jQuery event object using $.event.fix() function getEventDetails(event) { var e = $.event.fix(event); var eventDetails = "Event = " + e.type + "<br/> X = " + e.pageX + "<br/>Y = " + e.pageY + "<br/>Target Type = " + e.target.type + "<br/>Target Tag Name = " + e.target.tagName; $('#divResult').html(eventDetails); }
Views: 38308 kudvenkat
7.6: Clicking on Objects - p5.js Tutorial
 
12:26
This video covers how to pass the mousePressed() event to objects drawn in your canvas. Next video: https://youtu.be/HXOD_XDA-KU?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA Support this channel on Patreon: https://patreon.com/codingtrain Contact: https://twitter.com/shiffman Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics Link to code on Github: https://github.com/CodingTrain/Rainbow-Code p5.js: http://p5js.org For More p5.js Videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA Help us caption & translate this video! http://amara.org/v/Qbue/
Views: 42179 The Coding Train
CSS tutorial for beginners - CSS cursor properties video lecture-17
 
06:07
CSS cursor properties - auto, crosshair, default, pointer, text, wait, help
Views: 102 S3 School
Demo of CSS “pointer-events: none” in store window
 
00:37
A little hover problem in the store window of Finn.no’s concept store in downtown Oslo.
jQuery datatable show hide columns
 
09:05
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/08/jquery-datatable-show-hide-columns.html In this video we will discuss how to show or hide columns of a jQuery datatable. This is continuation to Part 107. Please watch Part 107 from jQuery tutorial before proceeding. When we click on a column name, the respective column visibility should be toggled. The following are the changes required for the example we worked with in Part 107. Include the following HTML just above the datatable markup <div style="padding: 5px; padding-left: 0px"> <b>Show/Hide Column : </b> <a class="showHideColumn" data-columnindex="0">Id</a> - <a class="showHideColumn" data-columnindex="1">First Name</a> - <a class="showHideColumn" data-columnindex="2">Last Name</a> - <a class="showHideColumn" data-columnindex="3">Gender</a> - <a class="showHideColumn" data-columnindex="4">Job Title</a> - <a class="showHideColumn" data-columnindex="5">Web Site</a> - <a class="showHideColumn" data-columnindex="6">Salary</a> - <a class="showHideColumn" data-columnindex="7">Hire Date</a> </div> Include the following style section, in the head section of the page <style> .showHideColumn { cursor: pointer; color: blue; } </style> Finally, include the following code block in the success callback function $('.showHideColumn').on('click', function () { var tableColumn = datatableInstance.column($(this).attr('data-columnindex')); tableColumn.visible(!tableColumn.visible()); });
Views: 32660 kudvenkat
JavaScript mouse events
 
07:09
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-mouse-events.html In this video we will discuss the commonly used JavaScript mouse events. Most browsers support these events. mouseover - Occurs when the mouse pointer is moved over an element mouseout - Occurs when the mouse pointer is moved out of an element mousemove - Occurs when the mouse pointer is moving while it is over an element mouseup - Occurs when the mouse button is released over an element mousedown - Occurs when the mouse button is pressed over an element click - Occurs when the mouse button is clicked. mousedown, mouseup & click events occur in sequence dblclick - Occurs when the mouse button is double-clicked. mousedown, mouseup, mousedown, mouseup, click & dblclick events occur in sequence contextmenu - Occurs when the mouse right button is clicked. mousedown, mouseup & contextmenu events occur in sequence Here is an example which logs the mouse events to textarea element as they occur. [input type="button" value="Single, Double or Right Click" onclick="logEvent(event)" onmousedown="logEvent(event)" onmouseup="logEvent(event)" onmouseover="logEvent(event)" onmouseout="logEvent(event)" ondblclick="logEvent(event)" oncontextmenu="logEvent(event)" /] [input type="button" value="Clear" onclick="clearText()"/] [br /][br /] [textarea id="txtArea" rows="10" cols="20"][/textarea] [script type="text/javascript"] function logEvent(event) { event = event || window.event; document.getElementById("txtArea").value += event.type + "\r\n"; } function clearText() { document.getElementById("txtArea").value = ""; } [/script]
Views: 35455 kudvenkat
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: 13758 kudvenkat
Pointer Events support multiple stylus/pen inputs simultaneously
 
00:20
Tracker demo http://patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer.html on Surface 3 with Surface Pen and a Wacom Intuos Pro - although Windows itself doesn't quite know what to do when both stylus/pen inputs are used at the same time (depending on device, it may ignore all but one, or "jump" the mouse cursor between the two), using Pointer Events we can easily detect both inputs independently Note how the first stylus/pen to be detected during an interaction will be flagged as the "primary" one with Pointer Events, which in my demo results in the second circle being drawn. As before, pressure information is also detected (influences the size of the circle). Demo requires a Pointer Events capable browser, like Internet Explorer 11 or Microsoft Edge.
Views: 166 Patrick Lauke
How to make a Triangle and circle in css - html div element
 
09:20
How to draw a triangle and circle in html using pure css html triangle shape css triangle div element html triangle down html symbols html triangle button html triangle right css triangle with border Make Shapes with CSS The Shapes of CSS html circle shape css circle div element css circle with border radius css shapes arrow css circles how to make a triangle in css how to make a triangle button in css how to make a triangle div css how to draw a triangle in css how to draw a triangle in css3 how to make a circle in css how to draw a circle in css how to draw a circle in css3 how to make a circle div in css how to create circles with css
Views: 57616 techsith
CSS Animation Events
 
08:40
Learn how to use the animationstart, animationiteration, and animationend events to do...something! --------------------- Visit kirupa.com: http://www.kirupa.com Check out the book: http://bit.ly/AnimBook
Views: 7378 Kirupa Chinnathambi
Binding event handlers using jquery on method
 
08:42
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/binding-event-handlers-using-jquery-on.html In this video we will discuss binding event handlers to events using on() method in jQuery In Part 33 of jQuery Tutorial, we discussed how to bind event handlers using bind() method. If you are using jQuery 1.7 or higher, you should be using on() and off() methods instead of bind() and unbind() methods. The syntax for using on() and off() methods is very similar to using bind() and unbind() methods. The following example is the same example we worked with in Part 33. Instead of using bind() and unbind() we are using on() and off() methods. Replace < with LESSTHAN symbol and > with GREATERTHAN symbol <html> <head> <title></title> <style> .ButtonStyle { background-color: red; cursor: pointer; font-weight: bold; color: white; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnClickMe').on('click mouseover mouseout', function (event) { if (event.type == 'click') { $('#divResult').html('Button Clicked at ' + 'X = ' + event.pageX + ' Y = ' + event.pageY); } else if (event.type == 'mouseover') { $(this).addClass('ButtonStyle'); } else { $(this).removeClass('ButtonStyle'); } }); $('#btnEnableMouseOverEffect').click(function () { $('#btnClickMe').on('mouseover', function () { $(this).addClass('ButtonStyle'); }); }); $('#btnDisableMouseOverEffect').click(function () { $('#btnClickMe').off('mouseover'); }); }); </script> </head> <body style="font-family:Arial"> <input id="btnClickMe" type="button" value="Click Me" /> <input id="btnEnableMouseOverEffect" type="button" value="Enable Mouse Over Effect" /> <input id="btnDisableMouseOverEffect" type="button" value="Disable Mouse Over Effect" /> <br /><br /> <div id="divResult"></div> </body> </html> In the example above we are binding a single anonymous function as the event handler for all the 3 events 1. click 2. mouseover 3. mouseout If you want to bind a different anonymous function, you could do so using the following syntax. $('#btnClickMe').bind({ click : function(event){ $('#divResult').html('Button clicked at X = ' + event.pageX + ' Y = ' + event.pageY); }, mouseover: function () { $(this).addClass('ButtonStyle'); }, mouseout : function () { $(this).removeClass('ButtonStyle'); } }); jQuery shorthand functions (.click, .mouseover, .mouseout etc.) call on() method behind the scenes. So far in this video series we have seen 3 different ways of binding event handlers in jQuery 1. Using jQuery shorthand functions (.click, .mouseover, .mouseout etc.) element.click(function () { ... }); 2. With jQuery version < 1.7, bind() method can be used element.bind('click', function () { ... }); 3. With jQuery version 1.7 or higher, on() method can be used. element.on('click', function () { ... }); According to jQuery.com, as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers.
Views: 34206 kudvenkat
My First Line of Code: Linus Torvalds
 
02:13
June 16 -- Linus Torvalds, who is known for developing the Linux kernel, talks to Bloomberg about his first line of code.
Views: 837664 Bloomberg
Javascript + Canvas Christmas Lights
 
00:17
An experiment in "DHTML", using Javascript and canvas to render an array of christmas lights that follow the mouse pointer. You can try it at schillmania(dot-com) /temp/xlsf2008/canvas.html - it doesn't work in IE, so you'll need Firefox, Safari or Opera or something. ;)
Views: 209 scottschiller
How To Change Your Cursor/Pointer! [VIRUS FREE] [SIMPLE]
 
02:59
Thanks for watching everybody! Links below: Cursors: http://bit.ly/1Bk9XLA DIM Cursor: http://bit.ly/1w1vbbD ▶ Facebook ▶ http://on.fb.me/Yg5iu5 ▶ Twitter ▶ http://bit.ly/1uEXgd5 ▶ G+ ▶ http://bit.ly/1uEXxN7
Views: 387006 Xaftos
Javascript Functions
 
07:37
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 Javascript functions are a critical organizational unit for Javascript code. They also promote code reuse. In this episode of QuickBytes, Mark Lassoff shows you how to create functions that receive parameters and return values. VISIT US ON FACEBOOK https://www.facebook.com/frameworkTechnicallySpeaking/ FOLLOW ON TWITTER https://twitter.com/fw_social INSTAGRAM https://www.instagram.com/frameworksocial/
Javascript Events Tutorial - How Web Developers Respond to User Input
 
18:50
Simple Javascript Events Tutorial with code! Almost every Web Developer finds themselves needing to respond to user actions on a page by changing content or adjusting the page display somehow. The way you do that is by listening to Javascript events. VIEW THE CODE: - addition: http://codepen.io/anon/pen/vOeeqG?editors=101 - pic link: http://codepen.io/anon/pen/vxYxKN?editors=101 Popular Javascript Events Are: - click - mouseenter - mouseleave - mousedown - mouseup - mousemove - keydown - keyup - blur - focus See list of all javascript events here: https://developer.mozilla.org/en-US/docs/Web/Events In this lesson, we'll add event listeners to html elements. When the users click, focus, blur, press a key, or move their mouse, javascript will get notified and we can make the webpage change. Listening to Javascript events is a bread and butter task for web development and web developers. -~-~~-~~~-~~-~- Learning Web Development? Watch the FREE COURSE: "Web Development for Absolute Beginners"! https://www.youtube.com/watch?v=gQojMIhELvM -~-~~-~~~-~~-~-
Views: 215025 LearnCode.academy
JAVASCRIPT/JQUERY How to track mouse coordinates
 
03:11
In this javascript exercise I`m trying to track mouse coordinates by using Jquery library. But we`ll make it more interesting - we will move our div element with X and Y coordinates according to mouse position, so our X and Y will "follow" our mouse cursor. ===================================== SUBSCRIBE FOR MORE: http://www.youtube.com/subscription_center?add_user=UC4_BmI7ztL9eJC4liCp0qjQ =====================================
Views: 1463 SIMPLECODE
C++ Tutorial [006] - if GERMAN
 
05:58
Liked meine Facebook Seite: http://www.facebook.com/Brotcrunsher
Views: 14539 Brotcrunsher
How to Replace Your HTML Elements by Using CSS
 
02:54
How to Replace Your HTML Elements by Using CSS. Part of the series: HTML Basics. One way that you can replace your HTML elements is through the use of CSS. Replace your HTML elements by using CSS with help from a web and graphics specialist in this free video clip. Read more: http://www.ehow.com/video_12219281_replace-html-elements-using-css.html
Views: 259 eHowTech
HTML/CSS Dersleri - Ders 13 - Gölgelendirme, Köşe yuvarlatma, Döndürme ve style etiketiyle CSS
 
41:30
Video içeriği ve Timeline; - Gölgelendirme - box-shadow: https://youtu.be/caMJavyHIAk?t=415 - Köşe yuvarlatma - border-radius: https://youtu.be/caMJavyHIAk?t=772 - Döndürme - transform:rotate: https://youtu.be/caMJavyHIAk?t=1038 - style etiketi kullanarak CSS: https://youtu.be/caMJavyHIAk?t=1222 Bu videoda oluşturulan uygulamalar için indirme linki http://bit.ly/1Zgv6B9
Views: 12019 Web Odası
Lambda Days 2015 -  Jan Pustelnik - Performance implications of various programming styles
 
21:52
In this talk we do some micro-benchmarking of various functional and procedural constructs in languages like Scala, Haskell, F#, D and C++. We analyze the impact of diverse programming styles, all in the functional genre, varying from pragmatic ""hidden mutation"" to highly monadic. We try to infer the overhead of particular constructs in a single programming language as well the alignment of those constructs with a given language. We also research the impact of constructs being used on the compilation time, which, in case of some languages, can become unacceptable. The examples range from elementary like quicksort and heapsort to more complex like dictionaries and trees. Also, some common idioms like error handling and IO are being analysed. On a side-note we also ask a deeper question - what is and what isn't functional programming and how its definition relates to the performance and correctness of programs.
Views: 388 Erlang Solutions
Laser 303 Green 532nm Burning Laser Pointer Review
 
11:25
Buy the Laser Here: http://goo.gl/bmqzeh http://goo.gl/KHUPAq UPDATE: Testing this laser with my LPM showed an average power of 60mw to 90mw. Back when I made this video, I didn't really do a good enough job explaining safety. You MUST wear laser safety glasses with these lasers, and never point them at another person, animal, vehicle, etc. If the links above go down, simply go on eBay and search "Laser 303 green". In this video I'm reviewing the Laser 303 green 532nm burning laser pointer. It's a Chinese laser pointer that has a surprisingly good quality for the $5-$10 price range. Definitely an extremely fun gadget, but be sure to use safety glasses and be careful where you aim it! If you have any questions at all, feel free to email me at [email protected] and be sure to subscribe to see more amazing product reviews! Buy the Safety Glasses Here: https://goo.gl/ZZnxDv http://goo.gl/NjUzWJ ------------------------------­------------------------------­------------------------------­--- Follow me on Twitter: https://twitter.com/XM360YT Check out my other laser videos here: https://www.youtube.com/playlist?list=PLOylA5ZYL2hjvg8Kdy4sIFKUS5Uf-3uWj The products reviewed on this channel are a mix of items received at a discounted or free sample price from manufacturers, along with products I buy on my own for full price. All the comments made are my 100% honest opinions; good or bad. If you’d like me to review your product, feel free to email me at [email protected]
Views: 748825 XM360
[ Arabic Tutorials ] Create Speech Bubble With :Before + Content
 
10:55
Learn how to create Speech Bubble and Triangle technique with before, after and content
Views: 7057 Elzero Web School
uwp pointer pressed and released with c# and xaml
 
02:53
Demo showing how to handle pressed and released pointer events in Windows 10 universal app. ASP.NET Web API https://www.youtube.com/playlist?list=PLOGAj7tCqHx9n-_d3YKwLJr-uHkmKZyih code: https://drive.google.com/file/d/0B61-MHkMYqM4eEJVREIzNU9PcUk/ Follow us on Facebook https://www.facebook.com/AllTech-1089946481026048/ Play Lists Universal Windows Platform - Win 10 Apps https://www.youtube.com/playlist?list=PLOGAj7tCqHx-ueT4SUQzlJ5gt5ualTYdS Amazon Lumberyard Game Engine https://www.youtube.com/playlist?list=PLOGAj7tCqHx-IZssU8ItkRAXstlyIWZxq c# exercises https://www.youtube.com/playlist?list=PLOGAj7tCqHx9H5dGNA4TGkmjKGOfiR4gk Java exercises https://www.youtube.com/playlist?list=PLOGAj7tCqHx-ey9xikbXOfGdbvcOielRw JavaScript exercises https://www.youtube.com/playlist?list=PLOGAj7tCqHx_grLMl0A0yC8Ts_ErJMJft
Views: 854 AllTech
C++11 :: Smart Pointers
 
21:38
Short talk about C++11 features that I find useful
Views: 4460 VertoStudio3D
JavaScript Video Tutorial – 23/40. on Mouse Over on Load
 
07:57
The video tutorial is best for JavaScript learning. It has been total 40 part. The part No:23/40. You can learn JavaScript by the tutorial. If you do question me how i can learn javaScript ? then i will give you answer the video tutorial is full course tutorial so you will be learn to hear. The video tutorial is 5 no: tutorial of JavaScript. The video tutorial name is JavaScript Video Tutorial – 23/40. on Mouse Over on Load. The video tutorials is full course serial video tutorials. JavaScript video tutorials. If you feel problem please comment me. I hope if you watch the video and learn do this you will be success. Web: https://www.tutorialcornerblog.blogspot.com Get update please Subscribe me. Thank you.
Views: 25 Tutorial Corner
We Can Code IT: Mel teaches High School Girls HTML, CSS, and Javascript - More CSS and HTML
 
05:05
More of the high school girls learning HTML, CSS, and Javascript. CSS selectors, background-color property, class attribute.
Views: 253 We Can Code IT
Hover Animation on a Google Chrome Tab
 
00:17
Something cool I noticed - when you hover over a tab in Chrome, a highlight follows the mouse cursor over the tab area.
Views: 1347 Kirupa Chinnathambi
JAVASCRIPT Printing properties of an object
 
01:33
We`ll use FOR IN loop to print all of the object`s properties on the page.
Views: 357 SIMPLECODE

Allegra d tem generico truss
Rosuvastatin 40 mg price in india
Provera 10 mg biverkningar
Conversant alimentar aspirin a protect 100 mg
15 mg buspar high