Afficher/masquer un module [Résolu]

DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 3 juin 2011 à 23:41 - Dernière réponse : DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention
- 4 juil. 2011 à 22:14
Bonjour/bonsoir

voila je suis très néophyte en js, ça fait un bon moment que je cherche un epu partout mais en vain ce pourquoi je m'en remet a vous.

J'ai un forum gratuit de chez forumactif et j'ai mis en place un script permettant de voir les membres connectés sur MUMBLE (un utilitaire de chat vocal pour les joueurs un peu comme teamspeak)

seulement j'aimerais le faire apparaitre (vers le bas)/disparaitre(vers le haut) avec un bouton image.

Tout mon code réside dans l'overall header:

<head>
<script type="text/javascript">
<!--
var ouvert = 1;
var style = "classic";
var couleur_fond = "F0AD48";
var couleur_texte = "000000";
var largeur = 175;
var hauteur = 400;
var id_compte = "13080";
var lang = "fr";
var taille_police = 12;
var voir_salons = 1;
//-->
</script>
</head>




<script type="text/javascript" src="http://www.mumble-serveur.com/web_script/webscript_mumble.js"></script>






ce qui donne : http://forumtestduphoenix.bbactif.com/

ce que j'aimerais c'est un peu comme la chatbox latérale, cette dernière est générée en jquery dans une page html j'ai essayé de reprendre son code mais je n'arrive pas a l'adapter pour le mumble ~

J’espère avoir été explicite et que quelqu'un pourra trouver mon bonheur

merci
Afficher la suite 

10 réponses

Répondre au sujet
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 6 juin 2011 à 21:49
+3
Utile
sa marche pas car j'ai pas mis de point virgule a la fin de chaque ligne ce qu'il faut toujour faire et commme l'ensemble du code de la page est compressé cela cause probleme

le code avec ces sacré points virgules

<script type="text/javascript" language="JavaScript">

function aller(){

var nume=document.getElementById('nunu');
nume.style.left=nume.offsetLeft+10+'px';
if(nume.offsetLeft==0){
document.getElementById('touche').onclick=retour;
return false;
}
setTimeout(aller,10);
};

function retour(){

var nume=document.getElementById('nunu');
nume.style.left=nume.offsetLeft-10+'px';
if(nume.offsetLeft<=-(nume.offsetWidth)){
document.getElementById('touche').onclick=aller;
return false;
};
setTimeout(retour,10);
};

</script>
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de @karamel
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 4 juin 2011 à 10:59
0
Utile
un truc dans ce genre

<!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">
<head>
<title>menu gauche</title>
<link rel="stylesheet" type="text/css" href="buzz.css"></head>
<style type="text/css">

#nunu{
position:fixed;
top: 10%;
left:-250px;
width:250px;
height:400px;
z-Index:10;
background-color:#84a5c9;
}

#touche{
position:absolute;
right:-20px;
top:0px;
width:20px;
height:100px;
background-color:#84a5c9;
-moz-border-radius:10px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 10px;
-o-border-radius:0px 0px 10px 10px;
border-radius:0px 10px 10px 0px;
}

</style>

<script type="text/javascript" language="JavaScript">

function aller(){

var nume=document.getElementById('nunu')
nume.style.left=nume.offsetLeft+10+'px'
if(nume.offsetLeft==0){
document.getElementById('touche').onclick=retour
return false
}
setTimeout(aller,10)
}

function retour(){

var nume=document.getElementById('nunu')
nume.style.left=nume.offsetLeft-10+'px'
if(nume.offsetLeft<=-(nume.offsetWidth)){
document.getElementById('touche').onclick=aller
return false
}
setTimeout(retour,10)
}

</script>
</head>









</html>


met le div du chat a l'interieur

pour les tailles il faut modifier la class nunu le left doit toujour etre egale au width mais en negatif

#nunu{
position:fixed;
top: 10%;
left:-250px;
width:250px;
height:400px;
z-Index:10;
background-color:#84a5c9;
}
Commenter la réponse de @karamel
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 4 juin 2011 à 14:15
0
Utile
Merci pour ta réponse

met le div du chat a l'interieur

ou ça exactement ?

par contre c'est pas pour le chat que je demande mais pour le mumble^^

ca a l'air super comme script exactement ce qu'il me faudrait, reste plus qu'a l'adapter avec mon module.

ça donne ça avec ton script: http://forumtestduphoenix.bbactif.com/h3-mumble
Commenter la réponse de DefkoR
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 4 juin 2011 à 16:00
0
Utile
c'est bon ce que tu a fait mais il faut retirer la position fixed



