Besplatne linije koda

[Dekip]

Pozdrav svima!
Uz dogovor sa moderatorima otvaram temu u kojoj ćemo postavljati (ali i uzimati ) gotove, besplatne linije koda. Ovo su neka pravila kojih bi trebalo da se pridržavamo u budućnosti. Slobodni ste da predložite nova pravila ili da sugerišete da se neka od postojećih promene.

• postavljamo skripte kojih na netu inače nema ili se za njih plaća
• skripte treba da budu funkcionalne, da rade
• ne postavljati skripte preuzete od nekud osim ako su poprilično prepravljene
• skripte bi u principu trebalo da budu autorske, manje-više
• poželjno je propisno izkomentarisati radi pojašnjenja
• poželjno je na početku objasniti šta ona radi
• ne kačiti nešto na šta očekujete pomoć ili rešenje
• tema nije zamišljena kao servis za pomoć
• slobodni ste da postavljate modifikacije postojećih skripti koje iste nadopunjuju

Dosta sam naučio od ljudi sa mreže. Zapravo, nikada nisam pročitao nijednu knjigu o web programiranju niti sam to učio u školi. Sve što znam sam naučio čitajući blogove, slušajući druge, slušajući VAS, dakle, zajednicu. Red je da se nešto i vrati.

[Dekip]

Da počnem prvi...
Ovo je php skripta koja datum pretvara u Time To Ago varijantu. Na netu ima bezbroj rešenja ali za engleski jezik. A englezi nemaju padeže i sl. i uopšteno mnogo im je prostije da napišu reč za određeni pojam (1 week, 2 weeks). Kod nas se javlja problem (1 nedelja, 2 nedelje, 21 nedelja itd.).

U pitanju je nešto što je u osnovi preuzeto sa neta ali je i veoma, veoma prepravljeno da bi moglo da se koristi u našem slučaju.

