Dans page html choix Css en fonction de la page
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Dans page html choix Css en fonction de la page
Bonjour,
J'utilise sur ma page d'accueil une page html qui affiche un diaporama de photos.
La taille de la photo est définie dans le css:
Serait-il possible d'avoir cette taille max pour la photo quand la page html est mise sur la page d'accueil, et d'avoir une autre taille max de la photo quand la page html est mise sur le portail.
Pour le portail, ce serait:
Merci pour votre aide.
J'utilise sur ma page d'accueil une page html qui affiche un diaporama de photos.
- Code:
<title>photo Best-of</title><meta name="Photo Best-of forum photoclic" content="width=device-width, initial-scale=1" />
<style>
* {box-sizing:border-box;}
body {
font-family: Verdana,sans-serif;
max-width: 450px;
max-height: 450px;
overflow:hidden !important;
}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
/* Titre slideshow*/
.nametext {
font-size: 18px;
font-family: Comic Sans MS;
color: #3b699c;
padding: 8px 12px;
position: relative;
text-align:center;
}
/*auteurs*/
div.slideshow-container div.mySlides.fade span em {
color: #27AAB8;
display: block;text-align:center;
font-size: 16px;
font-family: Comic Sans MS;
}
/*photos*/
div.mySlides.fade a img {
border: 4px white;
border-style: ridge;
display: block;
margin-left: auto;
margin-right: auto;
max-height:210px;
max-width:320px;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 5s;
animation-name: fade;
animation-duration: 5s;
}
@-webkit-keyframes fade {
from {opacity: .5;}
to {opacity: 1;}
}
@keyframes fade {
from {opacity: .5;}
to {opacity: 1;}
}
</style>
<div class="slideshow-container">
<div class="mySlides fade">
<a href="https://photoclic.forum-pro.fr/t27081-animaux-un-soir-aux-cinq-terres-ajout-v2#336602" target="_blank"><img src="https://i.servimg.com/u/f30/12/83/63/12/imgp1711.jpg" /></a><span><em>Patlaine</em></span>
</div>
<div class="mySlides fade">
<a href="https://photoclic.forum-pro.fr/t27079-paysages-la-tombee-du-jour#336588" target="_blank"><img src="https://i.servimg.com/u/f53/19/59/79/32/la_tom10.jpg" /></a><span><em>Tomanic</em></span>
</div>
</div>
</span><span class="dot"></span><span class="dot"></span>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
La taille de la photo est définie dans le css:
- Code:
max-height:210px;
max-width:320px;
Serait-il possible d'avoir cette taille max pour la photo quand la page html est mise sur la page d'accueil, et d'avoir une autre taille max de la photo quand la page html est mise sur le portail.
Pour le portail, ce serait:
- Code:
max-height:180px;
max-width:160px;
Merci pour votre aide.
Dernière édition par photoclic le Ven 24 Fév 2023 - 23:24, édité 1 fois
Re: Dans page html choix Css en fonction de la page
Salut Serge,
sur ton portail tu as une div ayant cet ID ==> M14_showIframe ou se trouve ton slide .
tu peux essayer avec ce style
a++
sur ton portail tu as une div ayant cet ID ==> M14_showIframe ou se trouve ton slide .
tu peux essayer avec ce style
- Code:
#M14_showIframe .mySlides.fade a img
{
max-height:180px!important;
max-width:160px!important;
}
a++
Re: Dans page html choix Css en fonction de la page
Bonjour Philippe,
Merci pour ton aide.
En fait actuellement j'ai dupliqué cette page html.
Sur l'une j'ai le css correspondant pout la page d'accueil et sur l'autre le css correspondant pour le portail.
L'objet de cette demande, serait de n'avoir qu'une seule page html avec un script à l'intérieur qui choisit l'un ou l'autre css en fonction de la page. Je ne sais pas si cela est possible.
ça éviterait lorsque j'ajoute ou retire une photo d'avoir à le faire 2 fois.
Merci pour ton aide.
En fait actuellement j'ai dupliqué cette page html.
Sur l'une j'ai le css correspondant pout la page d'accueil et sur l'autre le css correspondant pour le portail.
L'objet de cette demande, serait de n'avoir qu'une seule page html avec un script à l'intérieur qui choisit l'un ou l'autre css en fonction de la page. Je ne sais pas si cela est possible.
ça éviterait lorsque j'ajoute ou retire une photo d'avoir à le faire 2 fois.
Re: Dans page html choix Css en fonction de la page
Salut Serge,
hum, le mieux a faire et de cloner l'actuelle et de créer une autre page html
mon ami et de mettre la bonne résolution correspondante à tes souhaits d'affichage .
a++
hum, le mieux a faire et de cloner l'actuelle et de créer une autre page html
mon ami et de mettre la bonne résolution correspondante à tes souhaits d'affichage .
a++
Re: Dans page html choix Css en fonction de la page
Bonjour Philippe,
Merci pour ton retour.
Bonne soirée Phil.
Merci pour ton retour.
C'est le cas actuellement. Je vais donc laisser ainsi, s'il n'y a pas d'autre solution.le mieux a faire et de cloner l'actuelle et de créer une autre page html
Bonne soirée Phil.
Re: Dans page html choix Css en fonction de la page
Re,
je voulais dire de créer autant de page en fonction des endroits désirés Serge .
a++
je voulais dire de créer autant de page en fonction des endroits désirés Serge .
a++
Re: Dans page html choix Css en fonction de la page
Oui, si j'ai bien compris, c'est bien ce que j'ai aujourd'hui.
Une page html avec une taille d'image en style appelée sur la page d'accueil , et une autre page html avec une autre taille d'image en style appelée dans un widget du portail .
Chaque fois que j'ajoute une image dans une page, je répète l'opération dans l'autre page.
C'est ce que je souhaitais éviter en fait.
Une page html avec une taille d'image en style appelée sur la page d'accueil , et une autre page html avec une autre taille d'image en style appelée dans un widget du portail .
Chaque fois que j'ajoute une image dans une page, je répète l'opération dans l'autre page.
C'est ce que je souhaitais éviter en fait.
Re: Dans page html choix Css en fonction de la page
Re,
je reviens sur ton message initial:
https://forum.forumactif.com/t408363-dans-page-html-choix-css-en-fonction-de-la-page#3403053
Tu utilises donc une iframe pour les diverses parties de ton forum avec la même page html .
Est-ce bien cela ?
a++
je reviens sur ton message initial:
https://forum.forumactif.com/t408363-dans-page-html-choix-css-en-fonction-de-la-page#3403053
Tu utilises donc une iframe pour les diverses parties de ton forum avec la même page html .
Est-ce bien cela ?
a++
Re: Dans page html choix Css en fonction de la page
Oui, c'est bien ça Philippe.
J'ai actuellement 2 pages html identiques (h7 et h17) (au bout de style suivant près) avec à l'intérieur:
. le style suivant pour les images de la page d'accueil:
Avec sur la page d'accueil dans les généralités la page html h7-slideshow.
Et dans un widget du portail la page html h17-best-of-annee-et-widget-portail
Et le but de cette demande était l'éventuelle possibilité de n'avoir qu'une seule de ces 2 pages avec à l'intérieur un éventuel script qui change ces bouts de style en fonction de la page.
J'ai actuellement 2 pages html identiques (h7 et h17) (au bout de style suivant près) avec à l'intérieur:
. le style suivant pour les images de la page d'accueil:
- Code:
div.mySlides.fade a img {
max-height:210px;
max-width:320px;
}
- Code:
div.mySlides.fade a img {
max-height:180px;
max-width:160px;
}
Avec sur la page d'accueil dans les généralités la page html h7-slideshow.
- Code:
<iframe style="width:350px;border:none;height: 280px;" src="https://photoclic.forum-pro.fr/h7-slideshow"></iframe>
Et dans un widget du portail la page html h17-best-of-annee-et-widget-portail
- Code:
<iframe style="display: block;margin:auto;height: 220px;width: 180px;padding: 2px;border: none; " src="https://photoclic.forum-pro.fr/h17-best-of-annee-et-widget-portail"> </iframe>
</div>
Et le but de cette demande était l'éventuelle possibilité de n'avoir qu'une seule de ces 2 pages avec à l'intérieur un éventuel script qui change ces bouts de style en fonction de la page.
Re: Dans page html choix Css en fonction de la page
Salut Serge,
je doute qu'un script puisse faire quelque chose sur le contenu d'une Iframe mon ami .
a++
je doute qu'un script puisse faire quelque chose sur le contenu d'une Iframe mon ami .
a++
Re: Dans page html choix Css en fonction de la page
Bonsoir Philippe,
Ah dommage, comme il y a déjà un script dans l'iframe, je pensais qu'il pouvait y en avoir un autre ou un complément de l'existant.
Tant pis et merci Philippe pour t'être penché sur le sujet; je vais donc garder les 2 pages html.
Ah dommage, comme il y a déjà un script dans l'iframe, je pensais qu'il pouvait y en avoir un autre ou un complément de l'existant.
Tant pis et merci Philippe pour t'être penché sur le sujet; je vais donc garder les 2 pages html.
Re: Dans page html choix Css en fonction de la page
Bonjour,
Normalement, on peut accéder aux propriétés de la page parente dans le cas d'une iframe au moins du même domaine.
Ensuite, pour le CSS :
Bonne journée !
Normalement, on peut accéder aux propriétés de la page parente dans le cas d'une iframe au moins du même domaine.
- Code:
$(function() {
var pw = parent.location.pathname;
if(pw == '/portal') {
$("div.mySlides").addClass("slides-portal");
}
else if(pw == '/') {
$("div.mySlides").addClass("slides-home");
}
});
Ensuite, pour le CSS :
- Code:
div.mySlides.slides-portal.fade a img {
max-height:180px;
max-width:160px;
}
div.mySlides.slides-home.fade a img {
max-height:210px;
max-width:320px;
}
Bonne journée !
Re: Dans page html choix Css en fonction de la page
Bonsoir Chattigre,
Un souci aux premiers essais car il m'a fallu ajouter dans la page html le code suivant pour que le JS fonctionne sans défaut:
Maintenant c'est tout bon
Un grand merci pour ton aide.
Je valide mon essai et passerai en résolu ensuite si tu veux bien.
Un souci aux premiers essais car il m'a fallu ajouter dans la page html le code suivant pour que le JS fonctionne sans défaut:
- Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Maintenant c'est tout bon
Un grand merci pour ton aide.
Je valide mon essai et passerai en résolu ensuite si tu veux bien.
Re: Dans page html choix Css en fonction de la page
Bonjour,
Oui effectivement pardon j'étais dans l'optique d'une page avec haut et bas de page par défaut (dans laquelle JQuery aurait déjà été inclus automatiquement par FA.)
Avec ta ligne rajoutée (avant le script) ça doit bien fonctionner normalement.
Bonne journée
Oui effectivement pardon j'étais dans l'optique d'une page avec haut et bas de page par défaut (dans laquelle JQuery aurait déjà été inclus automatiquement par FA.)
Avec ta ligne rajoutée (avant le script) ça doit bien fonctionner normalement.
Bonne journée
Re: Dans page html choix Css en fonction de la page
Oui, ça fonctionne parfaitement.
Un grand merci à nouveau à toi, à Philippe et à tous les travailleurs de l'ombre qui font que nos forums s'améliorent.
Un grand merci à nouveau à toi, à Philippe et à tous les travailleurs de l'ombre qui font que nos forums s'améliorent.
Sujets similaires
» Pas de choix de HTML dans mon profil, pas de vimeo intégrable
» Javascript dans page html
» Ajout d'un bouton pour ouvrir une page html (script fait mais erreur dans l'ouverture de la page)
» Récupérer un code HTML dans une page de code source HTML
» Problème de CSS dans une page html
» Javascript dans page html
» Ajout d'un bouton pour ouvrir une page html (script fait mais erreur dans l'ouverture de la page)
» Récupérer un code HTML dans une page de code source HTML
» Problème de CSS dans une page html
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum