Anchor zonder Refresh
ik ben met een site bezig waarop iemand op een button moet klikken die er voor zorgt dat er in de URL #q=(value van input q) moet bijkomen. Liefst met jQuery. Ik heb iets gevonden van document.href = "#q=" + $('#q').val().replace(/\s/g,"%20");, maar dat refreshte de pagina. Kan iemand me helpen?
Alvast bedankt,
Raf Van den Langenbergh
Voor zo ver ik weet is het namelijk niet mogelijk om met jquery iets in de url neer te zetten zonder te refreshen.
Ik ga waarschijnlijk gewoon de gegevens naar een PHP script sturen die het in een $_SESSION var zet. Toch bedankt :)
Dat ging juist wat ik ging doen =)
De url aanpassen na het # teken, zorgt er niet voor dat de pagina wordt herladen.
Je kan gewoon iets doen als window.location = '#' + waarde .
Wat ik je wel onmiddellijk zou aanraden: veergeet de structuur die lijkt op #p=fotoalbum&q=15& ...
Gebruik direct een soort mod rewtite systeem, bv. #fotoalbum/15.
Je kan trouwens zorgen voor een site waar je url's hebt met informatie na de #. Volledig bookmarkable.
Wat je moet doen:
- Maak een functie die zichzelf aanroept, met een timeout. Een interval van bv. 20ms, hoewel, wat trager mag ook.
- In die functie peil je naar de hash. Dat gaat met window.location.hash . Met die hash kan je dan doen wat je moet doen.
Het is me nog niet volledig duidelijk wat je precies wil bereiken, maar ik zal proberen iets van voorbeeld te tonen.
Ik heb ook ooit iets leuks gemaakt wat ook werkt met een history en anchors. Kijk maar eens op crispijnverkade.nl
Het idee is leuk, maar sorry wat een onoverzichtelijke bende :)
Ik ben bij de essentie gebleven en heb me dus niet te veel aangetrokken van details.
Ik heb het vrij vlug geschreven; het is dus waarschijnlijk niet een "afgewerkt product".
Te doen, als je dit wil namaken:
- maak een map images met daarin "empty.gif" (transparante, kleine image) "image001.jpg", "image002.jpg", "image003.jpg", "image004.jpg", "image005.jpg"
- jquery.js downloaden; index.php, js.js en style.css maken
js.js
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// just for the example I put this data in a global var. Usually you
// would get this data from a db or xml ...
var images = Array(
'images/image001.jpg',
'images/image002.jpg',
'images/image003.jpg',
'images/image004.jpg',
'images/image005.jpg'
);
$(document).ready(function (e) {
// TO DO: initiate function
m_navigation.init(hash_has_changed);
});
function hash_has_changed (vars) {
var action = vars[0];
switch (action) {
case 'photo':
var image_index = Number(vars[1]);
var src = images[image_index];
$('#photo img').attr('src', src);
break;
case 'foo':
// do something else here
break;
}
}
////////////////////////////////////////////////////////////////////////
/**
* Navigation class
* We are using a lot of callbacks and timouts.
* The 'this' object can be ambiguous. That is why we use the global
* variable m_navigation in our functions.
* A bit quick & dirty, but it works.
*/
// global var.
var m_navigation = new navigation();
/**
* constructor
*/
function navigation () {
this.timer = null;
this.interval = 20; // feel free to adapt
}
/**
* initialize the object. It is a good idea to call this function in $(document).ready();
*/
navigation.prototype.init = function (callback) {
if (typeof(callback) == 'function') {
m_navigation.callback = callback;
m_navigation.fathom();
}
else {
return false;
}
return true;
}
/**
* Heart of the class. When ever the url changes after the # symbol, the user-defined (the scripter) callback is called.
* That callback gets a parameter containing an array of (in php terms $_GET) variables.
* It is up to that callback to do what ever the scripter wants to.
*/
navigation.prototype.fathom = function () {
var hash = window.location.hash;
if (m_navigation.hash != hash) {
// new situation. Let's analyze the variables.
m_navigation.hash = hash;
var vars = hash.split('/');
result = Array();
for (var i=0; i<vars.length; i++) {
if (vars[i] == "") {
break;
}
if (i == 0) {
// remove the # character
while (vars[i].substr(0,1) == "#") {
vars[i] = vars[i].substr(1);
}
}
result[result.length] = vars[i];
}
m_navigation.callback(result);
}
m_navigation.timer = setTimeout('m_navigation.fathom()', m_navigation.interval);
}
////////////////////////////////////////////////////////////////////////
// would get this data from a db or xml ...
var images = Array(
'images/image001.jpg',
'images/image002.jpg',
'images/image003.jpg',
'images/image004.jpg',
'images/image005.jpg'
);
$(document).ready(function (e) {
// TO DO: initiate function
m_navigation.init(hash_has_changed);
});
function hash_has_changed (vars) {
var action = vars[0];
switch (action) {
case 'photo':
var image_index = Number(vars[1]);
var src = images[image_index];
$('#photo img').attr('src', src);
break;
case 'foo':
// do something else here
break;
}
}
////////////////////////////////////////////////////////////////////////
/**
* Navigation class
* We are using a lot of callbacks and timouts.
* The 'this' object can be ambiguous. That is why we use the global
* variable m_navigation in our functions.
* A bit quick & dirty, but it works.
*/
// global var.
var m_navigation = new navigation();
/**
* constructor
*/
function navigation () {
this.timer = null;
this.interval = 20; // feel free to adapt
}
/**
* initialize the object. It is a good idea to call this function in $(document).ready();
*/
navigation.prototype.init = function (callback) {
if (typeof(callback) == 'function') {
m_navigation.callback = callback;
m_navigation.fathom();
}
else {
return false;
}
return true;
}
/**
* Heart of the class. When ever the url changes after the # symbol, the user-defined (the scripter) callback is called.
* That callback gets a parameter containing an array of (in php terms $_GET) variables.
* It is up to that callback to do what ever the scripter wants to.
*/
navigation.prototype.fathom = function () {
var hash = window.location.hash;
if (m_navigation.hash != hash) {
// new situation. Let's analyze the variables.
m_navigation.hash = hash;
var vars = hash.split('/');
result = Array();
for (var i=0; i<vars.length; i++) {
if (vars[i] == "") {
break;
}
if (i == 0) {
// remove the # character
while (vars[i].substr(0,1) == "#") {
vars[i] = vars[i].substr(1);
}
}
result[result.length] = vars[i];
}
m_navigation.callback(result);
}
m_navigation.timer = setTimeout('m_navigation.fathom()', m_navigation.interval);
}
////////////////////////////////////////////////////////////////////////
index.php
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Bookmarkable navigation - jQuery </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery.js"></script>
<script src="js.js"></script>
</head>
<body>
<div id="page_container">
<div id="thumbs">
<div class="thumb"><a href="#photo/0"><img src="images/image001.jpg"/></a></div>
<div class="thumb"><a href="#photo/1"><img src="images/image002.jpg"/></a></div>
<div class="thumb"><a href="#photo/2"><img src="images/image003.jpg"/></a></div>
<div class="thumb"><a href="#photo/3"><img src="images/image004.jpg"/></a></div>
<div class="thumb"><a href="#photo/4"><img src="images/image005.jpg"/></a></div>
<div class="clear"></div>
</div>
<div id="photo"><img src="images/empty.gif"/></div>
</div>
</body>
</html>
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Bookmarkable navigation - jQuery </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery.js"></script>
<script src="js.js"></script>
</head>
<body>
<div id="page_container">
<div id="thumbs">
<div class="thumb"><a href="#photo/0"><img src="images/image001.jpg"/></a></div>
<div class="thumb"><a href="#photo/1"><img src="images/image002.jpg"/></a></div>
<div class="thumb"><a href="#photo/2"><img src="images/image003.jpg"/></a></div>
<div class="thumb"><a href="#photo/3"><img src="images/image004.jpg"/></a></div>
<div class="thumb"><a href="#photo/4"><img src="images/image005.jpg"/></a></div>
<div class="clear"></div>
</div>
<div id="photo"><img src="images/empty.gif"/></div>
</div>
</body>
</html>
style.css
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
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
img {
border: 0;
}
.clear{
clear: both;
}
#thumbs .thumb{
float: left;
}
.thumb {
width: 100px;
height: 100px;
margin: 10px;
background-color: #000;
overflow: hidden;
}
.thumb img{
width: 100%;
}
#photo {
height: 400px;
}
#photo img {
height: 100%;
}
border: 0;
}
.clear{
clear: both;
}
#thumbs .thumb{
float: left;
}
.thumb {
width: 100px;
height: 100px;
margin: 10px;
background-color: #000;
overflow: hidden;
}
.thumb img{
width: 100%;
}
#photo {
height: 400px;
}
#photo img {
height: 100%;
}
Als je hier zelf verder mee wil:
- Zie dat je m_navigation initialiseert bij $(document).ready()
- maak een functie, zoals hash_has_changed, alwaar je doet wat je wil doen.
Gewijzigd op 02/12/2010 12:30:36 door Kris Peeters