Zdravím, snažím sa vytvoriť stránku podľa toho čo som si zaumienil, ale narazil som na problém, ako zabezpečiť načítavanie stránok po kliknutí na odkaz a pritom uchovať rovnakú funkčnosť stránky.
pričom mám tri rôzne talbety, pretože dva tablety ešte obsahujú osobitne tlačidlá pre ďalšie podkategórie. Mám to urobené tak, že tablet môžem spodným tlačidlom vypnutia zavrieť/zasunúť, ak kliknem na odkaz kde je tablet iný (s tlačidlami alebo bez), tak sa najprv aktuálny schová a v zápätí sa ukáže nový, ak kliknem na tlačidlo, kde je tablet rovnaký ako aktuálny, tak sa s aktuálnym neudeje nič (zmeniť by sa mal iba obsah v bielom priestore).
A čo chcem dosiahnuť? Text, obrázky... čiže obsah stránky sa má zobrazovať v bielom priestore tabletu po kliknutí na jednotlivé tlačidlá (v kóde oblasť <div id="pozadie"> pre konkrétny tablet). Ako to urobiť tak, aby mi index.php ostal načítaný bezozmeny, čiže aby sa všetko dialo tak ako má a pritom aby sa do bieleho priestoru načítal obsah požadovanej stránky? Našiel som nejaký návod na include, niečo takéto:
ale ak som to dobre pochopil, vždy to nanovo načíta aj samotný index.php, takže tablet zmizne.
No akosi sa mi nepodarilo to rozbehať ani s jednoduchou stránkou a neviem čo má obsahovať napr. page1.php. Iba kód typu <p>nieco</p> alebo aj <head> a <body>?
<html>
<head>
<title>Naše profily</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="jquery-ui.min.js" type="text/javascript" ></script>
</head>
<body>
<div id="zaklad">
<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>
<div class="tabletc">
<div class="vypinac"></div>
<div id="pozadie">
</div>
</div>
<div class="tabletb">
<div class="vypinac"></div>
<div id="tabtlac"><a href="#" class="tabburk"></a><a href="#" class="tabhil"></a><a href="#" class="tablest"></a></div>
<div id="pozadie">
</div>
</div>
<div class="tablet">
<div class="vypinac"></div>
<div id="tabtlac"><a href="#" class="tabroz"></a><a href="#" class="tabburk"></a><a href="#" class="tabhil"></a><a href="#" class="tablest"></a></div>
<div id="pozadie">
</div>
</div>
</div>
<script>
var x
var y
var z
$(document).ready(function() {
$('.video,.diskusia,.onas,.zbrane').click(function () {
if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000);
if (y) $('.tablet').hide("slide", { direction: "up" }, 1000),
x = true;
if (x) $('.tabletc').delay(1000).show("slide", { direction: "up" }, 1000),
x = false, y = false, z = true;
if (z);
else
$('.tabletc').show("slide", { direction: "up" }, 1000),
z = true;
});
});
$(document).ready(function() {
$('.fotky').click(function () {
if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000);
if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
x = true;
if (x) $('.tablet').delay(1000).show("slide", { direction: "up" }, 1000),
x = false, z = false, y = true;
if (y);
else
$('.tablet').show("slide", { direction: "up" }, 1000),
y = true;
});
});
$(document).ready(function() {
$('.akcie').click(function () {
if (y) $('.tablet').hide("slide", { direction: "up" }, 1000);
if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
y = true;
if (y) $('.tabletb').delay(1000).show("slide", { direction: "up" }, 1000),
y = false, z = false, x = true;
if (x);
else
$('.tabletb').show("slide", { direction: "up" }, 1000),
x = true;
});
});
$(document).ready(function() {
$('.vypinac').click(function () {
if (y) $('.tablet').hide("slide", { direction: "up" }, 1000),
y = false;
if (x) $('.tabletb').hide("slide", { direction: "up" }, 1000),
x = false;
if (z) $('.tabletc').hide("slide", { direction: "up" }, 1000),
z = false;
});
});
$(document).ready(function() {
$('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(1000, 1);
}, function () {
$span.stop().fadeTo(1000, 0);
});
});
});
</script>
</body>
</html>
