Przykładowe rozwiązania
Javascript jQuery.
- Klasa selected - oznaczenie aktywnego linku
- Niestandardowe czcionki w HTML
- Przewijanie treści - scroll
klasa selected - oznaczenie aktywnego linku
Problem:
Jak po kliknięciu w elemnt menu nadać mu klasę .selected ? - link będzie widoczny jako zaznaczony
Rozwiązanie:
Można nadać klasę selected atrybutowi href posługując się aktualnym adresem w przeglądarce.
Kod: (js,jQuery)
var href = location.href.split('/').pop();
$('#menuId ul li a').each(function() {
var selectedHref = $(this).attr('href').split('/');
if (selectedHref.pop() == href) $(this).addClass('selected');
});
Przewijanie treści - scroll
Problem:
Jak po najechaniu na element spowodować przewijanie treści ?
Rozwiązanie:
Można nadać klasę ArrowDown i ArroUp odpowiednio elementom odpowiedzialnym za przewijanie (np. obraz), przypisać id ScrollContent elementowi przeznaczonemu do przewijania i obsłużyć zdarzenie hover w jQuery.
Kod: (js,jQuery)
var itemToScroll = $('#ScrollContent');
var realHeight = itemToScroll[0].scrollHeight;
$('.ArrowDown').hover(
function(){
var scrollTo = itemToScroll.css('top');
itemToScroll.animate({
top: '-='+scrollTo
}, 1500 );
},
function(){
itemToScroll.stop(true, false).animate();
}
);
$('.ArrowUp').hover(
function(){
var scrollTo = parseInt(itemToScroll.css('top').replace('px','')) + realHeight + 'px';
itemToScroll.animate({
top: '-='+scrollTo
}, 1500 );
},
function(){
itemToScroll.stop(true, false).animate();
}
);
MISC
Niestandardowe czcionki w HTML.
Problem:
Zastosowanie niestandardowej czcionki na stronie www.
Rozwiązanie:
Istnieje kilka rozwiązań tego problemu:
