July Code Blog: html

Showing posts with label html. Show all posts

Tuesday, April 12, 2011

Resize image without distorting it

Author: xiaoyu | Posted at: 11:08 AM | Filed Under: CSS, html

Has anyone come across a problem where image is being distorted on a webpage?

Here is the simple CSS solution to display images without distorted.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .imgresize {
      width: 100px;
      height: 150px;
    }
    .imgresize img {
      width: 100px; // to fix images by width, or
      // height: 150px; // to fix images by height
    }

  </style>

</head>

<body>

  <form id="form1" runat="server">

  </div>

  </form>

</body>

</html>

Note: You need to remove the height and width attribute value from img tag itself.

Reference link http://forums.asp.net/p/1514562/3619288.aspx

Saturday, April 12, 2008

Disable Right-Click for Your Website

Author: xiaoyu | Posted at: 8:48 PM | Filed Under: html, javascript

NO RIGHT-CLICK for Images
Have you ever tried so hard on your website to stop someone stolen your graphics as their own.

Here is an extra step in protecting your graphics/images from being saved. But there is no foolproof method to stop someone from copy your images. If they really want something from your web site, they can find ways around it. But at least you can eliminate some proportion of visitors stealing images from your web site.

It is very simple. Whenever someone right clicks his/her mouse, a message will popped up to show him/her that he/she do not have permission to do so. Place the script below within the head tags of your html.

<script language="JavaScript">
<!--
var msg="Right-click is disabled!";

function rightclick(go) {
    if (document.all) {
        if (event.button == 2) {
            alert(msg);
            return false;
        }
    }
    if (document.layers) {
        if (go.which == 3) {
            alert(msg);
            return false;
        }
    }
}
if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=rightclick;
// -->
</script>

NO RIGHT-CLICK for Sources
To protect the whole page of your web site, copy and paste the script below within your head tags in your html.

<script language="JavaScript"> 
<!-- 
function rightclick(e) {
    if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2))
        return false;
    else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) {
        alert('Right-click is disabled!');
        return false;
    }
    return true;
}

