Home
Search results “Javascript pointer style” for the 2015
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: 40044 kudvenkat
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: 60947 kudvenkat
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: 4768 Code Travel / Arjun
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: 33766 Arjun Khara
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: 1393 SIMPLECODE
[ 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: 6905 Elzero Web School
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: 201 Udacity
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: 173257 FrontendTips
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: 772 Udacity
How To Change Mouse Pointer On Windows 7
 
04:48
How To Change Mouse Pointer On Windows 7 Today I Will Show You How To Change Mouse Cursors of Your Computer Step By Step. 1. Open http://www.cursors-4u.com/ Website. 2. Select Which Categories Mouse Pointers/Cursors Do You Want. 3. Now Select Your Mouse Pointer and Click Download Button. 4. After Downloading Your Mouse Cursors Set Extract It. 5. Copy All Your Mouse Pointers and Paste It C:\Windows\Cursors. 6. GoTo Windows Start At Left Buttom of Your Windows 7 Desktop or Computer. 7. Open "Control Panel". 8. Then Select "Hardware And Sound". 9. In Device and Printers Select "Mouse". 10. In Mouse Properties Select "Pointers". 11. Now Replace All Your Pointers One By One. Please, If you found this video (How to Change your Mouse Cursor Windows 7/8) helpful, Like,Comment and Share: https://youtu.be/vCmGoVykPhI You Can Subscribe To My Channel For More Video Tutorials: https://www.youtube.com/channel/UCBvblEXOGi5mfK2LVTIGlQw?sub_confirmation=1 Facebook: https://www.facebook.com/HowToWorldOfficial Google+: https://plus.google.com/u/0/+HowToWorld Twitter: https://twitter.com/HowToWorldOFCL
Views: 450125 How To
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: 33842 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: 1349 Code Travel / Arjun
Custom Cursor in CSS
 
01:59
Views: 3216 TheMymTutorial
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: 54364 techsith
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: 14879 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: 1166 The Bad Tutorials
Using Chrome Developer Tools: Elements (1/6)
 
13:42
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Views: 67175 Codecourse
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: 125136 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: 42384 kudvenkat
Navigation: highlighting the current page
 
02:45
Highlighting the current page in our navigation to denote which page we’re currently viewing. Code & tutorials: http://learn-the-web.algonquindesign.ca/topics/navigation/
Views: 23706 Thomas Bradley
Content customization
 
13:38
Tutorial about content customization, how to easy locate css of desired element. Video for my fan Darius Sams - not Dark Sirius :D. My custom css for button: .custombutton { max-width:100%; background:#1FDA9A none repeat scroll 0% 0%; color:#FFF; border:1px solid #1FDA9A; border-radius:0px; font-size: 1em; cursor:pointer; text-align:center; letter-spacing:1px; padding:0.8em 0.81em; } .custombutton:hover { text-decoration:none; background-position:0px -200px; color:#f2f2f2; }
Views: 54 Jak na to
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: 22189 kudvenkat
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: 373729 Xaftos
CSS tutorial for beginners - CSS cursor properties video lecture-17
 
06:07
CSS cursor properties - auto, crosshair, default, pointer, text, wait, help
Views: 97 S3 School
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: 37115 kudvenkat
Chrome 42 Beta: any-pointer/any-hover MQ feature issue
 
01:04
Currently, the any-pointer/any-hover MQ feature is not dynamically updated when a bluetooth mouse is paired/unpaired from a touchscreen device - even after reloading, the MQ check remains the same. Only quitting and restarting the browser updates the feature check. https://code.google.com/p/chromium/issues/detail?id=442418
Views: 170 Patrick Lauke
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: 33177 kudvenkat
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: 207468 LearnCode.academy
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: 46803 kudvenkat
Css shape
 
07:04
Kako pravilno da rasporedite text oko slike
Views: 4753 Danilo Vesovic
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: 202 scottschiller
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 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: 14087 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: 39811 The Coding Train
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: 765583 Bloomberg
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: 7198 Kirupa Chinnathambi
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: 31127 kudvenkat
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: 287 Neolitic
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: 708365 XM360
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: 243 We Can Code IT
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
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: 386 Erlang Solutions
How to add custom map markers for your Google Maps store locator (Super Store Finder)
 
08:38
I've made an article on how you can search for the best collections of Google Maps markers for your store locator http://superstorefinder.net/support/knowledgebase/looking-for-map-icons-for-your-store-finder/ This video will also teach you in depth on how to use it via Super Store Finder administrator (standalone as well as Wordpress version) Store Locator Softwares Available for Download here: Super Store Finder: http://codecanyon.net/item/super-store-finder/3630922/?ref=highwarden Super Store Finder for Wordpress: http://codecanyon.net/item/super-store-finder-for-wordpress/11334595?ref=highwarden
Views: 27937 Joe Iz
JavaScript Animated. How To Remove Animated Load Effect For Needed Elements
 
03:26
This video tutorial is going to show you how to remove animated load effect for needed elements in your JS Animated template. / Subscribe Our Channel: http://goo.gl/zjoR8Z More Premium JavaScript Website Themes you may find here: http://www.templatemonster.com/completely-javascript-website-templates/?utm_source=youtube&utm_medium=link&utm_campaign=cjstuts75 And also HTML 5 plus Javascript Templates: http://www.templatemonster.com/html-javascript-website-templates/?utm_source=youtube&utm_medium=link&utm_campaign=jshtuts75 Follow us: Facebook http://goo.gl/3yXKEu, Twitter http://goo.gl/NR5fDK, LinkedIn http://goo.gl/qDZeEO, Dribbble http://goo.gl/UwqX48, Pinterest http://goo.gl/Tp8Je5
Views: 129 TemplateMonster
Scratch - Change Color of Object 6 (when move cursor)
 
00:51
Next video: Change Color of Object 7 http://youtu.be/ju-nIdGeSHc
Views: 147 Noval Eka Herdinata
Unity3D tutorial  Custom Cursor
 
01:49
Unity3D tutorial Custom Cursor Easter video series ! THIS IS C# scrip: GOOD 4 2D GAMES AND 3D GAMES ! SCRIPT IS ON : http://unity3dmgames.blogspot.com/ ----------------------------------------­----------------------------------------­- ----------------------------------------­­­­-------------------------------------­-­-­-­-
Views: 6527 Dubravko Miter
WPF Mouse Position and Window Caption Titlebar
 
03:51
this small demo shows how to find the x and y position of your Mouse cursor and also the calculation of the Window Actual Height and ActualWidth minus the CaptionHeigth. http://www.microsoft-programmierer.de/Details?d=996&a=9&f=129&l=0 [gelöst] WPF,C#: Berechnen der Höhe der Titlebar und Mauspositionen in WPF Views 0 Date 23.06.2015 WPF,C#: wie ermittelt man die Höhe der Titlebar eines Windows in WPF Wenn man in einem WPF Windows Programm die Größe eines Fensters verwenden möchte, um zum Beispiel eine Linie bis an den unteren Rand zu zeichnen, dann fällt einem schnell auf, dass die man mit den X-Y Positions-Cursor-Daten der Maus nicht bis ganz zum Unteren Ende kommt, sondern meistens darüber hinaus rechnet. Das liegt daran, dass die WindowsHeight eines Windows-Fensters in WPF an der oberen Kante des Fensters beginnt und nach Durchschreiten der Titlebar der Canvas-Bereich oder Grid bereich wie hier gezeigt erst Bei Pixel 22 beginnt abzüglich der 21 Pixel für die Titlebar
Views: 1976 Readdy_Net

Essays writing service review
Cover letter sample for nurses
It faculty cover letter
Annotated bibliography thesis example sentence
Special education assistant resume cover letter