Ajout panier
widi70
Messages postés
649
Date d'inscription
Statut
Membre
Dernière intervention
-
widi70 Messages postés 649 Date d'inscription Statut Membre Dernière intervention -
widi70 Messages postés 649 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je suis entrain de créer l'ajout au panier de mon site, j'aimerais que lorsque le client clique sur ajout panier, une page avec en fond la page d'ou vient avec une faible opacité et par dessus une div fond blanc opacité 100 choix continu achat - Voir panier
j'espère que vous voyez de quelle page je parle, c'est la mode en ce moment..;;
Alors j'ai réussi a faire ça en mettant dans ma page 2 div
div1 : contenu de ma page
div2 : Choix du client continuer achat - voir panier
donc div2 n'est visible que lorque qu'on a cliqué sur ajout panier et l'opacit de div1 est bloqué...
voici le code:
document.getElementById("div2").style.visibility="visible";
set_opacity('div1',25);
mais le probleme est que div1 est toujours accessible j'ai essayé ceci :
document.getElementById('div1').style.display='block';
mais je trouve pas ça genial.
J'ai penser à mettre un background-image avec une image transparente dans div2 avec width=100% et height=100%, mais ça ne fonctionne pas sur toute la largeur et toute hauteur ( je suppose que width=100% et height=100% ne fonctionne pas avec des div)
Voila est ce que vous avez une idée de ce que je peut faire....
Merci de votre aide
j'espère que vous voyez de quelle page je parle, c'est la mode en ce moment..;;
Alors j'ai réussi a faire ça en mettant dans ma page 2 div
div1 : contenu de ma page
div2 : Choix du client continuer achat - voir panier
donc div2 n'est visible que lorque qu'on a cliqué sur ajout panier et l'opacit de div1 est bloqué...
voici le code:
document.getElementById("div2").style.visibility="visible";
set_opacity('div1',25);
mais le probleme est que div1 est toujours accessible j'ai essayé ceci :
document.getElementById('div1').style.display='block';
mais je trouve pas ça genial.
J'ai penser à mettre un background-image avec une image transparente dans div2 avec width=100% et height=100%, mais ça ne fonctionne pas sur toute la largeur et toute hauteur ( je suppose que width=100% et height=100% ne fonctionne pas avec des div)
Voila est ce que vous avez une idée de ce que je peut faire....
Merci de votre aide
8 réponses
Salut.
Il faut créer un masque (que l'on nomme souvent overlay) qui fera la taille de toute la page Web avoir une couleur noire ou blanche et transparente. Ce calque rendra inaccessible ce qu'il y a en-dessous.
Dans ce masque (qui est un div), tu pourras mettre une autre <div> avec du blanc comme arrière-plan contenant ce que tu souhaites.
Il faut créer un masque (que l'on nomme souvent overlay) qui fera la taille de toute la page Web avoir une couleur noire ou blanche et transparente. Ce calque rendra inaccessible ce qu'il y a en-dessous.
Dans ce masque (qui est un div), tu pourras mettre une autre <div> avec du blanc comme arrière-plan contenant ce que tu souhaites.
C'est même sans doute plus portable que la propriété opacity sauf sur IE6 et moins (avec un JS c'est solutionnable).
Mais je pense qu'il a mal compris le principe : il veut créer une seconde page avec le contenu dupliqué de l'autre ... il faut rester sur la même page et grâce à du JS afficher les éléments (couche transparente et son contenu : le div opaque avec le texte).
Mais je pense qu'il a mal compris le principe : il veut créer une seconde page avec le contenu dupliqué de l'autre ... il faut rester sur la même page et grâce à du JS afficher les éléments (couche transparente et son contenu : le div opaque avec le texte).
Bonjour, et merci de votre aide....
J'ai suivi tous vos conseils et j'ai décidé de mettre une image transparent en background....
Alors ma div1 comporte ma page de produits
Ma div2 est comme ceci
<DIV id="panieraff" style="position:absolute;top:0px;left:0px;width:100%;height:100%;visibility:hidden;background-image:url(../image/fondpanier.png);min-height:100%;height:auto!important;background-repeat:repeat;">
<div style='position:relative;top:100px;left:50%;width:150px;min-height:50px;height:auto!important;background-color:red;border:1px solid #c6c6c6;'>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
</div>
</DIV>
et voila mon javascript
function Montrer() {
document.getElementById("panieraff").style.visibility="visible";
set_opacity('div1',25);
document.getElementById('div1').style.display='block';
}
Donc beaucoup de pb....
sur IE : mon image tient toute la largeur de la page mais pas sur toute la hauteur
sur FF : mon image tient toute la hauteur de la page mais pas sur toute la largeur
Merci de votre aide
J'ai suivi tous vos conseils et j'ai décidé de mettre une image transparent en background....
Alors ma div1 comporte ma page de produits
Ma div2 est comme ceci
<DIV id="panieraff" style="position:absolute;top:0px;left:0px;width:100%;height:100%;visibility:hidden;background-image:url(../image/fondpanier.png);min-height:100%;height:auto!important;background-repeat:repeat;">
<div style='position:relative;top:100px;left:50%;width:150px;min-height:50px;height:auto!important;background-color:red;border:1px solid #c6c6c6;'>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
Ceci est un calque<br/>
</div>
</DIV>
et voila mon javascript
function Montrer() {
document.getElementById("panieraff").style.visibility="visible";
set_opacity('div1',25);
document.getElementById('div1').style.display='block';
}
Donc beaucoup de pb....
sur IE : mon image tient toute la largeur de la page mais pas sur toute la hauteur
sur FF : mon image tient toute la hauteur de la page mais pas sur toute la largeur
Merci de votre aide
Bon alors je progresse, sous firefox c'est ok tout fonctionne
voici le code :
css:
html, body {
height: 100%;
width:98%;
}
.div1
{
text-align:center;
float:left;
margin:10px;
padding:5px;
}
.panieraff
{
background-image:url(../image/fondpanier.png);
width:100%;
visibility:hidden;
min-height:100%;
visibility:hidden;
position:absolute;
top:0px;
left:0;
z-index: 1;
}
.dedans{
position:absolute;
top:0px;
left:25%;
background-color:yellow;
width:400px;
min-height:200px;
height:auto!important;
z-index: 6;
}
et code php pour la div2
<div class="panieraff" id="panieraff">
<div class='dedans'>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
</div>
</div>
mais alors sur IE c'est n'importe quoi, sans rien cliquer j'ai déjà une scrollbar horizontal super longue.....
et apres clique sur ajout panier, alors la, la div1 à moins d'opacité mais rien ne s'affiche...
Et sinon j'ai un pb aussi lorsque je clique, l'opacité de mes 2 div diminue...une idée..???
Merci de votre aide
voici le code :
css:
html, body {
height: 100%;
width:98%;
}
.div1
{
text-align:center;
float:left;
margin:10px;
padding:5px;
}
.panieraff
{
background-image:url(../image/fondpanier.png);
width:100%;
visibility:hidden;
min-height:100%;
visibility:hidden;
position:absolute;
top:0px;
left:0;
z-index: 1;
}
.dedans{
position:absolute;
top:0px;
left:25%;
background-color:yellow;
width:400px;
min-height:200px;
height:auto!important;
z-index: 6;
}
et code php pour la div2
<div class="panieraff" id="panieraff">
<div class='dedans'>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
cjjjdjksdjls<br/>
</div>
</div>
mais alors sur IE c'est n'importe quoi, sans rien cliquer j'ai déjà une scrollbar horizontal super longue.....
et apres clique sur ajout panier, alors la, la div1 à moins d'opacité mais rien ne s'affiche...
Et sinon j'ai un pb aussi lorsque je clique, l'opacité de mes 2 div diminue...une idée..???
Merci de votre aide
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bon ça yest ça fonctionne !!!!!!!!!!!!! ahhhhhhhhhhhhh
juste encore un tout petit problème, lorsque j'apelle mon panier, je met ma div1 en opacité 25 et je ne dit rien pour ma div2, mais elle ce m'est en opacité 25 aussi, mais seulement sur FF tout fonctionne pour IE.
voici mes fct javascripts:
function Montrer() {
document.getElementById("panieraff").style.visibility="visible";
document.getElementById('bloc').style.display='block';
changeOpac(25,'bloc');
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = Math.sin(opacity / 100);
object.MozOpacity = Math.sin(opacity / 100);
object.KhtmlOpacity = Math.sin(opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
La fonction changeOpac à été prise par la sur la toile.......
Vu que ça me m'etais panieraff en 25 j'ai rajouté cette ligne
changeOpac(100,'panieraff ');
mais ça ne change rien..
merci de votre aide
juste encore un tout petit problème, lorsque j'apelle mon panier, je met ma div1 en opacité 25 et je ne dit rien pour ma div2, mais elle ce m'est en opacité 25 aussi, mais seulement sur FF tout fonctionne pour IE.
voici mes fct javascripts:
function Montrer() {
document.getElementById("panieraff").style.visibility="visible";
document.getElementById('bloc').style.display='block';
changeOpac(25,'bloc');
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = Math.sin(opacity / 100);
object.MozOpacity = Math.sin(opacity / 100);
object.KhtmlOpacity = Math.sin(opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
La fonction changeOpac à été prise par la sur la toile.......
Vu que ça me m'etais panieraff en 25 j'ai rajouté cette ligne
changeOpac(100,'panieraff ');
mais ça ne change rien..
merci de votre aide
