Archiwum tagu: kody w jQuery

Jak zmienić kolor komórki w tabeli po najechaniu na nią?

Na niektórych stronach internetowych można zauważyć bardzo ciekawy efekt, a mianowicie zmianę koloru tła komórki po najechaniu na nią kursorem myszy. W sumie, jest to efekt bardzo łatwy do uzyskania. Zapraszam poniżej.

Pierwszym krokiem jest stworzenie klasy w szablonie CSS z ustawieniem koloru tła. Nie jest to jednak konieczne, ale będzie o wiele wygodniejsze niż ustawianie stylu dla każdego wiersza. Więc, definiujemy styl w taki sposób, aby ustawiać kolor tła dla każdej komórki w wierszu.

<style type="text/css">
tr.highlight td {
    background-color: red;
}
</style>

Teraz stworzymy skrypt jQuery, który ma za zadanie dodanie klasy .highlight do wiersza po najechaniu myszką na dany wiersz.

<script type="text/javascript">
$(document).ready(function(){
    $("#tabelka tr").hover(function() {
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    });
});
</script>

Mając styl i skrypt możemy napisać działający przykład. Oto on:

<style type="text/css">
    table.list {
        width: 100%;
    }
    table.list th {
        background-color:teal;
        color:#fff;
    }
    tr.highlight td {
        background-color: red;
    }
</style>
<script type="text/javascript" src="jQuery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#tabelka tr").hover(function() {
            $(this).addClass("highlight");
        }, function() {
            $(this).removeClass("highlight");
        });
    });
</script>
<table id="tabelka" cellspacing="1" class="list">
<tr>
    <th>Lp.</th>
    <th>Imie</th>
    <th>Nazwisko</th>
</tr>
<tr>
    <td>1.</td>
    <td>Ala</td>
    <td>Kowalska</td>
</tr>
<tr>
    <td>2.</td>
    <td>Franek</td>
    <td>Nowak</td>
</tr>
<tr>
    <td>3.</td>
    <td>Karolina</td>
    <td>Chudzik</td>
</tr>
<tr>
    <td>4.</td>
    <td>Grzegorz</td>
    <td>Krasnal</td>
</tr>
<tr>
    <td>5.</td>
    <td>Henryk</td>
    <td>Marciniak</td>
</tr>
</table>

Myślę, że wyszło ciekawie :) a do tego możesz dowolnie modyfikować powyższy przykład uzyskując jeszcze lepsze efekty w kolorowaniu innych elementów strony.

źródło: porady-it.pl


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


Boczny/wysuwany panel menu w jQuery

Dzisiaj proponuję kolejny bardzo pożyteczny model menu, a mianowicie boczny/wysuwany panel menu.

Boczny i płynnie wysuwany panel menu będzie przyklejony z lewej strony okna przeglądarki i nawet przy przewijaniu treści pozostanie on w tym samym miejscu. Dodatkowym atutem tego menu jest to,  że będzie widoczne dla użytkowników z wyłączonym Javascriptem.

jquery_14

ZOBACZ DEMO

Pracę zaczynamy od podstawowego kodu w xHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
             xml:lang="pl" lang="pl">
<head>
     <meta http-equiv="Content-type"
              content="application/xhtml+xml; charset=utf-8"/>
     <title>Wysuwany panel menu w jQuery</title>

     <script type="text/javascript" 
             src="http://ajax.googleapis.com/ajax/libs/jquery
                  /1.3.2/jquery.min.js"></script>

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

     <script type="text/javascript">
     <!-- skrypt jQuery -->
     </script>

     <!--[if lt IE 8]>
     <script src="http://ie7-js.googlecode.com/svn/version
        /2.0(beta3)/IE8.js" type="text/javascript"></script>
     <![endif]-->
</head>
<body>

<!-- treść strony -->

</body>
</html>

Następnie należy przygotować panel jako menu z przyciskiem do otwierania i zamykania. A więc,

<div id="panel">

	<ul id="main_menu">
      		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Kontakt</a></li>
   	</ul>

	<a href="#" class="slide_button" >Menu</a>

</div>

Koniecznie należy przygotować arkusz styli CSS. Proponuję tło panelu w kolorze niebieskoszarym (#223344), do tego białe linki menu z podkreśleniem po najechaniu. Pozycja panelu względem strony to 50% wysokości okna po lewej.

#panel
{
	background: #223344;
	padding: 10px;
	width: 200px;

	position: fixed;
	margin-top: -100px; /*połowa wysokości panelu w górę */
	left: 0px;
	top: 50%;

}

ul#main_menu
{
	list-style: none;
}

#main_menu a
{
	color: #ffffff;
	text-decoration: none;
}

#main_menu a:hover
{
	text-decoration: underline;
}

Podmiana obrazka otwórz/zamknij nastąpi po kliknięciu. Używając position-absolute wystawiam go poza nasz panel. Dodatkowa klasa zamknij przesunie tło po kliknięciu i przycisk będzie oznaczać zamknięcie panelu.

.slide_button
{
	background: url(przycisk.gif);
	display: block;
	height: 60px;
	text-indent: -9999px;
	width: 20px;

	position: absolute;
	right: -20px;
	top: 0px;
}

.zamknij
{
	background-position: -20px 0px;
}

a:focus {
outline:none; //usuwanie niebieskiej obwódki w FF
}

Teraz możemy przejść do animowania panelu. W sekcji <head> w miejscu na skrypt wpisujemy:

$(function(){

	$("#panel").css("left","-220px");

	$(".slide_button").toggle(function(){

		$("#panel").animate({left: "0px"}, 500 );
		$(this).addClass("zamknij");
		return false;
	},
	function(){
		$("#panel").animate({left: "-220px"}, 500 );
		$(this).removeClass("zamknij");
		return false;
	});

});

Powodzenia!

Źródło: websta.pl


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


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


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!