Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 517 of 652
A scale transform the element by using y-axis with CSS3
The scaleY(y) method is used to scale transform the element using y-axis.Let us see the syntax −scaleY(y)Here, y is a number representing the scaling factor to apply on the ordinate of each point of the element.Let us see an example −div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleY(0.5); background-color: black; }
Read MoreCSS3 font combinations
CSS3 has adapted font combinations technology. In here, if the browser does not support the first font then it tries the next font.Let us see an example of Sans-Serif fonts −
Read MoreHTML DOM Textarea readOnly Property
The HTML DOM Textarea readOnly property returns and modify whether the content of a text area element in an HTML document should be read only or not.SyntaxFollowing is the syntax −1. Returning readOnlyobject.readOnly2. Adding readOnlyobject.readOnly = true | falseLet us see an example of HTML DOM Textarea readOnly Property −Example body { color: #000; background: lightseagreen; height: 100vh; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; ...
Read MoreCSS2 sizing property vs CSS3 box sizing property
Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property.CSS2 sizing propertyLive Demo .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } TutorialsPoint.com TutorialsPoint.com CSS3 box-sizing propertyLive 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
Read MoreHTML DOM TableData headers Property
The HTML DOM TableData headers property returns and modify the value of headers attribute of a table in an HTML document.SyntaxFollowing is the syntax −1. Returning headersobject.headers2. Adding colspanobject.headers = “headers_ids”Let us see an example of headers property −Example Live Demo body { color: #000; background: lightblue; height: 100vh; text-align: center; } table { margin: 2rem auto; width: 400px; } .btn { background: #db133a; border: none; height: ...
Read MoreHTML DOM TableData colSpan Property
The HTML DOM TableData colSpan property returns and modify the value of colspan attribute of a table in an HTML document.SyntaxFollowing is the syntax −1. Returning colSpanobject.colSpan2. Adding colSpanobject.colSpan = “number”Let us see an example of colSpan property −Example Live Demo body { color: #000; background: lightblue; height: 100vh; text-align: center; } table { margin: 2rem auto; width: 400px; } .btn { background: #db133a; border: none; height: ...
Read MoreHow to insert new row into table at a certain index using jQuery?
To insert a new row into table at a certain index, use the jQuery val() and insertBefore() method. You can try to run the following code to learn how to insert new row into table −ExampleLive Demo jQuery Example $(document).ready(function(){ $('#index').val($('#myTable tbody tr').length); $('#btn1').click(function(){ var indx = $('#index').val()-1; var newRow = $('New row is added at index '+$('#myTable tbody tr').length+''); newRow.insertBefore($('#myTable tbody tr:nth('+indx+')')); }); }); This is row 1 This is row 2 Add
Read MoreHow can I set the content of an iframe without src using jQuery?
To set the content of an iframe without src, use the jQuery html() method. You can try to run the following code to learn how to set the content of an iframe without src attribute −ExampleLive Demo jQuery Selector $(document).ready(function() { var context = $('iframe')[0].contentWindow.document; var $body = $('body', context); $body.html('Hello World!'); });
Read MoreHow to get the children of the $(this) selector in jQuery?
To get the children of the $(this) selector, use the jQuery find() method. You can try to run the following code to get the children of the $(this) selector −ExampleLive Demo jQuery Example $(document).ready(function(){ $('#mydiv').click(function(){ alert($(this).find('img:last-child').attr('src')); }); }); #my_div { width: 200px; height: 200px; background-color: red; }
Read MoreHow to center a div on the screen using jQuery?
To center a div on the screen, use the jQuery centering function jQuery.fn.center. You can try to run the following code to learn how to center a div on the screen:ExampleLive Demo $(document).ready(function(){ jQuery.fn.center = function(parent) { if (parent) { parent = this.parent(); } else { parent = window; } this.css({ "position": "absolute", "top": ((($(parent).height() ...
Read More