Mouseover i mouseleave dla wysuwania paska bocznego

Demo:

Formularz kontaktowy





Wyszukiwarka

Bardzo popularne ostatnio stają się widgety, które wysuwają się z pocznej strony ekranu. Zarówno dla social jak i modułów strony. Dla systemów klasy CMS są gotowe darmowe jak i płatne moduły, które to robią. ten wpis jednak prezentuje jak można to samemu zrobić zarówno dla stron opartych na cms jak i własnych bez żadnego silnika.

Zacznijmy od tego, po co i dla kogo. W dobie wszechobecnego facebooka, twittera, czy innych social serwisów taki widget na stronie chciałby mieć. Poza standardowych „like me” dobrze jest mieć widget, który pokazuje wszystkie wpisy, osoby lubiące stronę, itd. Miejsce umieszczenia takiego widgeta zawsze jest problematyczny. Moża do tego celu wykorzystać ikonę oraz boczny panel strony, który pojawia się po najechaniu, czy po kliknięciu.
Można oczywiście dla tego przykładu dodać jakiś formularz kontaktowy, czy wyszukiwarkę. W zależności od potrzeb.

Tworzenie elementów widgeta

Pierwszym etapem jest zdeklarowanie czego my właściwie chcemy i co ma się pokazywać pod poszczególnymi elementami. A więc tworzymy listę ikon, które podpięte zostaną pod nasze docelowe moduły na stronie.

<ul">
  <li>
	<a class="social-kontakt" href=#">
         <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </a>
  </li>
  <li>
	<a class="social-facebook" href=#">
          <i class="fa fa-facebook" aria-hidden="true"></i>
        </a>
  </li>
  <li>
	<a class="social-szukaj" href=#">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
  </li>
</ul>

Elementem wspólnym dla zdeklarowania jakie pozycje chcemy mieć są style. Chodzi o to, aby ustawić je w odpowiednim miejscu na stronie.

ul {
z-index:9999;
position:fixed;
top:100px;
left:0;
margin-left:5px;
padding:0;
}
li {
list-style:none;
}

oraz jak mają wyglądać nasze elementy klikalne

ul li a
{
	display:inline-block;
	width:35px;
	height:35px;
	background:#DD0055;
	margin-bottom:10px;
	color:#fff;
	text-align:center;
	line-height:35px;
}

Ukryte elementy widget’ów

Zawartość naszych widgetów wstawiamy do odpowiedniego kodu. Początkowo są one owczywiście niewidoczne, dopiero po najechaniu na ikonke mamy na nie podgląd.

<div class="ewd_widget kontakt_content content1" style="">
			<div class="ewd_social_content">
				<h1>Formularz kontaktowy</h1>
				<form>
					<label>Nazwa</label>
					<input type="text" />
					<br><br>
					<label>Email</label>
					<input type="text" />
					<br><br>
					<label>Wiadomośc</label>
					<textarea></textarea>
				</form>
			</div>
		</div>
		<div class="ewd_widget facebook_content content2" style="">
			<div class="ewd_social_content">
				<h1>Facebook</h1>
			</div>
		</div>
		<div class="ewd_widget szukaj_content content3" style="">
			<div class="ewd_social_content">
				<h1>Wyszukiwarka</h1>
				<form>
					<input type="text" value ="szukaj..."/>
				</form>
			</div>
		</div>

Pokazywanie ukrywanie elementów widgeta

Mój skrypt działa na zasadzie najechania na ikonkę, pokazania zawartości tego elementu i trzymanie go tak długo widoczengo, dopóki użytkownik nie zjedzie z zawartości widgeta, bądź nie najedzie na kolejny element z listy.

$(document).ready(function() {
	$(".social-kontakt").mouseover(function() {
		$(this).addClass('active');
    $('.content1').show();
	});
	var timer;

	$(".social-kontakt, .kontakt_content").mouseleave(function() {
		timer = setTimeout(doSomething, 10);
	}).mouseenter(function() {
		clearTimeout(timer);
	});


	function doSomething() {
		$('.kontakt_content').hide();
	}
// ------------------- 2---------------
var timer2;
$(".social-facebook").mouseover(function() {
		$(this).addClass('active');
    $('.content2').show();
	});
	
	$(".social-facebook, .facebook_content").mouseleave(function() {
		timer2 = setTimeout(doSomething2, 10);
	}).mouseenter(function() {
		clearTimeout(timer2);
	});


	function doSomething2() {
		$('.facebook_content').hide();
	}
// ------------------- 3 ---------------
var timer3;
$(".social-szukaj").mouseover(function() {
		$(this).addClass('active');
    $('.content3').show();
	});
	
	$(".social-szukaj, .szukaj_content").mouseleave(function() {
		timer3 = setTimeout(doSomething3, 10);
	}).mouseenter(function() {
		clearTimeout(timer3);
	});


	function doSomething3() {
		$('.szukaj_content').hide();
	}

});

Całość działa prawidłowo, można to zrobić jeszcze na wiele innych sposobó, ale ten jest bardzo prosty i można do swobodnie modyfikować w zależności od potrzeb programisty.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code