PHP kod:

   function dateToAgo($dateString){
                 $createdday= strtotime($dateString);
                 $today = time(); 
                 $datediff = abs($today - $createdday);  
                 $difftext="";  
                 $years = floor($datediff / (365*60*60*24));  
                 $months = floor(($datediff - $years * 365*60*60*24) / (30*60*60*24));  
                 $days = floor(($datediff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));  
                 $hours= floor($datediff/3600);  
                 $minutes= floor($datediff/60);  
                 $seconds= floor($datediff);  
                 //provera godina 
                 if($difftext=="")  
                 {  
                 $checkyears=substr($years, -1);
                 $checkyears2=substr($years, -2);
                 if($years>=1)   {
                 if(($checkyears2==11) || ($checkyears2==12) || ($checkyears2==13) || ($checkyears2==14)){    
                 $difftext=$years." godina";
                 }
                 else{
                    if(($checkyears==1) || ($checkyears==2) || ($checkyears==3) || ($checkyears==4))  
                    $difftext=$years." godine";  
                    elseif(($checkyears==5) || ($checkyears==6) || ($checkyears==7) || ($checkyears==8) || ($checkyears==9) || ($checkyears==0))  
                    $difftext=$years." godina";  
                 }  
                 }
                 }
                 //provera meseci  
                 if($difftext=="")  
                 {  
                 $checkmonths=substr($months, -1);
                 $checkmonths2=substr($months, -2);
                 if($months>=1)  {
                 if(($checkmonths2==11) || ($checkmonths2==12)){    
                 $difftext=$months." meseci";
                 }
                 else{
                    if(($checkmonths==1) || ($checkmonths==2) || ($checkmonths==3) || ($checkmonths==4))  
                    $difftext=$months." meseca"; 
                    elseif(($checkmonths==5) || ($checkmonths==6) || ($checkmonths==7) || ($checkmonths==8) || ($checkmonths==9) || ($checkmonths==0))  
                    $difftext=$months." meseci";    
                 }
                 }
                 }
                 //provera dana 
                 if($difftext=="")  
                 {  
                 $checkdays=substr($days, -1);
                 $checkdays2=substr($days, -2);
                 if($days>=1){
                 if(($checkdays2==11) || ($checkdays2==12) || ($checkdays2==13) || ($checkdays2==14)){    
                 $difftext=$days." dana";
                 }
                 else{
                    if(($checkdays==5) || ($checkdays==6) || ($checkdays==7) || ($checkdays==8) || ($checkdays==9) || ($checkdays==0))  
                    $difftext=$days." dana"; 
                    elseif(($checkdays==2) || ($checkdays==3) || ($checkdays==4))  
                    $difftext=$days." dana";  
                    elseif($checkdays==1)  
                    $difftext=$days." dan";

                 } 
                 }
                 } 
                 //provera sati 
                 if($difftext=="")  
                 {  
                 $checkhours=substr($hours, -1);
                 $checkhours2=substr($hours, -2);
                 if($hours>=1)  {
                 if(($checkhours2==11) || ($checkhours2==12) || ($checkhours2==13) || ($checkhours2==14)){    
                 $difftext=$hours." sati";
                 }
                 else{
                    if(($checkhours==5) || ($checkhours==6) || ($checkhours==7) || ($checkhours==8) || ($checkhours==9) || ($checkhours==0))  
                    $difftext=$hours." sati"; 
                    elseif(($checkhours==2) || ($checkhours==3) || ($checkhours==4))  
                    $difftext=$hours." sata";  
                    elseif($checkhours==1)  
                    $difftext=$hours." sat";
                 }
                 }
                 }  
                 //provera minuta  
                 if($difftext=="")  
                 {  
                 $checkminutes=substr($minutes, -1);
                 $checkminutes2=substr($minutes, -2);
                 if($minutes>=1)  {
                 if(($checkminutes2==11) || ($checkminutes2==12) || ($checkminutes2==13) || ($checkminutes2==14)){    
                 $difftext=$minutes." minuta";
                 }
                 else{ 
                    if(($checkminutes==5) || ($checkminutes==6) || ($checkminutes==7) || ($checkminutes==8) || ($checkminutes==9) || ($checkminutes==0)) 
                    $difftext=$minutes." minuta";
                    elseif(($checkminutes==1) || ($checkminutes==2) || ($checkminutes==3) || ($checkminutes==4))  
                    $difftext=$minutes." minute";  
                 }
                 }
                 }  
                 //provera sekundi  
                 if($difftext=="")  
                 {  
                 $checkseconds=substr($seconds, -1);
                 $checkseconds2=substr($seconds, -2);
                 if($seconds>=1)  {
                 if(($checkseconds2==11) || ($checkseconds2==12) || ($checkseconds2==13) || ($checkseconds2==14)){    
                 $difftext=$seconds." sekundi";  
                 }
                 else{
                    if(($checkseconds==5) || ($checkseconds==6) || ($checkseconds==7) || ($checkseconds==8) || ($checkseconds==9) || ($checkseconds==0)) 
                    $difftext=$seconds." sekundi";
                    elseif(($checkseconds==1) || ($checkseconds==2) || ($checkseconds==3) || ($checkseconds==4))  
                    $difftext=$seconds." sekunde";  
                 }  
                 }
                 }
                 return $difftext;
   }
 $testTime='2014-01-21 21:00:48';
 $test=dateToAgo($testTime);
 echo 'pre '. $test; 


Kod je napisan u obliku funkcije tako da je ga veoma lako dodati u svaki projekat.

[Marvi]

Svaka cast!

Samo im molim te objasni logiku imena dateToAgo (date to ago).

[Game fever]

Evo jedne jquery/javascript funkicje za pop up prozor (nije klasican browser pop up)

jquery

function popup(div) {
		
        box = div;
	$(box).fadeIn(300);
		
	var popMargTop = ($(box).height() + 24) / 2; 
	var popMargLeft = ($(box).width() + 24) / 2; 
		
	$(box).css({ 
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});

	$('body').append('<div id="mask"></div>');
	$('#mask').fadeIn(300);
		
	return false;
}
	
	
$(document).on('click', 'a.close, #mask', function(){
      $(box).fadeOut(300 , function() {
      $('#mask').remove();  
}); 
return false;
});

html

<a href="#" onclick="popup('#login-box2')">Login / Sign In</a>

<div id="login-box2" class="popup">
        <p> another popup window</p>
</div>

[Dekip]

Evo jedan RSS Ticker.
Kod kupi naslov (title) sa RSS-a i prikazuje ga u svojevrsnom slajdšouu.
Prvo PHP.

PHP kod:

