Archiwum tagu: tricki w jQuery

Efekty 3D w jQuery

Oto kolejne wybrane dla Was najciekawsze efekty, tym razem w 3D, do zastosowania na stronie internetowej.

Zapraszam poniżej. Powodzenia :)

1. Flip HTML content in 3D

ZOBACZ DEMO

2. Agile Carousel

ZOBACZ DEMO

3. Rotation

ZOBACZ DEMO

4. Tag Cloud

ZOBACZ DEMO

5. Sphere

ZOBACZ DEMO

6. Flip!

ZOBACZ DEMO

7. Faux 3D Effect

ZOBACZ DEMO

źródło: denbagus.net


Garagedoor menu w jQuery

Garagedoor menu to bardzo oryginalny sposób prezentacji swojego menu na stronie. Menu jest proste i łatwe w zastosowaniu. Zapraszam poniżej.

jquery_18

ZOBACZ DEMO

Po pierwsze, korzystamy z biblioteki jQuery, którą umieszczamy na naszym serwerze:

<script src="js/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script src="js/garagedoorjQuery.js" type="text/javascript">
</script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css'/>

Następnie, tworzymy układ HTML:

<div class='garagedoor' id='garagedoor'>
   <div title='linktofile' class='item'>
      <div class='underlay'>
           Caption text
      </div>
      <img src='uritooverlayimage' class='overlay' />
      <div class='mouse'><img src='images/nothing.gif' />&nbsp;
</div>
   </div>
   <div title='linktofile' class='item'>
      <div class='underlay'>
          Caption text
      </div>
      <img src='uritooverlayimage' class='overlay' /
      <div class='mouse'><img src='images/nothing.gif' />&nbsp;
</div>
   </div>
</div>

Powyższy kod zawiera dwa 2 słowa kluczowe, a mianowicie linktofile oraz uritooverlayimage. Oba słowa muszą być dostosowane do siebie, aby garagedoor zadziałało. Linktofile to adres URL strony.

Elementy mają domyślny rozmiar: szerokość 100px i wysokość 80px. Obrazy nakładki muszą mieć zgodne wymiary. Jeżeli chcesz zmienić rozmiar, zajrzyj do pliku garagedoor.css i ustaw szerokość i wysokość  elemnetów.

Teraz, wszystko co jest do zrobienia to wywołać GarageDoor i włączyć efekt:

<script>
   GarageDoor.scrollY = -55;
   GarageDoor.scrollX = 0;
   GarageDoor.setBindings('garagedoor');
</script>

Prosto i szybko!

Źródło: www.gayadesign.com


Plugin Kalendarz do jQuery

W sieci istnieje coraz więcej stron korzystających z kalendarzy online. Część z nich jest prostą wtyczką, umożliwiającą wybranie daty z graficznego UI, zwiększając w ten sposób usability strony. Inne z kolei są pełnymi kalendarzami, wielokrotnie pełniące funkcję odrębnych aplikacji webowych. Dzisiaj przedstawię 2 proste i fajne pluginy kalendarz do jQuery.

1. FullCalendar

Kalendarz FullCalendar jest złożonym, a jednocześnie prostym w użyciu pluginem do JQuery, który oferuje szeroką gamę zastosowań. Do najważniejszych funkcji kalendarza należą:

  • działanie na zasadzie drag-and-drop (przeciągnij i upuść)
  • możliwość integracji z Google Calendar
  • możliwość obsługi zdarzeń poprzez JSON
  • możliwość osadzenia w pełnym rozmiarze

jquery_12

ZOBACZ DEMO

Dodatkowo kalendarz umożliwia łatwą zmianę styli całości pluginu jQuery, a ponadto istnieje możliwość własnego dostosowania zdarzeń kalendarza jQuery (np. zdarzenie kliknięcia lub przeciągnięcia elementu w kalendarzu).

2. wdCalendar

wdCalendar powstał na podstawie kalendarza Google. Stąd też, większość funkcji jest taka sama. Zasada działania jest również podobna, czyli za pomocą metody “przeciągnij i upuść”.


jquery_13

ZOBACZ DEMO

Źródło: devcurry.com


Menu obraz w jQuery

Witam wszystkich w Nowym Roku!

