HTML background+menu laten staan
Ik ben voor een klant bezig met een website in de richting van kunst. De website staat momenteel nog niet zo veel op. Maar de achtergrond bestaat uit een afbeelding, en er komt een menu bovenaan de pagina. Maar de klant wil graag dat enkel de tekst verspringt als je op een link klikt. Dus kortom, als je op een knop klikt, dan is het de bedoeling dat de achtergrond en menu niet eerst wit worden en daarna terugkomen. Bijvoorbeeld bij http://web-bart.nl is dat wel, maar op www.ilovemats.nlwww.ilovemats.nl zie je wat ik bedoel.
ilovemats doet het aan de hand van javascript geloof ik, maar excuses als dat niet zo is, ik ben niet bekend met javascript en kan het dus ook niet lezen. Maar gezien ik geen javascript ken, is de vraag, kan dat ook met html/css/php gedaan worden? Zoja, op wat voor een manier? Ik had gekeken voor frames, maar dat schijnt in de oudere browsers niet meer te werken, en de website moet natuurlijk wel compactable met alle browsers zijn...
Vriendelijke groeten,
B. Roelofs
Hij wil dus eigenlijk geen refresh. Dan moet je gaan kijken naar OF een iframe (oud, doe maar niet) of AJAX (= javascript opent PHP-pagina).
Wat wil hij precies.
Frames zijn oud en tegenwoordig eigenlijk NOT-done.
Maar oude browsers (en nieuwe) ondersteunen het echt wel.
IE2 misschien nog niet.... maar hé, toen zat Chrome nog op -200 en Firefox op -50.
Of zijn er toch andere mogelijkheden?
B. Roelofs
Het is een website wat over kunst gaat, dus geen zakelijke doeleinde enzo. Ikzelf heb geen idee waarom ze niet wil refreshen, maar klant is koning denk ik altijd... Als ik wist dat dit met ajax moet had ik het zoiso al afgewezen... Alhoewel ik er dan maar meteen een hele ajax tutorial tegenaan ga gooien (nooit verkeerd)...
Iemand enig idee wat een goede tutorial is om bovenstaand 'probleem' uit te voeren?
B. Roelofs
linkje zie voorbeeld
Een linkje hoe het moet worden: http://nikehautvast.nl/prev.jpg
De afbeelding kan dus ook tekst worden. Maar dat stuk is het enige wat op mag refreshen volgens de klant...
B. Roelofs
if so.. hoezo zou een afbeelding alleen moeten refreshen? dat is toch geen content wat steeds veranderd?
B. Roelofs
Niet het beste voorbeeld. Maar als je dus op contact klikt met de title contact.php, probeert die dus contact.php te openen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title> jQuery load </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<ul class="jquery-load">
<li title="contact.php">Contact</li>
</ul>
<div class="result">
</div>
<script>
$(document).ready(function() {
// All items in .nav uitlezen:
$('.jquery-load li').each(function() {
// Wanneer er op een link geklikt wordt:
$(this).click(function() {
$('.result').load($(this).attr('title'));
});
});
});
</script>
</body>
</html>
<html>
<head>
<title> jQuery load </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<ul class="jquery-load">
<li title="contact.php">Contact</li>
</ul>
<div class="result">
</div>
<script>
$(document).ready(function() {
// All items in .nav uitlezen:
$('.jquery-load li').each(function() {
// Wanneer er op een link geklikt wordt:
$(this).click(function() {
$('.result').load($(this).attr('title'));
});
});
});
</script>
</body>
</html>
Ik heb 2-3 uur gegoogled naar een tutorial voor .load(). Maar ik ben er niet veel wijzer uit geworden... Ik heb het script gedownload:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
Dit was overigens de duidelijkste tutorial die ik tegenkwam
En die ga ik morgen aanpassen naar de website die het moet worden... Bedankt voor je hulp in ieder geval, allemaal! Eventuele andere mogelijkheden zijn nog altijd welkom, mijn mail blijft waarschuwen als er nieuwe post zijn.
B. Roelofs
Gewijzigd op 16/03/2012 22:36:20 door Bart Roelofs