Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Function chainingFunction chaining is nothing but grouping functions in one single line using dot notation. This type of chaining makes the code very concise and also improves the performance.Here we are going to learn function chaining using regular objects.a) Without function chaining In the following example an object 'obj' is created and in that object a public property called 'i' is created using keyword 'this' and initially assigned a value 0. later on user defined functions called add(), subtract() and print() are created inside the same object 'obj'. Now, the object "obj" will acts like a class(it's properties can be shared by ... Read More
Definition and UsageThe cos() function returns the cosine ratio of given angle in radians. In trigonometry, cosine of an angle is defined as ratio of lengths of adjacent side and hypotenuse.cos(x) = adjacent/hypotenuseIf x=90 degree, cos(x) = 0.This function returns a float value.Syntaxcos ( float $arg ) : floatParametersSr.NoParameter & Description1argA floating point value that represents angle in radiansReturn ValuesPHP cos() function returns cosine ratio of given parameter.PHP VersionThis function is available in PHP versions 4.x, PHP 5.x as well as PHP 7.x.Example Live DemoFollowing example calculates cos(pi/2) and returns 6.1232339957368E-17 (very close to 0). Cosine ratio of 90 deg is ... Read More
To create rotate out downright animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } Reload page function myFunction() { location.reload(); }
The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; border-image-slice: 50; } This is image border example.
Tha max attribute of the tag in HTML is used to set the maximum value in a progress bar.Following is the syntax −Above, num represents the number in floating-point. It displays how much effort the task necessitates.Let us now see an example to implement the max attribute of the element −Example Live Demo Windows Build 10.58.89.1 Downloading and Installing: OutputIn the above example, we have displayed the progress of a task going on using the − We have set the maximum value in the progress bar using the max attribute −max="100"
Definition and UsageThe ceil() function is an in-built function in PHP iterpreter. This function accepts any float number as argument and rounds it up to the next highest integer.This function always returns a float number as range of float is bigger than that of integer.Syntaxceil ( float $num ) : floatParametersSr.NoParameter & Description1numThe number to be rounded up.Return ValuesPHP ceil() function returns the smallest integer value that is bigger than or equal to given parameter.PHP VersionThis function is available in PHP versions 4.x, PHP 5.x as well as PHP 7.x.Example Live DemoFollowing example rounds 5.78 to its next highest integer which ... Read More
Definition and UsageThe bindec() function returns decinmal equivalent of a binary number represented as a string argument. Binary number inside string is interpreted as unigned integer.This function returns a decimal integer. However, it may return float for size reasons.Syntaxbindec ( string $binary_string ) : numberParametersSr.NoParameter & Description1binary_stringA string containing binary number representation. Invalid characters (other than 1 and 0) are ignored.Return ValuesPHP bindec() function returns decimal equivalent of given binary number inside string.PHP VersionThis function is available in PHP versions 4.x, PHP 5.x as well as PHP 7.x.Example Live DemoFollowing example calculates decimal equivalent of '1101' and returns 13 −Read More
CSS has several units for different units such as width, margin, padding, font-size, border-width, etc. The length indicates by using numerical value followed by length units such as px, dp, em, etc. It does not allow white spaces in between numerical values and length units.Length units divided as follows:relative unitsabsoluteAbsolute unitsUnitsAbbreviationPixelsPxPointsPtInchesInCentimetersCmPicasPcRelative UnitsIn relative units, the length value is fixed and it appears the exact size of the elementUnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd
To set media queries for different CSS style rules, you can try to run the following code −ExampleLive Demo body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color
Box-sizing property is used to change the height and width of the element. Since CSS2, the box property has worked like as shown below −width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's boxExampleTo understand the box-sizing property, let us see an example:Live Demo .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } TutorialsPoint.com TutorialsPoint.com