Forums Développement Multimédia

Aller au contenu

Rafraissichement progressif de page

CODE HTML CSS

13 réponses à ce sujet

#1 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 01 May 2012 - 20:51 PM

Bonjour à tous,
Encore une petite question, qui je pense se règle en javascript/jquery mais je ne sais pas vraiment.
Je souhaiterai avoir un rafraichissement de ma page html toutes les x secondes et que celui-çi se fasse de manière progressif (un léger fondu par exemple).

<meta http-equiv="[url=""]refresh[/url]" content="[url=""]180;index.html[/url]" />

Pour l'instant je n'ai que ça, et évidement cela fait le bruit de rafraissiment du navigateur et il n'y a pas de transition.

Merci à tous,

#2 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 02 May 2012 - 17:17 PM

je ne vois pas du tout comment faire cela ?!?!

explique mieu ton cas, peut etre qu il y a une autre solution...

#3 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 03 May 2012 - 09:07 AM

Bonjour,
Merci de ta réponse,
J'ai en fait un script qui au démarrage va me créer différents petites div de texte qui s'afficheront les unes à la suite des autres dans ma page,
Et je souhaiterais que toutes le 5min par exemple, mon script récupère quelques nouveaux textes et les affiche sur ma page "en fondu", de manière à ce qu'il y ait une transition entre l'ancienne et la nouvelle page.
J'imagine que cela pourrait se faire depuis mon script js, seulement je ne fais que l'utiliser et le comprendre dans les grandes lignes, mes compétences s'arrêtent là.

#4 matt-murdock

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6851 messages

Posté 03 May 2012 - 14:39 PM

http://webbricks.org...s/fade/#concept

ici tu trouve un javascript

#5 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 04 May 2012 - 10:28 AM

Bonjour, ton lien m'a finalement donné l'idée toutes simple de faire un ptit truc en css pour une meilleure transition au rechargement, merci.
Cependant je me disais, qu'au lieu de recharger toute ma page avec un meta-refresh, je pouvais peut-être rafraichir uniquement la fonction d'affichage dynamique.
Mais je ne sais pas comment l'appeler depuis ma page html, car cela se trouve dans un script js.
Je ne suis pas certaine d'être très claire pardon :mrgreen:

J'ai mon script qui est appelé dans le head :
<script type="text/javascript" src="script/stream.js"></script>

Dans mon fichier stream.js, j'ai la fonction jquery qui lance le truc :
$(function mafonction (){
           ///
});

Et moi je souhaiterai avoir dans mon <body> html quelque chose qui lance à tel interval
setInterval("reload()",5000);
function reload() {
$(mafonction());
}

Evidement ça ne fonctionne pas :mrgreen:

#6 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 04 May 2012 - 20:51 PM

Salut,

Tu dis :

Citation

je souhaiterais que toutes le 5min par exemple, mon script récupère quelques nouveaux textes et les affiche sur ma page

Où se trouvent les nouveaux textes en question ?
dans une base de données ?
un fichier texte ?
un script externe comme une API ?

Tu pourrais simplement utiliser un objet Timer
http://www.w3schools...s/js_timing.asp

Et un simple $.get( ) ou $.ajax( ) en jQuery pour charger ton contenu
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.ajax/

Une fois celui-ci chargé, un simple fadeOut( ) + fadeIn( ) et voilà ....
http://api.jquery.com/fadeOut/
http://api.jquery.com/fadeIn/
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#7 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 05 May 2012 - 15:19 PM

Bonjour, merci de ta réponse dcz.switcher, tu m'avais de plus déjà aidé sur un autre sujet.
Le script que j'utilise a été créé par une autre personne, je m'en sers juste mais il est assez complexe.
Je recherche juste comment relancer ce script depuis ma page html

Avoir quelque chose qui dans l'idée fonctionnerait comme ça (je sais que ce n'est pas correct du tout, mais c'est juste l'idée)

setInterval(montest,3000);
function montest() {
<script type="text/javascript" src="script/twitStream.js"></script>
}


#8 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 05 May 2012 - 15:54 PM

Tu peux nous en dire plus sur twitStream.js ?

est-ce celui-là ?
http://www.iamnoahco...com/TwitStream/

ici le source :
http://www.denney.fr...s/twitStream.js
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#9 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 05 May 2012 - 16:49 PM

C'est bien ce script que je cherche à relancer dans un interval régulier

#10 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 06 May 2012 - 17:32 PM

alors vraiment vite fait, voilà comment tu pourrais faire

note : je ne suis pas super calé en jQuery et il est possible que ce que je propose ne soit pas la meilleure solution, mais disons que ça peut servir de base de départ.



Dans le code du plugin twitStream

jQuery.fn.twitStream = function( option ){
showTweetLinks= option;

showTweetLinks=showTweetLinks.toLowerCase();
if(showTweetLinks.indexOf('all')!=-1)
{
  showTweetLinks = 'none';
}
var that = this ;
this.fadeOut('fast', function(e){
  that.html('') ;
  fetch_tweets(this) ;
  that.fadeIn('slow') ;
}) ;

} ;
 

