Category: HTML

Post related to HTML

Redirect to another page after a specific time interval

<h1>Welcome to my Website</h1>
<h4 id=”msg”>You will be redirected to another page in 5 seconds!</h4>
<script type=”text/javascript”>
function countDown(i, callback) {
callback = callback || function(){};
var int = setInterval(function() {
//document.getElementById(“displayDiv”).innerHTML = “Number: ” + i;
document.getElementById(“msg”).innerHTML = “You will be redirected to backend page in “+i+” seconds!”;
i– || (clearInterval(int), callback());
}, 1000);
countDown(5, function(){
window.location=”[Give your absolute or relative url to redirect]”;
}, 3000);

How to wrap data column in Gridview widget in yii or yii2 framework

The column which you want to wrap should be added the property called “contentOptions” where you can apply the css property to suits your needs and requirements as below.

‘attribute’ => ‘column name’,
‘format’ => ‘html’,
‘noWrap’ => false,
‘contentOptions’ => [‘style’ => ‘width: 50%; overflow: scroll;word-wrap: break-word;white-space:pre-line;’],
‘value’=>function ($data) {
return $data[‘question’];

validate mobile number on keypress using jquery

How to validate and restrict unwanted character for mobile or phone number field using jquery

$(document).ready(function () {
$(‘#mobile’).keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^0-9]/g, function (str) {
return ”;

Replace any text from html text by tag name with specific attribute in php

function replace_tag_with_specific_attr_type( $tagAttribute, $tagAttributeValue, $subjectStr, $tagName=null,$replaceStr ) {
if( is_null($tagName) )
$tagName = ‘\w+’;
$tagName = preg_quote($tagName);

$tagAttribute = preg_quote($tagAttribute);
$tagAttributeValue = preg_quote($tagAttributeValue);

$match_regex = “/<(“.$tagName.”)[^>]*$tagAttribute\s*=\s*”.


$result = str_replace($matches[3],$replaceStr,$subjectStr);
return $result;

Usage :
Say for Example

$ActualStr : ‘<div class=’bannerpicsd’ ><span style=”margin: 0px 0px 0px 0px; width: 540px;”>something</span><p style=”float: right; margin: -240px 0 0; width: 200px;”>This is the actual String</p></div>’;
$StrToReplaceWith = ‘This is the replaces str’;

Now you want to replace all the text inside the div tags with class name “bannerpicsd”  from $ActualStr with $StrToReplaceWith
Then you can do as below:

$replacedStr  = replace_tag_with_specific_attr_type(‘class’,’bannerpicsd’,$ActualStr,’div’,$StrToReplaceWith);
Result :
<div class=”bannerpicsd” >This is the replaces str</div>
Enjoy 🙂

Replace any text from html text by tag name in php

function replace_tag_text($tagName,$subjectStr,$replaceStr) {
$tagName = preg_quote($tagName);
$result = str_replace($matches[1],$replaceStr,$subjectStr);
return $result;

Usage :
Say for Example

$ActualStr : ‘<div><span style=”margin: 0px 0px 0px 0px; width: 540px;”>something</span><p style=”float: right; margin: -240px 0 0; width: 200px;”>This is the actual String</p></div>’;
$StrToReplaceWith = ‘This is the replaces str’;

Now you want to replace all the text inside the <div> tags from $ActualStr with $StrToReplaceWith
Then you can do as below:

$replacedStr  = replace_tag_text(‘div’,$ActualStr,$StrToReplaceWith);
Result : <div>This is the replaces str</div>

Enjoy 🙂

How to fix flash object z-index

If any of your html element is getting hide behind the flash object such as youtube video player, or any flash player/object

Then you should call this function on body load.

function fix_flash_z_index() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName(’embed’);
for (i = 0; i < embeds.length; i++) { embed = embeds[i]; var new_embed; // everything but Firefox & Konqueror if (embed.outerHTML) { var html = embed.outerHTML; // replace an existing wmode parameter if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i)) new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'"); // add a new wmode parameter else new_embed = html.replace(//i))
new_object = html.replace(//i, ““);
// add a new wmode parameter
new_object = html.replace(/<\/object\>/i, “\n“);
// loop through each of the param tags
var children = object.childNodes;
for (j = 0; j < children.length; j++) { try { if (children[j] != null) { var theName = children[j].getAttribute('name'); if (theName != null && theName.match(/flashvars/i)) { new_object = new_object.replace(//i, ““);
catch (err) {
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML(‘beforeBegin’, new_object);

Example to call this function
$(document).ready(function () {

integrate window media player in your website

<body leftmargin=”0″ topmargin=”0″>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr height=”350″><td align=”center”>
<table cellpadding=”0″ cellspacing=”0″ border=1 bordercolor=”black”>
<td valign=”top”>
<OBJECT ID=”MediaPlayer” WIDTH=”320″ HEIGHT=”290″ CLASSID=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″ STANDBY=”Loading Windows Media Player components…” TYPE=”application/x-oleobject”>
<PARAM NAME=”URL” VALUE=’http://localhost/vinod/meeting_with_the_boss.wmv’ />
<param name=”AudioStream” value=”0″ />
<param name=”AutoSize” value=”1″ />
<param name=”AutoStart” value=”-1″ />
<param name=”AnimationAtStart” value=”1″ />
<param name=”AllowScan” value=”-1″ />
<param name=”AllowChangeDisplaySize” value=”-1″ />
<param name=”AutoRewind” value=”0″ />
<param name=”Balance” value=”0″ />
<param name=”BufferingTime” value=”1″ />
<param name=”ClickToPlay” value=”1″ />
<param name=”CursorType” value=”0″ />
<param name=”CurrentPosition” value=”-1″ />
<param name=”CurrentMarker” value=”0″ />
<param name=”DisplayBackColor” value=”0″ />
<param name=”DisplayForeColor” value=”16777215″ />
<param name=”DisplayMode” value=”0″ />
<param name=”DisplaySize” value=”4″ />
<param name=”Enabled” value=”1″ />
<param name=”EnableContextMenu” value=”1″ />
<param name=”EnableFullScreenControls” value=”1″ />
<param name=”EnableTracker” value=”0″ />
<param name=”Filename” VALUE=’http://localhost/vinod/meeting_with_the_boss.wmv’><param name=”Mute” value=”0″ />
<param name=”PlayCount” value=”1″ />
<param name=”PreviewMode” value=”1″ />
<param name=”SelectionStart” value=”-1″ />
<param name=”SelectionEnd” value=”-1″ />
<param name=”SendKeyboardEvents” value=”0″ />
<param name=”SendMouseClickEvents” value=”0″ />
<param name=”SendMouseMoveEvents” value=”0″ />
<param name=”SendPlayStateChangeEvents” value=”-1″ />
<param name=”ShowCaptioning” value=”0″ />
<param name=”ShowAudioControls” value=”1″ />
<param name=”ShowDisplay” value=”0″ />
<param name=”ShowGotoBar” value=”0″ />
<param name=”ShowPositionControls” value=”0″ />
<param name=”ShowTracker” value=”1″ />
<param name=”VideoBorderWidth” value=”0″ />
<param name=”VideoBorderColor” value=”0″ />
<param name=”VideoBorder3D” value=”0″ />
<param name=”Volume” value=”-1″ />
<param name=”WindowlessVideo” value=”0″ />
<param name=”ShowStatusBar” value=”1″ />
<PARAM name=”ShowControls” VALUE=”1″ />
<PARAM name=”ShowControls” VALUE=”true” />
<param name=”ShowStatusBar” value=”true” />
<PARAM name=”ShowDisplay” VALUE=”false” />
<EMBED TYPE=”application/x-mplayer2″ SRC=’http://localhost/vinod/meeting_with_the_boss.wmv’ NAME=”MediaPlayer” WIDTH=”320″ HEIGHT=”290″ ShowControls=”1″ ShowStatusBar=”1″ ShowDisplay=”0″ autostart=”1″> </EMBED></OBJECT>

You can view the live application here