tag:blogger.com,1999:blog-41007251058319514442024-02-07T11:38:45.882-08:00LabW3Free Open Source Code, Free Web Site Widget, Free Tools and Tutorial for Web and Mobile Developers. Labw3 for Html, CSS, Java Script, J query, MySQL, PHP, Less, Scss, Ionic and Git.LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comBlogger124125tag:blogger.com,1999:blog-4100725105831951444.post-33778968504661371902019-11-19T05:51:00.000-08:002019-11-19T05:51:08.633-08:00CSS :fullscreen pseudo-class<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_72VK9L6koOvybxQffm5_AdbiwDj6cE1TZgZj3Yuo6Qe3AA_EHqDDjBkWt9PumR_CJjM5_oxNwr8YZJFs628tB_hkSdtN58EwqeEoYqrC5UYCJKnZ0__Gig5l9QwGISWrQ6aYE-8ppnZS/s1600/Full-Screen.jpg" data-original-width="750" data-original-height="350" alt="Pseudo Class"/><br />
CSS has the pseudo-class: fullscreen to show the particular element to full screen on your webpage. If you want to show any particular div in full screen you can use a lot of CSS property and class to show in full screen. <br />
<br />
But using this fullscreen so you can not write the more CSS code you can use this show in full screen. See the syntax and example you can easily understand the fullscreen pseudo-class.<br />
<br />
Syntax:<br />
<pre>:fullscreen
/*-- For Class Name --*/
.className:fullscreen{
-----
----
}
/*-- For ID --*/
#idName:fullscreen{
-----
----
}
/*-- For HTML Tag --*/
tagName:fullscreen{
-----
----
}
</pre><br />
<br />
<b>CSS:</b><br />
<pre>.fullscreen:fullscreen {
padding: 42px;
font-size: 200%;
background-color: rgb(218, 238, 255);
}
.fullscreen:fullscreen>h1 {
color: rgb(0, 110, 255);
}
.fullscreen:fullscreen>p {
color: rgb(0, 72, 167);
}
.fullscreen:fullscreen>button {
display: none;
}
</pre><br />
<b>HTML</b><br />
<pre><div class="fullscreen">
<h1>:fullscreen</h1>
<p>Click the below button you can view the this messag in the full screen on you screen</p>
<button onclick="openFullscreen()">View in Full Screen</button>
</div>
</pre><br />
<b>Output:</b><br />
<div class="fullscreen"><h1>:fullscreen</h1><p>Click the below button you can view the this messag in the full screen on you screen</p><button onclick="openFullscreen()">View in Full Screen</button><br />
</div><style>
body:-moz-full-screen {
padding: 42px;
background-color: rgb(218, 238, 255);
font-size: 200%;
}
body:-webkit-full-screen {
padding: 42px;
background-color: rgb(218, 238, 255);
font-size: 200%;
}
:-moz-full-screen h1 {
color: rgb(0, 110, 255);
}
:-webkit-full-screen h1 {
color: rgb(0, 110, 255);
}
:-moz-full-screen p {
color: rgb(0, 72, 167);
}
:-webkit-full-screen p {
color: rgb(0, 72, 167);
}
:-moz-full-screen button {
display: none;
}
:-webkit-full-screen button {
display: none;
}
:fullscreen {
padding: 42px;
font-size: 200%;
background-color: rgb(218, 238, 255);
}
:fullscreen>h1 {
color: rgb(0, 110, 255);
}
:fullscreen>p {
color: rgb(0, 72, 167);
}
:fullscreen>button {
display: none;
}
</style><br />
<br />
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script><br />
<br />
<!-- adsense --><br />
<br />
<div class="browser-container"><table class="browser-table"><tbody>
<tr> <th>Feature</th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th> <th>Android</th> <th>iOS</th> </tr>
<tr> <td>Basic support</td> <td>2+</td> <td>3.5+</td> <td>10+</td> <td>9.5+</td> <td>1.1+</td> <td>All</td> <td><span style="color: #f00;">No</span></td> </tr>
</tbody> </table></div><br />
LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-22706586001893856112018-05-14T02:22:00.002-07:002018-05-25T19:39:05.674-07:00Flex Wrap<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp0f6xbutc6fZCxE0ZeC_pzG-zaKiwhj7cRuHXQWuFnWJf6qqpmgS_acI054s18pD4RpY49k1jngIM8Jc86bs-B8YaGaJmqCRdDlf-hYeF3hLW0EGY86tzG4A4MZoVqcPxqe3GK7nDdcu9/s1600/Flex-Wrap.jpg" class="post-image" alt="Css Flex Wrap Property"/><br />
Flex-Wrap property specified the whether the flex item forced into single line or multiple line. If wrapping is allowed it also have option control the direction.<br />
<br />
If you have the box like 50px width and 50px height you placed the list of boxes in the 200px width container you want to wrap the 50px box to after reach the 200px to new line or in single line by using the flex-wrap CSS property.<br />
<br />
Flex-Wrap have three different value. <br />
<br />
Wrap = it will force the item to multiple line.<br />
Nowrap = it will force the item in single line.<br />
Wrap-reverse= it will force the item to reserve direction. If item 1,2,3 you use this property the item will arrange in the reverse 3,2,1.<br />
<br />
<b>Syntax:</b><br />
<pre>flex-wrap: nowrap; /* Default Value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
</pre><!-- adsense --><br />
<b>Example: Wrap</b><br />
<br />
<b>Code:</b><br />
<pre></div>
<style>
.pwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pwdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
</pre><br />
<div class="pwdiv"><div class="cdiv">1<br />
</div><div class="cdiv">2<br />
</div><div class="cdiv">3<br />
</div><div class="cdiv">4<br />
</div><div class="cdiv">5<br />
</div><div class="cdiv">6<br />
</div><div class="cdiv">7<br />
</div><div class="cdiv">8<br />
</div></div><style>
.pwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style><br />
<br />
<ins class="adsbygoogle" style="display:block;width:336px;height:280px;margin:0 auto" data-ad-client="ca-pub-7608323694464585" data-ad-slot="6055843750"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
<b>Example: nowrap</b><br />
<pre><style>
.pnwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: nowrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pnwdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
</div>
</pre><div class="pnwdiv"><div class="cdiv">1<br />
</div><div class="cdiv">2<br />
</div><div class="cdiv">3<br />
</div><div class="cdiv">4<br />
</div><div class="cdiv">5<br />
</div><div class="cdiv">6<br />
</div><div class="cdiv">7<br />
</div><div class="cdiv">8<br />
</div></div><style>
.pnwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: nowrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style><br />
<br />
<b>Example: Wrap-Reverse</b><br />
<b>Code:</b><br />
<pre><style>
.pwrdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap-reverse;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pwrdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
</div>
</pre><style>
.pwrdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap-reverse;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style><br />
<div class="pwrdiv"><div class="cdiv">1<br />
</div><div class="cdiv">2<br />
</div><div class="cdiv">3<br />
</div><div class="cdiv">4<br />
</div><div class="cdiv">5<br />
</div><div class="cdiv">6<br />
</div><div class="cdiv">7<br />
</div><div class="cdiv">8<br />
</div></div><br />
<div class="browser-container"><table class="browser-table"><tbody>
<tr> <th>Feature</th> <th>Chrome</th> <th>Edge</th><th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th> <th>Android</th> <th>iOS</th> </tr>
<tr> <td>Basic support</td> <td>29+</td> <td>12</td><td>28+</td> <td>11+</td> <td>17+</td> <td>9+</td> <td>All</td> <td><span>ALL</span></td> </tr>
</tbody> </table></div>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-84943758993408496532017-11-23T01:51:00.001-08:002018-05-25T19:39:23.671-07:00CSS Filter Property<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoY5NQvhVjh2C81n_Fi7Lfc59oHbfrENM_Zi09WYOpoeRd2x-Okd_i6-v5iZnPQ92pB9WWJausP6-S-duKqSFagNscNzz7YTfhi-e3XOblOzdaE2uDFNYoe1vrAecn1JN82jWijEt7AMIa/s320/Filter-Proprty.jpg" class="post-image" alt="CSS Filter Property"/><br />
CSS filter property is CSS3 version using this you can change the image graphical effect on the source image you no need to use another edited image. Using this property you can apply the different style of effect in the source image. Like opacity, grace scale, blur, contrast, brightness, drop shadow, saturate, invert etc.<br />
<br />
What is the property of the Filter?<br />
<br />
<ul style="text-align: left;"><li>None</li>
<li>blur()</li>
<li>brightness()</li>
<li>contrast()</li>
<li>drop-shadow()</li>
<li>grayscale()</li>
<li>hue-rotate()</li>
<li>invert()</li>
<li>opacity()</li>
<li>saturate()</li>
<li>sepia()</li>
<li>url()</li>
</ul><br />
<b>Syntax:</b><br />
<pre>img{
filter: blur(10px);
}</pre><!-- adsense --> <br />
<b><br />
Explanation of Each Property Value:</b><br />
<b>Blur</b> – Apply a blur effect to the image.<br />
<br />
<b>Brightness</b> – Adjust the brightness of the image. A value of 0% will create an image that is completely black.<br />
<br />
<b>Contrast</b> – Adjust the contrast of the image. A value of 0% will create an image that is completely gray. A value of 100% leaves the input unchanged.<br />
<br />
<b>DropShadow</b> – Apply a drop shadow effect to the image.A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image.<br />
<br />
<b>GrayScale</b> – Convert the image to grayscale.<br />
<br />
<b>Hue Rotate</b> – Apply a hue rotation on the image.<br />
<br />
<b>Invert</b> – Inverts the samples in the input image. The value of amount defines the proportion of the conversion.<br />
<br />
<b>Opacity</b> – Set the opacity level of the image. The value will be from 0 to 100%.<br />
<br />
<b>Saturate</b> – Saturate the image.A value of 0% is completely unsaturated. A value of 100% leaves the input unchanged.<br />
<br />
<b>Sepia</b> - Converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-7608323694464585" data-ad-slot="6055843750" style="display: block; height: 280px; margin: 0 auto; width: 336px;"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
<b>Example:</b><br />
<script>
function filterChange() {
var filt = document.getElementById("filtOptCh").value;
document.getElementById("imageSour").style.filter = filt;
}
</script><br />
<div id="image-box"><img style="width:150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1W29J1_Fk8FpHbqXgd1ayS6b1l5isB9WlVtKmtQCSNdO067u64IYnBD4hLBA0ZpCnFPIPc57BLcnwW2eVfk1m3DAOpF1XS8qp-yAlDqPnDNaVkUJYmmiZ4V84CxMJiuCGRo3IRwpYV1S/s1600/monkey.jpg" id="imageSour"></div><select id="filtOptCh" onchange="filterChange()"><br />
<option value="blur(5px)">Blur 5px</option><br />
<option value="brightness(200%)">Bright Ness 200%</option><br />
<option value="contrast(200%)">Contrast 200%</option><br />
<option value="drop-shadow(8px 8px 10px red)">Drop-Shadow 8px 8px 10px red</option><br />
<option value="grayscale(100%)">Gray Scale 100%</option><br />
<option value="hue-rotate(90deg)">Hue Rorate 90 Deg</option><br />
<option value="invert(100%)">Invert 100%</option><br />
<option value="opacity(30%)">Opacity 30%</option><br />
<option value="saturate(8)">Saturate 8</option><br />
<option value="sepia(100%)">Sepia 100%</option><br />
<option value="contrast(200%) brightness(150%)">contrast 200% brightness 150%</option><br />
<option value="none">None</option><br />
</select><br />
<br />
<br />
<div class="browser-container"><table class="browser-table"><tbody>
<tr> <th>Feature</th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th> </tr>
<tr> <td>Basic support</td> <td>53.0, 18.0 -webkit-</td> <td>35.0+</td> <td>13.o</td> <td>40.0+</td> <td>9.1, 6.0 -webkit-</td></tr>
</tbody> </table></div>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-91016942307794695352017-11-21T06:18:00.002-08:002018-05-25T19:39:28.641-07:00CSS Caret Color Property<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOsQiFGdyEr-lfIMUz7VnlfnDjCfsjuJgA01NtR3y7-midsBzdftXC9KDJb_-2IzzIpbiG0OxTeJ9c2ScXxG95iDuAic1m846n4CfQ_kjqybwfFWLlkcSwmGTcgue2zXAreMs5r36bQZD/s1600/Caret-Color-Property.png" class="post-image" alt="CSS Caret Color Property" /><br />
CSS Caret Color Property is used to give the costume color to the cursor in the input fields. Input fields like text box, textarea are used to get the text value from the user. Browser are have the default color for the cursor. Using this you can change this color.<br />
<br />
<b>SYNTAX:</b><br />
<pre>input{
caret-color: color name [or] color value;
}</pre><!-- adsense --> <br />
<b>Example:</b><br />
<b>CSS:</b><br />
<pre>input.input-box{
caret-color:red;
}</pre><br />
<b>HTML:</b><br />
<pre><input class=”input-box” type=”text”></pre><br />
<b>OUTPUT:</b><br />
Click here you will red color cursor point.<br />
<input style="caret-color:red;" type=”text”><br />
<br />
<div class="browser-container"><table class="browser-table"><tbody>
<tr> <th>Feature</th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th></tr>
<tr> <td>Basic support</td> <td>57+</td> <td>53+</td> <td>Not Support</td> <td>44+</td> <td>Not Support</td> </tr>
</tbody> </table></div>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-59348979113011023212017-11-21T03:50:00.004-08:002018-05-25T19:40:29.301-07:00Css Caption Property<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTL0PRRC26CBvAWVVWgjNSuPkwUh_u3FeyckfbG4HYYZ_dGHhvQURttkEQ0I6ku-8NKdtkVfaRaDJDO-Vi7XtC4PWDk9fOnsJz5dwN_gcjdjIJEpIqDTnYdr_ITRwX0qNYpTqdWapZF4oY/s1600/css-caption.png" class="post-image" alt="Css Caption Property" /><br />
Css Caption Property is used to where you want to place the caption on the table. If you have the table and you give the Caption title in the table Default it will available at the top of the table. If you want to place the Caption bottom you can use this property.<br />
<br />
The caption has four values.<br />
<ul><li>Initial</li>
<li>Inherit</li>
<li>Top<l/i><br />
<li>Bottom</li><br />
<br />
<br />
</ul>First two values are default value in the CSS. Top and Bottom are the Real value of the CSS Caption Property. The top will place the Table Caption at the Top. The bottom will place the table caption at the Bottom of the table. <!-- adsense --> <b>Syntax:</b> <pre>caption{
caption-side: bottom;
}</pre><b>Example:</b> <b>CSS:</b> <pre>table caption{
caption-side:top;
}</pre><b>HTML:</b> <pre><table>
<caption>Title</caption>
<tr><td>One</td><td>One</td></tr>
<tr><td>Two</td><td>Two</td></tr>
</table></pre><b>Output:</b> <b>For Bottom Property.</b> <pre>table caption{
caption-side:bottom;
}</pre><table><caption style="caption-side:bottom;color:red">Title</caption>
<tr><td>One</td><td>One</td></tr>
<tr><td>Two</td><td>Two</td></tr>
</table><ins class="adsbygoogle" style="display:block;width:336px;height:280px;margin:0 auto" data-ad-client="ca-pub-7608323694464585" data-ad-slot="6055843750"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <b>Output:</b> <b>For Top Property.</b> <pre>table caption{
caption-side:top;
}</pre><table><caption style="caption-side:top;color:red">Title</caption>
<tr><td>One</td><td>One</td></tr>
<tr><td>Two</td><td>Two</td></tr>
</table><div class="browser-container"><table class="browser-table"><tbody>
<tr> <th>Feature</th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th></tr>
<tr> <td>Basic support</td> <td>1.0+</td> <td>1.0+</td> <td>8.0+</td> <td>4.0+</td> <td>1.0+</td></tr>
</tbody> </table></div>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-88101051095237568722017-11-09T23:59:00.001-08:002018-05-25T19:40:12.439-07:00Css User Select Property<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3srzd8hzdEDBgr8yHWV8PPl91cGqx8RriHa8QZ5iBdkw_R43Fxn6JwUmgTUHDKoswGT0g8yG6CdKQuLRaXkwH0Ze6TwQ06MCDjkJilz_n_z0HjaTNA3mtTGjyWbHkhyAMp4EkcAxC2iO/s1600/Css-User-Select-Property.png" class="post-image" alt="Css User Select Property"/><br />
Css has the property called User Select whether the text the selectable or not. If the user will select double click on the text it will select and highlighted. Using this property you can prevent this.<br />
<br />
User Select property has the four different values.<br />
<br />
auto, none, text, all<br />
<br />
auto: Auto is default value what default function available in the browser<br />
<br />
none: None prevents the text selection.<br />
<br />
Text: Text can be selected by the user. If the double click on the text it will select and drag the mouse over the text will be highlighted.<br />
<br />
all: All is used to select the entire text by click on it. If you click on the text entire text will be selected.<br />
<br />
<ins class="adsbygoogle" style="display:block;width:336px;height:280px;margin:0 auto" data-ad-client="ca-pub-7608323694464585" data-ad-slot="6055843750"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><br />
<b>Syntax:</b><br />
<pre>p{
user-select: auto | none | text | all;
}</pre><br />
<br />
<b>Example: Auto</b><br />
This Auto property what you set default property that will taken<br />
<b>Css:</b><br />
<pre>.selectxtat{
user-select: auto;
}</pre><b>Html:</b><br />
<pre><div class="selectxtat">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</pre><br />
<b>Output:</b><br />
<div class="selectxtate">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div><style>.selectxtate{
user-select: auto;
width:100%;
font-size:16px;
border:1px solid #dddddd;
background-color:#f2f2f2;
padding:2%;
border-radius:3px;
}</style><br />
<br />
<b>Example: None</b><br />
This you will not allow to select the text check with the output<br />
<b>Css:</b><br />
<pre>.selectxtat{
user-select: none;
}</pre><b>Html:</b><br />
<pre><div class="selectxtat">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</pre><br />
<b>Output:</b><br />
<div class="selectxtatn">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div><style>.selectxtatn{
user-select: none;
width:100%;
font-size:16px;
border:1px solid #dddddd;
background-color:#f2f2f2;
padding:2%;
border-radius:3px;
}</style><br />
<br />
<!-- adsense --><br />
<b>Example: All</b><br />
This you can click the text to select the entire text check with the output<br />
<b>Css:</b><br />
<pre>.selectxtat{
user-select: all;
}</pre><b>Html:</b><br />
<pre><div class="selectxtat">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</pre><br />
<b>Output:</b><br />
<div class="selectxtata">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div><style>.selectxtata{
user-select: all;
width:100%;
font-size:16px;
border:1px solid #dddddd;
background-color:#f2f2f2;
padding:2%;
border-radius:3px;
}</style><br />
<br />
<ins class="adsbygoogle" style="display:block;width:336px;height:280px;margin:0 auto" data-ad-client="ca-pub-7608323694464585" data-ad-slot="6055843750"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><br />
<b>Example: Text</b><br />
Double Click on the text to select that particular text only [Word] check with the output<br />
<b>Css:</b><br />
<pre>.selectxtat{
user-select: text;
}</pre><b>Html:</b><br />
<pre><div class="selectxtat">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</pre><br />
<b>Output:</b><br />
<div class="selectxtatt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div><style>.selectxtatt{
user-select: text;
width:100%;
font-size:16px;
border:1px solid #dddddd;
background-color:#f2f2f2;
padding:2%;
border-radius:3px;
}</style>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-60755861228805175072017-06-08T01:59:00.000-07:002018-05-25T19:42:43.205-07:00Less variable Lazy Evaluation<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfY_1jVIn2_mePGQsc5ocYB61256lZiTj0iTa7v3kS6MBOu6WdESWEbh6Tihe6LXHE9-OJpetOZAiQ4wvTAa783eCdAMa7FXZjlvXQ7ISFI7Hc2wpq44oxwyGa3cf1GE5vSaPeCTeXxGry/s1600/Lazy-Less-Variable.jpg" class="post-image" alt="Less variable Lazy Evaluation"/><br />
Declaration of the variable is very important. If you declare the variable you want to declare first in the less file. If you called the variable value first in the less file and after the variable, call you can declare the variable mean it will lazy to access. So you must declare the variable first and then you can access the variable in the inside the file.<br />
<br />
<b>See the example:</b><br />
Don’t do like this it will slow the down and less file will lazily in response.<br />
<br />
<pre>body{
font-size:@mainFont;
padding:2px;
}
@mainFont: @font;
@font: 14px;</pre><br />
You must declare the variable first and they you can access the variable. Both of them will give the output, but it will slow down the process.<br />
<!-- adsense --> LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-21725336959340888252017-06-07T06:28:00.000-07:002018-05-25T19:45:17.009-07:00Less Variable Interpolation<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJ3gng4-XoaY7pPryZYgoF9vY8EcmBrcPAgewXTCpHPNWtXGNpjEUIoEb9U3otM1x4OcQtGdlYw1Je-8BhmUr_qMwQdGVBnOQvCpvMdIQ6BI9VHWIMsvfonFGiidJIl26I2YcYDzqWOyg/s1600/Less-Variable-Interpolation.jpg" class="post-image" alt="Less Variable Interpolation" /><br />
Less Variable is used to control the value in the Css rules. You can also use the variable value in other places also. You used in the selector name, Css property name, URL, @import statement.<br />
<b><br />
How to use as a Selector Name</b><br />
<pre>@class-name: header;
.@class-name{
Width:100%;
Float:left;
Height:60px;
}</pre><br />
<b>Output:</b><pre>.header{
Width:100%;
Float:left;
Height:60px;
}</pre><b>How to use in a URL:</b><br />
You can add the any file in the Css file like that images, fonts etc. You can create the variable and add the URL and you can use anywhere in the Css file. See the below example.<br />
<br />
<pre>@bg-img: ‘../img/bg.png’;
body{
background-image:url(‘{@bg-img}’);
}</pre><b><br />
Output:</b><br />
<pre>body{
background-image:url(‘../img/bg-img.png’);
}</pre><b><br />
You also declared like this</b><br />
<pre>@bg-img: "../img";
body {
color: #444;
background: url("@{images}/icon.png");
}</pre><br />
<b>Output:</b><pre>body{
color:#444;
background:url(‘../img/icon.png’);
}</pre><!-- adsense --><br />
<b>How to used in import statements:</b><br />
How you can do this for URL same things you can do for the import statement.<br />
<pre>@var-css-file: ‘../css/’;
@import: ‘@{vr-css-file}/less-var.less’;</pre><br />
<b>How to used in the properties:</b><br />
You can also use a variable value for Css property also.<br />
<pre>@border-left: border-top-left-radius;
body{
@border-left:5px;
}</pre><b>Output:</b><br />
<pre>body{
border-top-left-radius:2px;
}</pre><br />
<b>How can declare the variables with a variable name.</b><br />
<pre>@border-rgh: 2px solid #dddddd;
@border-side: "border-rgh"; //what name given in the above
@boxview: @@border-side;
body{
border-right:@boxview;
}</pre><br />
<b>Output:</b><br />
<pre>body {
border-right: 2px solid #dddddd;
}
</pre>LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-19947889747269922262017-06-07T04:39:00.000-07:002018-05-25T19:44:06.773-07:00How declare the Less Css Variable?<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSu_x_M4nofCsQO1GO728C29QneFNHLOhvKAsRcY4aR9Ddek3MRlN-UpVWh3ZKG0DuvZUkrTsAqtsFcJE-G_iQJSbTMmP4jlr_AOGSbHkwK0SZMBYrDz0DJZDzmuRZJmL_f8nTm_q_K5KZ/s1600/Less-Variable.jpg" class="post-image" alt="Less Variable" /><br />
Less is used to reduce the Css file size and easy maintainable code for the feature. If you want to change the code you can update on single location it will make changes on all the parts of the code. In this Less variable play the very important role.<br />
<br />
You can declare the variable in the less starting with @ symbol. And followed by your variable name.<br />
<br />
Like this<br />
<pre>@text-color: #333;</pre><br />
Example:<br />
<pre>@text-color: #333;
p{
color: @text-color; // Value is #333 we declare above.
font-size:12px;
}</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-66576098615574056512017-06-06T03:30:00.001-07:002018-05-25T19:44:15.040-07:00Javascript Keyboard Events on Keyup<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYS_Z5bfew8E6SoXYQswdRvWTMCp80WuBfODHv2NaotxqqZIdgmOUP2J4oYbL9rI7xAGnwleaUSw63qNl22eAJtZIaG97Up2nIaFDU3a2IuqAPaGBdMu3_25Y0D97flq0Sln230ic5IX1q/s1600/KeyUp.png" class="post-image" alt="Keyup Event"/><br />
Keyup keyboard event when the user presses the key at the time of the key at the time of the key is coming upward time this event will fire.<br />
<br />
Example:<br />
<pre><nput type=”text” onkeyup=”anyFunction()”></pre><br />
<pre><script>function keydown(){alert("Keys is press down");}</scrip></pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-27271998048673228942017-06-06T03:16:00.001-07:002018-05-25T19:44:19.660-07:00Javascript Keyboard Events on Keypress<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JFV-XD66WTkqx-J04bpIBW-ppSpplXp97SaR7J3R-vQPfyU3a5gVQCZfJIz91qog5jjdJhd1atyyMTq2yMyLPOyh33rmQ1HVcd6Y_4D4vaGAo6mNUzk_IJ9YjgjB0RTYhAbVGdbzjQ50/s1600/Keypress-Event.png" class="post-image" alt="Javascript Keyboard Events on Keypress"/><br />
Keypress keyboard event when the user presses the key at the time of the key is press that time this event will fire.<br />
<br />
<b>Example:</b><br />
<pre><input type="text" onkeypress="keypress()"></pre><br />
<pre><script>function keypress(){alert("Keys is press down");}</scrip></pre><br />
<!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-8994570144519557432017-06-06T03:03:00.000-07:002018-05-25T19:44:23.131-07:00Javascript Keyboard Events on Keydown<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRwZ8JAy5UGvg-8OSGi6xwr7RobtineojVu-5P-ZuB3ePJy170JaTC3iOq5-J2W9BI4BmGdF84bHEmke2rxHoJZVakwgK7LkwQAIDNs60Wbw5HmcikBR4eFcfBWMnVK2NWEhfYJ_WNlBA/s1600/keydown-events.png" /><br />
Keydown keyboard event when the user presses the key at the time of the key is going downward time this event will fire.<br />
<br />
<b>Example</b><br />
<pre><input type="text" onkeydown="keydown()"></pre><br />
<pre><script>function keydown(){alert("Keys is press down");}</scrip></pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-61044363931495266902017-06-06T02:48:00.001-07:002018-05-25T19:44:26.811-07:00What is Javascript Keyboard Event?<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidqFMtdKUoiK9PeDOvooH3_fZM8-mRbv6EbSiRN8YC74ec6Y0s8GJ4hWDepF4itAIkEp28DoASPTtnlh6lkZqeCKzg4fABy2pPUSj212w3-VvBevnNaqUG5AX5NUz2hDeHGy89VA4uwXOb/s1600/Javascript-Keyboard-Events.png" class="post-image" alt="Javascript Key Events" /><br />
Javascript Keyboard events are fired when the user can do anything using the keyboard. Keyboard event when the user presses the key, keys up or key down.<br />
<br />
<b>They are three keyboard event in the Javascript:</b><br />
<ul><li><a href="http://www.labw3.com/2017/06/javascript-keyboard-events-on-keydown.html">Onkeydown</a> = it will happen when the user presses the key key going down time</li>
<li><a href="http://www.labw3.com/2017/06/javascript-keyboard-events-on-keypress.html">Onkeypress</a> = it will happen when the user presses the key</li>
<li><a href="http://www.labw3.com/2017/06/javascript-keyboard-events-on-keyup.html">Onkeyup</a> = it will happen when the user press key key going up time</li>
</ul><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-3803745064095026932017-05-03T05:58:00.001-07:002018-05-25T19:44:30.877-07:00Math.toSource() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIpj-IkSV6dllbkiPfulAfFhMiDW1uVaN9BovmPNo-qV_nohNtiXgcp9mUnHOYYnMIQ_fKl_LjJ7pOIOjI26VahfddHhohbzMcBr0cGnV7MoDZy4v0GuATEmpf4MFgkK9VFs9sT9PZlDc/s1600/Math-toSource.jpg" class="post-image" alt="Math toSource"/><br />
This method return the string “Math”. But this method does not work with IE.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.toSource()</pre><br />
<b>Example:</b><br />
<pre><script>
var sour = Math.toSource();
document.writeln('Output :' + sour + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output : Math</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-1189714649628792772017-05-03T05:49:00.000-07:002018-05-25T19:44:35.976-07:00Math.tan() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5pjMqqmEQLZ0P6CGjpYG8Df4wlCDtHtsCeIOxV9JHHGypOU0Ni3QjCTsZbZQRe_Cy0t5NjBuTC7iJFvcDnb8G9k9lKv8Bxpby51fqKuJBrlcwk1m6Va7l-zifci-3TVHnzk15AG_lQ0fR/s1600/Math-Tan.jpg" class="post-image" alt="Math tan method"/><br />
Math.tan() Method is used to return the tangent of a number (angle). The tan method returns a numeric value that represents the tangent of the angle.<br />
<br />
<b>Syntax</b>:<br />
<pre>Math.tan(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.tan(90);
document.writeln('Output of 90 : ' + one + '</br></br>');
var two = Math.tan(45);
document.writeln('Output of 45 : ' + two + '</br></br>');
var three = Math.tan(30);
document.writeln('Output of 30 : ' + three + '</br></br>');
var four = Math.tan(Math.PI/45);
document.writeln('Output of Math.PI/45 : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 90 : -1.995200412208242
Output of 45 : 1.6197751905438615
Output of 30 : -6.405331196646276
Output of Math.PI/45 : 0.06992681194351041</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-16822899138755345392017-05-03T05:36:00.000-07:002018-05-25T19:44:39.677-07:00Math.sqrt() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEUCNGFRsVatCwcbXd5DKECFFujTwUrriibj6bt1PRjzRwncjTNQtiNkQE5sKJQpTS1nRo-ELgSzzt9YmHas1zAY2YIKzB7xcRA92d7ww-I91chOMtVc9O194smA6lJcIT_OeGDaEPWlxh/s1600/Math-Sqrt.jpg" class="post-image" alt="Math sqrt Method"/><br />
Math.sqrt() Method is used to return the square root of a number.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.sqrt(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.sqrt(3);
document.writeln('Output of 3 : ' + one + '</br></br>');
var two = Math.sqrt(-4);
document.writeln('Output of -4 : ' + two + '</br></br>');
var three = Math.sqrt(9);
document.writeln('Output of 9 : ' + three + '</br></br>');
var four = Math.sqrt(15);
document.writeln('Output of 15 : ' + four + '</br></br>');
</script></pre><br />
<b>Output</b><br />
<pre>Output of 3 : 1.7320508075688772
Output of -4 : NaN
Output of 9 : 3
Output of 15 : 3.872983346207417</pre><!-- adsense --> LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-39051400099331013162017-05-03T05:27:00.000-07:002018-05-25T19:34:03.267-07:00Math.sin() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXgkIlwutbPccY82GHwhS-xE5y-7Uq2YjiQK2taqtJCic2mTxyFdYuyOd95pB69ZiK2medKNJ0A7k0rpmPeck9M0RqMHKQRpK9ue1WE2_jJRRnWoUcCZuF8t1NwYaCnsm_qfqlPkkWu7X/s1600/Sin-Method.jpg" class="post-image" alt="Math Sin Method"/><br />
Math.sin() Method is used to return the sine of a number. This method return a value between -1 and 1 which represent the sine of the parameter x.<br />
<br />
<b>Syntax</b><br />
<pre>Math.sin(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.sin(90);
document.writeln('Output of 90 : ' + one + '</br></br>');
var two = Math.sin(0);
document.writeln('Output of 0 : ' + two + '</br></br>');
var three = Math.sin(-1);
document.writeln('Output of -1 : ' + three + '</br></br>');
var four = Math.sin(Math.PI);
document.writeln('Output ofMath.PI : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 90 : 0.8939966636005579
Output of 0 : 0
Output of -1 : -0.8414709848078965
Output ofMath.PI : 1.2246467991473532e-16</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-24414188060956147752017-05-03T05:11:00.000-07:002018-05-25T19:33:57.132-07:00Math.random() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zi__v-BEo2Jbfq7eqCVKFOcEmV8bGgY-gguhomdva8uqz3yjTit-Kkprczug5rIIe6ehf2JMN4vrxWWcSV7nuWLSf9-F7ipgOAlye_QcTwlzT1-adTuFI-rdnzR5_9o6mon7iBDc6fB3/s1600/Random-Value.jpg" class="post-image" alt="Math Random Method"/><br />
Math.random() Method is used to return the random number between 0 inclusive but not 1 exclusive.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.random()</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.random();
document.writeln('Output is : ' + one + '</br></br>');
var two = Math.random();
document.writeln('Output is : ' + two + '</br></br>');
var three = Math.random();
document.writeln('Output is : ' + three + '</br></br>');
var four = Math.random();
document.writeln('Output is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output is : 0.6772958513976521
Output is : 0.8799006679119346
Output is : 0.5298651974436075
Output is : 0.5920655796664953</pre><br />
<!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-42857253641857799792017-05-03T05:00:00.001-07:002018-05-25T19:33:54.668-07:00Math.pow() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKxPLputbYVh30W_hEHrGPEWF0EvQuEg1JBVEEHVqWXw19NcaM8GPjM6BjR8T66coXwSEHokllFD7T3fKqHGKTOsNPKYjmemJLB5vIO7-Zvp9uIh8vBd4g0pZ3ampH1vbPRgeEHTWpdg4/s1600/Math-pow-method.jpg" class="post-image" alt="Math Pow Method"/><br />
Math.pow() Method returns the value of x to the power of y (x, y). It returns the base to the exponent power, that is, base exponent<br />
<br />
<b>Syntax:</b><br />
<pre>Math.pow(x, y)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.pow(5,3);
document.writeln('Output of 5, 3 is : ' + one + '</br></br>');
var two = Math.pow(6,4);
document.writeln('Output of 6, 4 is : ' + two + '</br></br>');
var three = Math.pow(-2, 5);
document.writeln('Output of -2, 5 is : ' + three + '</br></br>');
var four = Math.pow(3,4);
document.writeln('Output of 3, 4 is : ' + four + '</br></br>');
</script></pre><br />
Output:<br />
<pre>Output of 5, 3 is : 125
Output of 6, 4 is : 1296
Output of -2, 5 is : -32
Output of 3, 4 is : 81</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-42999820987582208182017-05-03T04:26:00.001-07:002018-05-25T19:33:52.024-07:00Math.min() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSlh82AdndvnTqdg_JMVwbJB6G4U5Q24WJ9Cy6BPpJqZXyt7RapnwRAb64hjLRRmN3ObEb72yMqfwygsrYfOiFCKnCDM1hfew9jz9U9yu-HGqXXrynbsYy7Bt9aCcUwOjTZD4xOcz0Cks/s1600/Math-Min-Method.jpg" class="Math min method"/><br />
Math.min() method is used to return the smallest number. If we give the two are more number in the argument we want to find the smallest number. We can use this min method. If we don't give the any number it will return the + infinity value.<br />
<b>Syntax: </b><br />
<pre>Math.min(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.min(5, -2, 10);
document.writeln('Output of 5, -2 , 10 is : ' + one + '</br></br>');
var two = Math.min(100,-80, 70);
document.writeln('Output of 100,-80, 70 is : ' + two + '</br></br>');
var three = Math.min();
document.writeln('Output of is : ' + three + '</br></br>');
var four = Math.min(88, 50, 30);
document.writeln('Output of 88, 50, 30 is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 5, -2 , 10 is : -2
Output of 100,-80, 70 is : -80
Output of is : Infinity
Output of 88, 50, 30 is : 30</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-72951319395950811802017-05-03T04:18:00.002-07:002018-05-25T19:33:49.598-07:00Math.max() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmFtgHIms1-sauFVODaKbd6ZDOjNrHuthgr9pMrSR5oQ93_zAXOVApPQtFgz8kdksNaxuqrJSxVeQwQEf4LNCu4yIBZRkr5MtKegsmDM9_KpYCfvCpONFuSf6UDpwDyFN4nP_T7YNZxHO/s1600/Max-Math.jpg" class="post-image" alt="Math Max Method"/><br />
Math.max() method is used to return the largest number. If we give the two are more number in the argument we want to find the largest number. We can use this max method. If we don't give the any number it will return the - infinity value.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.log(value 1, value 2, ..);</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.max(5, -2, 10);
document.writeln('Output of 5, -2 , 10 is : ' + one + '</br></br>');
var two = Math.max(100,-80, 70);
document.writeln('Output of 100,-80, 70 is : ' + two + '</br></br>');
var three = Math.max();
document.writeln('Output of is : ' + three + '</br></br>');
var four = Math.max(88, 50, 30);
document.writeln('Output of 88, 50, 30 is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 5, -2 , 10 is : 10
Output of 100,-80, 70 is : 100
Output of is : -Infinity
Output of 88, 50, 30 is : 88</pre><br />
<!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-84998828989354248692017-05-03T03:36:00.002-07:002018-05-25T19:33:47.429-07:00Math.log() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2Yps-_KZoT3-hIAxqUQzyvAxG9Ahd7cmFN0upP3Y-PcgoNgkxOYL_EVxz1tgpPeebT1BvOojZrqdS_WsDaP0EpkxTTduF5PHWOEe7g_DzyrVzcJE5dOgpN0cZE10_DPPQQwv4ws1ooO4/s1600/Math-Log-Number.jpg" class="post-image" alt="Math Log Method"/><br />
Math.log() method is used to return the natural logarithm base E of a number. If the value of the number is negative, the return value is always NaN. If the value of the number is 0 it will return Infinity.<br />
<br />
<b>Syntax:</b> <br />
<pre>Math.log(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.log(5);
document.writeln('Output of 5 is : ' + one + '</br></br>');
var two = Math.log(0);
document.writeln('Output of 0 is : ' + two + '</br></br>');
var three = Math.log(-1);
document.writeln('Output of -1 is : ' + three + '</br></br>');
var four = Math.log(88);
document.writeln('Output of 88 is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 5 is : 1.6094379124341003
Output of 0 is : -Infinity
Output of -1 is : NaN
Output of 88 is : 4.477336814478207</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-15635975038019755162017-05-03T03:13:00.000-07:002018-05-25T19:33:45.075-07:00Math floor() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgB7R05r91214VqlnzL2N7KxHcYuBimMFRQMuyLPKCJKpns-ue5YNERV8aVdqYwR-nJ9rey2Rw1eUqKmRQvnAbHH3dfshEKAdf7wA2FoRLbk04W1JprrPlIXLqLYhVBvgl-umhXyGGD4S/s1600/Math-Floor-Method.jpg" class="post-image" alt="Math floor() Method"/>Math.floor() method is used to round the number to downwards to nearest integer number. The given argument value will be integer the value will not rounded. If I give 11.9 it will return the 11 as an output.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.floor()</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.floor(10.9);
document.writeln('Output of 10.9 is : ' + one + '</br></br>');
var two = Math.floor(5.4);
document.writeln('Output of 5.4 is : ' + two + '</br></br>');
var three = Math.floor(-1.8);
document.writeln('Output of -18 is : ' + three + '</br></br>');
var four = Math.floor(-.8);
document.writeln('Output of -.8 is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 10.9 is : 10
Output of 5.4 is : 5
Output of -18 is : -2
Output of -.8 is : -1</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-43224147026158981362017-05-03T03:04:00.000-07:002018-05-25T19:33:42.767-07:00Math exp() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1Z5sdn_5rDroujr1D7irrT6_P5WISH64ysxDN3IEwpyyvxnCbXdL9qd8bX412F92yhKanUMx1wQ9qnySNZ3qJ_1U9gHJGxNWv0r32wxDE7voS-MYu6P-5dMd6VzZyFRj3ltAGBavYmz9/s1600/Math-Exp.png" class="post-image" alt="Math exp Method"/><br />
Math.exp() Method return the value of EX , where E is Euler’s number (approximately 2.7183) and x is the number passed to it base of the natural logarithms.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.exp(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.exp(1);
document.writeln('Output of 1 is : ' + one + '</br></br>');
var two = Math.exp(90);
document.writeln('Output of 90 is : ' + two + '</br></br>');
var three = Math.exp(-1);
document.writeln('Output of -1 is : ' + three + '</br></br>');
var four = Math.exp(.5);
document.writeln('Output of .5 is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 1 is : 2.718281828459045
Output of 90 is : 1.2204032943178408e+39
Output of -1 is : 0.36787944117144233
Output of .5 is : 1.6487212707001282</pre><!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.comtag:blogger.com,1999:blog-4100725105831951444.post-70225811996077690762017-05-02T23:43:00.000-07:002018-05-25T19:34:47.090-07:00Math.cos() Method<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DrlO5tQV_VCidmbjaOGQ0rT7ArwvAV3G_7J7xQohePUIV-rTGo6EU6MDgWPvWtms2sN10d6-cGqud5Dc2TntKrhrEwHz5P8UxiEuPQErH2hP2kVyYDGf7FAwJAnf0TQs16EXqNuVHV3C/s1600/Math-Cos-Method.jpg" class="post-image" alt="Javascript Math cos Method"/><br />
Math.cos() return the cosine of a number. The cos method returns the number value between -1 and 1 its represent the cosine of the angle.<br />
<br />
<b>Syntax:</b><br />
<pre>Math.cos(x)</pre><br />
<b>Example:</b><br />
<pre><script>
var one = Math.cos(45);
document.writeln('Output of 45 is : ' + one + '</br></br>');
var two = Math.cos(90);
document.writeln('Output of 90 is : ' + two + '</br></br>');
var three = Math.cos(-1);
document.writeln('Output of -1 is : ' + three + '</br></br>');
var four = Math.cos(2 * Math.PI);
document.writeln('Output of 2 * Math.PI is : ' + four + '</br></br>');
</script></pre><br />
<b>Output:</b><br />
<pre>Output of 45 is : 0.5253219888177297
Output of 90 is : -0.4480736161291702
Output of -1 is : 0.5403023058681398
Output of 2 * Math.PI is : 1
</pre><br />
<!-- adsense -->LabW3http://www.blogger.com/profile/04604479917680567681noreply@blogger.com