Comprendre site : http://www.hotel-oxford.ro
bluholm
-
alizee -
alizee -
Bonjour,
ma question est simple : comment ce site a eté creer ?
http://www.hotel-oxford.ro/
l'interaction est magnifique, fluide, rapide sans chargement et malgré une lecture du code source je ne sait comment le webmaster s'y est pris;......
si des amateurs ou des confirmés peuvent m'aider sur la comprehension de se site je suis preneur !
merci d'avance.
ma question est simple : comment ce site a eté creer ?
http://www.hotel-oxford.ro/
l'interaction est magnifique, fluide, rapide sans chargement et malgré une lecture du code source je ne sait comment le webmaster s'y est pris;......
si des amateurs ou des confirmés peuvent m'aider sur la comprehension de se site je suis preneur !
merci d'avance.
A voir également:
- Comprendre site : http://www.hotel-oxford.ro
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
5 réponses
Re,
Essayez ceci...
Vous noterez :
Que href="#Pg1" permet de se placer quand même sur la bonne page... même si javascript est désactivé ou que la fonction de déplacement plante !...
Que dans le site original, 'onclick' n'apparait pas.... Il s'agit de ce qu'on appelle du javascript non-intrusif... Cela permet de séparer proprement le code html (correspondant au contenu) du javascript (qui est utilisé pour la présentation).
L'événement onclick est alors ajouté dynamiquement après le chargement de la page via le gestionnaire d'événement du navigateur....
L'auteur fait appel à la librairie moontools pour se faciliter la tache...
Amicalement,
S@M...
http://kryoportail.ath.cx
Essayez ceci...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple2</title>
<style type="text/css">
<!--
#Displayer { overflow: hidden; position: relative; margin: 5em auto; width: 500px; height: 500px; border: solid 1px #666; }
#Container { position: absolute; left: 0px; font-size: 3em; width: 2000px; height: 500px; }
#Container div { width: 500px; float: left; height: 500px; }
#Pg1 { background-color: #CCF; }
#Pg2 { background-color: #FCF; }
#Pg3 { background-color: #FCC; }
#Pg4 { background-color: #CFF; }
-->
</style>
</head>
<body>
<script type="text/javascript">
// Cette variable n'est pas déclarée dans la fonction de déplacement car si c'était le cas,
// On pourrait se retrouver dans le cas, ou 2 fonctions essayent de se rendre en même
// temps l'une à la page 1 et l'autre à la page 4 = gros problèmes !..
var RequestPage = 1;
// Ici on fournit le quotient d'accélération
var Acceleration = 20;
// Délai de rafraichissement (10 vitesse normale, 100 vitesse ralentie !)
var Delay = 10;
// Déplace progressivement le conteneur à la page voulue
function ToPage()
{
// On récupère la position pour atteindre la page voulue (-0, -500, -1000, ...)
var iPagePos = - (RequestPage - 1) * 500;
// On récupère le conteneur à déplacer
var oContainer = document.getElementById('Container');
// On récupère la position courante ( style.left = Npx -> OldValue = N )
var iOldValue = parseInt( oContainer.style.left );
// Si la position actuelle n'est pas la bonne, il faut déplacer le conteneur...
if( iOldValue != iPagePos )
{
// Afin de rendre plus fluide lorsqu'on passe directement de la page 1 à 4 on crée un pas disons 'adapatatif'
// Le pas est fonction de la distance qu'il reste à parcourir... il est donc très rapide au départ puis ralenti en arrivant
var iPas = (iPagePos - iOldValue) / Acceleration;
// Si la distance est très faible on risque de se retrouver avec un pas = 0 = pas de mouvement !
// On rajoute donc +1 ou -1 afin d'éviter la boucle sans fin !
if( iPas > 0 ) { iPas++; } else { iPas--; }
// On change la position de notre conteneur
document.getElementById('Container').style.left = parseInt(oContainer.style.left) + iPas + 'px' ;
// Finalement si la position voulue n'est pas atteinte on relancera cette fonction plus tard afin de ne pas bloquer le navigateur
setTimeout( 'ToPage()', Delay );
}
}
</script>
<ul>
<li><a href="#Pg1" onclick="javascript:RequestPage=1;ToPage(0); return false;">Page1</a></li>
<li><a href="#Pg2" onclick="javascript:RequestPage=2;ToPage(0); return false;">Page2</a></li>
<li><a href="#Pg3" onclick="javascript:RequestPage=3;ToPage(0); return false;">Page3</a></li>
<li><a href="#Pg4" onclick="javascript:RequestPage=4;ToPage(0); return false;">Page4</a></li>
</ul>
<div id="Displayer">
<div id="Container" style="left: 0px;">
<div id="Pg1"><h1>Page1</h1></div>
<div id="Pg2"><h1>Page2</h1></div>
<div id="Pg3"><h1>Page3</h1></div>
<div id="Pg4"><h1>Page4</h1></div>
</div>
</div>
</body>
</html>
Vous noterez :
<li><a href="#Pg1" onclick="javascript:RequestPage=1;ToPage(0); return false;">Page1</a></li>
Que href="#Pg1" permet de se placer quand même sur la bonne page... même si javascript est désactivé ou que la fonction de déplacement plante !...
Que dans le site original, 'onclick' n'apparait pas.... Il s'agit de ce qu'on appelle du javascript non-intrusif... Cela permet de séparer proprement le code html (correspondant au contenu) du javascript (qui est utilisé pour la présentation).
L'événement onclick est alors ajouté dynamiquement après le chargement de la page via le gestionnaire d'événement du navigateur....
L'auteur fait appel à la librairie moontools pour se faciliter la tache...
Amicalement,
S@M...
http://kryoportail.ath.cx
Salut,
Béh effectivement nous sommes en face d'un site de qualité, joli, simple, et bien pensé... Ça te choque !!??? lol...
En fait toute les "pages" sont intégrés dans un bloc principal qui lui même est contenu dans un autre bloc... Le bloc contenant le contenu de chaque page est déplacé horizontalement en fonction de la rubrique sélectionné....
Pour la galerie photo, il utilise le même principe sauf que les images sont placés verticalement.... il n'a plus qu'a déplacé le bloc contenant les photos vers le haut ou le bas, pour faire défiler les photos....
En fait l'effet est assez simple à réaliser le calque principal doit être défini 'overflow: hidden;' afin que tout le contenu de ce calque qui dépasse n'apparaisse pas... Dedans on y place un autre calque qui contiendra notre contenu à faire bouger on lui donne la propriété 'position: absolute;'... il reste plus qu'a affecter son positionnement par exemple en fesant un 'left: -500px', pour que le calque de contenu se déplace vers la gauche.... ce qui dépasse vers la gauche n'est pas vu grâce à notre overflox: hidden...
Pour donner l'effet de défilement il suffit d'utiliser une boucle javascript qui déplacera le calque progressivement dans le temps... 'left: 0px', 'left: -10px', 'left: -20px', 'left: -30px'..... par exemple en déclarant un timer...
Enfin voilà, je sais pas si je me suis bien exprimé !...
Un bon exemple, vaut toutes les explications du monde...
Essaye ca :
Développé en moins de 15 minutes, tu vois c'est moins compliqué qu'on le crois....
Amicalement,
S@M...
http://kryoportail.ath.cx
Béh effectivement nous sommes en face d'un site de qualité, joli, simple, et bien pensé... Ça te choque !!??? lol...
En fait toute les "pages" sont intégrés dans un bloc principal qui lui même est contenu dans un autre bloc... Le bloc contenant le contenu de chaque page est déplacé horizontalement en fonction de la rubrique sélectionné....
Pour la galerie photo, il utilise le même principe sauf que les images sont placés verticalement.... il n'a plus qu'a déplacé le bloc contenant les photos vers le haut ou le bas, pour faire défiler les photos....
En fait l'effet est assez simple à réaliser le calque principal doit être défini 'overflow: hidden;' afin que tout le contenu de ce calque qui dépasse n'apparaisse pas... Dedans on y place un autre calque qui contiendra notre contenu à faire bouger on lui donne la propriété 'position: absolute;'... il reste plus qu'a affecter son positionnement par exemple en fesant un 'left: -500px', pour que le calque de contenu se déplace vers la gauche.... ce qui dépasse vers la gauche n'est pas vu grâce à notre overflox: hidden...
Pour donner l'effet de défilement il suffit d'utiliser une boucle javascript qui déplacera le calque progressivement dans le temps... 'left: 0px', 'left: -10px', 'left: -20px', 'left: -30px'..... par exemple en déclarant un timer...
Enfin voilà, je sais pas si je me suis bien exprimé !...
Un bon exemple, vaut toutes les explications du monde...
Essaye ca :
<script type="text/javascript">
function ToLeft()
{
var oContainer = document.getElementById('Container');
var iOldValue = oContainer.style.left.substr(0,oContainer.style.left.length-2);
oContainer.style.left = ( parseInt(iOldValue) - 5 ) + 'px';
}
function ToRight()
{
var oContainer = document.getElementById('Container');
var iOldValue = oContainer.style.left.substr(0,oContainer.style.left.length-2);
oContainer.style.left = ( parseInt(iOldValue) + 5 ) + 'px';
}
</script>
<form>
<input type="button" onclick="javascript:ToLeft();" value="<" /> <input type="button" onclick="javascript:ToRight();" value=">" />
</form>
<div style="overflow: hidden; position: relative; margin: 10em auto; width:400px; height: 375px; border: solid 1px #666;">
<div id="Container" style="position: absolute; left: 0px; font-size: 3em; width: 500px; height: 375px;"><img src="https://www.abondance.com/Bin/google-yahoos.jpg" /></div>
</div>
Développé en moins de 15 minutes, tu vois c'est moins compliqué qu'on le crois....
Amicalement,
S@M...
http://kryoportail.ath.cx
et bien un grand merci ! je comprend un peu mieux son fonctionnement et le trouve tres original ! de par sa sobrieté et sa rapidité !
pour ton code je l'ai essayer : c'est exactement cela, et en regardant de plus pres son code source on vomprend mieux comment il a fait.
je te remercie pour ces explications ce soir je me coucherai moins stupide !^^
PS : pour le fameux timer : je n'ai pas reussit a l'integrer dans ton code , il fonctionne dans un des miens mais pas dans le tiens... ( enfin je vais ressayer avant quand meme ^^ ) mais si tu repasse par la :p
merci encore !
pour ton code je l'ai essayer : c'est exactement cela, et en regardant de plus pres son code source on vomprend mieux comment il a fait.
je te remercie pour ces explications ce soir je me coucherai moins stupide !^^
PS : pour le fameux timer : je n'ai pas reussit a l'integrer dans ton code , il fonctionne dans un des miens mais pas dans le tiens... ( enfin je vais ressayer avant quand meme ^^ ) mais si tu repasse par la :p
merci encore !
bonjour!
en lisant ceci j'ai adoré le site ! je me suis inspiré de vos codes , par contre moi non plus je ne sait comment faire pour cette partie timer....
quelqu'un pourrait t'il m'aider ?
de plus j'ai remarqué qu'en fait le webmaster utilisait des ancres pour son sites... qu'est ce qui est le plus judicieux d'apres vous ?
merci d'avance ! a vous.
Alizee.
en lisant ceci j'ai adoré le site ! je me suis inspiré de vos codes , par contre moi non plus je ne sait comment faire pour cette partie timer....
quelqu'un pourrait t'il m'aider ?
de plus j'ai remarqué qu'en fait le webmaster utilisait des ancres pour son sites... qu'est ce qui est le plus judicieux d'apres vous ?
merci d'avance ! a vous.
Alizee.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour,
je reviens un peu sur ce petit bout de code, car j'ai un petit probleme ( je vous rassure c'est minime ^^ ) mais pour une femme cela parait enorme :p
Sur IE : pas de probleme ce code marche bien , par contre sous Firefox le probleme est le suivant :
Lorsque je clique sur page2 , puis 2 secondes apres sur pages 1 : j'ai un dfecalage de 1px ( ou 1 millimetre) sur ma bazlise div a droite.
et quand les couleurs sont fort differentes ce n'est pas tres beau.
j'ai beau chercher je ne trouve pas d'ou cela vient.
merci d'avance !
je reviens un peu sur ce petit bout de code, car j'ai un petit probleme ( je vous rassure c'est minime ^^ ) mais pour une femme cela parait enorme :p
Sur IE : pas de probleme ce code marche bien , par contre sous Firefox le probleme est le suivant :
Lorsque je clique sur page2 , puis 2 secondes apres sur pages 1 : j'ai un dfecalage de 1px ( ou 1 millimetre) sur ma bazlise div a droite.
et quand les couleurs sont fort differentes ce n'est pas tres beau.
j'ai beau chercher je ne trouve pas d'ou cela vient.
merci d'avance !
