Showing posts with label html. Show all posts
Showing posts with label html. Show all posts
Tuesday, November 16, 2010
Saturday, January 3, 2009
Disable Right Click using Javascript
Simple way yo disable right click:
<body oncontextmenu="return false;">
Using script:
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
From: http://www.reconn.us/content/view/36/45/
Now...
Can i disable right click only on images?
Yes, by using getElementsByTagName i can set no right click on images only
<script>
function noRtClk(){
return false;
}
//document.oncontextmenu = noRtClk;
var e=document.getElementsByTagName("img");
for(var i=0;i<e.length;i++)
{
e[i].oncontextmenu = noRtClk;
}
</script>
Reference: http://www.aglasshalffull.org/css-resources/Using-getElementsByTagName-and-getElementsByName.htm
Thats it.
<body oncontextmenu="return false;">
Using script:
<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
From: http://www.reconn.us/content/view/36/45/
Now...
Can i disable right click only on images?
Yes, by using getElementsByTagName i can set no right click on images only
<script>
function noRtClk(){
return false;
}
//document.oncontextmenu = noRtClk;
var e=document.getElementsByTagName("img");
for(var i=0;i<e.length;i++)
{
e[i].oncontextmenu = noRtClk;
}
</script>
Reference: http://www.aglasshalffull.org/css-resources/Using-getElementsByTagName-and-getElementsByName.htm
Thats it.
Thursday, December 11, 2008
meta refresh problem in IE7
<meta equiv="Refresh" content="3;url=http://mysite.com">
this meta tag will redirect to the specified url in 3 seconds.
but it won't work in Internet Explorer 7.
BUT...
we can use a script...
function Refresher(t) {
if(t) refresh = setTimeout("document.location='http://www.mysite.com';",
t*1000);
}
Then call it inside body tag..
<BODY onLoad="Refresher(20)">Cheers!
Thursday, September 25, 2008
Form validation with javascript
Here is an example for form validation with javascript
<html>
<head>
<title>From Validation</title>
<script language="javascript">
function chkForm(form)
{
if(form.cname.value == ""){ alert("Enter Name"); form.cname.focus(); return false; }
if(form.age.value == "0"){ alert("Select Age Level"); return false; }
}
</script>
</head>
<body>
<div align="center">
<form name="test" action="some_page.php" method="post" onsubmit="return chkForm(this);">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td width="139">Name</td>
<td><input type="text" name="cname" size="20"></td>
</tr>
<tr>
<td width="139">Age</td>
<td><select size="1" name="age">
<option selected value="0">Select</option>
<option value="below 18">below 18</option>
<option value="18+">18+</option>
</select></td>
</tr>
<tr>
<td width="139"> </td>
<td><input type="submit" value="Submit" name="B1"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Older posts
Radio button validation:
http://phpbeginners.blogspot.com/2008/06/radio-button-validation-in-javascript.html
checkbox validation:
http://phpbeginners.blogspot.com/2008/05/checkbox-validation-in-javascirpt.html
<html>
<head>
<title>From Validation</title>
<script language="javascript">
function chkForm(form)
{
if(form.cname.value == ""){ alert("Enter Name"); form.cname.focus(); return false; }
if(form.age.value == "0"){ alert("Select Age Level"); return false; }
}
</script>
</head>
<body>
<div align="center">
<form name="test" action="some_page.php" method="post" onsubmit="return chkForm(this);">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td width="139">Name</td>
<td><input type="text" name="cname" size="20"></td>
</tr>
<tr>
<td width="139">Age</td>
<td><select size="1" name="age">
<option selected value="0">Select</option>
<option value="below 18">below 18</option>
<option value="18+">18+</option>
</select></td>
</tr>
<tr>
<td width="139"> </td>
<td><input type="submit" value="Submit" name="B1"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Older posts
Radio button validation:
http://phpbeginners.blogspot.com/2008/06/radio-button-validation-in-javascript.html
checkbox validation:
http://phpbeginners.blogspot.com/2008/05/checkbox-validation-in-javascirpt.html
Wednesday, July 23, 2008
Audio Streaming / Playing audio mp3 files in web page - HTML
How to play mp3 files in a web page - as streaming using some players available for free?...
First, lets try with windows media player.
Try this code...
<object id="MediaPlayer" height=46 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="Bheema1.mp3">
<param name="Showcontrols" value="True">
<param name="autoStart" value="True">
<embed type="application/x-mplayer2" src="http://www.mix26.com/demo/Bheema1.mp3" name="MediaPlayer"></embed>
</object>
will Show this media player:
This one is from google... Google audio player.
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.mix26.com/demo/om_zaraare.mp3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />
will Show:
This is from yahoo...
<embed src='http://webjay.org/flash/dark_player' width='400' height='40' wmode='transparent' flashVars='playlist_url=http://www.mix26.com/demo/marudhaani.mp3&rounded_corner=1&skin_color_1=0,0,0,0&skin_color_2=0,0,0,0' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer'/>
will Show:
And this one is very cute...
Add just a line (javascript) in your page and get the player...
http://mediaplayer.yahoo.com/
Cheers!
First, lets try with windows media player.
Try this code...
<object id="MediaPlayer" height=46 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="Bheema1.mp3">
<param name="Showcontrols" value="True">
<param name="autoStart" value="True">
<embed type="application/x-mplayer2" src="http://www.mix26.com/demo/Bheema1.mp3" name="MediaPlayer"></embed>
</object>
will Show this media player:
This one is from google... Google audio player.
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=http://www.mix26.com/demo/om_zaraare.mp3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />
will Show:
This is from yahoo...
<embed src='http://webjay.org/flash/dark_player' width='400' height='40' wmode='transparent' flashVars='playlist_url=http://www.mix26.com/demo/marudhaani.mp3&rounded_corner=1&skin_color_1=0,0,0,0&skin_color_2=0,0,0,0' type='application/x-shockwave-flash' pluginspage='http://www.adobe.com/go/getflashplayer'/>
will Show:
And this one is very cute...
Add just a line (javascript) in your page and get the player...
http://mediaplayer.yahoo.com/
Cheers!
Friday, July 4, 2008
Doctype - margin / padding problem with HTML
Some may come across the problem...
<!DOCTYPE html PUBLIC....
if you use any doctype in our page, then some unwanted padding/margin will appear with images / tables / td s will be added automatically in your page....
You want to remove them...? Then add this css code in to your page
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
Thats all...
Cheers!
<!DOCTYPE html PUBLIC....
if you use any doctype in our page, then some unwanted padding/margin will appear with images / tables / td s will be added automatically in your page....
You want to remove them...? Then add this css code in to your page
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
Thats all...
Cheers!
Friday, June 27, 2008
Call Functions across parent and child windows using iframe
Div over flash problem in HTML
Some may have this problem.
Always the flash object looks like placed in front of all the objects. So if we want to put a div in front of flash/ over flash we cant.
But there s a solution...
The normal flash object....
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="519" height="255">
<param name="movie" value="center_flash.swf">
<param name="quality" value="High">
<embed src="center_flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="519" height="255" quality="High">
</object>
To make it back of all elemnts add
<param name="wmode" value="transparent">
So the actual code we want is...
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="519" height="255">
<param name="movie" value="center_flash.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="center_flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="519" height="255" quality="High">
</object>
Demo
Download
Cheers!
Always the flash object looks like placed in front of all the objects. So if we want to put a div in front of flash/ over flash we cant.
But there s a solution...
The normal flash object....
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="519" height="255">
<param name="movie" value="center_flash.swf">
<param name="quality" value="High">
<embed src="center_flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="519" height="255" quality="High">
</object>
To make it back of all elemnts add
<param name="wmode" value="transparent">
So the actual code we want is...
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="519" height="255">
<param name="movie" value="center_flash.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="center_flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="519" height="255" quality="High">
</object>
Demo
Download
Cheers!
Wednesday, June 18, 2008
Radio button validation in Javascript (HTML)
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Check Test</title>
<script language="javascript">
function valBox()
{
var x = document.chkForm;
var i, flg = 0;
for( i=0; i<x.grp.length; i++ )
{
if(x.grp[i].checked)
flg=1;
}
if(!flg)
{
alert("Select One");
return false;
}
}
</script>
</head>
<body>
<form name="chkForm" method="POST" action="#" onsubmit="return valBox();">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td><input type="radio" value="V1" name="grp">1</td>
</tr>
<tr>
<td><input type="radio" value="V2" name="grp">2</td>
</tr>
<tr>
<td><input type="radio" value="V3" name="grp">3</td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="B1"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Check Test</title>
<script language="javascript">
function valBox()
{
var x = document.chkForm;
var i, flg = 0;
for( i=0; i<x.grp.length; i++ )
{
if(x.grp[i].checked)
flg=1;
}
if(!flg)
{
alert("Select One");
return false;
}
}
</script>
</head>
<body>
<form name="chkForm" method="POST" action="#" onsubmit="return valBox();">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td><input type="radio" value="V1" name="grp">1</td>
</tr>
<tr>
<td><input type="radio" value="V2" name="grp">2</td>
</tr>
<tr>
<td><input type="radio" value="V3" name="grp">3</td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="B1"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Tuesday, April 15, 2008
HTML - CSS - Round corner table - Curve corners
<html>
<head>
<title>Test</title>
<style>
b.rtop, b.rbottom{display:block;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b></td>
</tr>
<tr>
<td bgcolor="#9BD1FA"> </td>
</tr>
<tr>
<td><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></td>
</tr>
</table>
</div>
</body>
</html>
<head>
<title>Test</title>
<style>
b.rtop, b.rbottom{display:block;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
<tr>
<td><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b></td>
</tr>
<tr>
<td bgcolor="#9BD1FA"> </td>
</tr>
<tr>
<td><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></td>
</tr>
</table>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)