A jak Nowy Rok to nowa dawka porad z zakresu jQuery. Dzisiaj przedstawię prosty sposób na obrazowe menu w jQuery.

jquery_8

ZOBACZ DEMO

Zacznijmy od kodu HTML,

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

Do tego oczywiście CSS:

.jimgMenu {
        position: relative;
        width: 670px;
        height: 200px;
        overflow: hidden; 
        margin: 25px 0px 0px;
}
.jimgMenu ul {
        list-style: none;
        margin: 0px;
        display: block;
        height: 200px;
        width: 1340px;
}
.jimgMenu ul li {
        float: left;
}
.jimgMenu ul li a {
        text-indent: -1000px;
        background:#FFFFFF none repeat scroll 0%;
        border-right: 2px solid #fff;
        cursor:pointer;
        display:block;
        overflow:hidden;
        width:78px;
        height: 200px;
}
.jimgMenu ul li.landscapes a {
        background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
        background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
        background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
        background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
        background: url(images/urban.jpg) repeat scroll 0%;
        min-width:310px;
}

Gotowe!

Powodzenia!

Źródło: Alohatechsupport.net


Plugin Tooltip/jQuery

Plugin Tooltip jest naprawdę prosty, a jego zastosowanie do wyświetlania konkretnego elementu stwarza praktycznie nieograniczone możliwości.

Zaprezentuję zastosowanie pluginu w dwóch przykładach.

1. wyświetlanie tooltipu po najechaniu na link

2. wyświetlanie podglądu zdjęcia po najechaniu na jego miniaturkę

Więc, … zaczynamy.

Tooltip tekstowy

Najprostszy sposób zobrazowania możliwości tooltipu, czyli po najechaniu na link wyświetlany jest element, którego nazwa klasy została podana w atrybucie title linku.

<a href="#" class="PreviewTooltip" title="toolText">
Najedź na link by zobaczyć tooltip</a>

i nasza podpowiedź:

<div class="toolText">
<p>To ja, <b>Twój</b> tooltip</p>
</div>

DEMO

Tooltip - podgląd zdjęcia

Podgląd zdjęcia wykonywany jest w podobny sposób jak w poprzednim przypadku. Aby wykorzystać plugin do podglądu, należy nadać w linku atrybut title=”toolImgPrev”. Nazwa ta sygnalizuje, że plugin będzie działał w trybie podglądu i zacznie przeszukiwać link w poszukiwaniu elementu img. Ściezka pliku wykorzystanego do podglądu pobierana jest z atrybutu src, natomiast sam link może prowadzić do dowolnej lokacji.

<a href="#" class="PreviewTooltip" title="toolImgPrev">
<img class="smallImage" src="images/img2.jpg"
alt="jquety plugin tooltip"/>
</a>

W tym przypadku możemy dodać opis do podglądu, poprzez zamieszczenie w znaczniku img atrybutu title, którego treść zostanie wyświetlona pod zdjęciem w podglądzie.

<a href="#" class="PreviewTooltip" title="toolImgPrev">
<img class="smallImage" src="images/img2.jpg"
title="jestem Twoim podpisem" alt="jquety plugin tooltip"/></a>

DEMO

Powodzenia!

Źródło: alchemycode


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


Scrollable czyli mini galeria do przewijania

W tym przykładzie pokażę jak stworzyć mini galerię do przewijania za pomocą scrollable w jquery.

jquery_5

W tym przykładzie mamy 3 elementy, a każdy z nich ma 5 zdjęć. Możemy przewijać tylko klikając przyciski strzałek lub za pomocą lewego i prawego klawisza z klawiatury, ponieważ dążymy do minimalnej konfiguracji.

W pierwszej kolejności musimy określić nasze scrollable. Wprowadzamy wszystkie elementy, w tym przypadku wybraliśmy zdjęcia ze strony www.flickr.com. Oczywiście, elementy mogą zawierać wszystko co chcesz, w tym obrazy, Flash, tekst HTML. Możesz również wprowadzić dowolną ilość  takich elementów o dowolnej wielkości.

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   

   <!-- root element for the items -->
   <div class="items">

      <!-- 1-5 -->
      <div>
