Category: HTML

Post related to HTML

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+’;
else
$tagName = preg_quote($tagName);

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

$match_regex = “/<(“.$tagName.”)[^>]*$tagAttribute\s*=\s*”.
“([‘\”])$tagAttributeValue\\2[^>]*>(.*?)<\/\\1>/”;

preg_match_all($match_regex,
$subjectStr,
$matches,
PREG_PATTERN_ORDER);

$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);
preg_match_all(‘{<‘.$tagName.'[^>]*>(.*?)</’.$tagName.’>}’,$subjectStr,$matches,PREG_PATTERN_ORDER);
$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
else
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);
object.parentNode.removeChild(object);
}
}
}

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

integrate window media player in your website

<html>
<head></head>
<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”>
<tr>
<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>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

You can view the live application here