Archive for the ‘ Html ’ Category

NodeJS Loopback

Looks very promising, I think I will give it a try these days.

Wonderful new world of nodejs!

About LoopBack.IO

  • Use the CLI to generate REST APIs
  • Connect devices and browsers to data and services
  • Open Source and extensible

Set up models and create REST APIs in minutes

  • Easy-to-use CLI wizard
  • Create models based on your schema if you have one
  • Create dynamic models if you don’t
  • Built-in API Explorer

Model relation support

  • Define hasMany, belongsTo, hasAndBelongsToMany relationships
  • Automatically generates corresponding REST endpoints

Easy authentication and authorization setup

  • Built-in role-based access controls
  • oAuth user and registration models baked in
  • Add custom policies using CLI or JSON
  • Browser support (JSONP and CORS)

MIT open-source license

Client SDKs

Native Mobile and Browser SDKs

  • Easily persist data with a database API on the client
  • Store files, send push notifications, and call custom server-side code
  • Android / Java
  • iOS
  • Browser JavaScript (Angular)

Juggler

Connect to backend data stores

  • MySQL, Oracle, MongoDB, and others
  • Other REST services
  • Discovery APIs for Oracle and MySQL

Run ad-hoc queries

  • Run dynamic queries on devices, browsers and the server
  • Support for NoSQL-style queries against relational databases

Mobile Services

Send push notifications

  • Backend push system with simple API calls
  • Supports both Android and iOS

Geolocation

  • Validate and store geolocations
  • Find nearby results with geo filters
2014
06/20
CATEGORY
Html
JavaScript
MySql
Write comment

ProgressBar div

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();
	}
}
2007
03/22
CATEGORY
Html
JavaScript
TAGS
Write comment

Embeded WMP

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>
2007
03/18
CATEGORY
Html
Write comment