SlideUp
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(document.getElementById('projecten')).click(function () {
$("div#content, div#contenttext, div#menu").slideUp();
});
</script>
$(document.getElementById('projecten')).click(function () {
$("div#content, div#contenttext, div#menu").slideUp();
});
</script>
Wanneer op er de div projecten wordt geklikt, verdwijnen een aantal div's
Nu moet ik het volgende toevoegen, maar ik krijg het niet gevonden:
Na een bepaalde tijd, bijv 30 seconden, moet hij linken naar een pagina, de pagina projecten.
Wie kan me hiermee helpen?
Alvast bedankt
Wat bedoel je met linken?
Hij neemt de id van de div projecten
Probleem is dat hij dan al linkt voor het javascript is uitgevoerd
Code (php)
1
window.location.href = "http://www.phphulp.nl";
Code (php)
1
.slideUp().append("je link");
Toevoeging op 08/03/2011 22:17:51:
Hoe plaats ik dat
daar wordt echter niet gesproken over links
Toevoeging op 09/03/2011 09:47:49:
Nog suggesties?
Toevoeging op 09/03/2011 10:12:31:
Ik ben zelf bezig geweest en heb nu dit:
HTML
Code (php)
1
<li id="projecten"><a href="projecten.html">Projecten</a></li>
Javascript
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
$(document.getElementById('projecten')).click(function () {
$("div#content, div#contenttext, div#menu").slideUp();
window.setTimeout('runMoreCode()',5000);
$('a#projecten').click();
});
</script>
$(document.getElementById('projecten')).click(function () {
$("div#content, div#contenttext, div#menu").slideUp();
window.setTimeout('runMoreCode()',5000);
$('a#projecten').click();
});
</script>
maar hij linkt nog steeds meteen
Toon eens waar die <li> precies in zit.
Ik zal je een voorbeeld tonen van wat je kan doen.
------------------------
(Aanpassing)
Bon, dan maar zelf iets kiezen,
js.js (file aanmaken en in de zelfde directory zetten als 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// global variabelen
var mijn_interval = 1000;
var mijn_link;
$(document).ready(function() {
// bind een event aan een klik op elke link binnen de navigation class
$('ul.navigation li a').click(function (e) {
// e.target is het aangesproken element (in dit voorbeeld dus de link waarop geklikt is)
mijn_link = $(e.target).attr('href');
setTimeout('redirect_naar();', mijn_interval);
// slide up triggeren
$("div#content, div#contenttext, div#menu").slideUp();
// gewone werking van de link uitschakelen
// zo wordt dus de link niet uitgevoerd
return false;
});
});
function redirect_naar() {
window.location = mijn_link;
}
var mijn_interval = 1000;
var mijn_link;
$(document).ready(function() {
// bind een event aan een klik op elke link binnen de navigation class
$('ul.navigation li a').click(function (e) {
// e.target is het aangesproken element (in dit voorbeeld dus de link waarop geklikt is)
mijn_link = $(e.target).attr('href');
setTimeout('redirect_naar();', mijn_interval);
// slide up triggeren
$("div#content, div#contenttext, div#menu").slideUp();
// gewone werking van de link uitschakelen
// zo wordt dus de link niet uitgevoerd
return false;
});
});
function redirect_naar() {
window.location = mijn_link;
}
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
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
<!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> jQuery - SlideUp </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>#content, #contenttext, #menu {margin: 10px; border: 1px solid #999999;}</style>
</head>
<body>
<ul class="navigation">
<li><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="hello.html">Hello</a></li>
<li><a href="world.html">World</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum orci ac nibh volutpat sit amet imperdiet dolor euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus odio, fermentum vitae aliquam nec, pellentesque non orci. Nullam pulvinar nisl sit amet sem convallis adipiscing. Ut urna nunc, ultrices ornare elementum vel, sollicitudin at est. </div>
<div id="contenttext">
Mauris vel leo libero. Suspendisse sit amet risus eget ligula cursus vehicula in in quam. Nunc nisi felis, imperdiet vel dictum sed, porttitor eget arcu. Sed iaculis vehicula convallis. Integer lobortis, nisi nec placerat eleifend, quam nisl posuere libero, viverra pharetra lacus justo id lacus. Phasellus quis augue ipsum. Etiam nec massa ut dui tempus sodales id ac dui. Vestibulum eget sem in nisl aliquet interdum a sed urna.
</div>
<div id="menu">
<div>bla</div><div>bla</div><div>bla</div><div>bla</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> jQuery - SlideUp </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<style>#content, #contenttext, #menu {margin: 10px; border: 1px solid #999999;}</style>
</head>
<body>
<ul class="navigation">
<li><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="hello.html">Hello</a></li>
<li><a href="world.html">World</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum orci ac nibh volutpat sit amet imperdiet dolor euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus odio, fermentum vitae aliquam nec, pellentesque non orci. Nullam pulvinar nisl sit amet sem convallis adipiscing. Ut urna nunc, ultrices ornare elementum vel, sollicitudin at est. </div>
<div id="contenttext">
Mauris vel leo libero. Suspendisse sit amet risus eget ligula cursus vehicula in in quam. Nunc nisi felis, imperdiet vel dictum sed, porttitor eget arcu. Sed iaculis vehicula convallis. Integer lobortis, nisi nec placerat eleifend, quam nisl posuere libero, viverra pharetra lacus justo id lacus. Phasellus quis augue ipsum. Etiam nec massa ut dui tempus sodales id ac dui. Vestibulum eget sem in nisl aliquet interdum a sed urna.
</div>
<div id="menu">
<div>bla</div><div>bla</div><div>bla</div><div>bla</div>
</div>
</body>
</html>
Is dit (min of meer) het effect dat je zoekt?
----------------------------
Klein woordje over jQuery
- (dit is al gezegd) Dit:
document.getElementById('projecten')
heb je niet meer nodig in jQuery. 1 van de vele dingen die jQuery voor je doet: je kan elementen aanspreken zoals je css aanspreekt.
Als je "projecten" een kleurtje zou willen geven met css, zou je dat zo doen:
#projecten {color: #000000;}
Precies de zelfde "#projecten" kan je ook met jQuery meegeven.
dat wordt dan
$("#projecten")
Nog een voorbeeld: in mijn code zie je
css:
#content, #contenttext, #menu {margin: 10px; ...}
Wel, in jQuery zie je precies de zelfde selector
$('#content, #contenttext, #menu')...
Gewijzigd op 09/03/2011 16:09:04 door Kris Peeters
Onwijs bedank, het werkt!
Voorbeeld is te zien op deze plek
Nu zou ik alleen nog graag wat toevoegen,
Dat als een pagina geladen wordt, dat hij middels slidedown automatisch geladen wordt,
Ik dacht slideup in slidedown te veranderen en de click weg te halen maar dat werkt niet
Zou jij of iemand anders me daarmee kunnen helpen
Ik zal zien of zo-iets lukt.
Ik ben aan het testen, nota bene met jouw html.
Ik laat het verder weten (morgen, waarschijnlijk)
Ik ben (met enige assistentie) weer een eind verder, maar zit nog met een probleem
Ik zou alle bestanden moeten herschrijven naar ajax_index.html, ajax_info.html enzovoort.
In die bestanden staat dan enkel nog het informatieve.
Het bijbehorende javascript is dan
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
// global variabelen
var mijn_interval = 750;
var mijn_link;
var slide_time = 1000;
$(document).ready(function() {
// bind een event aan een klik op elke link binnen de navigation class
$('#menul').click(function (e) {
mijn_link = 'ajax_' + $(e.target).attr('href');
$.ajax({
type: "GET",
url: mijn_link,
success: function (new_content) {
var old_content = $('#contenttext').html();
var merged_content = '<div class="slideDown_slideUp_wrapper"><div class="slideDown_div">'+ new_content +'</div><div class="slideUp_div">'+ old_content +'</div></div>';
$('#contenttext').html(merged_content);
setTimeout('animate_change();', mijn_interval);
}
});
return false;
});
});
function animate_change() {
$('.slideDown_div').css('display', 'none');
$('.slideUp_div').slideUp(slide_time);
$('.slideDown_div').slideDown(slide_time, null, slideDown_done);
}
function slideDown_done() {
$('#contenttext').html($('.slideDown_div').html());
}
var mijn_interval = 750;
var mijn_link;
var slide_time = 1000;
$(document).ready(function() {
// bind een event aan een klik op elke link binnen de navigation class
$('#menul').click(function (e) {
mijn_link = 'ajax_' + $(e.target).attr('href');
$.ajax({
type: "GET",
url: mijn_link,
success: function (new_content) {
var old_content = $('#contenttext').html();
var merged_content = '<div class="slideDown_slideUp_wrapper"><div class="slideDown_div">'+ new_content +'</div><div class="slideUp_div">'+ old_content +'</div></div>';
$('#contenttext').html(merged_content);
setTimeout('animate_change();', mijn_interval);
}
});
return false;
});
});
function animate_change() {
$('.slideDown_div').css('display', 'none');
$('.slideUp_div').slideUp(slide_time);
$('.slideDown_div').slideDown(slide_time, null, slideDown_done);
}
function slideDown_done() {
$('#contenttext').html($('.slideDown_div').html());
}
maar ik kan niet volgen waar de rest van de html moet blijven.
Wie heeft een oplossing
Gewijzigd op 19/03/2011 09:04:59 door Sander A