cs_Dure
Messages postés18Date d'inscriptiondimanche 10 août 2008StatutMembreDernière intervention25 janvier 2009
-
10 août 2008 à 22:38
cs_Dure
Messages postés18Date d'inscriptiondimanche 10 août 2008StatutMembreDernière intervention25 janvier 2009
-
12 août 2008 à 13:30
Bonjour à tous,
Voila je fais mon premier site et viens donc de me mettre à Javascript (j'ai déjà des notions de HTML et PHP/MySQL). J'aurais aimé faire une fonctions permettant d'ouvrir un document .php ou .html dans un cadre un peut à la manière de la Moodalbox. Bien sur je n'en suis qu'au début donc je voudrais juste faire ceci sans animation, dans l'idéal comme lors de l'authentification sur CodeS-SourceS. Voila pour résumé lorsque je clique sur un lien la fenetre s'ouvre en milieu de page, le reste de la page se grisant.
Vous me direz pourquoi n'utilise tu pas la MoodalBox? Pour deux raisons:
- J'aimerais savoir faire cela par moi même.
- Elle ne fontionne pas correctement avec l'organisation de mon site.
Pour ce qui est de mon site, celui ci se compose ainsi:
...
...
...
...
...
Le tableau a en fait été généré par photoshop et contient les images formant le fond du site.
Les div ont été définits de façon absolue.
Voila un grand merci à tous ceux qui m'aideront et en aurant le courage .
A voir également:
[JavaScript] Créer une fenêtre intérieure à la page à la Moodalbox !
cs_bultez
Messages postés13615Date d'inscriptionjeudi 13 février 2003StatutMembreDernière intervention15 octobre 201330 12 août 2008 à 09:38
IFRAME (lu chez SelfHTML)
Définir des cadres incorporés
...ils font partie du standard HTML . Les cadres incorporés sont un moyen original de configuration pour la
préparation de l'information, qui fonctionne autrement que les cadres "normaux". Les cadres incorporés
ne créent pas de division de l'écran spécifique, mais sont au contraire semblables à des graphiques ou
des passages vidéo à l'intérieur d'un fichier HTML, dans lesquels des sources étrangères, avant tout
d'autres fichiers HTML peuvent être affichés.
j'ajouterais que, par exemple :
° <form action="mapage.php" method="post" name="monform" target="IFRM">....
affichera la réponses de mapage.php dans
° on peut recharger ( ou changer le contenu de ) l'IFRAME, sans recharger la page
° .... etc
cs_Dure
Messages postés18Date d'inscriptiondimanche 10 août 2008StatutMembreDernière intervention25 janvier 2009 12 août 2008 à 11:21
Eh Messieur vous êtes matinal.
Merci Bultoz pour ce tableau, je vais faire ça de suite. Je suis resté devant mon ordi jusqu'à 3h pour trouver une solution potable, et j'espère en être arrivé à une. Pour ce faire je crée 2 div dans ma page:
#cache { Cache contient un fond noir servant à grisé le reste de la page
z-index: 29;
position: fixed;
opacity: 0.5;
background: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
#surConteneur { surConteneur comme son nom l'indique permet, lorque il est visible d'affiché ma page.
position:absolute;
left:0px;
top:0px;
width:999px;
height:750px;
display:none;
visibility:hidden;
z-index:30;
}
Par la suite je mets les div dans mon conteneur d'origine. En parallèle j'ai dèvelopé un fichier .js contenant:
function cacher(id,cache)
{
//Cache les div où s'affiche la page et ou apparait le fond noir grisant le contenu initial
document.getElementById(cache).style.display="none";
document.getElementById(cache).style.visibility="hidden";
document.getElementById(id).style.display="none";
document.getElementById(id).style.visibility="hidden";
}
function afficher(id,cache)
{
//Affiche les div où s'affiche la page et ou apparait le fond noir grisant le contenu initial
document.getElementById(cache).style.display="block";
document.getElementById(cache).style.visibility="visible";
document.getElementById(id).style.display="block";
document.getElementById(id).style.visibility="visible";
}
// Fonction qui affiche une page dans un div
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function()
{
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
Pour finir j'appel la fonction ainsi dans le fichier initial:
Et ainsi dans la page que j'affiche:
Cela fonction, mais non sans problème .
Sous FF aucun souci; sous IE 7 le fond grisé n'apparait pas, la page qui s'affiche (petit tableau de formulaire (4 champs) ) n'est pas centré de façon horizontale et verticale, et le style appliqué au tableau n'est pas utilisé.
Pour info j'utilise ce style pour centrer la page:
#apDiv1 {
position:absolute;
left:50%;
top:50%;
width:300px;
height:200px;
margin-left:-150px;
margin-top:-100px;
z-index:1;
}
Voila tout. Qu'en pensez vous, suis je sur une bonne voie?
Je vous envoie le lien par mp afin que vous voyez plus facilement les soucis.
cs_bultez
Messages postés13615Date d'inscriptionjeudi 13 février 2003StatutMembreDernière intervention15 octobre 201330 12 août 2008 à 11:45
pas de message privé, totalement inutile pour résoudre un problème !
ma réponse à ce message :
et tu attends quoi de moi ?
je t'ai donné la marche à suivre,
je te dis où sont tes erreurs...
que veux-tu de plus ?
restons sur le forum.
plus d'intervenants, plus de compétences,
plus de chances de réponses...
en plus,
ça pourrait servir à d'autres.
j'ai jeté un oeil... il a fallu que tu fassse de l'ajax ?
là un simple lien suffirait probablement !
tes styles et le reste sont dans la réponse d'ajax ?
oui : c'est normal alors, ce n'est pas interprété
ajax renvoie du texte, pas une page html.
si tu veux interpréter le css, le javascript..., à toi de le faire.
mais je répète ajax c'est fait pour retourner des données,
pas une page html à afficher ! du tentes de recréer un
iframe en fait....
nicomilville
Messages postés3472Date d'inscriptionlundi 16 juillet 2007StatutMembreDernière intervention28 février 201436 12 août 2008 à 11:45
Pour centrer ta page, il ne faus pas utiliser du positionnement absolut car il y a des différence de positionnement sous IE et les aures navigateurs...
Je te conseil d'utiliser un div et l'atribut allign="center" !
a++
Si la réponse vous convient, pensez : Réponse acceptée !
cs_Dure
Messages postés18Date d'inscriptiondimanche 10 août 2008StatutMembreDernière intervention25 janvier 2009 12 août 2008 à 13:30
@ Nicomilville: Le but est de centrer mon div pas ce qu'il y a l'inteieur!
Mais le problème est réglé: pourquoi, mystère! Je n'ai fait qu'optimiser le visuel en créant une fenetre sous photoshop et exportant en html, puis callé des divs par dessus en gardant toujours mon premier div servant à centrer.
@Bultez: 1- Le message privée a été envoyé dans un but sécuritaire... comme expliqué dans le MP
2- Dans mon premier cas les styles passés dans les div (style="...") était bien passé sous FF mais pas sous IE7
3- Je n'attend pas de toi de rester sur le fofo pour mes beau yeux , mais d'avoir une discution d'interaction.
Comme je l'ai dit j'ai eu fait cela en attendant ta réponse car c'est qui colle le plus à mes attentes formatives. Les iframes sont trés bien pour ici mais je cherche à faire une librairie. Ca devient certe plus compliqué, mais il vaut mieux faire compliqué dans un cas simple, que compliqué dans un cas compliqué.