11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Déclenchement par setTimeout ou delay

Bonjour à tous, et j'espère ne pas me tromper de rubrique.

J'ai très peu de notion javascript mais j'utilise beaucoup de plugin jQuery. En suivant les tutos officiels de chaque plugins jQuery pas de soucis pour leur integration dans mes pages HTML ainsi que pour modifier leur CSS, mais actuellement je commence à galérer en voulant modifier une fonction d'un plugin.

Donc le plugin est un POPUP animé qui apparait en haut à droite de mon site sous forme d'iPhone, et qui disparait quand on clique sur "masquer l'iPhone".

Exemple personnalisé sans SeTimeout : http://www.thomasgiavarini.me/PERSO/SANSTIMEOUT/

Rien de bien complex à installer, mais j'aimerai utiliser la fonction SetTimeout pour le faire apparaître au bout d'un certain moment sur la page. Le but étant d'attendre que le visiteur est un peu visionner la page avant qu'il s'affiche et par la même occasion que les images de l'iPhone se soient bien téléchargées.

Voici le code javascript de base qui permet d'afficher automatiquement le POPUP :


$(document).ready(function() {
       	
       	$('#popup').show('bounce', { times:4 }, 300);
	$('.showpop').hide();
	$('.hide').click(function(){
	$('#popup').fadeOut('slow');
	$('.showpop').fadeIn('slow');
	return false;
		
	});
		
	$('a.showpoplink').click(function(){
	$('#popup').show('bounce', { times:4 }, 300);
	$('.showpop').hide();
	return false;
		
});


Avec ma modification en rajoutant la fonction SetTimeout :


$(document).ready(function() {
    	
        [#green]setTimeout(function() {[/#]
       	
       	$('#popup').show('bounce', { times:4 }, 300);
	$('.showpop').hide();
	$('.hide').click(function(){
	$('#popup').fadeOut('slow');
	$('.showpop').fadeIn('slow');
	return false;
		
	});
		
	$('a.showpoplink').click(function(){
	$('#popup').show('bounce', { times:4 }, 300);
	$('.showpop').hide();
	return false;
		
	});
		
    	[#green]}, 5000);[/#]

});


Donc le POPUP se déclenche avec son animation après 5 secondes. Parfait, mais AVANT ces 5 secondes il est VISIBLE Smiley ohwell . Je cherche donc à le déclencher après ces 5 secondes sans qu'il soit visible avant.

Exemple personnalisé avec la fonction SeTimeout (veuillez patienter 5 secondes pour voir mon problème) :

http://www.thomasgiavarini.me/PERSO/SETIMEOUT/

Merci d'avance et si il vous manque des infos n'hésitez pas.
Modifié par Thomas GIAVARINI (22 Nov 2011 - 22:11)
Tu peux très bien construire ton élément "popup" dans la fonction settimeout et l'ajouter au DOM. Ainsi tu es certain qu'il n'apparaîtra pas avant puisqu'il n'existera tout simplement pas.
LE DOM (Document Object Model) représente la structure de ta page. Par exemple :

<p>
<a href="">contenu cliquable</a>
</p>

Tu as un "arbre" que tu peux voir comme un arbre généalogique. L'élement P est père de l'élément A lui même parent d'un élément TEXTE. Le DOM est cette structure, c'est à dire toutes tes balises qui sont imbriquées les unes dans les autres.

Donc si je te dis "ajoute un autre élément A dans P", tu peux considérer que tu ajoutes un élément frère du premier A ou un élément fils de P.

Le résultat après ajout sera :

<p>
<a href="">contenu cliquable</a>
<a href="">contenu cliquable de mon lien 2</a>
</p>

Jquery permet de manipuler très facilement le DOM. Il faut néanmoins savoir se déplacer dans le DOM (passer d'un élément à son élément parent ou à son élément fils ou frère et ainsi de suite) puis modifier le DOM.
Donc tu dois travailler deux points :
- pour se déplacer dans le DOM avec Jquery : http://api.jquery.com/category/traversing/
- pour modifier le DOM avec Jquery : http://api.jquery.com/category/manipulation/



Même si tu n'es pas bon en anglais (ce qui est mon cas), te former sur le site officiel te fera progresser et tu auras toujours des exemples à jour.

Pour plus d'information : http://fr.wikipedia.org/wiki/Document_Object_Model

Bon courage.
Modifié par gemcod (22 Nov 2011 - 17:26)
Slt Thom,

Le code ci-dessous pourrait t'aider.

Pour pouvoir utiliser ce code, il faut que tu rajoutes le plug in (plug in de jquery bien sûr - blockUI) suivant :

http://jquery.malsup.com/block/#overview


ensuite fais tes test.

$(document).ready(function() { 
    $('#demo8').click(function() { 
        $.blockUI(); 
 
        setTimeout(function() { 
            $.unblockUI({ 
                onUnblock: function(){ alert('onUnblock'); } 
            }); 
        }, 2000); 
    }); 
});


voici la page de démo, c'est une piste pour ta problématique.

http://jquery.malsup.com/block/#demos

creationmedia.fr alias Cyrille
Merci pour vos réponses. Finalement je suis passé par la fonction DELAY plutôt que SeTimeout.

Voici le code

$(document).ready(function() {
    
		$('#popup')[#red].delay(5000)[/#].show('bounce', { times:4 }, 300);	
		$('.showpop').hide();
		$('.hide').click(function(){
		$('#popup').fadeOut('slow');
		$('.showpop').fadeIn('slow');
		return false;

		});	

		$('a.showpoplink').click(function(){
		$('#popup').show('bounce', { times:4 }, 300);
		$('.showpop').hide();
		return false;

		});
		
	});


Et ça marche parfaitement.
Va falloir que je mange au JAVASCRIPT un jour Smiley smile
Sujet clos
Aller à