<img src="http://farm1.static.flickr.com/143/
                                321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/
                                2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/
                                244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/
                                66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/
                                399223606_b875ddf797_t.jpg" />
      </div>

      <!-- 5-10 -->
      <div>
<img src="http://farm1.static.flickr.com/163/
                                399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/
                                321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/
                                117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/
                                399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/
                                117346182_1fded507fa_t.jpg" />
      </div>

      <!-- 10-15 -->
      <div>
<img src="http://farm4.static.flickr.com/3629/
                                3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/
                                3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/
                                3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/
                                3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/
                                3323893148_8318838fbd_t.jpg" />
      </div>

   </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>

Scrollable szuka elemnetów, których nazwa klasy CSS jest prev i next, a następnie automatycznie wiąże szukaną akcję z nimi. Oczywiście, można określić inne nazwy dla nazw klas CSS, aby uniknąć problemu z istniejącymi nazwami klas CSS.

Poniżej przedstawiam najtrudniejszą część, a mianowicie minimalne ustawienia CSS umożliwiające poziome przewijanie. Prawdopodobnie do dostrojenia będzie właściwość width, bo tylko ona ma wpływ na wygląd.

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 660px;
	height:90px;
}

/*
root element for scrollable items. Must be absolutely
positioned and it should have a extremely large width
to accommodate scrollable items. it's enough that you
set width and height for the root element and not for
this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
a single item. must be floated in horizontal scrolling.
typically, this element is the one that *you* will style
the most.
*/
.items div {
	float:left;
}

Teraz najłatwiejsza część. Wystarczy wybrać element na stronie, który będzie przewijany.

<script>
// execute your scripts when the DOM is ready.
   this is mostly a good habit
$(function() {

	// initialize scrollable
	$(".scrollable").scrollable();

});
</script>

ZOBACZ DEMO

Więcej: flowplayer.org


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


Animowana nawigacja wykorzystująca jQuery i CSS

Niewątpliwie bardzo ważnym elementem każdego serwisu jest jego menu nawigacyjne. Często to ono nadaje właściwy ton stronie, stanowiąc przysłowiową kropkę nad i. Zastosowanie animacji w menu wprowadza element ruchu, który może przełamać statykę reszty strony.

Dzisiaj chciałabym podzielić się z Wami taką techniką wykorzystującą CSS i jQuery.

Zapraszam!

jquery1

ZOBACZ DEMO

KROK 1: Szkielet HTML

Ta część jest bardzo prosta. To jest typowa lista menu z linkami.

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

KROK 2: Styling - CSS

Do każdego elementu listy stosujemy technikę maskowania poprzez overflow:hidden. Spójrz na obrazek poniżej, aby zobaczyć co mam na myśli.

jquery_2

Zauważ, że nie ma podwójnych tagów <span> w kodzie w kroku 1. Będziemy dodawać to później.

ul#topnav {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	float: left; 
	font-size: 1.1em; 
}
ul#topnav li{ 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	float: left; 
	height:40px; 
} 
ul#topnav a, ul#topnav span { 
	padding: 10px 20px; 
	float: left; 
	text-decoration: none; 
	color: #fff; 
	background: url(a_bg.gif) repeat-x; 
	text-transform: uppercase; 
	clear: both; 
	width: 100%; 
	height: 20px; 
	line-height: 20px;
} 
ul#topnav a{ 
	color: #555; 
	background-position: left bottom; 
} 
ul#topnav span{ 
	background-position: left top; 
}

KROK 3: Animacja jQuery

Jak widać poniżej, skopiowaliśmy tagi <span>, a następnie będziemy je animować -40px na górę, aby przesuwać nawigację.

jquery_3

Poniższy skrypt wyjaśnia, które działania są wykonywane.

$ (Document). Ready (function () {

	$("#topnav li").prepend("<span></span>"); 

	$("#topnav li").each(function() { 
		var linkText = $(this).find("a").html(); 
		$(this).find("span").show().html(linkText); 
	}); 

	$("#topnav li").hover(function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "-40" 
		}, 250);
	} , function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "0" 
		}, 250);
	});
});

ZOBACZ DEMO

POWODZENIA! TO BARDZO PROSTA TECHNIKA!

Źródło:

http://www.sohtanaka.com/web-design/animate-navigation-with-css-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!