document.onmousedown=rightclick;
document.onmouseup=rightclick;
if(document.layers) window.captureEvents(Event.MOUSEDOWN);
if(document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=rightclick;
window.onmouseup=rightclick;
//-->
</script>

Friday, December 28, 2007

List of Parameters Supported by Windows Media Player 7 and Later Version

Author: xiaoyu | Posted at: 10:07 PM | Filed Under: html

By adding some PARAM elements in your Windows Media Player object, you can decide the outlook and the functionality of your Windows Media Player. It enables you to specify certain player properties when the page is browsed. Below is a list of common parameters supported by Windows Media Player and later version.

autoStart
- Default: true
- Description: Specifies or retrieves a value indicating whether the current media item begins playing automatically.

balance
- Default: 0
- Description: Specify the current stereo balance.

baseURL
- Default: -
- Description: Specifies the base URL used for relative path resolution with URL script commands that are embedded in media items.

captioningID
- Default: 0
- Description: Specifies the name of the element displaying the captioning.

currentMarker
- Default: 0
- Description: Specifies the current marker number.

currentPosition
- Default: 0
- Description: Specifies the current position in the media item in seconds.

defaultFrame
- Default: -
- Description: Specifies the name of the frame used to display a URL.

enableContextMenu
- Default: true
- Description: Specifies a value indicating whether to enable the context menu, which appears when the right mouse button is clicked.

enabled
- Default: false
- Description: Specifies whether the Windows Media Player control is enabled.

filename
- Default: -
- Description: Specifies the name of the media item to play. You can specify a local filename or a URL.

fullScreen
- Default: false
- Description: Specifies whether video content is played back in full-screen mode.

InvokeURLs
- Default: true
- Description: Specifies a value indicating whether URL events should launch a Web browser.

Mute
- Default: false
- Description: Specifies if audio is muted.

Loop
- Default: false
- Description: Specifies if audio is played continuously.

PlayCount
- Default: 1
- Description: Specifies the number of times a media item will play. Minimum value of one.

Rate
- Default: 1.0
- Description: Specifies the playback rate.
  0.5 equates to half the normal playback speed, 2 equates to twice.

stretchToFit
- Default: false
- Description: Specifies whether video displayed by the control automatically sizes to fit the video window, when the video window is larger than the dimensions of the video image.

uiMode
- Default: full
- Description: Specifies which controls are shown in the user interface. Possible values: invisible, none, mini, full.

URL
- Default: -
- Description: Specifies the name of the media item to play. You can specify a local filename or a URL.

volume
- Default: Last setting
- Description: Zero specifies no volume and 100 specify full volume.

windowlessVideo
- Default: false
- Description: Specifies or retrieves a value indicating whether the Windows Media Player control renders video in windowless mode.
  When windowlessVideo is set to true, the Player control renders video directly in the client area, so you can apply special effects or layer the video with text.
  Supported by Windows Media Player for Windows XP or later.

Tuesday, December 11, 2007

Adding an embedded Windows Media Player on HTML document

Author: xiaoyu | Posted at: 9:30 PM | Filed Under: html

This article describes how to embed Windows Media Player to play music or video in HTML document, it also includes required code in HTML and JavaScript.

To embed Windows Media Player, you need to add an OBJECT element for the Windows Media Player ActiveX control. Here is the code to add the OBJECT element on your web page.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player Web Page</TITLE>
</HEAD>
<BODY>

<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>

</BODY>
</HTML>

As you can see, there is a CLASSID number there. This CLASSID may differ depends on the Windows Media Player’s version. The CLASSID is for Windows Media Player 7, 9, 10 and 11. If you want to embed Windows Media Player 6.4 instead of the latest version, the class ID is clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95.

Add PARAM Parameters
Besides, you can decide the player’s functionality by adding some PARAM elements. It enables you to specify certain player properties when the page is browsed.

In this example, I had added in 3 parameters which let the media item begins playing automatically and non stop when the page is browsed point to the path of my music file.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control</TITLE>
</HEAD>
<BODY>

<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM name="autoStart" value="false">
<PARAM name="filename" value="your_song.wav">
<PARAM NAME = "loop" VALUE = "True">
</OBJECT>

</BODY>
</HTML>

Controlling Windows Media Player using Java script code
Here is a few examples of scripts to control Windows Media Player.

Start playback:
Player.controls.play();
Stop playback:
Player.controls.Stop();
Pause playback:
Player.controls.Pause();
Mute setting:
Player.settings.mute = “1”;
Unmute setting:
Player.settings.mute = “0”;
Volume up setting:
Player.settings.volumn = Player.settings.volumn + 10;
Volume down setting:
Player.settings.volumn = Player.settings.volumn – 10;

Here is the complete code of it. There is only Start and Stop button in this sample. Hope this will help you.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control<SCRIPT>

</SCRIPT>

</HEAD>
<BODY>
<OBJECT ID="Player" width="320" height="240"
CLASSID="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM name="autoStart" value="false">
<PARAM name="filename" value="your_song.wav">
<PARAM NAME = "loop" VALUE = "True">
</OBJECT>

<BR>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartPlay()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="StopPlay()">

</BODY>
</HTML>

Note that if you are using version 6.4, you can change the two player methods. In the StartPlay() function change the method to Player.play(), and in the StopPlay() function to Player.stop().

Thursday, December 6, 2007

Simple script to play music on a HTML document

Author: xiaoyu | Posted at: 9:34 PM | Filed Under: html

You can use this EMBED script to play a music in HTML document.

Take a look at the example below. Hope this will help you work it out.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="play music">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Play music
<SCRIPT language=JavaScript type=text/javascript>

</script>

</head>
<body >

<EMBED SRC="your_song.wav" name="track" autostart="false" hidden="true" loop="true"> </EMBED>
<input type="button" onclick="StopPlay()" value="Stop">
<input type="button" onclick="StartPlay()" value="Play">

</body>
</html>

Note: To make it work, you still need any version of Windows Media Player to be installed in your computer, else a plug-in error will occurred.

July Code Blog

Categories