mai 15, 2010 19:31:06
La ce ma refer cand zic "Remove Blogger Bar"? Ma refer la acea bara care se afla in antetul blogului, cea care iti permite sa te loghezi si nu numai.
Daca v-ati gandit ca nu arata prea estetic si v-ati gandit sa o eliminati, aceasta se poate face foarte simplu.
Logati-va in administrare, dati click pe "Aspect" si apoi pe "Editati HTML".
Dupa aceasta cautati in codul html ceva asemanator cu :
<b:skin><![CDATA[/*
-----------------------------------------------------
Blogger Template Style Sheet
Name: Scribe
Date: 27 Feb 2004
Updated by: Blogger Team
------------------------------------------------------ */
Acest cod ar trebui sa se gaseasca imediat sub tabul html "head". Dupa ce ati gasit aceasta portiune de cod, adaugati urmatorul cod sub el:
#navbar-iframe {
display: none;
}
Dupa ce ati facut aceasta, salvati sablonul si apasati pe "Vizulalizeaza blog" pentru a vedea rezultatul.
Publicat in: Junk
mai 07, 2010 18:17:43
Avand in vedere ca browserele evolueaza, ceea ce inseamna ca bugurile dispar, m-am gandit sa mai postez si despre alte subiecte.
Recent mi s-a cerut ajutor pentru un fel de meniu asemanator cu cel pe care il vedeti mai jos, care sa functioneze identic ca si acesta. Initial am crezut ca este foarte simplu la facut, si ca se poate face din cateva miscari insa s-a dovedit sa nu fie chiar asa. Atunci mi-a trecut prin minte ideea sa il postez si aici, cu tot cu codul sursa, in cazul in care mai are cineva nevoie de ceva asemanator, sa gaseasca solutia aici.
Ce face de fapt meniul? E simplu. Avem doua optiuni la meniu, in cazul de fata selectarea limbii dorite. Cand trecem cu mouseul peste el, ar trebui sa ne arate lucrul acesta (insa fara ca sa selecteze limba), iar doar prin click sa se poata selecta limba. Aceasta este realizata vizibil printr-o culoare de fundal si un chenar.
Puteti urmari mai jos exemplul, iar si mai jos codul sursa al aplicatiei.
<html>
<head>
<style type="text/css">
.curent {
background-color: gray;
border: 1px solid black;
color: white;
}
.nocurent {
background-color: red;
border: 0px;
color: white;
}
.over {
background-color: gray;
border: 1px solid black;
color: white;
}
.out {
background-color: red;
border: 0px;
color: white;
}
.top li {display:block;
float:left;
}
</style>
<script type="text/javascript">
function toggle(a,b,c,d){
if (b=='en')
if (a=='in'){
document.getElementById("changer1").className=c+' over';
document.getElementById("changer2").className=d+' out';
}
else if (a=='out'){
var pastclass1 = document.getElementById("changer1").className.split(" ");
document.getElementById("changer1").className = pastclass1[0];
var pastclass2 = document.getElementById("changer2").className.split(" ");
document.getElementById("changer2").className = pastclass2[0];
}
if (b=='fr')
if (a=='in'){
document.getElementById("changer2").className=c+' over';
document.getElementById("changer1").className=d+' out';
}
else if (a=='out'){
var pastclass1 = document.getElementById("changer1").className.split(" ");
document.getElementById("changer1").className = pastclass1[0];
var pastclass2 = document.getElementById("changer2").className.split(" ");
document.getElementById("changer2").className = pastclass2[0];
}
}
function change(id1,id2){
document.getElementById(id1).className='curent over';
document.getElementById(id2).className='nocurent out';
}
</script>
</head>
<body >
<ul class="top">
<li id="changer1" class="curent" onclick="change('changer1','changer2')" onmouseover="toggle('in','en',this.className,document.getElementById('changer2').className)" onmouseout="toggle('out','en',this.className,document.getElementById('changer2').className)"><a href="#">engleza</a></li>
<li id="changer2" class="nocurent" onclick="change('changer2','changer1')" onmouseover="toggle('in','fr',this.className,document.getElementById('changer1').className)" onmouseout="toggle('out','fr',this.className,document.getElementById('changer1').className)"><a href="#">romana</a></li>
</ul>
</body>
</html>
Publicat in: Junk
martie 26, 2010 14:57:24
Daca te-ai gandit vreodata sa iti contorizezi numarul de vizitatori pe site sau sa vezi numarul de afisari a unui articol, sau sa iti pui un sondaj in care fiecare vizitator ar avea dreptul la vot, trebuie sa o faci intr-un mod inteligent. De ce? Daca doresti ca rezultatele sa fie reale, mai exact sa nu fie fraudate trebuie sa aplici o alta metoda decat cea prin care un click = un vot.
Nu o sa va explic cum se face acest lucru acum, insa o sa va explic o metoda prin care unii ar putea sa fraudeze de exemplu un sistem de contorizare a afisarilor unui articol, mai precis cate persoane au accesat un articol de pe siteul dumneavoastra, astfel incat dumneavoastra sa puteti lua masurile necesare pentru a preveni un astfel de lucru.
Sa luam un exemplu concret. Ne gandim ca url-ul siteului dumneavoastra este www.exemplu.ex, site pe care aveti mai multe articole. Ne gandim ca fiecare articol are un link al sau gen, primul articol postat se va accesa la adresa www.exemplu.ex?articol=1, al doilea articol www.exemplu.ex?articol=2, etc.
Daca cineva acceseaza adresa www.exemplu.ex?articol=2 , articolul 2 va avea o vizita. Daca va mai accesa o data acest link va avea 2 vizite. Pericolul apare atunci cand se folosesc scripturi pentru a accesa un link de mai multe ori automat.
Daca cineva doreste sa iti multiplice numarul de afisari a articolului 2 va folosi un script in felul urmator:
<html>
<head>
<script type="text/javascript">
function openWin()
{
for (i=0;i<10;i++){
myWindow=window.open("http://www.exemplu.ex?articol=2","_blank","width=100, height=100");
myWindow.close();
}
}
</script>
</head>
<body onload="openWin();">
</body>
</html>
Deci scriptul de mai sus apeleaza pagina noastra http://www.exemplu.ex?articol=2 de 10 ori si o inchide de tot atatea ori in doar cateva secunde. Probabil ca o solutie ar fi stocarea IP ului astfel incat sa nu se poata vota decat cu un singur IP, sau si mai usor prin folosirea sesiunilor.
Publicat in: Junk
martie 17, 2010 22:25:44
Trebuie sa recunosc ca m-am muncit ceva pe acest script, dar rezultatul este multumitor. Probabil ca in alte programe problema aceasta se rezolva mai elegant, exista totusi si in PHP solutie pentru asa ceva.
Va voi prezenta etapele creari unui script de detectare numarului de useri online pe un anumit site, metoda realizata in timp real, fara refresh la pagina si in acelas timp cu monitorizare a ip-ului. (de pe un ip sa se poata loga un singur user).
Cum putem face acest lucru? Bineinteles..cu Ajax. Eu am folosit prototype pentru acest lucru. Aplicatia consta in 3 fisiere si o baza de date. Fisierele le vom numi index.php , test.php si prototype.js. (se poate face download de la adresa de mai sus)
Inainte sa trecem la explicarea codului sursa, trebuie sa creati un tabel pe care il puteti denumi: users_online. Ca sa nu va mai complicati cu el faceti urmatoarea interogare in baza de date si veti avea tabelul creat.
CREATE TABLE IF NOT EXISTS `users_online` (
`ip` varchar(100) character set utf8 collate utf8_bin NOT NULL,
`ultima_accesare` bigint(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Inainte de a trece la primul script, trebuie sa intelegeti importanta acestui table. Tabelul are doua campuri, ip care este ip-ul utilizatorului intrat pe site si ultima_accesare, in care se tine minte ultima activitate a acestui user pe site. Aceasta activitate se masoare in secunde. (cate secunde au trecut din anul 1970 pana la ultima actiune a acestui utilizator pe site, actiune obtinuta automat atata timp cat utilizatorul este pe site)
Mai jos avem scriptul index.php:
<html>
<head>
<script type="text/javascript">
function addUser(){
new Ajax.Request('test.php',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
$('users').innerHTML=response;
},
onFailure: function(){ alert('Something went wrong...') }
});
setTimeout('addUser()', 2000);
}
</script>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body onload="addUser()">
<div id="users"></div>
</body>
</html>
Fisierul index.php dupa cum se vede contine un div cu id=users. In acest div va fi afisat numarul de useri care sunt online. Dupa cum se vede in momentul in care se incarca pagina se apeleaza prin onload functia javascript addUser().
Functia addUser este de fapt un apel Ajax catre fisierul test.php (pe care il vom discuta imediat), functie care se reapeleaza la fiecare 2 secunde. Deci prin aceasta functie citim cati useri sunt online, numarul userilor primindu-l in variabila response. Aceasta variabila urmeaza sa o punem in divul cu id=users prin: $('users').innerHTML=response, care inseamna acelas lucru cu document.getElementById('users').innerHTML=response. (aceasta se poate face doar daca folosim prototype.js)
Acum sa trecem la ultima parte fisierul test.php care este urmatorul:
<?php
//aici se face conexiunea la baza de date
//verifica daca userul a intrat prima data sau era deaja pe site
$query="SELECT * FROM users_online WHERE ip='".$_SERVER['REMOTE_ADDR']."'";
$result = mysql_query($query);
$num = mysql_num_rows($result);
if ($num==0){
//daca userul e nou il introducem in tabel
$curr_datetime = time();
$time=time()-3;
$query = "INSERT INTO users_online (ip, ultima_accesare) VALUES ('".$_SERVER['REMOTE_ADDR']."','".$curr_datetime."') ";
mysql_query($query);
//scoate numarul de vizitatori
$query_num="SELECT COUNT(*) AS compteur
FROM users_online
WHERE ultima_accesare>'".$time."'";
$result_num=mysql_query($query_num);
$obj=mysql_fetch_object($result_num);
print $obj->compteur;
}
else {
//daca userul e existent facem update la ultima accesare
$curr_datetime = time();
$time=time()-3;
$query="UPDATE users_online SET ultima_accesare='".$curr_datetime."' WHERE ip='".$_SERVER['REMOTE_ADDR']."'";
mysql_query($query);
//scoate numarul de vizitatori
$query_num="SELECT COUNT(*) AS compteur
FROM users_online
WHERE ultima_accesare>'".$time."'";
$result_num=mysql_query($query_num);
$obj=mysql_fetch_object($result_num);
print $obj->compteur;
}
?>
Probabil ca v-ati confruntat cu problema: cum sa iti dai seama atunci cand un user paraseste pagina noastra, nu? Care e solutia? Solutia este simpla. Orice user care se afla pe pagina noastra este monitorizat permanent. Cu ajutorul ajaxului, la fiecare 2 secunde facem un update in baza de date cu ora la care acest utilizator a fost gasit pe pagina noastra.
In momentul in care utilizatorul paraseste pagina, acel script nu se va mai executa, iar in baza de date ne va ramane ip-ul sau stocat alaturi de ora la care a fost gasit ultima data pe server.
In acelas timp cand executam acel script, scoatem din tabel toate inregistrarile (toti utilizatorii) care au activitate pe site. Ce inseamna aceasta activitate? Nimic. Doar faptul ca ei se afla pe site inseamna ca au activitate pe site, deoarece scriptul acela se executa la nesfarsit din 2 in 2 secunde atata vreme cat ei raman pe pagina noastra. Cum scoatem din baza de date numai pe cei care mai sunt online? Este simplu! La fiecare 2 secunde in baza de date se face update la ora, deci noi scoatem utilizatorii a caror timp stocat in baza de date nu este mai vechi de ora curenta minus 3 secunde.
Utilizatorii care au ramas in urma, inseamna ca au iesit de pe site, si deci timpul lor a ramas in urma. Scriptul de mai sus in prima faza se conecteza la baza de date, dupa care verifica daca ip-ul care s-a conectat pe site nu este cumva existent in baza de date. Daca el nu este existent acesta este adaugat, iar daca este existent, acestuia i se va face un update.
In acest fel un anuit utilizator nu va fi contorizat separat in cazul se hotaraste sa acceseze pagina noastra din mai multe browsere.
Daca aveti o intrebare, adaugare sau idee de imbunatatire a scriptului va invit sa imi lasati un comentariu.
Publicat in: Junk
februarie 05, 2010 21:52:29
Cu ceva timp in urma am mai scris ceva despre transparenta PNG-urilor in IE6 insa astazi am mai sesizat destul de bizar si m-am gandit sa scriu putin despre el.
Despre ce este vorba? Despre multiplicarea PNG-urilor! De exemplu avem un PNG de dimensiune 20px/20px, transparent si vrem sa il multiplicam si pe directia x si pe directia y, dar in acelas timp sa functioneze si in Internet Explorer 6.
In mod normal am face asa:
<html>
<head>
<style type="text/css">
.transp {
width: 300px;
background: transparent url("22.png") repeat;
height: 60px;
}
</style>
</head>
<body>
<div style="width:607px;height:150px;background: url('23.jpg') repeat-y;">
<div class="transp">Acesta este un PNG</div>
</div>
</body>
</html>
Iar rezultatul va fi urmatorul:
Daca il vom verifica in Internet Explorer 6, cu siguranta nu o sa fim multumiti de rezultat, dar bineinteles stim ca trebuie sa folosim un filtru pentru a rezolva problema. Astfel vom avea codul urmator care este destul de important:
<!--[if lte IE 6]>
<style type="text/css">
.transp {
width: 300px;
background: none transparent scroll repeat 0% 0%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='22.png');
height: 60px;
}
</style>
<![endif]-->
Deci vom avea background: none transparent scroll repeat 0% 0%; Astfel background-ul care este folosit in mod normal pe browserele obisnuite va lua valoarea none, va fi transparent si se va repeta, fiindu-i aplicat un filtru care trebuie sa ne asiguram ca are ca valoare la sizingMethod, scale. (atentie! nu crop).
Rezultatul se poate vedea mai jos si verifica cu orice browser:
PNG-ul folosit se poate gasi aici, iar dupa cum ati vazut am mai folosit si o poza tip JPG care am pus-o in spatele PNG-ului pentru ca acesta sa se poata observa mai bine. Daca aveti nevoie pentru exemplul complet puteti gasi fisierul 23.jpg aici.
Mai jos aveti codul complet pe care il puteti copia si incerca in orice browser:
<html>
<head>
<style type="text/css">
.transp {
width: 300px;
background: transparent url("22.png") repeat;
height: 60px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.transp {
width: 300px;
background: none transparent scroll repeat 0% 0%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='22.png');
height: 60px;
}
</style>
<![endif]-->
</head>
<body>
<div style="width:607px;height:150px;background: url('23.jpg') repeat-y;">
<div class="transp">Acesta este un PNG</div>
</div>
</body>
</html>
Ps: Eu am mai adaugat un padding:10px, font-size:30px;font-family:verdana;color:gray; insa dumneavoastra nu este necesar sa le folositi, iar pozele trebuie adaugate in acelas director cu fisierul html.
Atentie! In cazul de fata am incercat background transparent la un div. Daca dumneavoastra vreti sa il utilizati la tablele, sa nu incercati sa setati background-ul la un TR deoarece nu o sa mearga, ci in schimb puteti sa il setati la un TD si acesta cu siguranta o sa functioneze.
Atentie! Daca setati un background transparent in acest fel la un TD al unui tabel, in cazul in care aveti elemente de genul (<a>,<input><button>) in interiorul coloanei respective, nu veti mai putea da click pe ele. Solutia este sa le setati o pozitie relativa si problema va fi rezolvata. Deci style="position: relative;"
1. PNG in IE6
2. Transparenta PNG-urilor in Internet Explorer 6
februarie 04, 2010 07:49:18
Prea mult timp a trecut de cand m-am hotarat postez o solutie la aceasta problema pe care am intalnit-o destul de des si cu siguranta si dumneavoastra ati avut de a face cu ea.
Despre ce este vorba? Despre felul in care se vede un div cu height: 1px; in Internet Explorer de exemplu. De vazut se vede, insa nu conform asteptarilor. Daca initial am setat inaltimea div-ului 1px, pe ecran ni se va afisa un div cu un height de 19px (heightul minim care se poate atribui).
<div style="background-color:black;height:1px;"></div>
Deci orice inaltime cuprinsa intre 1px si 19px atribuita unui div, in Internet Explorer va avea valoarea de 19px. Daca incercam sa atribuim height: 20px; observam ca inaltimea div-ului va creste cu 1px. Deci din acest punct in sus totul functioneaza corect. Rezultatul de mai sus se poate observa putin mai jos, puteti sa deschideti aceasta pagina in mai multe browsere pentru a vedea diferentele.
Solutia? Exista mai multe bineinteles, acum o sa trec doar doua pe foaie. Problema noastra va fi rezolvata cu ajutorul unei imagini (de exemplu format jpg) de dimensiuni 1px/1px, pe care o vom multiplica pe axa x. Bineinteles, va fi mai mult de lucru, in cazul in care ne decidem sa schimbam culoarea linii insa avem siguranta ca nu o sa avem probleme in nici un browser.
<div style="background:url('21.jpg') repeat-x;"> </div>
Rezultatul se poate vedea mai jos si se poate de asemenea verifica in mai multe browsere. Poza de 1px/1px cu numele de 21.jpg se poate gasi aici.
O alta solutie, poate mai la indemana, dar sincer eu nu o prea folosesc este sa cream un div care nu se vede (nu are nimic in el), neglijam deci inaltimea lui, dar ii setam un border-bottom. Putem sa ii setam ca o margine sa fie de o anumita grosime si o anumita culoare. Astfel putem face urmatorul lucru:
<div style="border-bottom:1px solid black;"> </div>
Iar rezultatul este:
ianuarie 31, 2010 19:08:43
Am fost nevoit sa creez o noua categorie, Junk in care sa pun eventualele articole solicitate de anumite persoane, dar care nu isi au locul tocmai aici.
Ce vom face astazi?
Pe scurt, si la subiect...ceea ce se vede mai jos. Un spatiu in care ne putem afisa codul pentru reclama noastra. Daca v-ati gandit vreodata ca blogul dumneavoastra este atat de apreciat incat credeti ca ar dori si alte persoane sa va faca reclama la el, mai jos este infatisata o solutie eleganta prin care puteti face acest lucru.
Avantajul este ca printr-un singur click in interiorul box-ului de mai sus, continutul acestuia se va selecta complet. Cei care vor sa va faca reclama nu le ramane decat sa apese CTRL+C (copy) , dupa care sa mearga in blogul lor si sa apese CTRL+V (paste) in locul in care doresc ca bannerul dumneavoastra sa fie apmlasat. Rezultatul va fi urmatorul:
Astfel fiecare vizitator care intra pe blogul celor care va fac reclama, daca vor face un click pe reclama dumneavoastra, vor ajunge direct pe blogul dumneavoastra.
Sa incepem!
1. Inainte de toate dumneavoastra aveti nevoie de un banner. Ce este acesta? Este o poza precum cea de mai sus, o reclama mai bine zis a blogului dumneavoastra. Aceasta o puteti face singuri in orice program si ii puteti da orice dimensiune. In cazul de fata eu am ales dimensiunile de 88x31. Adica latura mare (width) a pozei 88px iar latura mica (height) 31px.
2. Uploadati aceasta poza undeva pe internet. Este recomandat un loc sigur, cel mai bine ar fi sa fie in locul unde este si blogul gazduit, dar se poate oriunde altundeva. Obtineti linkul unde ati pus poza pentru ca acesta il veti folosi putin mai tarziu. Linkul in cazul de fata catre poza care am folosit-o eu este: http://1.bp.blogspot.com/_-p7iV6tN4Oo/SIoptAt8aCI/AAAAAAAAABw/ZQ-aWtKs_w4/S220/blogpaul.png
3. Acum dupa ce avem poza pe internet si stim adresa blogului nostru (http://paulalexandru.blogspot.com), nu ne mai ramane decat sa ne construim codul de care au nevoie ceilalti ca sa ne faca reclama pe blogul lor. Codul va fi urmatorul:
<a href="http://paulalexandru.blogspot.com/">
<img border="0" src="http://1.bp.blogspot.com/_-p7iV6tN4Oo/SIoptAt8aCI/AAAAAAAAABw/ZQ-aWtKs_w4/S220/blogpaul.png"/>
</a>
Deci de codul de mai sus aveti si dumneavoastra nevoie cu exceptia ca trebuie sa inlocuiti aceste doua linkuri cu linkurile dumneavoastra. In loc de http://paulalexandru.blogspot.com trebuie sa treceti adresa blogului dumneavoastra iar in locul celui de-al doilea link, trebuie sa puneti linkul catre poza pe care ati uploadat-o pe internet cu putine clipe inainte.
4. Aveti codul trebuie doar sa il afisati in blogul dumneavoastra. Dar ca sa puteti face asta trebuie sa mai adaugati inca 2 linii la el pe care le puteti observa mai jos:
<textarea rows="5" cols="40" onclick="this.focus();this.select();">
<a href="http://paulalexandru.blogspot.com/">
<img border="0" src="http://1.bp.blogspot.com/_-p7iV6tN4Oo/SIoptAt8aCI/AAAAAAAAABw/ZQ-aWtKs_w4/S220/blogpaul.png"/>
</a>
</textarea>
Atributul rows si cols vine tradus in romana (linii si coloane), deci de aici setati cat de mare sa fie box-ul acela in care va fi afisat codul dumneavoastra. Un fel de lungime si latime a boxului. Daca vi se pare prea lat, in loc de 40 de coloane, treceti doar 20 si o sa vedeti care va fi noua sa infatisare.
5. Acest din urma pas consta in inserarea codului de mai sus in blogul dumneavoastra. Daca detineti un blog pe blogger.com tot ce trebuie sa faceti este sa intrati in administrarea blogului >> aspect >> adaugati un nou gadget. Din lista veti selecta pe cel afisat mai jos:
Dupa ce ati adaugat acest gadget HTML/JavaScript, in continutul acestuia copiati tot codul de la punctul 4 si apasati enter. (titlul nu este semnificativ) Verificati blogul si vedeti noul rezultat.
In cazul in care detineti un blog pe wordpress.com, mergeti in administrare si accestati sectiunea widget precum in exemplul de mai jos:
Alegeti widgetul Text (Arbitrary text or HTML), cu drag and drop il veti duce pana in Slidebar1 unde il veti lasa. Apoi il veti putea edita la fel ca si cel de pe blogger deoarece are la fel 2 sectiuni (Titlu si Continut). Titlul de asemenea este nesemnificativ, tot ce trebuie sa faceti este sa introduceti si aici codul de la punctul 4 in sectiunea de Continut.
Cam asta a fost ceea ce am vrut sa va arat. Pentru eventuale nelamuriri sau intrebari, puteti lasa un comment iar eu o sa incerc sa raspund in cel mai scurt timp posibil. O zi buna !
Publicat in: Junk
ianuarie 26, 2010 21:31:32
In acest articol as dori sa va prezint o alternativa la folosirea hover-ului. Daca ati intampinat anumite probleme in unele browsere incercand sa va folositi de hover, o sa va arat o solutie folosind javascript.
Intai si intai sa luam un exemplu folosind hover din css. Vom considera un link care va avea aspectul unui buton iar cand trecem cu mouse-ul peste el vom dori ca acest buton sa se preschimbe in altul.
<html>
<head>
<style type="text/css">
a {
display: block;
width: 50px;
height: 49px;
background: url('17.png');
}
a:hover {
display: block;
width: 50px;
height: 49px;
background: url('18.png');
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
In exemplul de mai sus se folosesc doua poze care se pot salva de aici si de aici, iar rezultatul scriptului se poate observa mai jos:
Iar acum sa vedem cum se poate face exact aceeasi chestie din javascript. In primul rand o sa cream doua clase, prima clasa fiind setata initial la link, iar cand asezam mouse-ul peste link, acestuia i se va atribui clasa a doua.
<html>
<head>
<style type="text/css">
.class1 {
display: block;
width: 50px;
height: 49px;
background: url('17.png');
}
.class2 {
display: block;
width: 50px;
height: 49px;
background: url('18.png');
}
</style>
</head>
<body>
<a href="#" class="class1" onmouseover="this.className='class2'" onmouseout="this.className='class1'"></a>
</body>
</html>
Rezultatul scriptului de mai sus se afla mai jos:
ianuarie 19, 2010 18:56:48
Browserul pe care il folositi:
Exista mai multe cai de detectare a browser-ului din javascript, eu o sa va arat doar una din ele. Daca aveti nevoie rapida de acest script, deplasati-va in jos si copiati codul direct, iar daca doriti sa si intelegeti ce se intampla aici, atunci urmariti pas cu pas acest articol.
Pentru a obtine informatii complete despre browser-ul dumneavoastra, o sa ne folosim de navigator.userAgent . Daca il vom pune intr-o alerta javascript, ce o va fi afisat pe ecran? Haideti sa aflam!
Consideram micul script de mai jos:
<html>
<head>
<script type="text/javascript">
function init(){
alert(navigator.userAgent);
}
</script>
</head>
<body onload="init()">
</body>
</html>
Acum verificam cu mai multe browsere acest script sa vedem ce alerte primim, ca sa stim ce informatii sa culegem.
Mozilla Firefox 3.5.7: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
Opera 10.00: Opera/9.80 (Windows NT 5.1; U; en) Presto/2.2.15 Version/10.00
Chrome 3.0.195.38: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.38 Safari/532.0
Safari 4.0.4: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Internet Explorer 7: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Netscape 9.0.0.6: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6
Urmatorul pas este sa cream cate o functie pentru fiecare browser in parte, functie care poate returna numele si versiunea browserului. Vom incepe asadar cu Opera si vom construi functia findOpera.
function findOpera(){
var browser = 'Opera';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Opera
}
else {
//browser-ul este Opera
version_position = navigatorul.indexOf('Version');
versiune = navigatorul.slice(version_position+8,navigatorul.length);
alert(browser+' '+versiune);
}
}
Functia de mai sus cauta innavigator.userAgent daca exista cuvantul "Opera", iar daca il gaseste face o cautare asemanatoare dupa cuvantul "Version" dupa care salveaza caracterele afisate dupa urmatoarele 8 pozitii. Continuam cu functia de detectare a browserului Safari.
Pentru a realiza aceasta trebuie sa facem o cautare dupa cuvantul Safari, insa deoarece acesta s-ar putea gasi si daca am folosi browser-ul Google Chrome, trebuie sa ne asiguram in primul rand ca browser-ul nu este Chrome, iar apoi sa verificam daca este Safari.
function findSafari(){
var browser = 'Safari';
var navigatorul = navigator.userAgent;
var versiune='';
var exclud = 'Chrome';
if (navigatorul.search(exclud)==-1){
//browser-ul nu este Chrome
if (navigatorul.search(browser)==-1){
//browser-ul nu este Safari
}
else {
//browser-ul este Safari
version_position = navigatorul.indexOf('Version');
for (i=version_position+8;i<=navigatorul.length;i++)
if (navigatorul[i]==' '){
versiune = navigatorul.slice(version_position+8,i);
break;
}
alert(browser+' '+versiune);
}
}
}
Pentru aflarea versiunii browser-ului trebuie sa facem o cautare dupa cuvantul Version, stiind apoi ca versiunea urmeaza dupa acesta. Continuam cu functia pentru browser-ul Internet Explorer.
function findIe(){
var browser = 'MSIE';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Internet Explorer
}
else {
//browser-ul este Internet Explorer
version_position = navigatorul.indexOf('MSIE');
var nav = navigatorul.split("");
for (i=version_position+5;i<=nav.length;i++)
if (nav[i]==';'){
versiune = navigatorul.slice(version_position+5,i);
break;
}
alert('Internet Explorer '+versiune);
}
}
Ceea ce ne face sa intelegem ca browserul folosit este Internet Explorer este aparitia cuvantului MSIE in navigator.userAgent, versiunea folosita fiind afisata imediat dupa acesta. Urmatoarea functie este functia de detectare a browser-ului Google Chrome.
function findChrome(){
var browser = 'Chrome';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Chrome
}
else {
//browser-ul este Chrome
version_position = navigatorul.indexOf('Chrome');
for (i=version_position+7;i<=navigatorul.length;i++)
if (navigatorul[i]==' '){
versiune = navigatorul.slice(version_position+7,i);
break;
}
alert(browser+' '+versiune);
}
}
Urmatorul browser care urmeaza este Mozilla Firefox, care va fi cautat dupa cuvantul cheie Firefox, dar avand in vedere ca acest cuvant apare in navigator.userAgent chiar si in cazul in care folosim Netscape, ne vom folosi initial de conditia ca browserul sa nu fie Netscape dupa care vom verifica daca acesta este Firefox.
function findFirefox(){
var browser = 'Firefox';
var navigatorul = navigator.userAgent;
var versiune='';
var exclude = "Navigator";
if (navigatorul.search(exclude)==-1){
//browser-ul nu este Netscape
if (navigatorul.search(browser)==-1){
//browser-ul nu este Firefox
}
else {
//browser-ul este Firefox
version_position = navigatorul.indexOf(browser);
for (i=version_position+8;i<=navigatorul.length;i++)
versiune = navigatorul.slice(version_position+8,i);
alert(browser+' '+versiune);
}
}
}
Pentru browserul Netscape se foloseste o functie care cauta dupa cuvantul cheie Navigator, versiunea fiind afisata imediat dupa acesta.
function findNetscape(){
var browser = 'Navigator';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Netscape
}
else {
//browser-ul este Netscape
version_position = navigatorul.indexOf('Navigator');
for (i=version_position+10;i<=navigatorul.length;i++)
versiune = navigatorul.slice(version_position+10,i);
alert('Netscape '+versiune);
}
}
Acum la sfarsit, puse toate functile cap la cap va reiesi codul de mai jos:
<html>
<head>
<script type="text/javascript">
function init(){
findOpera();
findSafari();
findIe();
findChrome();
findNetscape();
findFirefox();
}
function findOpera(){
var browser = 'Opera';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Opera
}
else {
//browser-ul este Opera
version_position = navigatorul.indexOf('Version');
versiune = navigatorul.slice(version_position+8,navigatorul.length);
alert(browser+' '+versiune);
}
}
function findSafari(){
var browser = 'Safari';
var navigatorul = navigator.userAgent;
var versiune='';
var exclud = 'Chrome';
if (navigatorul.search(exclud)==-1){
//browser-ul nu este Chrome
if (navigatorul.search(browser)==-1){
//browser-ul nu este Safari
}
else {
//browser-ul este Safari
version_position = navigatorul.indexOf('Version');
for (i=version_position+8;i<=navigatorul.length;i++)
if (navigatorul[i]==' '){
versiune = navigatorul.slice(version_position+8,i);
break;
}
alert(browser+' '+versiune);
}
}
}
function findIe(){
var browser = 'MSIE';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Internet Explorer
}
else {
//browser-ul este Internet Explorer
version_position = navigatorul.indexOf('MSIE');
var nav = navigatorul.split("");
for (i=version_position+5;i<=nav.length;i++)
if (nav[i]==';'){
versiune = navigatorul.slice(version_position+5,i);
break;
}
alert('Internet Explorer '+versiune);
}
}
function findChrome(){
var browser = 'Chrome';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Chrome
}
else {
//browser-ul este Chrome
version_position = navigatorul.indexOf('Chrome');
for (i=version_position+7;i<=navigatorul.length;i++)
if (navigatorul[i]==' '){
versiune = navigatorul.slice(version_position+7,i);
break;
}
alert(browser+' '+versiune);
}
}
function findFirefox(){
var browser = 'Firefox';
var navigatorul = navigator.userAgent;
var versiune='';
var exclude = "Navigator";
if (navigatorul.search(exclude)==-1){
//browser-ul nu este Netscape
if (navigatorul.search(browser)==-1){
//browser-ul nu este Firefox
}
else {
//browser-ul este Firefox
version_position = navigatorul.indexOf(browser);
for (i=version_position+8;i<=navigatorul.length;i++)
versiune = navigatorul.slice(version_position+8,i);
alert(browser+' '+versiune);
}
}
}
function findNetscape(){
var browser = 'Navigator';
var navigatorul = navigator.userAgent;
var versiune='';
if (navigatorul.search(browser)==-1){
//browser-ul nu este Netscape
}
else {
//browser-ul este Netscape
version_position = navigatorul.indexOf('Navigator');
for (i=version_position+10;i<=navigatorul.length;i++)
versiune = navigatorul.slice(version_position+10,i);
alert('Netscape '+versiune);
}
}
</script>
</head>
<body onload="init()">
</body>
</html>
Browserele pe care am testat sunt notate mai sus, pe acestea acest script functioneaza, daca observati browsere pe care acest script nu functioneaza va rog sa lasati un comentariu la acest articol si o sa incerc sa rezolv problema.
ianuarie 15, 2010 21:33:04
Recent am lucrat la un fisier care urma sa fie incarcat intr-un iframe pe un site. Fisierul respectiv trebuia sa se integreze in site bine, astfel trebuia aplicat un background: transparent; Solutia a fost acceptata in majoritatea browserelor insa in Internet Explorer background-ul era complet alb.
Mai jos voi explica solutia care a functionat in cazul meu:
Incepem sa cream cele 2 fisiere necesare, primul numit load12.html care este fisierul ce trebuie inclus intr-un iframe, iar codul sursa al sau se gaseste mai jos:
<html>
<body style="background:transparent;">
<p>Paragraf de test</p>
</body>
</html>
Iar cel de-al doilea fisier se cheama index.php, format dintr-un singur div si iframeul prin care se incarca load12.html. Ambele fisiere trebuie salvate in acelas director. Codul sursa pentru index.html se gaseste mai jos:
<html>
<head>
<style type="text/css">
#spatiu_12 {
background-color:pink;
width:300px;
height:300px;
}
#iframe_12 {
width:150px;
height:150px;
border: none;
}
</style>
</head>
<body>
<div id="spatiu_12">
<iframe src="load12.html" id="iframe_12" allowTransparency="true"></iframe>
</div>
</body>
</html>
In ce consta exemplul? Simplu. Am creat un patrat de culoare roz in interiorul caruia incarc paragraful din fisierul load12.html. Dimensiunea iframe-ului am setat-o de 150px ca sa se observe in Internet Explorer culoarea alb a fundalului. Se observa mai sus ceea ce determina ca problema sa fie rezolvata si in Internet Explorer si mai exact acea linie de cod allowTransparency="true", care permite transparenta backgroundului.
