Problem polega na tym, że skorzystałem z pewnego pluginu "lavaLamp". Wszystko działa pięknie gdy przyciski w MENU nie odsyłają nigdzie czyli do słynnego "#".
Jednak kiedy używam metody $_GET wszystko sie "psuje". Chodzi o to, że podświetlenie z buttona ucieka do "HOME" zamiast zostać w miejscu, do którego się odwołuje.
Proszę zwróćcie uwagę co dzieje się z ostatnim buttonem "CONTACT", wygląda on tak: (?page=contact#). Po pierwszym kliknięciu button cofa się do "HOME" ale już po następnym wciśnięciu, kiedy strona nie jest przeładowywana, przycisk zostaję w dobrym miejscu.
Button "GALLERY" nie odsyła nigdzie, także po naciśnieciu MENU zachowuje się jak najbardziej normalnie.
Pytanie: Co muszę zmienić, żeby menu zachowywało się "normalnie" ?
Stronę można zobaczyć tutaj: http://tescior.ugu.pl
Kod do index.php:
Code: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='content-language' content='pl' />
<meta name='author' content='Dawid Abucewicz' />
<meta name='robots' content='index, follow' />
<title>Strona Główna</title>
<meta name='description' content='Test' />
<meta name='keywords' content='Test' />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="javascript/jquery_good.js"></script>
<script type="text/javascript" src="javascript/jquery.lavalamp.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.min.js"></script>
<!-- Optional -->
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
//-->
</script>
<style type="text/css">
/*<![CDATA[*/
*{
margin: 0px;
padding: 0px;
}
body{
background-color: white;
}
a{
text-decoration: none;
color: black;
font-family: Verdana;
font-style: italic;
z-index: 10;
border: 0px;
}
a:hover{
z-index: 10;
border: 0px;
}
#kontener{
width: 1003px;
margin: 0px auto;
}
#gorna_czesc_kontenera{
height: 300px;
width: 944px;
position: relative;
margin-top: 10px;
}
.logo{
position: absolute;
left: 110px;
margin-top: 85px;
border: 0px;
z-index: 1;
}
.kreska{
position: absolute;
left: 30px;
top: 80px;
border: 0px;
z-index: -1;
}
#lavaLamp{
position: absolute;
width: 944px;
height: 30px;
background-image: url('images/menu.png');
}
.lavaLamp{
position: absolute;
left: -7px;
right: 6px;
z-index: 10;
}
.lavaLamp li{
float: left;
list-style: none;
padding-left: 18px;
margin-top: 5px;
z-index: 10;
border: 0px;
}
.lavaLamp li a{
display: inline-block;
width: 170px;
text-align: center;
z-index: 10;
overflow: hidden;
border: 0px;
}
.lavaLamp li.back{
width: 120px;
height: 25px;
position: absolute;
z-index: -8;
}
.lavaLamp li.back .left{
background: url('images/button.png') no-repeat top left;
height: 25px;
margin-right: 20px;
border-radius: 5px;
border: 0px;
}
/*Content*/
#content{
position: relative;
top: -100px;
}
#content_gora{
background-image: url('images/content_gora.png');
width: 944px;
height: 30px;
}
#content_srodek{
width: 944px;
}
#content_dol{
background-image: url('images/content_gora.png');
width: 944px;
height: 30px;
}
#stopka{
margin-bottom: 50px;
margin-top: -100px;
}
.stopka{
font-family: Verdana;
font-size: 9px;
text-align: right;
margin-left: 700px;
display: inline-table;
}
/*]]>*/
</style>
</head>
<body>
<div align="center">
<div id="kontener">
<div id="gorna_czesc_kontenera">
<a href="index.php" title="Strona"><img src="images/logo.png" class="logo" alt="Logo - Strona" /></a>
<div id="lavaLamp">
<ul class="lavaLamp">
<li><a href="?page=home">HOME</a></li>
<li><a href="?page=about">ABOUT US</a></li>
<li><a href="?page=company">COMPANY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="?page=contact#">CONTACT</a></li>
</ul>
</div>
<img src="images/kreska.png" alt="Kreska" class="kreska" />
</div>
<div id="content">
<div id="content_gora"></div>
<div id="content_srodek">
<?php
include ("php.php");
?>
</div>
<div id="content_dol"></div>
</div>
<div id="stopka">
<div class="stopka">
<table>
<tr><td>Stopka 2012</td></tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Code: Zaznacz cały
<?php
if(isset($_GET['page']))
{
$allowed_pages = array("home", "contact#", "about", "company",);
$page = filter_var($_GET['page'], FILTER_SANITIZE_STRING);
if(in_array($page, $allowed_pages))
{
if(is_file($page.".php"))
{
include ($page.".php");
}
}
}
else
include ("home.php");
?>
Code: Zaznacz cały
/**
* LavaLamp - A menu plugin for jQuery with cool hover effects.
* @requires jQuery v1.1.3.1 or above
*
* http://gmarwaha.com/blog/?p=7
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.1.0
*/
/**
* Creates a menu with an unordered list of menu-items. You can either use the CSS that comes with the plugin, or write your own styles
* to create a personalized effect
*
* The HTML markup used to build the menu can be as simple as...
*
* <ul class="lavaLamp">
* <li><a href="#">Home</a></li>
* <li><a href="#">Plant a tree</a></li>
* <li><a href="#">Travel</a></li>
* <li><a href="#">Ride an elephant</a></li>
* </ul>
*
* Once you have included the style sheet that comes with the plugin, you will have to include
* a reference to jquery library, easing plugin(optional) and the LavaLamp(this) plugin.
*
* Use the following snippet to initialize the menu.
* $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700}) });
*
* Thats it. Now you should have a working lavalamp menu.
*
* @param an options object - You can specify all the options shown below as an options object param.
*
* @option fx - default is "linear"
* @example
* $(".lavaLamp").lavaLamp({ fx: "backout" });
* @desc Creates a menu with "backout" easing effect. You need to include the easing plugin for this to work.
*
* @option speed - default is 500 ms
* @example
* $(".lavaLamp").lavaLamp({ speed: 500 });
* @desc Creates a menu with an animation speed of 500 ms.
*
* @option click - no defaults
* @example
* $(".lavaLamp").lavaLamp({ click: function(event, menuItem) { return false; } });
* @desc You can supply a callback to be executed when the menu item is clicked.
* The event object and the menu-item that was clicked will be passed in as arguments.
*/
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
Code: Zaznacz cały
/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};