Sujet Précédent Sujet Suivant

Afficher/masquer un module

Résolu
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011 - 3 juin 2011 à 23:41
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011 - 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

10 réponses

Réponse 1 / 10
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
6 juin 2011 à 21:49
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>
3
Réponse 2 / 10
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
4 juin 2011 à 10:59
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;
}
0
Réponse 3 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
4 juin 2011 à 14:15
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
0
Réponse 4 / 10
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
4 juin 2011 à 16:00
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
4 juin 2011 à 20:56
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?
0
Réponse 6 / 10
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
6 juin 2011 à 11:05
cree une image avec le texte et rajoute la en background-image dans la class touche
0
Réponse 7 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
6 juin 2011 à 16:49
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 -->
0
Réponse 8 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
6 juin 2011 à 22:40
Excellent ca marche niquel!

Merci pour tout kazma
0
Réponse 9 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
24 juin 2011 à 23:30
Je remonte mon sujet

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

merci par avance
0
Réponse 10 / 10
DefkoR Messages postés 7 Date d'inscription vendredi 11 janvier 2008 Statut Membre Dernière intervention 4 juillet 2011
4 juil. 2011 à 22:14
up si une quelconque aide passe par ici , je suis preneur
0

Discussions similaires

afficher un tableau en php
Larose_1921 -
s -

1 réponse
Solution pour cacher un mot de passe d'accès d'une page
bojolais -
bojolais -

35 réponses
Module de classe ou classe de module ?
Redge3 -
Redge3 -

3 réponses
SELECTIONNER les 5 dernière ligne d'une table
nicomilville -
dac -

13 réponses
Masquer/ afficher dynamiquement une div (ou autre element) en Js
rhan_659 -
kopax -

16 réponses
Rejoignez-nous