Archiwum tagu: przydatne tricki

Wysuwany panel logowania w jQuery

Przedstawiam Was bardzo przejrzysty i funkcjonalny plugin, pozwalający na dynamiczne pokazywanie i chowanie panelu logowania. Zastosowanie takiego rozwiązania pozwoli na logowanie się użytkownika na dowolnej stronie bez konieczności przenoszenia go na osobną stronę logowania.

jquery_71

Skrypt ten nie jest zbyt skomplikowany, a co za tym idzie nie powinien przysporzyć Wam kłopotów z jego zrozumieniem.

Kod HTML

<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" class="close" style="display: none;"
                            href="#">Close Panel</a></li>

JAVASCRIPT

$(document).ready(function() {

	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");
	});	

	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		

	// Switch buttons from "Log In | Register"
           to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		

});

Jednocześnie dzięki funkcji toggle zamieniamy tekst Log In ¦ Register na Close Panel.

ZOBACZ DEMO

Więcej: web-kreation.com i jQuery


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!