Evaluare utilizator: 0 / 5

Steluță inactivăSteluță inactivăSteluță inactivăSteluță inactivăSteluță inactivă
 

Webmasterii ştiu că uneori te alegi cu dureri de cap atunci când încerci se centrezi, în special vertical anumite elemente dintr-o pagină. Dacă vrei să meargă şi responsive, adică pe orice rezoluţie şi/sau la schimbarea dimensiunii ferestrei, atunci o soluţie simplă este Midway.js. Nu am folosit-o încă în proiecte (voi pune la final ce cod folosesc eu) şi recomandarea mea e de aceea cu mici rezerve. În primul rând nu scrie că depinde de jQuery… dar depinde. Apoi nici dacă merge pentru a centra un element în cadrul unui alt element (în testele mele a mers şi nu a mers, după caz).

image

Folosirea e în teorie simplă: la div-ul (sau elementul dorit) pui clasele midway-horizontal şi midway-vertical după nevoie.  Dacă vrei să forţezi centrarea (ea se face când se schimbă dimensiunea ferestrei) atunci poţi apela la Midway(). La un plugin adevărat ar fi fost funcţie pe element de DOM. Oricum, ce face face bine şi vă dau un exemplu aici. Ce am făcut? Un div simplu la care îi modific lăţimea şi înălţimea, dar, veţi vedea, el rămâne centrat. Partea de JavaScript e aceasta (restul vedeţi în sursa paginii anterior referite).

Midway();
$().ready(function(){
	$(".divulmeu").html("<p><button id=adauga>Redimensionare</button></p>");
	$("#adauga").click(function(){
		crtw=$(".divulmeu").css("width").replace("px","")-0;
        $(".divulmeu").css("width",(crtw+Math.floor((Math.random()*10)+10))+"px");
        crth=$(".divulmeu").css("height").replace("px","")-0;
        $(".divulmeu").css("height",(crth+Math.floor((Math.random()*10)+10))+"px");
        Midway();
	})
})

Spuneam că eu folosesc de regulă în proiectele mele altceva. Iată ce (cod găsit nu mai ştiu unde):

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                                                $(window).scrollLeft()) + "px");
	return this;
}
$(".divulmeu").center()

Read more http://feedproxy.google.com/~r/cnetro/~3/HcudIpOz-Cs/