style.css
.slider{background: url('../img/bgSlider.png') no-repeat; width: 447px; height: 289px;}
.slides{position: absolute; top: 0; left: 34px; z-index:0;}
.ramka{position: absolute; top: 0; left: 33px; z-index:1; height: auto;}
.slideArea{position: relative; z-index: 2; width: 100%; height: 289px; overflow:hidden;}
.clickArea{margin:auto; width:65%;height:100%;position:absolute; right:0; left:0; text-decoration:none; z-index:2; color:#fff;}
.clickArea a{display:block; width:100%; height:290px; margin: auto;}
load.js
$(window).load(function() {
var obszar = $('.slideArea');
var hRamka = $('.ramka').css('height');
var y = $('.ramka').width();
var x = $('.ramka').height();
var clickArea = $('.clickArea a');
var slide = $('.slides');
var slideImg = $('.slides img');
var hSlideImg = $('.slides img').height() + 4;
obszar.css('height', x);
clickArea.css('height', x);
slide.css('width', y);
slideImg.css('width', y);
})
script.js:
var main = function() {
var hSlideImg = $('.slides img').height() + 4;
var slide = $('.slides');
var avalibleArea = $('.clickArea');
var next = $('.next');
var prev = $('.prev');
var topowy = $('.slides').css('top');
var avalibleAreaTop = $('.clickArea').css('top');
var hArea = $('.slideArea').css('height');
var x = $('.ramka').height();
var hRamka = $('.ramka').css('height');
alert('wysokość img: ' + hSlideImg);
if(topowy == 0 + 'px'){
prev.addClass("disnon");
}else{
prev.removeClass("disnon");
}
next.removeClass("disnon")
prev.click(function() {
topowy = $('.slides').css('top');
avalibleAreaTop = $('.clickArea').css('top');
next.removeClass("disnon");
if(topowy == -282 + 'px'){
prev.addClass("disnon");
}else{
prev.removeClass("disnon");
}
slide.animate({
top: '+=' + hSlideImg
}, 400)
avalibleArea.animate({
top: '+=' + hSlideImg
}, 400)
});
next.click(function() {
topowy = $('.slides').css('top');
avalibleAreaTop = $('.clickArea').css('top');
prev.removeClass("disnon");
if(topowy == -1692 + 'px'){
next.addClass("disnon");
}else{
next.removeClass("disnon");
}
slide.animate({
top: '-=' + hSlideImg
}, 400)
avalibleArea.animate({
top: '-=' + hSlideImg
}, 400)
});
};
$(document).ready(main);
Zauważyłem, że po wpisaniu adresu w wyszukiwarkę działa poprawnie (w większości przypadków), ale gdy wciśnie się F5 bądź kliknie odśwież wyświetlana wartość wysokości elementu to 4px.