Accueil
Créer un forumFixer une div lors du scroll
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
Fixer une div lors du scroll
par Nileeda Mer 28 Oct 2015 - 1:42
Bonjour, Bonsoir,
Je me suis lancée dans un nouveau design pour mon forum. J'ai une idée particulière de ce que je souhaite. J'aimerai qu'une partie du design devienne fixe lorsque le scroll est descendu assez bas. Autrement dit, j'aimerai que mon bloc jaune devienne fixe lorsqu'on descend assez bas dans la page jusqu'à ne plus voir la bannière (500px de hauteur)
Voici le forum que j'utilise pour mes test : http://untestuntheme.forumactif.org/
J'ai effectuer quelques recherches et j'ai notamment trouvé http://stickyjs.com/ qui illustre très bien ce que je souhaite. Seulement, je ne sais pas comment l'utiliser sur le forum ! >_<
J'ai également trouvé http://forum.alsacreations.com/topic-4-67814-1-Fixer-une-div-a-un-moment-du-scrolling.html et http://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css mais tout comme le premier lien, je ne sais pas comment utiliser le code.
Actuellement, mon bloc jaune est situé dans mon template overall_header, tout comme le script de Sticky. Cependant, j'ai déjà essayé de mettre les scripts dans les pages de scripts, dans le template, je les ai changé plusieurs fois de place, mais rien à faire, je n'obtiens pas ce que je veux. J'ai testé les trois scripts évoqués. Egalement, le cadre jaune était dans le template overall_footer_end avant. Même celui-ci je ne sais même plus où le mettre...
Je n'y connais pas grand chose en Javascript. En lisant le code, je peux comprendre à quoi il sert, mais je ne sais pas où le placer, et comment réellement l'utiliser.
Ma question est donc la suivante : avez-vous une idée de comment je peux utiliser un de ces scripts ? A défaut, y'a-t-il une autre solution ?
Je vous joints le template overall_header et la partie du CSS qui lui est associée :
Pour le CSS, j'ai également testé diverses options comme .fixer{} seul ou .test .fixer{} mais pareillement, ça ne change rien.
Ne comprenant pas ce que je fais, je m'en remets à vous !
Merci d'avance,
Bonne nuit ou journée à vous !
Je me suis lancée dans un nouveau design pour mon forum. J'ai une idée particulière de ce que je souhaite. J'aimerai qu'une partie du design devienne fixe lorsque le scroll est descendu assez bas. Autrement dit, j'aimerai que mon bloc jaune devienne fixe lorsqu'on descend assez bas dans la page jusqu'à ne plus voir la bannière (500px de hauteur)
Voici le forum que j'utilise pour mes test : http://untestuntheme.forumactif.org/
J'ai effectuer quelques recherches et j'ai notamment trouvé http://stickyjs.com/ qui illustre très bien ce que je souhaite. Seulement, je ne sais pas comment l'utiliser sur le forum ! >_<
J'ai également trouvé http://forum.alsacreations.com/topic-4-67814-1-Fixer-une-div-a-un-moment-du-scrolling.html et http://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css mais tout comme le premier lien, je ne sais pas comment utiliser le code.
Actuellement, mon bloc jaune est situé dans mon template overall_header, tout comme le script de Sticky. Cependant, j'ai déjà essayé de mettre les scripts dans les pages de scripts, dans le template, je les ai changé plusieurs fois de place, mais rien à faire, je n'obtiens pas ce que je veux. J'ai testé les trois scripts évoqués. Egalement, le cadre jaune était dans le template overall_footer_end avant. Même celui-ci je ne sais même plus où le mettre...
Je n'y connais pas grand chose en Javascript. En lisant le code, je peux comprendre à quoi il sert, mais je ne sais pas où le placer, et comment réellement l'utiliser.
Ma question est donc la suivante : avez-vous une idée de comment je peux utiliser un de ces scripts ? A défaut, y'a-t-il une autre solution ?
Je vous joints le template overall_header et la partie du CSS qui lui est associée :
- 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}>
<link href='http://fonts.googleapis.com/css?family=Khand|Anton|Tangerine|Great+Vibes|Fjalla+One|Dancing+Script|Satisfy|Cookie|Sacramento|Quicksand|Lateef|Alegreya+Sans+SC|Electrolize|Michroma' rel='stylesheet' type='text/css'>
<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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://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="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/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() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des elements */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des elements et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).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);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#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;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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}
<!-- BEGIN switch_ticker_new -->
<style>
.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;
}
</style>
<!-- END switch_ticker_new -->
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/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="http://{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;">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<div id="banniere" onclick="document.location.href='/forum'">
<div id="contxt_fo">Cher descendant,<br/>
Tu as été amené ici en raison de tes pouvoirs surnaturels. Tu ne pourras pas quitter ce lieu, ne devra pas essayer de le quitter. Nous avons essayé de recopier autant que possible le monde extérieur d’où tu viens. Nous espérons que tu ne seras pas trop dépaysé. Intègres toi aussi bien que possible dans ce monde où seuls les habitants te seront étrangers. Nous cherchons juste à te protéger et à préserver l’équilibre du monde.
<br/><br/>
A.</div>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<div id="nav_forum_1">
<a href="/forum">Accueil</a><br/>
<a href="/search">Rechercher</a><br/>
<a href="/faq">FAQ</a><br/>
<a href="/memberlist">Membres</a><br/>
<a href="/groups">Groupes</a><br/>
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile">Profil</a><br/>
<a href="/privmsg?folder=inbox">Messagerie</a><br/>
<a href="/login?logout">Bye bye ♥</a><br/>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/register">Rejoins-nous ! ♪</a><br/>
<a href="/login">Connexion</a><br/>
<!-- END switch_user_logged_out -->
</div>
</div>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$(".test").sticky({topSpacing:0});
});
</script>
<div class="test">
<iframe style="width: 310px; height: 585px;" scrolling="no" frameborder="0" src="http://untestuntheme.forumactif.org/h7-panneau_lateral"></iframe>
</div>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<!--<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<!--<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<!--<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<!-- <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<!-- <div class="maintitle">{MAIN_SITENAME}</div>
<!-- <br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
<!--</tr>
<!--</table> -->
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
</tr>
</table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<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>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
- Code:
.test{
z-index: 999;
position: relative;
width: 340px;
height: 585px;
float:right;
right: 0;
background-color: yellow;
}
.fixer .test{
z-index: 999;
position: fixed;
bottom: 0px;
}
Pour le CSS, j'ai également testé diverses options comme .fixer{} seul ou .test .fixer{} mais pareillement, ça ne change rien.
Ne comprenant pas ce que je fais, je m'en remets à vous !
Merci d'avance,
Bonne nuit ou journée à vous !
Dernière édition par Nileeda le Ven 30 Oct 2015 - 14:18, édité 1 fois
Nileeda- Nouveau membre
-
Messages : 24
Inscrit(e) le : 18/09/2014 -
Nileeda- Nouveau membre
-
Messages : 24
Inscrit(e) le : 18/09/2014 -
Re: Fixer une div lors du scroll
par Invité Ven 30 Oct 2015 - 1:19
Bonjour,
Cette astuce là fonctionne: http://forum.alsacreations.com/topic-4-67814-1-Fixer-une-div-a-un-moment-du-scrolling.html
Seulement,dans la déclaration du CSS,il faut aussi rajouter la propriété bottom:
L'id nommé #gauche qui est dans une div fait référence à votre carré jaune à vous nommé #msg_et qui est un id aussi mais qui est dans un tableau. (table#msg_et)
La classe quant à elle applique le "style" c'est à dire la position " fixée " seulement lorsqu'elle est ajoutée.
Si on comprend le fonctionnement un minimum on trouve vite fais ce qu'il faut changer et ça glisse tout seul après...
Bon courage.
Cette astuce là fonctionne: http://forum.alsacreations.com/topic-4-67814-1-Fixer-une-div-a-un-moment-du-scrolling.html
Seulement,dans la déclaration du CSS,il faut aussi rajouter la propriété bottom:
.fixgauche{
z-index: 9999;
position: fixed;
top: 0;
bottom: 0;
/* Mise en forme */
width: 270px;
}
Je peux toujours vous expliquer avec mes mots et le peu de connaissances que j'ai mais je vais être grotesque aux yeux des fins connaisseurs... Toujours est-il que pour cette astuce là il suffit de regarder les commentaires dans le code javascript:Ma question est donc la suivante : avez-vous une idée de comment je peux utiliser un de ces scripts ? A défaut, y'a-t-il une autre solution ?
- Code:
//Au scroll dans la fenetre on déclenche la fonction
//si on a défini de plus de 187 px du haut vers le bas
//on ajoute la classe "fixgauche" à <div id="gauche">
//sinon on retire la classe "fixgauche" à <div id="gauche">
" Doit se lire comme ceci : Seulement si la page est scrollée de 187px on ajoute alors la classe .fixgauche à la div contenant l'id #gauche dans le cas contraire on retire cette classe immédiatement "
L'id nommé #gauche qui est dans une div fait référence à votre carré jaune à vous nommé #msg_et qui est un id aussi mais qui est dans un tableau. (table#msg_et)
La classe quant à elle applique le "style" c'est à dire la position " fixée " seulement lorsqu'elle est ajoutée.
Si on comprend le fonctionnement un minimum on trouve vite fais ce qu'il faut changer et ça glisse tout seul après...
Bon courage.
Invité- Invité
Re: Fixer une div lors du scroll
par Nileeda Ven 30 Oct 2015 - 14:17
Bonjour et MERCIIIIIIIIIIIIIIIIIIIIIIIII !!!
Bon, j'avoue que ce n'était pas tout à fait ce dont j'avais besoin ! Vous m'avez permis de fixer la page d'accueil avec votre proposition, alors que je souhaitais fixer le bloc sur le côté droite. Mais c'est de ma faute, entre temps j'ai commencé autre chose et je n'ai pas fait attention aux couleurs.
Votre aide m'a permis de réaliser ce que je souhaitais tout de même et je vous en remercie chaleureusement Je suis assez contente de voir que je n'avais pas comprit le code JS de travers !
Je laisse le code final pour ceux qui le souhaitent :
J'ai donc mon bloc "menulat" dans mon template "overall_header", du CSS et du JS associé de cette manière :
Dans Affichage>Templates>Général>overall_hearder
Dans Affichage>Couleurs>Feuille de style CSS
Et dans Modules>HTML & JavaScript>Gestion des codes JavaScript
Bonne journée à vous et encore merci
Bon, j'avoue que ce n'était pas tout à fait ce dont j'avais besoin ! Vous m'avez permis de fixer la page d'accueil avec votre proposition, alors que je souhaitais fixer le bloc sur le côté droite. Mais c'est de ma faute, entre temps j'ai commencé autre chose et je n'ai pas fait attention aux couleurs.
Votre aide m'a permis de réaliser ce que je souhaitais tout de même et je vous en remercie chaleureusement
Je suis assez contente de voir que je n'avais pas comprit le code JS de travers ! Je laisse le code final pour ceux qui le souhaitent :
J'ai donc mon bloc "menulat" dans mon template "overall_header", du CSS et du JS associé de cette manière :
Dans Affichage>Templates>Général>overall_hearder
- 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}>
<link href='http://fonts.googleapis.com/css?family=Khand|Anton|Tangerine|Great+Vibes|Fjalla+One|Dancing+Script|Satisfy|Cookie|Sacramento|Quicksand|Lateef|Alegreya+Sans+SC|Electrolize|Michroma' rel='stylesheet' type='text/css'>
<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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://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="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/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() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des elements */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des elements et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).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);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#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;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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}
<!-- BEGIN switch_ticker_new -->
<style>
.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;
}
</style>
<!-- END switch_ticker_new -->
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/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="http://{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;">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<div id="banniere" onclick="document.location.href='/forum'">
<div id="contxt_fo">Cher descendant,<br/>
Tu as été amené ici en raison de tes pouvoirs surnaturels. Tu ne pourras pas quitter ce lieu, ne devra pas essayer de le quitter. Nous avons essayé de recopier autant que possible le monde extérieur d’où tu viens. Nous espérons que tu ne seras pas trop dépaysé. Intègres toi aussi bien que possible dans ce monde où seuls les habitants te seront étrangers. Nous cherchons juste à te protéger et à préserver l’équilibre du monde.
<br/><br/>
A.</div>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<div id="nav_forum_1">
<a href="/forum">Accueil</a><br/>
<a href="/search">Rechercher</a><br/>
<a href="/faq">FAQ</a><br/>
<a href="/memberlist">Membres</a><br/>
<a href="/groups">Groupes</a><br/>
<!-- BEGIN switch_user_logged_in -->
<a href="/profile?mode=editprofile">Profil</a><br/>
<a href="/privmsg?folder=inbox">Messagerie</a><br/>
<a href="/login?logout">Bye bye ♥</a><br/>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/register">Rejoins-nous ! ♪</a><br/>
<a href="/login">Connexion</a><br/>
<!-- END switch_user_logged_out -->
</div>
</div>
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<div id="menulat">
<iframe style="width: 310px; height: 585px;" scrolling="no" frameborder="0" src="http://untestuntheme.forumactif.org/h7-panneau_lateral"></iframe>
</div>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<!--<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<!--<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<!--<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<!-- <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<!-- <div class="maintitle">{MAIN_SITENAME}</div>
<!-- <br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
<!--</tr>
<!--</table> -->
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
</tr>
</table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<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>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<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>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Dans Affichage>Couleurs>Feuille de style CSS
- Code:
#menulat{
width: 340px;
height: 585px;
float:right;
right: 0;
background-color: yellow;
}
.fixgauche{
z-index: 999;
position: fixed;
top: 0;
bottom: 0;
width: 340px;
}
Et dans Modules>HTML & JavaScript>Gestion des codes JavaScript
- Code:
$(function(){
$(window).scroll(
function () {
if ($(this).scrollTop() > 500) {
$('#menulat').addClass("fixgauche");
} else {
$('#menulat').removeClass("fixgauche");
}
}
);
});
Bonne journée à vous et encore merci
Nileeda- Nouveau membre
-
Messages : 24
Inscrit(e) le : 18/09/2014 -
Re: Fixer une div lors du scroll
par Invité Ven 30 Oct 2015 - 14:20
Bonjour, pas de soucis ça fait plaisir :d !
Merci pour les codes
Bon courage
Merci pour les codes
Bon courage
Invité- Invité
Sujets similaires» Impossible de mettre un scroll
» les balises [scroll] [/scroll ]
» Pb de Scroll
» Scroll Bar disparue
» Créer un scroll
» les balises [scroll] [/scroll ]
» Pb de Scroll
» Scroll Bar disparue
» Créer un scroll
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