Div inhoud veranderen + fade?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Dalando De Zuil

Dalando De Zuil

13/11/2010 19:32:46
Quote Anchor link
Is er een manier om de inhoud van een div te veranderen met een fade? Zo ja, moet ik dan een framework gebruiken? En welk framework raden jullie me dan aan?
 
PHP hulp

PHP hulp

05/11/2024 07:46:22
 
Vincent Huisman

Vincent Huisman

13/11/2010 19:35:11
Quote Anchor link
jquery
 
Wouter J

Wouter J

13/11/2010 19:39:49
Quote Anchor link
jQuery:
- FadeIn
- AJAX
 
Jasper hoi

jasper hoi

13/11/2010 19:40:16
Quote Anchor link
jquery:

$('#melding').fadeOut(1000); //uitfaden
$('#melding').html(data); //data uit de var data in melding zetten
$('#melding').delay(1500); //de div weer laten zien
Kan denk ik trouwens ook wel met callback, maar dit is lekker makkelijk:)
 
Dalando De Zuil

Dalando De Zuil

13/11/2010 19:51:54
Quote Anchor link
Jasper van Oeffel op 13/11/2010 19:40:16:
jquery:

$('#melding').fadeOut(1000); //uitfaden
$('#melding').html(data); //data uit de var data in melding zetten
$('#melding').delay(1500); //de div weer laten zien
Kan denk ik trouwens ook wel met callback, maar dit is lekker makkelijk:)


Oke, ik heb mijn voorbeeldje, ik ga aan de slag! :)



Toevoeging op 13/11/2010 20:00:57:

Hmm... Gaat niet zoals ik het helemaal wil:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
var newdata = 'De data is verandert!';

function newdatashow() {
    $('#melding').fadeOut(1000);
    $('#melding').html(newdata);
    $('#melding').fadeIn(1500);
}


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="content.js"></script>

<a href="javascript:;" onclick="newdatashow();">Change</a>

<div id="melding">
Verander de data!
</div>


Nu als ik op change klik, verandert eerst de data, dan fade ie out, dan fade ie weer in...?
Gewijzigd op 13/11/2010 19:52:14 door Dalando De Zuil
 
Th van

Th van

13/11/2010 20:13:24
Quote Anchor link
Trouwens zou ik de onclick in de html vervangen door de jquery variant:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('a').click(newdatashow());


En dat het niet werkt, komt denk ik omdat je geen callbacks gebruikt, maar ik ben niet zo bekent met jquery/js.
 
Dalando De Zuil

Dalando De Zuil

13/11/2010 20:36:19
Quote Anchor link
Theodoor van Donge op 13/11/2010 20:13:24:
Trouwens zou ik de onclick in de html vervangen door de jquery variant:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('a').click(newdatashow());


En dat het niet werkt, komt denk ik omdat je geen callbacks gebruikt, maar ik ben niet zo bekent met jquery/js.


Ik ben denk ik nog minder bekent met jquery, vandaar dat ik ben begonnen met het leren ervan :) Ik kan al een beetje overweg met scriptalous, maar dat terzijde. En hoe/wat/waar callbacks?
 
Th van

Th van

13/11/2010 20:42:30
Quote Anchor link
Hier op http://api.jquery.com/fadeOut/, kun je zowiezo wel wat vinden over callback.

Nu een klein code voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$('#melding').fadeOut(1000, function () {
     $('#melding').html(data)
)}


Hier is de function (){} de callback, maar als je er meer over wilt weten, ga dan gewoon even op de jquery site kijken, of naar de link hier boven.
 
Dalando De Zuil

Dalando De Zuil

13/11/2010 20:54:53
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
var newdata = 'De data is verandert!';

$('a').click(function () {
    $('#melding').fadeOut(1000, function () {
        $('#melding').html(newdata);
        $('#melding').fadeIn(1000);
    })
});


Nou doet ie al helemaal niks meer, ik snap er niks meer van!

Toevoeging op 13/11/2010 21:28:46:

Heey, het is me gelukt!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
var data = 'De data is verandert!';

function newdata() {
    $('#melding').fadeOut(1000, function () {
        $('#melding').html(data);
        $('#melding').fadeIn(1500);
    })
}


Joepie! :)
 
Vincent Huisman

