Kubiczek devblog » Gotowe skrypty i programy

FemtoPlayer – mini free mp3 flash player

Adam Kubiczek — Mon, 17 Nov 2008 13:01:18 +0000

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:

SWF do pobrania: download

DateTimePicker komponent

Adam Kubiczek — Mon, 01 Sep 2008 16:11:05 +0000

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:

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.

Adam Kubiczek — Tue, 26 Aug 2008 22:23:15 +0000

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:

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.