Een tijdje terug heb ik hier op het forum gevraagd hoe ik het beste een website kon maken waar enkel de content refreshed, en niet de gehele pagina. Daar kreeg ik de .load van Ajax aangeraden. Ik ben hiermee verder gegaan, maar nu loop ik tegen een probleem aan. Ik heb al om hulp gevraagd in mijn omgeving, en google hielp mij ook niet verder...
Wellicht jullie wel.
de website is: nikehautvastpuntnl/prev
Alles werkt zoals het hoort (bij iedereen die gecheckt heeft, behalve 1). Maar als je naar de pagina schilderwerk of naar de pagina videowerk gaat, dan zie je dat het niet werkt zoals het moet werken... Videowerk geeft géén content weer, en schilderwerk geeft teveel content weer...
Het is de bedoeling dat het menu 'Tekst 1 2 3 4 5 6' ook een menu word, maar die moet dan enkel op de pagina schilderwerk worden weergegeven. Daarom heb ik het op de onderstaande manier gedaan...
Hopelijk kunnen jullie me vertellen waarom de links niet werken (Tekst 1 2 3 etc), en waarom er geen content op videowerk en teveel content op schilderwerk staat... Want ik kom er niet meer uit...
De codes:
index.html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Under construction</title>
</head>
<body>
<div id="container">
<div id="menu">
<table>
<tr><td id="left_menu_naam" class="left_menu">NIKÉ HAUTVAST</td><td id="right_menu_naam" class="right_menu">GALERIE</td></tr>
<tr><td id="home" class="left_menu">Home</td><td id="schilderwerk" class="right_menu">Schilderwerk</td></tr>
<tr><td id="intro" class="left_menu">Intro</td><td id="videowerk" class="right_menu">Videowerk</td></tr>
<tr><td id="exposities" class="left_menu">Exposities</td><td id="videoinstallaties" class="right_menu">Videoinstallaties </td></tr>
<tr><td id="cv" class="left_menu">Cv</td><td id="overigwerk" class="right_menu">Overig werk</td></tr>
<tr><td id="links" class="left_menu">Links</td></tr>
<tr><td id="contact" class="left_menu">Contact</td></tr>
</table>
</div><!-- menu -->
<div id="content">
<h2>Home</h2>
*content even weggehaald om dit gedeelte in te korten*
</div><!-- content -->
</div><!-- container -->
</body>
</html>
De menu.js:
$(document).ready(function(){
//References
var sections = $("#menu td");
var loading = $("#loading");
var content = $("#content");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "home":
content.slideUp();
content.load("sections.html #section_home", hideLoading);
content.slideDown();
break;
case "intro":
content.slideUp();
content.load("sections.html #section_intro", hideLoading);
content.slideDown();
break;
case "exposities":
content.slideUp();
content.load("sections.html #section_exposities", hideLoading);
content.slideDown();
break;
case "cv":
content.slideUp();
content.load("sections.html #section_cv", hideLoading);
content.slideDown();
break;
case "links":
content.slideUp();
content.load("sections.html #section_links", hideLoading);
content.slideDown();
break;
case "contact":
content.slideUp();
content.load("sections.html #section_contact", hideLoading);
content.slideDown();
break;
case "schilderwerk":
content.slideUp();
content.load("sections.html #section_schilderwerk", hideLoading);
content.slideDown();
break;
case "videowerk":
content.slideUp();
content.load("sections.html #videowerk", hideLoading);
content.slideDown();
break;
case "videoinstallaties":
content.slideUp();
content.load("sections.html #section_videoinstallaties", hideLoading);
content.slideDown();
break;
case "overigwerk":
content.slideUp();
content.load("sections.html #section_overigwerk", hideLoading);
content.slideDown();
break;
case "schilderwerk1":
content.slideUp();
content.load("sections.html #section_schilderwerk1", hideLoading);
content.slideDown();
break;
case "schilderwerk2":
content.slideUp();
content.load("sections.html #section_schilderwerk2", hideLoading);
content.slideDown();
break;
case "schilderwerk3":
content.slideUp();
content.load("sections.html #section_schilderwerk3", hideLoading);
content.slideDown();
break;
case "schilderwerk4":
content.slideUp();
content.load("sections.html #section_schilderwerk4", hideLoading);
content.slideDown();
break;
case "schilderwerk5":
content.slideUp();
content.load("sections.html #section_schilderwerk5", hideLoading);
content.slideDown();
break;
case "schilderwerk6":
content.slideUp();
content.load("sections.html #section_schilderwerk6", hideLoading);
content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});De sections.html:
<div id="section_home">
<h2>Home</h2>
Welkom op de website van Niké Hautvast! Klik op een linkje hierboven om meer te zien!
</div>
<div id="section_intro">
<h2>Intro</h2>
Ik werk vanuit de overtuiging van in hokjes denken. De kunst is dat je van hokjes kunt blijven wisselen, zodat je met telkens een nieuwe blik naar de dingen, de mensen en het leven kunt kijken. Hiertoe wil ik je verleiden en de vorm van mijn werk maakt dat duidelijk. Er is altijd sprake van meerdere gezichtspunten, soms door de verschillende lagen, soms door waar je fysiek staat en soms door de tijd die verstrijkt. Je kiest zelf waar je je op concentreert.
Mijn werk vertelt niet een eenduidig verhaal, maar roept een sfeer op, laat de verstilde kant zien in de onderlaag, de onderstroom, gekaderd in een strakke ruimte. <br /><br />
</div>
<div id="section_exposities">
<h2>Exposities</h2>
<p>
'50 koppen – 50 kunstenaars'<br />
Villa Lila | Nijmegen, 12 juni t/m 26 juli 2005<br />
50 kunstenaars uit binnen- en buitenland portretteren 50 lokale en landelijke kopstukken uit homobeweging en politiek.<br /><br />
'Vrijheid/Bevrijding 2005'<br />
Villa Lila | Nijmegen, 10 april t/m 8 juni 2005<br />
Groepsexpositie<br /><br />
Afstudeerexpositie <br />
HKA |Arnhem, juni 2001<br />
Videoperfomances<br /><br />
</div>
<div id="section_cv">
<h2>Cv</h2>
Niké Hautvast<br />
Geboren: 30 april 1975 <br />
Geboorteplaats: Maastricht<br /><br />
Ik woon in Nijmegen, samen met Karin en onze dochter Juna.<br />
Ik heb een atelier in Klein Berlijn aan de Waalbanddijk 22, 6541 AJ in Nijmegen. <br /><br />
Opleiding :<br />
Docentenopleiding wiskunde 2de graads<br />
HU | 2005 – 2009<br /><br />
Docentenopleiding tekenen 1ste graads<br />
HKA | 1997 – 2003<br /><br />
Havo<br />
Stedelijke Scholengemeenschap Maastricht | 1987 - 1993<br /><br />
</div>
<div id="section_links">
<h2>Links</h2>
<a href="www.kleinberlijn.nl">www.kleinberlijn.nl</a>
<br /><br />
</div>
<div id="section_contact">
<h2>Contact</h2>
<table>
<tr><td>Werkadres:</td> <td>Klein Berlijn</td></tr>
<tr><td></td> <td>Waalbanddijk 22</td></tr>
<tr><td></td> <td>6541 AJ Nijmegen</td></tr>
<tr><td>e-mailadres:</td> <td>[email protected]</td></tr>
<tr><td>telefoonnummer:</td> <td>(+31) 06 27443952</td></tr>
<tr><td>website:</td> <td>www.nikehautvast.nl</td></tr>
</table>
<br /><br />
</div>
<div id="section_schilderwerk">
<h2>Schilderwerk</h2>
De vereenvoudigde vormen en lijnen op de voorgrond vormen een contrast met de verstilde vervaagde achtergrond en geven de suggestie van ruimte. Diepte en wisseling van perspectief komt in mijn werk terug. Laag voor laag. Waar leg je je focus?
<div id="menu">
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
<br /><br />
</div>
<div id="section_videowerk">
<h2>Videowerk</h2>
Mijn vroegere videowerken laten een donkere kant zien in de vorm van performances. Er is geen gedachte, geen geluid. Er is sprake van een beklemmende sfeer , verstilling. We zien een intiem moment en tevens de donkere, verborgen kant van een individu. <br />
Mijn huidige werk is in ontwikkeling. Herin wil de suggestie van ruimte, zoals gecreëerd in mijn schilderwerk, verwerken.
<br /><br />
</div>
<div id="section_videoinstallaties">
<h2>Videoinstallaties </h2>
In mijn videoinstallaties komt de wisseling van perspectief en een actieve rol van de kijker terug. Waar je staat bepaalt wat je ziet. Niemand ziet tegelijk hetzelfde. In hokjes denken en daar weer buiten gaan is wat ik wil bewerkstelligen; tunnelvisie en de ontsnapping daaraan. Misschien moet je een tweede keer kijken, een derde keer en dan een oordeel vormen. En daar dan weer vanaf stappen.
<br /><br />
</div>
<div id="section_overigwerk">
<h2>Overig werk</h2>
Deze pagina volgt later nog.
<br /><br />
</div>
<div id="section_schilderwerk1">
<img src="images/schilderwerk1.jpg" alt="Schilderij door Niké Hauvast"/>
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
<div id="section_schilderwerk2">
<img src="images/schiderwerk2.jpg" alt="Schilderij door Niké Hautvast" />
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
<div id="section_schilderwerk3">
<img src="images/schilderwerk3.jpg" alt="Schilderij door Niké Hautvast" />
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
<div id="section_schilderwerk4">
<img src="images/schilderwerk4.jpg" alt="schilderij door Niké Hautvast" />
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
<div id="section_schilderwerk5">
<img src="images/tekening1.jpg" alt="tekening door Niké Hautvast"/>
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
<div id="section_schilderwerk6">
<img src="images/tekening2.jpg" alt="tekening door Niké Hauvast"/>
<table>
<tr>
<td id="schilderwerk" class="submenu">Tekst</td>
<td id="schilderwerk1" class="submenu">1</td>
<td id="schilderwerk2" class="submenu">2</td>
<td id="schilderwerk3" class="submenu">3</td>
<td id="schilderwerk4" class="submenu">4</td>
<td id="schilderwerk5" class="submenu">5</td>
<td id="schilderwerk6" class="submenu">6</td>
</tr>
</table>
</div>
Sorry voor het lange bericht...
Vriendelijke groeten,
B. Roelofs
