RSS

Category Gotowe skrypty i programy

FemtoPlayer – mini free mp3 flash player

0 comments By Adam Kubiczek Filed in Gotowe skrypty i programy Tagged with , November 17th, 2008 @ 3:01 pm

Kilka dni temu szukałem malutkiego mp3 playera, który wyświetlał by jedynie ikonkę z przyciskiem play i odgrywał wskazany dźwięk mp3. Poszukiwania w googlu dały kilka rezultatów, ale każdy z nich albo był “za bardzo”, albo miał złą licencję. Zamiast tracić dalej czas napisałem te kilkanaście linijek kodu i stworzyłem swój własny FemtoPlayer – Femto to brzmi dumnie ;)

Parametry:

file = pathToMP3 //ścieżka do pliku mp3
autoplay = true|false //czy automatycznie odgrywać dźwięk po wczytaniu

Przykład użycia:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="20" height="25" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="FlashVars" value="file=test.mp3&amp;autoplay=true" /><param name="src" value="FemtoPlayer.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="file=test.mp3&amp;autoplay=true" /><embed type="application/x-shockwave-flash" width="20" height="25" src="FemtoPlayer.swf" wmode="transparent" flashvars="file=test.mp3&amp;autoplay=true"></embed></object>

SWF do pobrania: download

DateTimePicker komponent

2 comments By Adam Kubiczek Filed in Gotowe skrypty i programy Tagged with September 1st, 2008 @ 6:11 pm

Takie coś kiedyś napisałem (hen dawno temu), a teraz na powrót to odkryłem:

(aby zobaczyć prawidłowo funkcjonujące demo otwórz skrypt w nowym oknie)

Jest to prosty skrypt wyświetlający kalendarzyk, i wstawiający wybraną przez użytkownika datę do pola tekstowego. Wywołanie skryptu jest banalne:

<input id="DateShow" style="width: 80px;" maxlength="10" name="DateShow" type="text" />
<img style="cursor:pointer;" onclick="DateTimePicker.Show(this,'DateShow');" src="calendar.gif" alt="" />

W drugim parametrze przekazujemy id pola tekstowego, do którego chcemy wstawić wybraną przez użytkownika datę. Paczuszkę ze skryptem, stylami i przykładowym użyciem można pobrać tutaj. Jak zajrzycie do kodu źródłowego, to odkryjecie wiele dodatkowych możliwości (ok, zdradzę trochę: można zmienić język w jakim kalendarz jest wyświetlany, albo format zwracanej daty).

Scroller, pokazywacz komunikatów, reklam itp.

0 comments By Adam Kubiczek Filed in Gotowe skrypty i programy Tagged with August 27th, 2008 @ 12:23 am

Pod tym wybitnym tytułem, kryje się obiekt w Javascript, który powstał pewnego dnia w przerwie pomiędzy pierwszą kanapką a drugą ;). W każdym razie umożliwia on łatwo osiągnięcie takiego efektu jak widać to poniżej.

A oto kod obiektu:

function Scroller(divID,stringsArray) {
 
	var pause=3000;
 
	var currentIndex=0;
	var mainDiv=document.getElementById(divID);
	var innerDiv=document.createElement('div');
	mainDiv.style.overflow='hidden';
 
	mainDiv.appendChild(innerDiv);	
 
	var marginTop;
	var stepDelta=2;
 
	var initScrolling = function() {
		marginTop=mainDiv.offsetHeight;
		innerDiv.innerHTML=stringsArray[currentIndex];
		innerDiv.style.marginTop=marginTop+'px';
	}
 
	var CountDelta = function() {
		var newDelta=Math.sin(marginTop/mainDiv.offsetHeight)*10;
		if (newDelta&lt;=0.01) { newDelta=0.01; }	
		return newDelta;
	}	
 
	var SetPosition = function() {
		stepDelta=CountDelta()
 
		if (marginTop&gt;0) {
			marginTop-=stepDelta;			
			innerDiv.style.marginTop=marginTop+'px';
		}
 
		return marginTop;
	}
 
	var nextString = function() {
		if (currentIndex&lt;stringsArray.length-1) {
			currentIndex++;
		} else {
			currentIndex=0;
		}
		startScrolling();
	}
 
	var startScrolling = function() {
 
		initScrolling();
 
		var stepInterval = window.setInterval(function () {
			if (SetPosition()&lt;=0) {
				clearInterval(stepInterval);
				setTimeout(nextString,pause);
			} 
		},10);
	}
 
	startScrolling();
}

A tutaj przykład użycia:

<html>
<head>
<script src="scroller.js" type="text/javascript" language="javascript"></script>
</head>
<body>
 
<div id="scroller" style="width:300px;height:70px;padding:5px;background-color:orange;font-size:8pt;font-family:verdana;"></div>
 
<script type="text/javascript" language="javascript">
//<![CDATA[
 
var Strings=new Array();
Strings[0]='Hi! Jestem mrówka!';
Strings[1]='Lorem ipsum dolor sit amet consectetuer turpis lacinia Curabitur vel a. Massa morbi Donec est in leo consequat vestibulum lobortis enim.';
Strings[2]='Lákamí vůněhulás úmyval rohlivý jednovod lek vlač Partavěď ka vla.';
Strings[3]='Massa morbi Donec est in leo consequat vest. Massa morbi Donec est in leo consequat vest, massa morbi Donec est in leo consequat vest.';
 
var scroller=new Scroller('scroller',Strings);
//]]>
</script>
 
 
</body>
</html>

W pierwszym parametrze konstruktora przekazujemy ID warstwy na której chcemy wyświetlać komunikaty, w drugim natomiast tablicę z komunikatami. Voila.

Przetestowane pod Firefox2, IE7, Opera9.

Copyright © Kubiczek devblog
I'm lovin' it ;)

Built on Notes Blog Core
Powered by WordPress