Fonctionnement header aléatoire + clique sur le header
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
Fonctionnement header aléatoire + clique sur le header
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : Hier
Lien du forum : https://avada-kedavrarpg.forumactif.com
Description du problème
Bien le bonjour à vous,Je voulais demander votre aide car malgré avoir essayé plusieurs choses je n'arrive pas à faire fonctionner mon header aleatoire et le clique sur celui-ci.
Quelqu'un pourrait-il m'aider ?
Merci
Re: Fonctionnement header aléatoire + clique sur le header
Bonjour, et bienvenue sur le Forum des Forums Forumactif
Il se trouve que j'ai justement un logo aléatoire sur le forum de mon profil -->
Est ce que son fonctionnement vous conviendrait ?
Et si vous nous disiez (liens à l'appui) ce que vous avez essayé ?AryaLestrange a écrit:... malgré avoir essayé plusieurs choses je n'arrive pas à faire fonctionner mon header aleatoire
Il se trouve que j'ai justement un logo aléatoire sur le forum de mon profil -->
Est ce que son fonctionnement vous conviendrait ?
Re: Fonctionnement header aléatoire + clique sur le header
Bonjour
Oui excusez moi j'étais sur mon téléphone donc j'ai du mal avec les captures d'écran
C'est pour mon forum rpg que j'essaye de créer moi-même
J'ai essayé un tuto par ici sur les header aléatoires avec du Javascript :
https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante
Mais ça n'a pas l'air de fonctionner j'ai donc épuiser également un autre problème mais c'est pas la même chose :/
Si vous voulez je peux vous montrer le JS ; css et template ?
À quel niveau pour votre logo je ne l'ai pas vu ?
Oui excusez moi j'étais sur mon téléphone donc j'ai du mal avec les captures d'écran
C'est pour mon forum rpg que j'essaye de créer moi-même
J'ai essayé un tuto par ici sur les header aléatoires avec du Javascript :
https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante
Mais ça n'a pas l'air de fonctionner j'ai donc épuiser également un autre problème mais c'est pas la même chose :/
Si vous voulez je peux vous montrer le JS ; css et template ?
À quel niveau pour votre logo je ne l'ai pas vu ?
Re: Fonctionnement header aléatoire + clique sur le header
Tout en haut de page entre la toolbar et la barre de navigation sur le fofo de mon profil !
Sinon pour la version ModernBB, c'est un peu plus compliqué à mettre en place mais ça fonctionne.
Dans votre CSS ajoutez :
Vous pouvez voir que ça fonctionne !
Sinon pour la version ModernBB, c'est un peu plus compliqué à mettre en place mais ça fonctionne.
Dans votre CSS ajoutez :
- Code:
.headerbar {
height: 600px;
}
Vous pouvez voir que ça fonctionne !
Re: Fonctionnement header aléatoire + clique sur le header
Ah oui je vois en effet pour votre forum
Voici mes codes, j'ai peut-être mal toucher une partie : css :
template overall-header :
et le JS :
je pense avoir tout mis
Voici mes codes, j'ai peut-être mal toucher une partie : css :
- Code:
.headerbar {
background-color: transparent;
background-image: url(https://2img.net/i/fa/empty.gif);
background-position: bottom center;
}
#page-header {
background-image: url('https://www.zupimages.net/up/20/24/ozq5.png'), url('ttps://www.zupimages.net/up/20/24/naak.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 800px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
template overall-header :
- Code:
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
<link rel="search" type="application/opensearchdescription+xml"
href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch (tickerDirParam) {
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function () {
$('#fa_ticker_content').css('display', 'block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0) {
$('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item) {
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert) {
var height_max = h_perso;
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
} else {
$('ul#fa_ticker_content li:not(:first)').css('display', 'none');
$('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if (pm != null) {
pm.focus();
}
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align: center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})
(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>
<body id="modernbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a
href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}"/>
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/>
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<style>@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}</style>
<div id="page-header">
<div class="headerbar">
<div id="headerbar-top">
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
et le JS :
- Code:
$(document).ready(function(){
var classes = ["https://www.zupimages.net/up/20/24/ozq5.png", "https://www.zupimages.net/up/20/24/naak.png",];
$("#page-header").each(function(){
$(this).addClass(classes[~~(Math.random()*classes.length)]);
});
});
je pense avoir tout mis
Re: Fonctionnement header aléatoire + clique sur le header
Je ne saisis pas à quoi sert votre js puisqu'il se contente d'ajouter une class au page-header
Essayez avec ce script
et ce CSS :
Résultat ?
Au passage votre CSS actuel comporte (au moins) une erreur. Il manque le h de https à votre seconde image.
Essayez avec ce script
- Code:
$(function() {
var a = [
"https://www.zupimages.net/up/20/24/ozq5.png",
"https://www.zupimages.net/up/20/24/naak.png",
];
$("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])
});
et ce CSS :
- Code:
.headerbar {
height: 700px;
}
Résultat ?
Au passage votre CSS actuel comporte (au moins) une erreur. Il manque le h de https à votre seconde image.
Re: Fonctionnement header aléatoire + clique sur le header
Je viens de modifier en suivant vos instructions sur le JS et je viens de le remplacer.
Cependant cela ne marche toujours pas je n'ai pas de changement sur le header :/
J'ai bien ajouté le h qui manquait, j'ai rien retiré d'autres, mais ça n'a pas l'air de marché :/
Cependant cela ne marche toujours pas je n'ai pas de changement sur le header :/
J'ai bien ajouté le h qui manquait, j'ai rien retiré d'autres, mais ça n'a pas l'air de marché :/
Re: Fonctionnement header aléatoire + clique sur le header
Evidemment, ça risquait pas de fonctionner vu que vous avez supprimé le logo depuis le #template
Dans votre #overall_header remplacez :
par :
Et (rappel), pensez à ajouter ceci à votre feuille CSS
Dans votre #overall_header remplacez :
- Code:
<div id="headerbar-top">
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
par :
- Code:
<div id="headerbar-top">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>
<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
Et (rappel), pensez à ajouter ceci à votre feuille CSS
- Code:
.headerbar {
height: 700px;
}
Re: Fonctionnement header aléatoire + clique sur le header
Coucou
Merci j'avais oublié que je l'avais retiré :/
du coup, ça à plus ou moins marché, même si c'est décalé :/ des margin-top et left pourrait-il suffire vous penser à l'insérer correctement ?
j'ai un petit bug par contre qui vient d'apparaître, je sais pas si c'est normal que ça fasse comme ça lorsque je descends la page :/
https://nsa40.casimages.com/img/2020/06/14/200614060342859876.png
des idées ?(je cherche)
Merci j'avais oublié que je l'avais retiré :/
du coup, ça à plus ou moins marché, même si c'est décalé :/ des margin-top et left pourrait-il suffire vous penser à l'insérer correctement ?
j'ai un petit bug par contre qui vient d'apparaître, je sais pas si c'est normal que ça fasse comme ça lorsque je descends la page :/
https://nsa40.casimages.com/img/2020/06/14/200614060342859876.png
des idées ?(je cherche)
Re: Fonctionnement header aléatoire + clique sur le header
A moins de ne pas avoir compris, ce ue vous appelez bug est le fonctionnement normal de ModernBB.
Dès qu'on fait défiler, la barre de navigation s'ancre au sommet de la page, un peu comme sur ce forum de support.
Pour ce qui est des "finitions" je passe la main car 1/ Je connais très mal ModernBB et awesomeBB et 2/ Je vais me déconnecter.
Mais le plus dur est fait. Faire fonctionner ce satané script ...
Dès qu'on fait défiler, la barre de navigation s'ancre au sommet de la page, un peu comme sur ce forum de support.
Pour ce qui est des "finitions" je passe la main car 1/ Je connais très mal ModernBB et awesomeBB et 2/ Je vais me déconnecter.
Mais le plus dur est fait. Faire fonctionner ce satané script ...
Re: Fonctionnement header aléatoire + clique sur le header
Hey
merci beaucoup
J'essaye d'avoir le même rendu que sur mes autres fofos mais j'y arrive pas :/
Je n'ai plus que ce détail à régler, et le reste est bon
voici unautre de mes fofos : https://mimbulus-mimbletonia.forumactif.org/ à titre d'exemple le header est pas coupé comme pour l'instant :/
d'avance merci
merci beaucoup
J'essaye d'avoir le même rendu que sur mes autres fofos mais j'y arrive pas :/
Je n'ai plus que ce détail à régler, et le reste est bon
voici unautre de mes fofos : https://mimbulus-mimbletonia.forumactif.org/ à titre d'exemple le header est pas coupé comme pour l'instant :/
d'avance merci
Re: Fonctionnement header aléatoire + clique sur le header
Sur votre autre fofo vous avez fait l'inverse : header fixe et image de fond aléatoire. Le header étant une grosse image transparente délimitant là où le clic est autorisé.
Ici vous avez parlé de header aléatoire et du coup on charge une image aléatoire à la place du logo, sans toucher à l'image de fond.
Ici vous avez parlé de header aléatoire et du coup on charge une image aléatoire à la place du logo, sans toucher à l'image de fond.
Re: Fonctionnement header aléatoire + clique sur le header
Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse. |
Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu » |
Re: Fonctionnement header aléatoire + clique sur le header
Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées. |
Sujets similaires
» Problème de Header aléatoire
» Header Aléatoire qui ne fonctionne pas.
» [JavaScript] Header Aléatoire
» centrage du header aléatoire modernbb
» Texte aléatoire sous header
» Header Aléatoire qui ne fonctionne pas.
» [JavaScript] Header Aléatoire
» centrage du header aléatoire modernbb
» Texte aléatoire sous header
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