bogdan_constantinescu

idei binare

Archive for the ‘Javascript’ Category

jQuery: traversing

  • Author: Bogdan CONSTANTINESCU
  • Filed under: Javascript
Monday
Apr 6,2009

Având în vedere că scriu foarte rar din cauza timpului limitat pe care îl am, m-am gândit să vă explic puțin despre liste și cum le parcurgem cu jQuery în caz de necesitate. Eu le-am folosit foarte mult în ultima perioada pentru versatilitatea de care dau dovada. Exemplul pe care se poate aplica foarte usor este un playlist.

În primul rând o să fac o listă cu necesitățile pentru a face chestia să funcționeze:

  • ultimul release jQuery (in acest moment v1.3.2)
  • vreo 20minute libere

(more...)

  • 4 Comments

    • Tabele cu jQuery

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Thursday
    Oct 2,2008

    Pentru că a trecut ceva vreme de când am scris ultimul post referitor la jQuery, am revenit cu un mic tutorial, dar foarte eficient după părerea mea, despre tabele. Ştiu că nu mai sunt "la modă", dar mi se pare relativ stupidă folosirea <div>-urilor pentru afişarea informaţiilor care necesită un tabel.

    Acestea fiind zise, astăzi o să facem următoarele:

    • o să stilizăm un tabel obişnuit (CSS aplicat cu jQuery)
    • o să-i dăm o notă mai accentuată rândului pe care ne poziţionăm mouseul
    • o să-i adăugăm un selector

    Bun, să începem cu tabelul. Eu am făcut un tabel obişnuit cu nişte valori random. Rezultatul îl puteţi vedea mai jos.
    (more...)

  • 1 Comment

    • Linkuri cu jQuery

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Friday
    Sep 19,2008

    Aseară a început o mică discuţie pe Twitter referitor la o problemă de validare în cazul linkurilor care conţin `target="_blank"`. Dicuţia a început de la întrebarea lui Radu Ceucă şi au fost sugerate câteva soluţii.

    Prima dintre ele îi aparţine lui @extraordinaire care a propus clasicul `window.open`. Din păcate problema e că arată urâţel un onclick care conţine un `window.open` şi presupun că va fi tratat ca pop-up de majoritatea adblock-urilor. O altă soluţie primită am înţeles că a fost clasicul `rel="external"` tratat cu Javascript.

    Eu vreau să vă arat cea mai simplă şi curată soluţie folosind jQuery. Respectând zicala jQuery, `let's write less and do more` :) 

    $(document).ready(
   function ()
   {
       $("a[@rel*=external]").attr( { target: "_blank" });
   }
);

    Ne mai rămâne doar să includem libraria jQuery şi să punem acest script între <head> şi </head> şi totul e gata. Orice link care va avea `rel="external"` va fi deschis într-o pagină nouă. Simplu şi curat!

    Cu un pas mai aproape de `Javascript Rockstar` :D

  • 2 Comments

    • jQuery tooltip – dezvoltare

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Tuesday
    Sep 2,2008

    În ultimul post am realizat un mic tooltip cu ajutorul jQuery, caruia îi vom aduce nişte modificări în tutorialul de azi.

    În unul din comentarii Brayn sugera ca tooltip-ul să funcţioneze în felul următor:

    • textul din alt să fie înlocuit cu un id
    • tooltip-ul va afişa în final textul dinamic (în cazul nostru îl vom scoate dintr-o bază de date MySQL)

    În consecinţă am aflat că avem nevoie de câteva lucruri...

    • o bază de date MySQL
    • un fişier care interacţionează cu serverul MySQL
    • o funcţie Javascript care face cererea către acest fişier

    1. Baza de date

    Bun, haideţi să facem o bază de date nouă şi s-o populăm cu nişte informaţii (textele pe care le vom afişa mai apoi în tooltip).

     CREATE DATABASE `tooltip` ;

    Acum vom face şi o tabelă pe care eu am numit-o definition. Pe scurt este vorba de 2 câmpuri: uid - "unique id" (în care se va afla id-ul pe care noi îl vom citi din proprietatea alt a imaginii) şi text - "informaţia ce se va afişa în tooltip".

     CREATE TABLE `tooltip`.`definition` (
`uid` INT NOT NULL AUTO_INCREMENT ,
`text` TEXT NOT NULL ,
PRIMARY KEY ( `uid` )
) ENGINE = MYISAM

    Dacă aveţi vreo nelamurire despre SQL puteţi consulta nişte manuale online. OK, acum mai trebuie să populăm baza de date proaspăt creată...

    INSERT INTO `definition` (`uid`, `text`) VALUES