$catchRss = "";
$url = "http://www.itstreet.org/rssfeed.php";
$xml = simplexml_load_file($url);
for($i = 0; $i < 5; $i++){
$title = $xml->channel->item[$i]->title;
$link = $xml->channel->item[$i]->link;
$catchRss .= '"<a href='.$link.'>'.$title.'</a>",';
}
$lastCut = rtrim($catchRss,','); 


U $url promenljivu stavimo link do feed-a koji želimo da nam se prikazuje. Preko simplexml_load_file funkcije pristupamo rss feed-u i uzimamo šta nam treba. U ovom slučaju smo uzeli naslov i link. To može biti i description, pubDate... Broj naslova koje želimo da prikažemo određujemo preko $i promenljive koju u for petlji dižemo za jedan. Sve to spakujemo u html atribute i dodamo iza svakog pogotka zarez a poslednji preko rtrim funkcije brišemo.

Dalje ide html stranica sa nekoliko redova javascripte.

<script> 
var i = 0; 
var rssNiz = [<?php echo $lastCut; ?>]; 
var rssX; 
function skokNapred(){ 
  i++; 
  rssX.style.opacity = 0; 
  if(i > (rssNiz.length - 1)){ 
     i = 0; 
     } 
  setTimeout('skokNazad()',1000); 
} 
function skokNazad(){ 
   rssX.innerHTML = rssNiz[i]; 
   rssX.style.opacity = 1; 
   setTimeout('skokNapred()',3000); 
} 
</script>
<div class="rssWidget">
<div class="levo isto">RSS Widget</div>
<div class="desno isto"><span id="rssFeed"></span></div>
<div style="clear:left;"></div>
</div>
<script>rssX = document.getElementById("rssFeed"); skokNazad(); </script>

U JS pravimo par promenljivih i if usolv. U principu, sve što javascript radi je ide od skokNapred funkcije do skokNazad funkcije. Pri tom ispisuje po jednu vrednost iz niza i zadržava je u određenom vremenu koje se može podesiti po želji. Zatim ide do druge funkcije koja samo smanjuje opacity, tj. sklanja je da bi u sledećem krugu ispisao novu vrednost. I tako u krug za svih pet pogodaka koje je spremio php.

A sada malo css da to na nešto liči.

<style type="text/css">
.rssWidget {
    margin: 10px 0 0 10px;
}
.levo {
    box-shadow: 0 1px 0 #03F outset;
    width:150px;
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #D1D1D1;
    border-radius: 5px 0 0 5px;    
}
.desno {
    box-shadow: 0 1px 0 #FFFFFF inset;
    width:350px;
    background: -webkit-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
    background: linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#ECEBEC',GradientType=0 );
    border-bottom: 1px solid #D1D1D1;
    border-radius: 0 5px 5px 0;

}
.isto {

    padding: 13px 15px 11px;
    float:left;        
}
a {
    text-decoration:none;
    color:#000;
    font-size: 18px;
    line-height: 15px;
    text-shadow: 0 2px 0 #FFFFFF;
}
#rssFeed {
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
}
</style>

To bi bilo to. Sve ovo spakovano u jednu stranicu radi kao sat. Baš me interesuje vaše mišljenje.

[Stefan 5]

Mala zafrkancija mozda ce spreciti nekog laika da gleda Vas kod, here you go(cak ni stop execting scripts ne moze da je zaustavi):

<script type="text/javascript">
var disabled_message = "Ova mogucnost Vam je onemogucena.";
document.oncontextmenu = function() 
{ 
   return false; 
}
document.onmousedown = function md(e) 
{ 
  try 
  { 
     if (event.button==2||event.button==3) 
     {
        if (disabled_message != '')
           alert(disabled_message);
        return false; 
     }
  }  
  catch (e) 
  { 
     if (e.which == 3) return false; 
  } 
}
</script>

[Dekip]

Mala varijacija na temu od malopre.
U ovoj temi forumaš trebalevo je petljao oko slajdšoua sa slikama. Evo rešenja!

Daklem, imamo folder sa raznim fotkama i hoćemo da ih spakujemo da se smenjuju u određenom vremenskom intervalu. Krećemo od php-a.

PHP kod:

$allPics='';
$dir = 'img/';   //staza do foldera sa fotkama
foreach(glob($dir ."*.jpg*") as $file) { 
   $allPics .= '"<img src=\''.$file.'\' />",';  // sve fotke spakovane u html tagove
}
$lastCut = rtrim($allPics,',');   // opet sklanjamo zarez na kraju 