Vincent Huisman

13/11/2010 21:57:51
Quote Anchor link
even een voorbeeld zoals het wel zou moeten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$('a').click(function () {
    $('#melding').fadeOut(1000);
    $('#melding').html(newdata);
    $('#melding').fadeIn(1000);
});


al zou ik je link dan een id/class meegeven en dan kan je $('a') veranderen door $('#linkid')/$('.linkclassname'), dan worden niet alle hrefs gebruikt om die functie in zijn gang te zetten
 
Dalando De Zuil

Dalando De Zuil

13/11/2010 22:02:32
Quote Anchor link
Help, nu probeer ik het met AJAX:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function getdata(file){
    $.get(file, function(data) {
        $('#content').fadeOut(800, function (data) {
            $('#content').html(data);
            $('#content').fadeIn(1500);
        })
    })
}


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<a href="javascript:;" onclick="getdata('new.html');">Change</a>

<div id="content">
Verander de data!
</div>


Maar dit werkt niet, de data blijft: 'verander de data!'??
 
Dalando De Zuil

Dalando De Zuil

14/11/2010 22:17:05
Quote Anchor link
Iemand?

Met dit krijg ik fade out, en dan niks!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function getdata(file){
    $('#content').fadeOut(800, function () {
        $.get(file, function(data) {
            $('#content').html(data);
            $('#content').fadeIn(1500);
        })
    })
}
Gewijzigd op 14/11/2010 22:20:51 door Dalando De Zuil
 
Dalando De Zuil

Dalando De Zuil

16/11/2010 11:44:22
Quote Anchor link
Niemand?
 
Jasper hoi

jasper hoi

16/11/2010 11:46:11
Quote Anchor link
heb je een live voorbeeldje voor ons??
Ziet er in mijn ogen goed uit zo.

-edit-
en wat nou als je het zo probeert:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function getdata(){
    $('#content').fadeOut(800, function () {
        $.get('completerurl.hier', function(data) {
            $('#content').html(data);
            $('#content').fadeIn(1500);
        })
    })
}
Gewijzigd op 16/11/2010 11:48:31 door jasper hoi
 
Dalando De Zuil

Dalando De Zuil

16/11/2010 11:48:22
 
Jasper hoi

jasper hoi

16/11/2010 11:49:56
Quote Anchor link
je bent vergeten om je functie erin te zetten, kan nu blijven klikken, maar hij kent de functie niet.
 
Dalando De Zuil

Dalando De Zuil

16/11/2010 11:50:22
Quote Anchor link
Ah *slap* Ik was de JS vergeten in de pagina te doen *dom*dom*dom*dom*dom*
 
Jasper hoi

jasper hoi

16/11/2010 11:51:50
Quote Anchor link
hahaha, foutje is menselijk hoor :)
 
Joakim Broden

Joakim Broden

16/11/2010 12:01:57
Quote Anchor link
Maar waarom nog steeds onclick gebruiken als je toch jquery gebruikt?
 
Dalando De Zuil

Dalando De Zuil

16/11/2010 12:07:00
Quote Anchor link
Anders zou ik dit moeten doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
$('a.contact').click(function () {
    $('#melding').fadeOut(1000);
    $('#melding').html(newdata);
    $('#melding').fadeIn(1000);
});
$('a.home').click(function () {
    $('#melding').fadeOut(1000);
    $('#melding').html(newdata);
    $('#melding').fadeIn(1000);
});


Maar als ik nu

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function getdata(file){
    $('#content').fadeOut(800, function () {
        $.get(file, function(data) {
            $('#content').html(data);
            $('#content').fadeIn(1500);
        })
    })
}


en

<a href="javascript:;" onclick="getdata('contact.php');">Contact</a>
<a href="javascript:;" onclick="getdata('home.php');">Home</a>

Bespaart toch code
 
Joakim Broden

Joakim Broden

16/11/2010 13:01:49
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
$('.getdata').click(function () {
    var str = $(this).attr('href');

        $('#melding').fadeOut(1000);
        $('#melding').html(str.substr(1));
        $('#melding').fadeIn(1000);
    return false;
});


<a href="#contact.php" class="getdata">Contact</a>

Zoiets kan ook :) Evenveel code en dan hoef je niet onclick te doen.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.