(1, 'First tooltip information coming from a mysql database.'),
(2, 'We also have a second database entry
for showing you the text you were looking for!'),
(3, 'And some more information. You like it, huh? <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> '),
(4, 'Showing possible thanks to jQuery ajax httprequest <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ');

    Acestea fiind făcute nu ne rămâne decât să trecem la urmatorul pas, realizarea fişierului care va face legătura cu serverul MySQL.

    2. Scriptul server-side

    Această etapă o puteţi face utilizând orice limbaj de programare server-side care vă place. Personal o să aleg php pentru că pe el îl stăpânesc cel mai bine. Pe scurt ceea ce trebuie să realizăm va arăta cam aşa:

    • aşteptăm sa fie transmis un parametru la chemarea fişierului
    • ne conectăm la serverul MySQL
    • facem interogarea şi afişăm rezultatul.

    Treabă simplă. În consecinţă ajungem la un rezultat asemănător cu cel de mai jos.

    /* ne conectam la serverul mysql si
selectam baza de date pe care vom lucra */
$dbh = mysql_connect("localhost", "user", "parola");
mysql_select_db("tooltip");
 
/* verificam sa fie curat inputul si ii
scoatem spatiile goale din jurul sau */
$request = strip_tags(trim($_POST['uid']));
 
/* facem select-ul in functie de ID */
$qry = mysql_query("
		SELECT
			text
		FROM
			`definition`
		WHERE
			uid='". $request ."'");
 
/* afisam textul pentru tooltip aferent ID-ului cerut;
daca ID-ul cerut nu exista ii spunem acest lucru*/
if(mysql_num_rows($qry) != 0)
	echo mysql_result($qry, 0);
else
	echo "Sorry, that does not exist!";
 
/* si in final inchidem conexiunea la server */
mysql_close($dbh);

    Fişierul în cauză eu l-am denumit tooltip.php (ne va fi de folos în ultimul pas) :)

    3. Let's do some Javascript magic

    Bun, deci avem baza de date, avem fişierul care face output în funcţie de parametrul care îi este trimis (în cazul nostru metoda este POST) şi ne rămâne de făcut doar o funcţie nouă în script şi nişte mici modificări.

    function request(id)
{
	/* realizam pachetul de optiuni pentru functie */
	var data = {
			type: "POST",
			url: "tooltip.php",
			data: "uid="+id,
			async: false
		}
 
	/* chemam functia si ii preluam raspunsul */
	var response = $.ajax(data).responseText;
 
	/* si il intoarcem */
	return response;
}

    Ne mai rămâne ca în funcţia din eventul mouseover să schimbăm valoarea variabilei text cu urmatoarea secvenţă.

    var text = request(parseInt(this.alt));

    În principu dacă am ajuns aici totul ar trebui să fie în regulă. :) Pentru a vă demonstra ceea ce tocmai am realizat puteţi vedea un exemplu sau puteţi downloada scriptul Javascript si scriptul php.

    Pentru orice nelămurire, sugestie sau "reclamaţie" foloseşte formularul de mai jos!

  • 1 Comment

    • jQuery tooltip

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Monday
    Sep 1,2008

    În acest post o să vă arăt flexibilitatea lui jQuery care vine în ajutorul developerului pentru a simplifica anumite etape ale procesului de dezvoltare.

    Despre jQuery în câteva cuvinte

    • jQuery este o librarie de Javascript redusă ca mărime ( 15kb )
    • una din primele librării de Javascript crossbrowser (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
    • compatibilă cu toate versiunile de CSS

    Ce fel de tooltip ne dorim?

    Mi-am propus să realizez un tooltip simplu şi eficient pentru lamuriri adiţionale în completarea unui formular. În principiu am 2 soluţii de a realiza apariţia tooltip-ului:

    1. tooltip-ul apare la click (în situaţia în care userul simte nevoia unor explicaţii suplimentare dă un click pe icon-ul de help)
    2. tooltip-ul apare la mouseover

    Dintre cele 2 opţiuni eu am ales-o pe cea de-a doua pentru ca îmi place să nu pun userul să facă acţiuni în plus pentru a vedea nişte informaţii pe care le doreşte (doar de-asta trăim în vremurile în care cuvântul de ordine în webdevelopment este uzabilitate). Ne dorim ca user-ului să-i fie cât mai uşor să utilizeze toate funcţiile site-ului.

    Realizarea tooltipului cu ajutorul jQuery

    În primul rând trebuie să ne punem scriptul să ruleze după încărcarea completă a paginii.

            $(document).ready(function ()
	{ });

    Pentru realizarea apariţiei tooltip-ului la mouseover vom folosi proprietatea obiectului object.mouseover(); iar selecţia o vom face după un pattern simplu: "selectează-mi toate imaginile care au clasa 'tooltip' ". În consecinţă codul nostru va arăta în felul următor.

     $("img.tooltip").mouseover(
/* $("img.tooltip") este selectorul nostru care face
selectia imaginilor care au clasa 'tooltip' */
function (event)
{
});

    În pasul următor vom lua de pe imaginea noastră atributul alt a cărui valoare o vom afişa cu ajutorul tooltip-ului. Pentru asta va trebui să facem un <div> în care să afişăm informaţia explicativă. Vom avea nevoie şi de cunoştinţe de CSS pentru a putea stiliza obiectul şi pentru a-l putea duce în poziţia dorită de afişare. În cazul meu, CSS-ul este aşa:

    #tooltip {
	position: absolute;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	max-width: 150px;
	border: 1px solid #91C2DC;
	z-index: 10000;
	color: #333333;
	background:
 url('information.png') center left no-repeat #FFFFFF;
	margin: 10px 5px 5px 10px;
	padding: 20px 3px 3px 3px;
}

    Să vedem cum arată Javascriptul pentru cele descrise mai sus:

    $("img.tooltip").mouseover(
function (event)
{
   var text = this.alt;
/* tinem continutul proprietatii
alt in variabila 'text' */
   x = event.pageX+10;
/* sa mutam tooltipul putin mai la dreapta
 ca sa nu fie acoperit de cursor */
   y = event.pageY+10;
/* si putin mai jos... */
   $("body").append("
<div id='tooltip'>"+text+"</div>
 
");
/* mai intai facem un div [asta reprezentand
alternativa jQuery la DOM] */
   $("#tooltip").css("left", x).css("top", y);
/* si ne mai ramane doar sa-l mutam langa cursor */
}
);

    OK, am făcut tooltip-ul, dar va trebui să-l distrugem la acţiunea object.mouseout(); şi cu asta suntem aproape gata.

    $("img.tooltip").mouseout(
function (event)
{
  $("#tooltip").remove();
/* cand se intampla mouseout distrugem div-ul */
}
);

    În funcţie de preferinţe mai rămâne doar să aranjăm totul într-o funcţie şi s-o folosim. Pentru asta eu am făcut un exemplu si de aici puteţi downloada scriptul complet.

    Ceea ce tocmai am realizat e o variantă simplă şi nu se vrea în nici un caz o concurenţă la scripturile de tooltip existente, ci o aplicaţie a unor simple cunoştinţe de jQuery.

    Orice părere, sugestie sau "reclamaţie" e bine-venită (folosiţi formularul din josul paginii)!

  • 10 Comments

    • Categories

    Archives

    Links

    TwittME ( learn more: en / ro )

    • Pure genius! :)) of course I followed the path to Applications as marked :D http://twitpic.com/17sbiq 11hours ago from Tweetie
    • S-a f..ut butonu'...pepsi numai la 1.5L = fail :( 11hours ago from Tweetie
    • @clickio what they do every night...try to improve search engine optimization :)) 19hours ago from Echofon in reply to clickio
    • @MihaiDragan acolo scrie "Numeşte agenţia de publicitate online PENTRU CARE NU AI LUCRA" - NEGATIE :P si sunteti pe locul 1...nasol 21hours ago from Echofon in reply to MihaiDragan
    • I just bought the Mac Heist bundle. 7 awesome Mac apps worth $260+ for just $20 and got 3 sweet bonus apps free! http://bit.ly/heist-it 23hours ago from web
    • See more...

    Meta


    Recent Comments

    Copyright © 2008 - bogdan_constantinescu - is proudly powered by WordPress
    Smashing Theme is created by: Design Disease brought to you by Smashingmagazine.com