dans la page html

<script type="text/javascript">
  $(document).ready(function() {
   $(".twitStream").twitStream( 'all' ) ;
   $("#bt").on("click", function(e){
    $(".twitStream").twitStream( 'all' ) ;  
   }) ;
  });
</script>
<!-- le conteneur -->
<body>
<div class="twitStream 3" title="apple" id="tweets"></div>
</body>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#11 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 07 May 2012 - 06:40 AM

Après une bonne nuit de sommeil, j'ai repensé à ce script et ma réponse est plutôt moyenne.

ça fonctionne mais je pense qu'on n'utilise pas la notion de plugin jQuery comme on le devrait.

Je me demande d'ailleurs si on peut parler de plugin dans le cas du script twtiStream puisqu'il n'étend pas l'objet jQuery

Il s'agit juste d'une fonction en fait

Je te propose donc une autre approche qui ne touche pas au script twitStream



<script type="text/javascript">
$(document).ready(function() {

        $("#bt").on("click", reload ) ;


        function reload(){
                $('.twitStream').each(function( index, element){
                        $(element).fadeOut( 'slow', function( ){
                                $(this).html('') ;
                                fetch_tweets(this);
                                $(this).fadeIn('slow') ;
                         }) ;
                });
        }

});
</script>
 

il suffit que tu remplaces l'appel de la fonction reload par un Timer

la fonction reload fait quoi ?
pour chaque élément du DOM qui possède la classe twitStream, elle va appliquer un fade out (disparition progressive en reduisant la valeur alpha)
ensuite elle appelle la fonction fetch_tweets( ) qui est inclue dans le script twitStream
enfin, elle ré affiche la DIV en augmentant doucement l'alpha.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#12 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 07 May 2012 - 08:14 AM

Bonjour,
Enorme merci pour ton aide, j'ai essayé tes deux méthodes et ça fonctionne, c'est vraiment super!
Cependant, on m'avait aidé à modifier un peu le script twitStream.js pour qu'il me permette de lancer une fonction me servant à "styliser dynamiquement" mes tweets depuis ma page html.
Et là, avec le rafraichissement, les tweets sont bien rechargé, mais la fonction de style ne se lance plus.

Voici ce qui avait été modifié à la fin de twitStream.js.
Cela permettait notamment de bien attendre que tous les tweets soient chargés pour lancer chargement() ma fonction style.

var TotalTwitts = 0;
var DoneTwitts = 0;
function fetch_tweets_done()
        {
           if(TotalTwitts > 0 && DoneTwitts == TotalTwitts)
                           Chargement();
        }

$(function mafonction(){
           showTweetLinks=showTweetLinks.toLowerCase();
           if(showTweetLinks.indexOf('all')!=-1)
                           showTweetLinks='reply,view,rt';
           var nbTotal = 0;
           $('.twitStream').each(function(){
                           nbTotal++;
                           fetch_tweets(this);
           });
           TotalTwitts = nbTotal;
           fetch_tweets_done();
});

J'ai l'impression que ce serait plutôt mafonction() qu'il faudrait que j'appelle depuis reload() non ?
Seulement, si je suis débutante en javascript, en jquery je n'y connais rien du tout et ne comprends pas comment.

#13 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 07 May 2012 - 22:46 PM

En effet, tu peux faire un mix des 2 codes.

En fait, tu ne peux appeler directement maFonction, du moins, je ne pense pas.

Ce code s'execute uniquement lorsque le DOM (arborescence) de la page est chargé.

Tu peux donc transformer le code qui se trouve dans le script twitStream de cette manière


function load_tweet( ){
                   showTweetLinks=showTweetLinks.toLowerCase();
                   if(showTweetLinks.indexOf('all')!=-1)
                                                   showTweetLinks='reply,view,rt';
                   var nbTotal = 0;
                   $('.twitStream').each(function(){
                                                   nbTotal++;
                                                   fetch_tweets(this);
                   });
                   TotalTwitts = nbTotal;
                   fetch_tweets_done();
};
 

Puis tu reprends le code posté plus haut pour appeler non plus fetch_tweets( ) mais load_tweet( ), ça devrait fonctionner.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#14 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 08 May 2012 - 13:09 PM

Plus rien ne fonctionnait en enlevant les $( ...); de ma fonction,
J'ai donc fait un compromis qui permet de lancer ma fonction avec le DOM et de l'appeler ensuite.
Mais je pense que ça pique les yeux pour ceux qui s'y connaissent :mrgreen:


$(function (){
           mafonction ();
});
 

Cela ne fonctionnerait toujours pas parce que j'avais oublié de réinitialiser les variables du .js dans la fonction reload.
Mais maintenant ça fonctionne !!
Je remerçie beaucoup de ton aide :)



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP