Html Archives | Page 2 of 4 | Codeexecute

Grouping of select box options through javascript

Your select box 

<select>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
<option value="fff">fff</option>
</select>
<script type="text/javascript">
$(function () {
    var $cont = $('select');
   
    $('select option').each(function () {
        if ($(this).text().indexOf('aaa') === 0 || $(this).text().indexOf('ddd') === 0) {
            $('<optGroup/>').attr('label', $(this).text()).appendTo($cont);
            $(this).remove();
        } else {
            $cont.find('optGroup').last().append($(this));
            $(this).text($(this).text());
        }
    });
    });

</script>
 

How to apply border radius on table row

<table>
<tr class="head">
	<td>Title 1</td>
	<td>Title 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
<tr>
	<td>Col 1</td>
	<td>Col 2</td>
</tr>
</table>

<style>
table{
	width:100%;
	border-collapse: collapse;
}
tr td{
	padding:10px;	
}
tr.head td{
	background-color:#D83125;
	color:#fff;
}
tr.head td:first-child{
	 border-top-left-radius: 10px;
	 border-bottom-left-radius: 10px;
}
tr.head td:last-child{
	 border-top-right-radius: 10px;
	 border-bottom-right-radius: 10px;
}
</style>


 

Bootstrap contextual classes

The bootstrap is all about defined classes,that we can use in our HTML template to beautify it without much hard work.So here in this series we will discuss about Bootstrap contextual classes.The contextual classes are the classes defined by bootstrap design team to indicate about some context.

Bootstrap contextual classes :-

  • .success >> Indicates a successful or positive action
  • .info >> Indicates a neutral informative change or action
  • .warning >> Indicates a warning that might need attention
  • .danger >> Indicates a dangerous or potentially negative action

These contextual classes can be used throughout the HTML template with many HTML elements.

For example in button elements :-


<button type="button" class="btn btn-success">Success</button> <br>
<button type="button" class="btn btn-info">Info</button> <br>
<button type="button" class="btn btn-warning">Warning</button> <br>
<button type="button" class="btn btn-danger">Danger</button> <br>

For Table elements:


<table class="table">


<tr class="success">
<td>Sucess Class</td>
</tr>

 

<tr class="info">
<td>info Class</td>
</tr>

 

<tr class="warning">
<td>warningClass</td>
</tr>

 

<tr class="danger">
<td>dangerClass</td>
</tr>

 
 </table>

Sucess Class
info Class
warningClass
dangerClass

Or even in background color:-


<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

 

How to make youtube video responsive ?

<style>
.videoResponsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
 
.videoResponsive iframe,
.videoResponsive object,
.videoResponsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="videoResponsive">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/8A6dW264sXM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

 

How to make table responsive

<style>
.tblResponsive
{
	width:100%;
}
.tblResponsive tr td
{
	border-bottom:solid 1px #e6e6e6;
	padding:5px;
}
.tblResponsive tr.tblHead td
{
	font-weight:bold;
}
@media only screen and (max-width: 480px) {

.tblResponsive tr.tblHead
{
	display:none;
}

.tblResponsive tr,
.tblResponsive td
{
	display:block;
}

.tblResponsive tr
{
	border-bottom:solid 5px #e6e6e6;
}
.tblResponsive tr td
{
	padding-left:50%;
}

.tblResponsive tr td:before
{
	content: attr(abbr);
    left: 5px;
    position: absolute;
    text-align: left;
    width: 45%;
	font-weight:bold;
}

}
</style>
<table class="tblResponsive">
	<tr class="tblHead">
		<td>Heading 1</td>
		<td>Heading 2</td>
		<td>Heading 3</td>
		<td>Heading 4</td>
		<td>Heading 5</td>
		<td>Heading 6</td>
		<td>Heading 7</td>
		<td>Heading 8</td>
		<td>Heading 9</td>
		<td>Heading 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>
	<tr>
		<td abbr="Heading 1">Data 1</td>
		<td abbr="Heading 2">Data 2</td>
		<td abbr="Heading 3">Data 3</td>
		<td abbr="Heading 4">Data 4</td>
		<td abbr="Heading 5">Data 5</td>
		<td abbr="Heading 6">Data 6</td>
		<td abbr="Heading 7">Data 7</td>
		<td abbr="Heading 8">Data 8</td>
		<td abbr="Heading 9">Data 9</td>
		<td abbr="Heading 10">Data 10</td>
	</tr>					
</table>