Align List Items Depending on Other Columns in HTML5 CSS

varma
Updated on 24-Jun-2020 13:54:45

218 Views

Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row..wrap{    display : flex }// This will help wrapper to become flexible .wrap.col{    flex: 1 0 33%; }Flex is basically a property which helps in making element flexible.Use the following to keep the lists vertically aligned to the bottom −.col .content {    margin-top: auto; }

Modify Size of Column in MySQL Table

George John
Updated on 24-Jun-2020 13:54:09

794 Views

We can modify a column size with the help of ALTER command. Let us see how to modify column size. Suppose we are defining any column with some size. At the time of inserting if we are giving more size in comparison to the one we defined, then an error will generate.The above problem can be reduced while modifying the size. For more understanding, we can create a table with the help of CREATE command −mysql> CREATE table ModifyColumnNameDemo -> ( -> id int, -> StudentName varchar(10) -> ); Query OK, 0 rows affected (0.45 sec)After creating a table successfully, ... Read More

Change Date Time Format in HTML5

karthikeya Boyini
Updated on 24-Jun-2020 13:53:24

3K+ Views

The date-time format can be changed by using custom HTML5 elements. If we wish to change or override existing Html tags then we can do so with the help of shadow DOM.We can make customizable tags like −Here is an example −However, E10 and older versions do not support customizable tags; however, all newer versions support customizable tags.

Specify Width for the Columns with CSS

Krantik Chavan
Updated on 24-Jun-2020 13:53:01

116 Views

Use the column-width property to specify the width of the columns. You can try to run the following code to implement the column-width property −ExampleLive Demo                    .demo {             column-count: 4;             column-rule-color: gray;             column-rule-style: dashed;             column-width: 100px;          }                              This is demo text. This is demo text. ... Read More

Set How Many Columns an Element Should Span Across with CSS

Smita Kapse
Updated on 24-Jun-2020 13:52:02

178 Views

To set how many columns an element should span, use the column-span property. You can try to run the following code to implement the column-span property:ExampleLive Demo                    .demo {             column-count: 4;             column-rule-color: maroon;             column-rule-style: dashed;          }          h1 {             column-span: all;          }                     ... Read More

Apple Touch Icon for Websites in HTML

karthikeya Boyini
Updated on 24-Jun-2020 13:48:22

2K+ Views

For web page icon on iPhone or iPad, use the Apple Touch Icon or apple-touch-icon.png file. This icon is used when someone adds your web page as a bookmark.For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows −Set size The icon with the appropriate size for the device is used.

Clear Chart from HTML5 Canvas to Disable Hover Events

Samual Sam
Updated on 24-Jun-2020 13:45:44

260 Views

To clear a chart from canvas, delete the element and then append a new element to the parent container as in the below-given code −var resetCanvas = function(){    $('#results-graph').remove();      $('#graph-container').append('');    canvas = document.querySelector('#results-graph');    ct = canvas.getContext('2d');    ct.canvas.width = $('#graph').width(); // here we are resizing the new canvas element to parent width    ct.canvas.height = $('#graph').height(); // here we are resizing the new canvas element to parent height    var a = canvas.width/2;    var b = canvas.height/2;    ct.font = '12pt Calibri';    ct.textAlign = 'Align Left';    ct.fillText('left aligned ... Read More

Position Text to Bottom Left on an Image with CSS

George John
Updated on 24-Jun-2020 13:44:55

2K+ Views

To position text to bottom left, use the bottom and left property. You can try to run the following code to position text to bottom left on an imageExampleLive Demo                    .box {             position: relative;          }          img {             width: 100%;             height: auto;             opacity: 0.6;          }          .direction {             position: absolute;             bottom: 10px;             left: 19px;             font-size: 13px;          }                     Heading One       Below image has text in the bottom left:                          Bottom Left Corner          

Make Browser-to-Browser Peer-to-Peer Connection in HTML

Giri Raju
Updated on 24-Jun-2020 13:44:32

494 Views

For the browser to browser connection, follow the below-given steps −All the following library −Create a peer −For creating a peer, you need to get a free API key.var peer = new Peer('pick-an-id', {key: 'myapikey'});Connect −var conn = peer.connect('another-peers-id'); conn.on('open', function(){    conn.send('Welcome!'); });

Draw Grid Using HTML5 and Canvas or SVG

Arjun Thakur
Updated on 24-Jun-2020 13:43:08

656 Views

In the below given example, we have first defined the width and height of the grid. Then we are defining the size of canvas and drawn gird into a canvas.//we are setting the grid width and height var grid_w = 200; var grid_h = 200; //we are setting padding around grid var gridp = 15; //we are defining size of canvas by defining its width and height var canvas_w = grid_w + (gridp*2) + 1; var canvas_h = grid_h + (gridp*2) + 1; var canvas = $('').attr({width: canvas_w, height: canvas_h}).appendTo('body'); var ctx = canvas.get(0).getContext("2d");Here is our method −function ... Read More

Advertisements