23-05-2012, 02:49
Witam. Mam pewien problem z biblioteką Jquery. Mianowicie, mam "spotlight" effect nanoszony na grafiki na stronie, i występuje pewien problem. Mianowicie - strona korzysta również, z content changera, by nie trzeba było odświeżać strony by przełączyć treść. Tylko występują dwa problemy - pierwszy : gdy najeżdżam na obrazek od boku, zamiast od góry, to nie działa wygaszanie pozostałych, - drugi : gdy włączę "content page2" to skrypt tak jakby nie zauważa ,że zjechałem myszką z obrazka, i cały czas zostaje on podświetlony i pozostałe zostają wycieniowane, bez względu na to co robię, nawet jak przełączę z powrotem na "content page1" to normalnie wszystko działa, a gdy wrócę na "content page2" to obrazek nadal jest zaznaczony. Są to dość poważne błędy a nie mam już żadnych pomysłów jak to naprawić ( PS : stronka działa tylko pod Mozilla zupdatowaną i chrome ). Poniżej umieszczam kod ( bez obrazków ) :
Eliminacja tych błędów jest dla mnie bardzo ważna, ponieważ zakłócają one czytelność strony i radość z jej przeglądania, a jest to dla mnie bardzo ważną rzeczą ! Pozdrawiam i z góry dziękuję za kontakt. Zależy mi na czasie ponieważ mam pare dni na oddanie pracy.
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>fdsfsdfsdfsd</title>
<meta content="text/html; charset=iso-8859-2" http-equiv="content-type">
<meta content="[email protected]" http-equiv="Reply-to">
<meta content="pl" http-equiv="Content-Language">
<meta name="Author" content="fdsfdsfdsfds">
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/stickysidebar.jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#menu li").hover(
function () {
//po najechaniu na li
$(this).find('a.n').stop().animate({
top: '20px'
}, 400, function() {
$(this).find('a.n').addClass("down");
});
$(this).find('a.n').prev().stop().animate({
top: '0px'
}, 400, function() {
$(this).find('a.n').prev().addClass("active");
});
},
function () {
//po zjechaniu na li
$(this).find('a.n').stop().animate({
top: '0px'
}, 400, function() {
$(this).find('a.n').removeClass("down");
});
$(this).find('a.n').prev().stop().animate({
top: '-20px'
}, 400, function() {
$(this).find('a.n').prev().removeClass("active");
});
}
);
});
$(document).ready(function () {
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title','');
});
$('#items .item').hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.1'});
//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');
//show the caption
$(this).children('.caption').show();
},
function () {
//hide the caption
$(this).children('.caption').hide();
}
);
$('#items').mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});
});
$(function(){
function contentSwitcher(settings){
var settings = {
contentClass : '.content',
navigationId : '#navigation'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show();
});
}
contentSwitcher();
});
$(function () {
$("#basket").stickySidebar({
timer: 400
, easing: "easeInOutBack"
});
});
</script>
<style type="text/css">
#menu li a.h{
color: #e95a19;
position:absolute;
top:-20px;
}
#menu li a.down{
top:20px;
}
#menu li a.active{
top:0px;
}
@font-face {
font-family: trykker;
src:url(trykker.otf);}
body {
background: #CDC9C9;
font-family: trykker;
}
div#STRONA {
margin: 0 auto 0 auto;
height:1760px;
background:white;
width:1048px;
text-align:right;
position:relative;right:8px;top:-8px;
z-index:5;
-moz-box-shadow: 2px 3px 5px 5px #000000;
-webkit-box-shadow: 2px 3px 5px 5px #000000;
box-shadow: 2px 3px 5px 5px #000000;
}
div#NAGLOWEK {float:left; position:relative;top:18px;z-index:5;}
div#MEN {float:right; position:relative;top:89px;left:5px}
#menu {
margin:0;
padding:0;
height:22px;
margin:50px auto 0 auto;
position:relative;right:8px;top:15px;
overflow:hidden;
z-index:4;
}
div#navigation{position:relative;}
#menu li{
float:left;
list-style:none;
}
#menu li a{
font-size:18px;
font-family: trekker;
color:black;
text-decoration:none;
padding:0 10px 0 10px;
position:relative;
}
#menu li a.h{
color:#e95a19;
position:absolute;
top:-20px;
}
#menu li a.down{
top:20px;
}
#menu li a.active{
top:0px;
}
}
#menu li a.o_nas {
color:#e95a19;
}
#menu li a.mapa {
color:#e95a19;
}
#menu li a.kontakt {
color:#e95a19;
}
#items a {
text-decoration:none;
color:#ffffff;
}
#items {
width:999px;
margin:0 auto;
}
#items .item {
display:block;
width:999px;
height:299px;
border:2px #e95a19;
float:left;
position:relative;top:30px;
}
#items .item .caption {
position:relative;top:-38px;
float:left;
font-size:30px;
width:999px;
display:none;
background:#e95a19;
}
.effect {
/* CSS3 shadow */
box-shadow: 0 0 15px #e95a19;
-moz-box-shadow: 0 0 15px #e95a19;
-webkit-box-shadow: 0 0 15px #e95a19;
}
.fg-button {
outline: 0;
margin:0 4px 0 0;
padding: .4em 1em;
text-decoration:none !important;
cursor:pointer;
position: relative;
text-align: center;
zoom: 1;
}
div#LINE{position:relative;right:12px;top:20px;z-index:3;}
div#basket{position:relative;right:515px;top:15px;}
div#STOPKA{width:1048px; height:20px;position:relative;top:1725px;z-index:-6}
</style><!-- start unordered list -->
</head>
<body>
<div id="STRONA">
<div id="STOPKA"><img src="images/stopka.jpg" width="1048" height="20"/></div>
<div id="NAGLOWEK">
<a href="index.html"><img src="ggeg" width="515" height="170"></a>
<div id="basket">
<div id="navigation">
<a href="#page1"><img src="ggg.jpg" width="170" height="70"/></a><br>
<a href="#page2"><img src="gg.jpg" width="170" height="70"/></a>
</div>
<a href="index.html"><img src="asd.jpg" width="170" height="70"/></a><br>
<a href="anindex.html"><img src="asd.jpg" width="170" height="70"/></a>
</div>
</div>
<div id="MEN" ><ul id="menu">
<li><a class="h c" href="#">ABC</a><a class="n" href="#">ab</a></li>
<li><a class="h c" href="#">ABC</a><a class="n" href="#">ab</a></li>
<li><a class="h c" href="#">ABC</a><a class="n" href="#">ab</a></li>
<li><a class="h c" href="#">ABC</a><a class="n" href="#">ab</a></li></li>
</ul></div>
<div id="page1" class="content">
<div id="items">
<div id="LINE"><img src="images/line.jpg" width="1024" height="2"/></div>
<a class="item" href="#" title="BLA BLA">
<img src="i.jpg" width="1000" height="300"/>
</a>
<a class="item" href="#" title="BLA BLA">
<img src="i.jpg" width="1000" height="300"/>
</a>
</div>
</div>
<div id="page2" class="content">
<div id="items">
<div id="LINE"><img src="images/line.jpg" width="1024" height="2"/></div>
<a class="item" href="#" title="BLA BLA">
<img src="i.jpg" width="1000" height="300"/>
</a>
<a class="item" href="#" title="BLA BLA">
<img src="i.jpg" width="1000" height="300"/>
</a>
</div>
</div>
</div>
</body>
</html>Eliminacja tych błędów jest dla mnie bardzo ważna, ponieważ zakłócają one czytelność strony i radość z jej przeglądania, a jest to dla mnie bardzo ważną rzeczą ! Pozdrawiam i z góry dziękuję za kontakt. Zależy mi na czasie ponieważ mam pare dni na oddanie pracy.
