Html | helloWorld

Mar 22 2007

ProgressBar div

Tag: Html, JavaScript — berrisch @ 12:40 am

This little snippet is to demonstrate how easy it is to insert and to control a progress bar in your html code:

Step:

33 %

Resting 77% !!

Styles css:

<style>
.container {
	position: relative;
	height: 20px;
	width: 550px;
}
 
.bar-container {
	position: relative;
	float: left;
	height: 15px;
	width: 300px;
	border: solid 1px #AAA;
	background: #EEE;
	overlow: hidden;
}
 
.progress-bar {
	position: absolute;
	z-index:1;
	height: 100%;
	width: 33%;
	background: #F60;
}
 
.progress-label {
	position: absolute;
	z-index:2;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 11px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
 
.text-info {
	position: relative;
	float: left;
	height: 15px;
	width: 202px;
	left: 20px;
	font-size: 15px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
</style>

The structure of the html elements:

<input type="button" value="less" onclick="doLess()"/>
<input type="button" value="more" onclick="doMore()"/>
Step:&nbsp;
<select id="stepper">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="true">10</option>
<option value="20">20</option>
</select>
<br/>
<br/>
<div class="container">
	<div class="bar-container">
		<div class="progress-bar" id="progress_bar">
		</div>
		<div class="progress-label" id="progress_label">33 %
		</div>
	</div>
	<div class="text-info" id="text_info">Resting 77% !!
	</div>
</div>

The javascript to animate the progress bar:

initial_progress = 33;
stepper = 10;
document.getElementById('progress_bar').style.width = initial_progress + "%";
 
function actualizeStepper() {
	stepper = document.getElementById('stepper').value;
	stepper = parseInt(stepper);
}
 
function actualizeNumbers() {
	document.getElementById('progress_bar').style.width = initial_progress + "%";
	document.getElementById('progress_label').innerHTML = initial_progress + "%";
	document.getElementById('text_info').innerHTML = "Resting: " + initial_progress + "%!! ";
}
 
function doMore() {
	actualizeStepper();
	if ((initial_progress + stepper) <= 100) {
		initial_progress += stepper;
		actualizeNumbers();
	}
}
function doLess() {
	actualizeStepper();
	if ((initial_progress - stepper) >= 0) {
		initial_progress -= stepper;
		actualizeNumbers();
	}
}

Comments (0)

Mar 18 2007

Embeded WMP

Tag: Html — berrisch @ 2:41 am

This is to make the little player working, which is on my page to descibe how to integrate the Windows Madia Player to a html page!

<object ID="MediaPlayer1" width=165 height=48 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
	codebase="
	http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
        standby="Loading Microsoft® Windows® Media Player components..." 
        type="application/x-oleobject">
 
 
  <param NAME="AutoStart" VALUE="True">	
 
  <param NAME="FileName" VALUE="1.mp3">
  <param NAME="ShowControls" VALUE="true">
  <param NAME="ShowStatusBar" VALUE="true">
  <embed type="application/x-mplayer2" 
	pluginspage =" http://www.microsoft.com/Windows/MediaPlayer/"
	SRC="1.mp3"
	name="MediaPlayer1"
	width=165
	height=46
	ShowStatusBar=true
	ShowControls=true>
  </embed>

Comments (0)

Mar 09 2007

Simple html header

Tag: Html — berrisch @ 9:01 pm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="author" content="Michael Moon, michael@moon.com"/>
    <meta name="keywords" content="culture, artist, language"/>
    <meta name="description" content="All the facts of nowadays ART"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <title>MoonBoots</title>
    <link href="Styles.css" rel="stylesheet" type="text/css">
    <script src="Scripts.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Some tags to start!

Comments (3)