Archiwum tagu: jQuery

jQuery - Centrowanie w pionie i poziomie

Centrowanie elementu w pionie i poziomie niejednokrotnie stanowi problem. Dlatego dzisiaj zaprezentuję obejście problemu i jego szybkie rozwiązanie za pomocą jQuery. Zaletą tej metody, jest fakt, że nie musimy znać wielkości wyśrodkowywanego elementu.

Myślę, że każdemu przyda się taki szybki trik. :)

jablko

Metoda wywoływana jest w 2 przypadkach:

1. przy każdej zmianie rozmiaru okna ($(window).resize()),

2. po załadowaniu strony ().

Zasadniczo mechanizm metody jak taki sam jak w przypadku często stosowanej metody CSS, czyli nakłada position:absoute, a następnie wyśrodkowuje element, z tą jedna uwagą ze nie musimy znać wielkości elementu, bo jest ona pobierana dynamicznie i uwzględniania w wyliczaniu pozycji. Warto zauważyć, że podczas pobierania elementu nie została wykorzystana funkcja width() i height(), a outerWidth() i outerHeight(). Ma to na celu pobranie wartości rozmiaru elementu z uwzględnieniem paddingu czy bordera, co nie miałoby miejsca w przypadku width() i height().

$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() – $('.className').outerWidth())/2,
top: ($(window).height() – $('.className').outerHeight())/2
});
});
// wykonanie funkcji na starcie
$(window).resize();

Szybkie i skuteczne :) Polecam

źródło: blog.alchemycode.pl


jPong - 3d pong / gra w jQuery

jQuery można zastosować naprawdę do wszystkiego. Nie wierzycie? … jPong to niesamowita gierka stworzona w jQuery. Przypomina “ping ponga”, tylko że w 3D. Sprawdźcie sami i zobaczcie jak działa!

jpong

Oto lista cech, które są zawarte w tej grze:

  • Pokaż wynik
  • Wpływać na piłkę po uderzeniu go (krzywa)
  • Włączanie / wyłączanie zasilania, aby stworzyć “ściany” panele po krzywej piłkę

A teraz uruchom grę i graj :) Uważaj, bo łatwo stracić piłkę :)

Play jPong Download jPong

POWODZENIA :)

źródło: marcofolio.net


Animowane/rozwijane menu

W jQuery można stworzyć całkiem fajne efekty animacji. Dzisiaj przedstawiam animowane/rozwijane menu.

jquery_43

ZOBACZ ANIMOWANE/ROZWIJANE MENU

Korzystając z jQuery możemy użyć elementów <h3> i <p> do ukrywania i pokazywania paragrafów poniżej znaczników pozycji.

<script type="text/javascript">
$(document).ready(function(){
  $(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
     .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});
</script>

Oczywiście, jeżeli chcesz, aby animacja była szybsza, musisz zmodyfikować slideToggle i slideUp, czyli wprowadzasz 'normal' lub 'fast'. Możesz również po prostu użyć liczby całkowitej w milisekundach, czyli .slideUp(500) dla pół sekundy na przejście.

Teraz musimy użyć poniższego kodu HTML. To całkiem proste, musimy mieć wszystkie elementy div.accordion i pary <h3>/<p> w środku.

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Więcej na: WebDesignerWall


jQZoom Evolution

jQZoom jest Javascriptowym pluginem do jQuery, służącym do powiększania zdjęć na stronie, czyli tworzącym efekt lupy. Obsługa wtyczki jest naprawdę prosta i może znaleźć szerokie zastosowanie w systemach e-commerce do prezentowania szczegółów produktów bez przeładowywania strony.

jquery_motor3

ZOBACZ DEMO

Po pierwsze, umieszczamy jqzoom.css w części <head>

<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

Korzystanie jQZoom jest łatwe, ale trzeba określić HTML anchor, który będzie generować zoom ujawniając część powiększonego obrazu.

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

Następnie załadowujemy nasz plugin.

$(document).ready(function(){
	$('.MYCLASS).jqzoom();
});

Aby stworzyć więcej niestandardowych efektów, możesz dodać więcej opcji.

$(document).ready(function(){
	var options = {
	    zoomWidth: 300,
	    zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //and MORE OPTIONS
};
	$('.MYCLASS).jqzoom(options);
});

ZOBACZ TUTORIAL


10 tricków w jQuery

Na dzisiaj przygotowałam kilka ciekawych tricków, które na pewno będą pomocne przy tworzeniu stron www i pomogą uniknąć zbędnych problemów. Zapraszam poniżej.

Blokada prawego przycisku myszy

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

Otwórz w nowym oknie

$(document).ready(function() {
   //Przykład 1: Każdy link się otworzy w nowym oknie
   $('a[href^="http://"]').attr("target", "_blank");

   //Przykład 2: Linki z atrybutem rel="external" będą się
                 otwierały w nowym oknie
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});

Wykrywanie przeglądarki użytkownika

$(document).ready(function() {
// Firefox 2 i wyżej
if ($.browser.mozilla && $.browser.version >= "1.8" ){

}

// Safari
if( $.browser.safari ){

}

// Google Chrome
if( $.browser.chrome){

}

// Opera
if( $.browser.opera){

}

// IE6 i starsze
if ($.browser.msie && $.browser.version < = 6 ){

}

// IE7/IE8
if ($.browser.msie && $.browser.version > 6){

}
});

Zmiana rozmiaru czcionki

$(document).ready(function() {
  // Restowanie rozmiaru, defaultowy rozmiar
  var oryginalnyRozmiar = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', oryginalnyRozmiar);
  });
  // Powiększanie czcionki
  $(".powiekszRozmiar").click(function(){
    var obecnyRozmiar = $('html').css('font-size');
    var obecnyRozmiarNum = parseFloat(obecnyRozmiar, 10);
    var nowyRozmiar = obecnyRozmiarNum*1.2;
    $('html').css('font-size', nowyRozmiar);
    return false;
  });
  // Zmniejsz rozmiar czcionki
  $(".decreaseFont").click(function(){
    var obecnyRozmiar = $('html').css('font-size');
    var obecnyRozmiarNum = parseFloat(obecnyRozmiar, 10);
    var nowyRozmiar = obecnyRozmiarNum*0.8;
    $('html').css('font-size', nowyRozmiar);
    return false;
  });
});

Sprawdzenie czy element jest pusty

$(document).ready(function() {
  if ($('#id').html()) {
   // jakiś kod
   }
});

Zastępowanie elementu innym

$(document).ready(function() {
   $('#id').replaceWith('element zastępujący');
});

Klikalny div jak link

$(document).ready(function() {
  $("div").click(function(){
  //pobieranie adresu z atrybutu href danego linka
  window.location=$(this).find("a").attr("href"); return false;
	});
});

Zmiana klas elementu zależnie od szerokości okna przeglądarki

$(document).ready(function() {
   function sprawdzRozmiarOkna() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('duzy');
	}
	else {
		$('body').removeClass('duzy');
	}
   }
$(window).resize(sprawdzRozmiarOkna);
});

Blokowanie animacji jQuery

$(document).ready(function() {
    jQuery.fx.off = true;
});

Tryb bezkonfliktowy w jQuery

Dzięki temu można korzystać z innych bibliotek JavaScript bez obawy o konflikt między nimi.

$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});

POWODZENIA!