U ovoj temi smo malo razglabali ovaj kod. Iz zadatog foldera se u foreach petlji pokupe sve slike sa jpg ekstenzijom, spakuju u html tagove i spreme za javascript. Vodite računa da će se na ovaj način pokupiti SVE jpg slike, tako da bi bilo najbolje da se potrebne slike spreme u odvojeni folder.

A sada ostatak:

<style type="text/css">
.rssWidget {
    margin: 10px 0 0 10px;
}
#rssFeed {
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
}
</style>
<script> 
var i = 0; 
var rssNiz = [<?php echo $lastCut; ?>]; 
var rssX; 
function skokNapred(){ 
  i++; 
  rssX.style.opacity = 0; 
  if(i > (rssNiz.length - 1)){ 
     i = 0; 
     } 
  setTimeout('skokNazad()',1000); 
} 
function skokNazad(){ 
   rssX.innerHTML = rssNiz[i]; 
   rssX.style.opacity = 1; 
   setTimeout('skokNapred()',3000); 
} 
</script>

<div class="rssWidget">
<span id="rssFeed"></span>
</div>
<script>rssX = document.getElementById("rssFeed"); skokNazad(); </script>

Ostatak CSS-a smišljate sami.

[urke]

@Stefan_5: ako nešto mrzim na netu je pokušaj da se onemogući desni klik. Za gledanje koda koristim Ctrl+Shift+I tako da ovo ne radi.

Evo sad jednog bookmarkleta koji pravi slideshow (navigacija strelicama i scrollom miša) na sajtovima dofiga.net, fishki.net, ibkas.info, urod.ru, thechive.com http://pastebin.com/WgeUwDxm #nsfw

[mr.marvin]

Evo nešto što sam našao u dubinama Stackoverflowa. Tip podataka array u JS nema metod koji traži i uklanja unijenu nisku (string). Ovom funkcijom se to postiže.

function removeStrInArray(a, item) {
    var itemFound = a.indexOf(item);
    while (itemFound !== -1) {
        a.splice(itemFound, 1);
        itemFound = a.indexOf(item);
    }
}

[Partybreaker]

HTML5 ima zgodnu stvar koja se zove required atribut. Međutim, taj atribut po defaultu ispisuje "Please fill out this field" i slične poruke na engleskom jeziku, što ume da izgleda ružno kada razvijate sajt za domaće tržište. Malo sam se igrao i našao način da preko JavaScripta ovo prevedem. Postoji verovatno još načina, ali ovaj kod mene šljaka kako treba. Dakle, imate npr. neko input polje Ime:

<input type="text" name="ime" oninput="validirajObaveznoPolje(this)" oninvalid="validirajObaveznoPolje(this)" required="required" placeholder="Ime">

... i recimo email polje:

<input type="email" name="email" oninput="validarajMejl(this)"  oninvalid="validarajMejl(this)" required="required"  placeholder="Email">

Ovaj JavaScript kod stavite negde u <head></head>:

<script type="text/javascript">

            function validirajObaveznoPolje(input) {
             if(input.value == "") {
                input.setCustomValidity("Ovo polje je obavezno!");
            }
            else {
                input.setCustomValidity("");              
            }
        }

        function validarajMejl(input) {
            if(input.value == "") {
                input.setCustomValidity("Ovo polje je obavezno!");
            }
            else if (input.validity.typeMismatch){
               input.setCustomValidity("Morate uneti ispravnu email adresu!");  
           }
            else {
               input.setCustomValidity("");            
        }                
    }
</script>

... i dobili ste validaciju na srpskom jeziku.

[Dekip]

Bas sam ovako i zamisljao temu kada sam je otvarao. Odlicno.

[Dekip]

Šteta što je jedna lepa ideja zamrla. Mada, koliko vidim slabo se i postuje u ovom delu foruma.

Jedan mali dodatak, rekao bih zanimljiv.

<script>
window.onblur = function () { document.title = 'Hej, vratite se :)'; }
window.onfocus = function () { document.title = 'Vaš naziv stranice'; }
</script>

U suštini samo menja naziv stranice kada posetilac ode na neki drugi tab. Zgodno.

[doctor]

Možda bi bilo bolje prebaciti ovu temu u "Programiranje" da bi dobila malo više pažnje.