Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To select elements, use the element selector. You can try to run the following code to select elements:ExampleLive Demo p { color: blue; background-color: orange; } Demo Website Learning Tutorials on web dev, programming, database, networking, etc. Every tutorials has lessons with illustrations and figures.
Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExampleLive Demo div { width: 100px; height: 100px; background: red; transition: width 4s; } #effect1 { transition-timing-function: linear; } #effect2 { transition-timing-function: ease-in; } div:hover { width: 250px; } Transition Effect Hover over the div elements and see the transition effect and the speed: linear effect ease-in effect
To set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
You can try to run the following code to create a tooltip visible on mouse over. Use the visibility propertyExampleLive demo #mytooltip #mytext { visibility: hidden; width: 100px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 10px 0; position: absolute; z-index: 1; } #mytooltip:hover #mytext { visibility: visible; } Hover the mouse over me My Tooltip text
Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to achieve thisExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
For a negative look-behind in JavaScript, use the following −(^|[^\])"To replace double quotes, you can use the following −str.replace(/(^|[^\])"/g, "$1'")
To get out of the confusion regarding strict comparison, try to run the following code snippet in JavaScript −Exampleswitch(1) { case '1': alert('Switch comparison: Not Strict.'); break; case 1: alert('Switch comparison: Strict.'); break; default: alert(‘Default’); }
To perform unit testing in JavaScript, use Unit.js. It is a cross-platform open-source unit testing framework.ExampleLet’s say the following in your test code −var example = ‘Welcome’; test.string(example) .isEqualTo(‘Welcome’);The function demo() displays a suit of tests, whereas demo1() is an individual test specification,demo('Welcome’, function() { demo1('Welcome to the website', function() { var example = ‘Welcome’; test.string(example) .isEqualTo(‘Welcome’); }); });
Use Element.innerHTML in JavaScript to display JavaScript variables in an HTML page without document.write.You can try to work through the following code snippet −var $myName = document.querySelector('.name'); var $jsValue = document.querySelector('.jsValue'); $myName.addEventListener('input', function(event){ $jsValue.innerHTML = $myName.value; }, false);