begin process at 2012 05 28 11:09:47
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > LOADER UNE PAGE EN AJAX AVEC UN PETIT EFFET

LOADER UNE PAGE EN AJAX AVEC UN PETIT EFFET


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :Effect, ajax, scriptaculous, loader, charger page Niveau :Débutant Date de création :18/05/2008 Date de mise à jour :18/05/2008 16:31:04 Vu / téléchargé :10 489 / 1 023
Auteur : Annadrill

Ecrire un message privé
Site perso
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

Bonjour,

alors, après avoir recu de l'aide sur le forum pour savoir comment créer une fonction avec les "Effect",
j'ai poussé un tout tout petit peu plus loin, et je me suis dis que cela peut intéresser qqn.

C'est une fonction permettant de charger une page externe dans une div (ou autre) avec un effect Fade (modifiable).
A noter qu'il y a besoin de prototype.js et scriptaculous.js

Source

  • <head>
  • <script type="text/javascript" src="prototype.js"></script>
  • <script type="text/javascript" src="scriptaculous.js"></script>
  • <script type"text/javascript" src="effect.js"></script>
  • <script type="text/javascript">
  • function davePageLoader(divTarget,divUrl)
  • {
  • new Effect.Fade(divTarget,
  • {
  • duration : 0.4,
  • afterFinish : function()
  • {
  • new Ajax.Updater(divTarget, divUrl,
  • {
  • onComplete : function()
  • {
  • new Effect.Appear(divTarget);
  • }
  • });
  • }
  • });
  • }
  • </script>
  • </head>
  • <body>
  • <p>Ceci est un petit cript permettant de loader une page dans une div en remplacant son contenu premier, avec un petit effet ajax.</p>
  • <div><a href="#" onClick="davePageLoader('laDiv','lapage.html')">Essayer</a></div>
  • <div id="laDiv"><p>ceci est le tete premier</p></div>
  • </body>
  • </html> 
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type"text/javascript" src="effect.js"></script>
<script type="text/javascript">
function davePageLoader(divTarget,divUrl)
{ 
new Effect.Fade(divTarget, 
{
duration    : 0.4,
afterFinish : function()
{ 
new Ajax.Updater(divTarget, divUrl, 
{
onComplete : function() 
{
new Effect.Appear(divTarget);
}
});
}
});
}
</script>
</head>

<body>
<p>Ceci est un petit cript permettant de loader une page dans une div en remplacant son contenu premier, avec un petit effet ajax.</p>
<div><a href="#" onClick="davePageLoader('laDiv','lapage.html')">Essayer</a></div>
<div id="laDiv"><p>ceci est le tete premier</p></div>

</body>
</html>

 Conclusion

Bon, comme c'est ma première source, merci pour les futurs commentaires.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 mai 2008 13:09:48 :
J'ai oublié une page dans le zip...
18 mai 2008 16:31:04 :
Voilà comme ça c'est un ordre même si cela n'a plus aucune utilité, a part pour ceux qui ne connaissent pas

 Sources du même auteur

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN...
Source avec Zip PETITE "BOX DE COMMENTAIRE"
Toutes les sources de Annadrill

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MISE EN CACHE D'IMAGES AUTO [AJAX] par Allan007
Source avec Zip RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau
Source avec Zip PETITE "BOX DE COMMENTAIRE" par Annadrill
Source avec Zip Source avec une capture EXPLORATEUR WEB par XtremDuke
Source avec Zip PLUGIN BDDR, À INTÉGRER DANS VOS PAGES WEB, PERMET UNE UTILI... par odinh

Commentaires et avis

Commentaire de ralecul le 18/05/2008 16:05:42

Salut!

Bon si c'est ta première source alors je vais être gentil ;-)

Voici les petites choses que j'ai remarqué :
- manque le fichier effects.js dans ton zip
- quand on utilise prototype faut pas le faire à moitié :
   - $(divTarget) équivalent à document.getElementById(divTarget)
   - c'est quoi cet appel ajax ? -> Ajax.Updater ou Ajax.Request

Voilà à quoi ressemble ton code après modification :

function davePageLoader(divTarget,divUrl)
{
new Effect.Fade(divTarget,
{
duration    : 0.4,
afterFinish : function()
{
new Ajax.Updater(divTarget, divUrl,
{
onComplete : function()
{
new Effect.Appear(divTarget);
}
});
}
});
}


Du coup ya plus grand chose d'original dans cette source, désolé...

Mais c'est bien d'essayer d'utiliser prototype, c'est un très bon framework JS.
Il faut juste que tu passes un peu plus de temps pour voir toutes ses fonctionnalités.

Commentaire de benjamin_31 le 18/07/2008 00:03:23

J'ai un petit problème. Quand dans la page charger il y a du javascript il n'est pas interpréter. comment faire pour qu'il marche ?

Merci d'avance pour tous ceux qui vont m'aidai.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Ajax, loader une page externe [ par Annadrill ] voila je cherche a transformer cette fonction qui fonctionne avec prototype et scriptaculous: function loadIng(divTarget,divUrl){new Effect.Fade(div rafraichissement page [ par rudybiss ] Bonjour!!! Voila,je developpe un site en ajax+php et tout vas bien jusque là.Mon problème,est que j'ai sur la meme page j'ai un tableau qui affiche Menu Déroulant Ajax [ par Catalarem ] Alors ben tout d'abord un grand merci à cette fabuleuse communauté qui je le sens (depuis que je me suis enfin convaincu moi même que le bon vieux HTM Internet explorer et la recupération de function javascript [ par banbanfr ] Bonjour à tous,Voilà j'ai un petit problème existentiel. lolJe bosse sur un projet qui est tout en AJAX et drag n drop jusque là tout va bien.Mon prog Preload d'image et scriptaculous [ par Annadrill ] Bonjour,je cherche à faire un préload qui se déroulerais comme ceci,1. on arrive sur la page qui s'affiche et une div "chargement..." s'affiche avec u Activer/Désactiver un bouton Submit avec Ajax [ par nabmoah ] Bonjour ...j'ai récupéré un code AJAX pour l'installer dans l'une de mes pages Web pour un éventuel moteur de recherche.Bien sure, comme c'est de l'aj utilisation de ajax:displayTag [ par skully ] bjr, j'ai dans ma page jsp, un tableau ajax:displayTagest-ce que quelqu'un pourrai me dire comment supprimer ttes les lignes de ce tableau avec ajax ? Remplir une div avec Ajax [ par sagat06 ] Bonjour à tous,j'ai un petit soucis qui, je l'espère, pourra être résolu avec votre aide. J'ai réalisé un petit bout de code avec pour objectif de r Effect.move, a tendance à sauter [ par BOBART1 ] Bonjour j'utilise le composant move de Scriptaculus, l'idée est d'avoir un effect de selection: lorsque je place ma souris se place au dessus d'un Principe même d'ajax... [ par Eckmoule ] Bonjour, Je débute en Ajax et ne possédant que de petites bases en javascript j'avoue nager un peu pour le moment ^^. J'utilise la bibliothèque jquery


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,310 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)