Tijden veranderen
javascript verstoort mijn site
Ik wil zeggen dat ik je code op de pagina zet:
<script type="text/javascript">
$("#header").css("background-image":"");
</script>
Maar wanneer ik bijvoorbeeld van vrienden.php ga naar views.php ik dezelfde achtergrond in views.php blijf zien en die gewoon wit zou moeten zijn. Het gaat om de achtergrond image. Daarom heb ik in je code hierboven background-color vervangen door background-image..
mvg,
Kurt
Gewijzigd op 25/02/2012 12:09:21 door kurtik watson
Dus dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$("#header").css("background-image":"");
</script>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
$("#header").css("background-image":"");
</script>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
Moet in elk geval dit worden:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$("#header").css("background-image":"");
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$("#header").css("background-image":"");
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
Maar dan vrees ik dat je er nog niet bent. Nu zal de header image gewoon verdwijnen bij iedere keer dat je op een link klinkt die een nieuwe pagina in het target div laad. Dus ook als je terug zou gaan naar de pagina waar de header wel nodig is.
mvg
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
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
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
session_start();
?>
<div id="target"><img src="afbeeldingen/lounge4.jpg"></div>
<?php
}
else{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<?php session_start(); ?>
<title>bekijken</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#header {
<?php
include('databas.php');
$query = "SELECT achtergrond, acht, background
FROM yapa_members, yapa_achtergrond WHERE naam='" . $_SESSION['username'] . "' AND achtergrond = acht ";
$result=mysql_query($query);
$rows=mysql_fetch_array($result); ?>
background-image:url(<?php echo 'achtergronden/' . $rows['background'] ?>);
background-color:#FFFFFF;
}
?>
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
session_start();
?>
<div id="target"><img src="afbeeldingen/lounge4.jpg"></div>
<?php
}
else{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<?php session_start(); ?>
<title>bekijken</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#header {
<?php
include('databas.php');
$query = "SELECT achtergrond, acht, background
FROM yapa_members, yapa_achtergrond WHERE naam='" . $_SESSION['username'] . "' AND achtergrond = acht ";
$result=mysql_query($query);
$rows=mysql_fetch_array($result); ?>
background-image:url(<?php echo 'achtergronden/' . $rows['background'] ?>);
background-color:#FFFFFF;
}
?>
</style>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$("#header").css("background-image":"");
$('#target5').load($(this).attr('href'), function() {
});
});
});
</script>
</head>
<body>
<div id='left'>
<a href='' title='Balletto'><img src='imgs1/pre1.jpg' /></a>
<img src='imgs1/pre2.jpg' title='Pesca' />
</div>
<ul id="thicktabs">
<li><a class="laad_pagina" href="views.php">Bekijken</a></li>
<li><a class="laad_pagina" href="vrienden.php">vrienden</a></li>
<li><a href="bekijken3.php">Bekijken</a></li>
<li><a href="wijzigen.php">Wijzigen</a></li>
<li><a href="upload4.php">Uploaden</a></li>
</ul>
<div id="target"><img src="afbeeldingen/lounge4.jpg"></div>
<a class="laad_pagina" href="vrienden.php">Laad pagina 1</a>
</body>
</html>
Code (php)
1
2
3
2
3
<?php
}
?>
}
?>
Want hij laadt dus wel iets, maar niet het goede begrijp ik.
mvg
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
?>
<div id="target5">tekst</div>
{
else
{
volledige pagina
}
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
?>
<div id="target5">tekst</div>
{
else
{
volledige pagina
}
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target5').load($(this).attr('href'), function() {
});
$("#header").css("background-image":"");
});
});
</script>
Gewijzigd op 25/02/2012 14:53:17 door kurtik watson
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
alert("0");
$('#target5').load($(this).attr('href'), function() {
alert("pagina geladen");
});
alert("1");
$("#header").css("background-image":"");
alert("2");
});
});
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
alert("0");
$('#target5').load($(this).attr('href'), function() {
alert("pagina geladen");
});
alert("1");
$("#header").css("background-image":"");
alert("2");
});
});
De pagina geladen alert zou je als laatste moeten zien, omdat die in een callback staat. Welk krijg je nu wel te zien en welke niet?
ik heb jouw laatste js code hierboven op de twee pagina's gezet, als vervanging van het vorige.
mvg
Alerts kan je gebruiken als de beep vroeger (de "poor man's debugger"). Met andere woorden, om te testen of elke regel wel wordt uitgevoerd plaats je een alert na elke regel met verschillende teksten zodat je weet waar de code misgaat en er iets niet meer wordt uitgevoerd. Dat is wat ik hierboven heb gedaan en als je nu op een link klikt zou je achter elkaar alerts moeten krijgen in je browser. Als je nog wel de 1 te zien krijgt in een alert, maar niet de 2 dan weet je dat die regel om de header aan te passen dus niet klopt.
mvg