Front-end kod

Teme vezane za profesionalni razvoj web stranica.
4 post(ov)a • Stranica: 1/1.

Front-end kod

PostPostao/la gagiD » 26 svi 2014, 01:22

Pozdrav.

Evo u ovoj temi mozemo postavljat kod za front-end uredenje stranice.

  • Pokretni panel za socijalne ikonice
  • Centriranje elemenata u HTML-u (vertikalno i horizontalno) I
  • Centriranje elemenata u HTML-u (vertikalno i horizontalno) II



btw. Sta mislite za naslov teme, ja nesto nemam inspiracije :-s

Re: Front-end kod

PostPostao/la gagiD » 26 svi 2014, 01:33

Pokretni panel za socijalne ikonice

Kako to izgleda mozete vidjeti na slikama ispod.

slika slika

Kliktanjem na trigger/okidac ( "<" ili ">" ) panel se pojavljuje/nestaje.

Pa da pocnemo :)


Prvo napravite direktorij/folder u Images folderu vase teme i nazovite ga Social ili kako vec vi zelite. U njega stavite ikonice drustvenih mreza koje zelite u panelu.


Sada html za nas panel treba to da ubacimo u index.html ili index.php. Otvorite index.html u vasem omiljenom text editoru i sljedeci kod dodaje bilo gdje unutar <body>..</body> taga:

html code
<div id="social_panel">
<div id="icons">
<a href="#" target="_blank"><img src="Images/social/Facebook.png"></a>
<a href="#" target="_blank"><img src="Images/social/Twitter.png"></a>
<a href="#" target="_blank"><img src="Images/social/YouTube.png"></a>
<a href="#" target="_blank"><img src="Images/social/GooglePlus.png"></a>
</div>
</div>
<div id="trigger"><p>></p></div>



Da dodamo stil nasem panelu, dodajte sljedeci kod na kraj vaseg index.css fajla. Naravno ovaj stil editujte kako vec hocete, siguran sam da mozete smislit nesto bolje :D Ne treba da mijenjate display u id-u #social_panel, a isto tako mislim da je position: fixed; super za panel(ostaje na istom mjestu bez obzira na scroll).

css code
/* --------- Social Panel ------------ */
#social_panel {
position: fixed;
top: 200px;
left: 0;
background: #434343;
display: none;
}
#trigger {
position: fixed;
height: 30px;
width: 30px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
top: 200px;
left: 0;
display: inline;
background: #434343;
cursor: pointer;
}
#trigger p {
color: #f3f3f3;
font-size: 20px;
padding: 5px;
margin-top: 0;
}
#icons a {
display: block;
margin: 10px;
}



I na kraju treba da dodamo jQuery skriptu koja ce da "pokrece" nas panel. Opet otvorite index.html ako vec nije otvoren. Sljedeci kod dodaje u <head>..</head> tag, mozda je najpametnije na kraj zbog preglednosti. Nisam pravio poseban fajl za skriptu pa ga linkao jer nema puno koda.

html code
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#trigger").click( function() {
if ( $("#trigger>p").text() != "<" ) {
$("#social_panel").fadeIn("slow");
$("#trigger").css("left" , "52px");
$("#trigger>p").text("<");
} else {
$("#social_panel").fadeOut("slow");
$("#trigger").css("left" , "0");
$("#trigger>p").text(">");
}
});
});
</script>



To bi bilo to :D

Re: Front-end kod

PostPostao/la Armin » 27 svi 2014, 23:03

Centriranje elemenata u HTML-u (vertikalno i horizontalno)

Evo snippet koda koji vam sigurno često treba ukoliko radite layout za neku stranicu. Cilj je apsolutno centrirati element unutar nekog parent elementa (vertikalno i horizontalno).

css code
.parent
{
position: relative;
height: 1000px;
width: 1000px;
}

.child
{
height: 100px;
width: 100px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
position: absolute;
}


html code
<div class="parent">
<a href="#" class="child"></a>
</div>


Jako jednostavno rješenje, međutim ne baš idealno budući da ovo neće raditi na IE. Međutim, možemo blago modifikovati kod u tu svrhu.

css code
.child
{
height: 100px;
width: 100px;
top: 50%;
bottom: 0;
right: 0;
left: 50%;
margin-left: -50px; /* polovina širine elementa */
margin-top: -50px; /* polovina visine elementa */
position: absolute;
}
"Ne žalim što su drugi pokrali moje ideje. Žalim što nemaju svoje"
Nikola Tesla

Re: Front-end kod

PostPostao/la HepeK » 30 svi 2014, 22:51

Da se nadovežem na Armina...

Za vertikalno i horizontalno centriranje se još koristi solucija prikazivanja diva kao tabele "display: table".
css code
.kontejner{
width:100%;
height: 50px; /*proizvoljno ili height: auto da se prilagodi najvisoj visini unutrasnjeg elementa */
}
.divtable{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.divcell{
display: table-cell;
vertical-align: middle;
}

html code
<div class="kontejner">
<div class="divtable">
<div class="divcell">neki tekst</div>
</div>
</div>


A treba naglasiti da radi i na IE :)
"Ko nema u glavi ima na internetu"
Što čujem - poštujem, dok ne vidim - ne vjerujem.


4 post(ov)a • Stranica: 1/1.

Na mreži

Trenutno korisnika/ca: / i 1 gost.