<script type="text/javascript" src="http://www.mumble-serveur.com/web_script/webscript_mumble.js"></script>
Commenter la réponse de @karamel
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 4 juin 2011 à 20:56
0
Utile
Oui effectivement une position absolute passe mieux ^^

une petit dernière chose est il possible de mettre du texte dans l'onglet pour mettre le titre du module?
Commenter la réponse de DefkoR
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 6 juin 2011 à 11:05
0
Utile
cree une image avec le texte et rajoute la en background-image dans la class touche
Commenter la réponse de @karamel
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 6 juin 2011 à 16:49
0
Utile
super j'aurais du y penser :/

par contre j'ai un soucis j'ai voulu intégrer le code dans l'overall header et dans la page on voit l'onglet mais il ne bouge pas quand on clique!

comme tu peux voir > http://forumtestduphoenix.bbactif.com/

voila comment j'ai intégré le 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}>
<head>
<!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
<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_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>
<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 &#65533;l&#65533;ments */
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 contenur en fonction des &#65533;l&#65533;ments et de la hauteur personnalis&#65533;e dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );

/* Redimensionnement des &#65533;l&#65533;ments 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');
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}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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 -->
<style type="text/css">

#nunu{
position:fixed;
top: 10%;
left:-190px;
width:190px;
height:415px;
z-Index:10;
background-color:none;
}

#touche{
position:absolute;
right:-20px;
top:0px;
width:20px;
height:100px;
background-color:#84a5c9;
-moz-border-radius:10px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 10px;
-o-border-radius:0px 0px 10px 10px;
border-radius:0px 10px 10px 0px;
}

</style>

<script type="text/javascript" language="JavaScript">

function aller(){

var nume=document.getElementById('nunu')
nume.style.left=nume.offsetLeft+10+'px'
if(nume.offsetLeft==0){
document.getElementById('touche').onclick=retour
return false
}
setTimeout(aller,10)
}

function retour(){

var nume=document.getElementById('nunu')
nume.style.left=nume.offsetLeft-10+'px'
if(nume.offsetLeft<=-(nume.offsetWidth)){
document.getElementById('touche').onclick=aller
return false
}
setTimeout(retour,10)
}

</script>
<script type="text/javascript">
<!--
var ouvert = 1;
var style = "classic";
var couleur_fond = "F0AD48";
var couleur_texte = "000000";
var largeur = 175;
var hauteur = 400;
var id_compte = "13080";
var lang = "fr";
var taille_police = 12;
var voir_salons = 1;
//-->
</script>

<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
  	var _gaq = _gaq || [];
  	_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
  	_gaq.push(['_trackPageview']);

  	(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>

<!-- BEGIN hitskin_preview -->


 Hitskin.com




{hitskin_preview.L_THEME_SITE_PREVIEW}


{hitskin_preview.U_INSTALL_THEME}{hitskin_preview.L_RETURN_THEME}






<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->


{SITENAME},

----

<form action="{S_LOGIN_ACTION}" method="get">

</form>

{LOGIN_POPUP_MSG}



<!-- END switch_login_popup -->


{JAVASCRIPT}
<table width="100%" cellspacing="0" cellpadding="0" border="0">
----

<!-- BEGIN switch_logo_left -->, </td>
<!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center -->

<!-- END switch_logo_center -->

{MAIN_SITENAME}

{SITE_DESCRIPTION}
,

<script type=\"text/javascript\" src=\"http://www.mumble-serveur.com/web_script/webscript_mumble.js\"></script>

<!-- BEGIN switch_logo_right -->
,
<!-- END switch_logo_right -->


{GENERATED_NAV_BAR}





<!-- BEGIN switch_ticker_new -->



<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->




<!-- END switch_ticker_new -->

                               <!-- BEGIN switch_ticker -->


<!-- BEGIN ticker_row -->

{switch_ticker.ticker_row.ELEMENT}

<!-- END ticker_row -->



<!-- END switch_ticker -->





<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->

<!-- END saut -->
<!-- END giefmod_index1 -->,
<!-- BEGIN html_validation -->





</td>
</tr>
</table>

</html>
<!-- END html_validation -->
Commenter la réponse de DefkoR
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 6 juin 2011 à 22:40
0
Utile
Excellent ca marche niquel!

Merci pour tout kazma
Commenter la réponse de DefkoR
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 24 juin 2011 à 23:30
0
Utile
Je remonte mon sujet

Que dois je modifier pour avoir la meme touche mais sur la droite?

merci par avance
Commenter la réponse de DefkoR
DefkoR 7 Messages postés vendredi 11 janvier 2008Date d'inscription 4 juillet 2011 Dernière intervention - 4 juil. 2011 à 22:14
0
Utile
up si une quelconque aide passe par ici , je suis preneur
Commenter la réponse de DefkoR

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.