Fork me on GitHub






boite identification en javascript
Semi pro
Inscrit: 06/09/2005 01:34
De Royan
Messages: 609
bonjour a tous,

j'ai essayer d'installer le java script d'identification de kris ici cela ne fonctionne pas !!!

j'ai copier les mootools-1.2.3-core-yc.js, mootools-1.2.3.1-more.js et mooSlide2-moo12.js
dans le dossier: .../jseffects/mootools/ et .../jseffects/mootools/mooSlide2/

puis dans mon topheader.html
<div id="xo-userbar_siteclosed"><a href="#" id="login"><strong>Connexion</strong></a></div>
      <
div id="loginPanel" class="mooSlide">
    <{if !
$xoops_isuser}>
        <!-- 
boite d'identification -->
<form method="post" action="<{xoAppUrl /user.php op=login}>">
        <input name="uname" type="text" value="<{$smarty.const.THEME_PSEUDO}>" onfocus="this.value=(this.value=='
<{$smarty.const.THEME_PSEUDO}>')? '' : this.value ;" title="<{$smarty.const.THEME_DESC_PSEUDO}>"/>&nbsp;&nbsp;
        <input name="pass" type="password" value="<{$smarty.const.THEME_PASSWORD}>" onfocus="this.value=(this.value=='
<{$smarty.const.THEME_PASSWORD}>')? '' : this.value ;" title="<{$smarty.const.THEME_DESC_PASSWORD}>"/>&nbsp;
        <input type="hidden" name="xoops_redirect" value="<{$smarty.server.REQUEST_URI}>" />
        <{if $lang_siteclosemsg}>
        <input type="hidden" name="xoops_login" value="1" />
        <{/if}>
        <button type="submit"><img src="<{xoImgUrl icons/users/go.png}>" alt="<{$smarty.const._LOGIN}>" /></button>
</form>
        <a href="<{xoAppUrl /register.php}>" class="register" title="<{$smarty.const.THEME_REGISTER}>"><{$smarty.const.THEME_REGISTER}></a>
    </div>
    <div id="xo-uname">
    <{else}>
        <div id="xo-uname"><{$smarty.const.THEME_WELLCOME}>&nbsp;<a href="<{xoAppUrl /user.php}>" title="<{$smarty.const.THEME_PROFILE}>"><{$xoops_uname}></a></div>
    <{/if}>    
    </div>



et dans mon topheader.html qui est appeler entre les balises <head> </head> j'ai ajouter les appels
<script type="text/javascript" src="<{xoAppUrl /jseffects/mootools/mootools-1.2.3-core-yc.js}>"></script>
<script type="text/javascript" src="<{xoAppUrl /jseffects/mootools/mootools-1.2.3.1-more.js}>"></script>
<script type="text/javascript" src="<{xoAppUrl /jseffects/mootools/mooSlide2/mooSlide2-moo12.js}>"></script>
    <script language="javascript" type="text/ecmascript">
    window.addEvent('domready',function(){
        var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content:'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
        //optional: AutoStart the slider on page load:
        //MyLogin.run();
        $('close').addEvent('click', function(e){
            e = new Event(e);
            myLogin.clearit();
            e.stop();
        });
    });
    </script>


et enfin dans mon css
/*******************************************************/
.mooSlide {
    
background-color#fff;
    
padding25px 10px 10px;
    
font-familyArialHelveticasans-serif;
    
line-height1.2em;
    
color#333;
    
border1px solid #33CCCC;
    
margin0 auto;
    
text-alignleft;
    
font-size0.85em;
    
displaynone;
    
width235px;
}

.
mooSlide h1 {
    
font-size1.6em;
    
height20px;
    
padding-top22px;
    
color#333;
    
bordernone;
}

/* padlock icon from IconsPedia */
/* http://www.iconspedia.com/icon/padlocks-1464.html */
.mooSlide h1.padlock {
    
/*background: url(../img/cadenasprivate.png) no-repeat 0 0;*/
        
background-color#fff;
    
padding-left50px;
}

.
mooSlide form {
    
margin0 0 10px 0;
    
height26px;
}

.
mooSlide label {
    
floatleft;
    
padding-top8px;
    
clearboth;
    
width180px;
    
displayblock;
}

.
mooSlide .left {
    
width200px;
    
floatleft;
    
padding-left25px;
}

.
mooSlide .right {
    
width270px;
    
floatleft;
    
padding-left25px;
}

.
mooSlide .sep {
    
/*width: 1px;
    height: 180px;
    margin-top: 25px;
    float: left;
    border-right: 1px solid #333;*/
}

.
mooSlide input {
    
border1px #1A1A1A solid;
    
background#DCDCDC;
    
margin-right5px;
    
margin-top4px;
    
color#fff;
    
height16px;
    
floatleft;
    
clearboth;
    
displayblock;
}

.
mooSlide input:focus {
    
backgroundSilver;
}

.
mooSlide input.rememberme {
    
/*border: none;
    background: transparent;
    margin: 0;
    padding: 0;*/
}

.
mooSlide input.button_login {
    
width82px;
    
height42px;
    
cursorpointer;
    
bordernone;
    
margin-top10px;
        
background-color#fff;
    /*background: transparent url(../img/button-ok.png) no-repeat 0 0;*/
    
text-aligncenter;
}

.
mooSlide input.button_register {
    
/*width: 82px;
    height: 20px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    background: transparent url(../img/button_register.jpg) no-repeat 0 0;*/
}

.
mooSlide .loginClose {
    
displayblock;
    
positionabsolute;
    
right20px;
    
top10px;
    
width26px;
}

.
mooSlide .loginClose a {
    
displayblock;
    
width100%;
    
height26px;
        
background-color#fff;
    /*background: url(../img/button_close.png) no-repeat right 0;*/
    
padding-right10px;
    
bordernone;
    
font-size0.9em;
    
color#333;
}

.
mooSlide .loginClose a:hover {
    
background-color#fff;
    /*background: url(../img/button_close.png) no-repeat right -26px;*/
}


et cela ne fonctionne pas, la boite d'identification n'apparait pas lorsque je clique sur connexion

je suis aller sur le site www.artviper.net j'ai essayer avec leurs script même résultat

merci

Posté le : 04/10/2009 19:55
Partager Twitter Partagez cette article sur GG+
Re: boite identification en javascript
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
le code sur l'afux pour la page siteclosed (l'autre page possède une autre système de connexion plus élaboré )

LE HTML
<!-- Metas -->
    <{
includeq file="$theme_name/xometas.html"}>
<
link rel="stylesheet" type="text/css" media="all" title="Color" href="<{xoImgUrl css/mooslide_closed.css}>" />
    <!-- 
Scripts -->
    <{
includeq file="$theme_name/xoscripts.html"}>
    <
script type="text/javascript" src="<{xoAppUrl /jseffects/mootools/mooSlide2/mooSlide2-moo12.js}>"></script>
    <script language="javascript" type="text/ecmascript">
    window.addEvent('domready',function(){
        var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content:'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
        //optional: AutoStart the slider on page load:
        //MyLogin.run();
        $('close').addEvent('click', function(e){
            e = new Event(e);
            myLogin.clearit();
            e.stop();
        });
    });
    </script>
</head>
<body>
<!-- Login Panel using MooSlide -->
    <div id="loginPanel" class="mooSlide">
            <form class="left" action="<{xoAppUrl /user.php op=login}>" method="post">
                <h1 class="padlock"><{$smarty.const._LOGIN}></h1>
                <label for="log"><strong>Nom : </strong></label>
                <input type="text" name="uname" id="log" onfocus="this.value=''" onblur="if(this.value=='')this.value='Pseudo';" value="Pseudo" size="23" />
                <label for="pwd"><strong>Mot de passe:</strong></label>
                <input type="password" name="pass" id="pwd" size="23" onfocus="this.value=''" onblur="if(this.value=='')this.value='Password';" value="Password"/>
                <input type="hidden" name="xoops_redirect" value="<{$smarty.server.REQUEST_URI}>" />
                <input type="hidden" name="op" value="login" />
                <{if $lang_siteclosemsg}>
                    <input type="hidden" name="xoops_login" value="1" />
                <{/if}>
                <input type="submit" name="submit" value="" class="button_login" />
            </form>

            <div class="loginClose"><a href="#" id="close">&nbsp;</a></div>
    </div> <!-- / Login panel -->


LE CSS
/*MooSlide stylesheet*/

.mooSlide {
    
background-color#fff;
    
padding25px 10px 10px;
    
font-familyArialHelveticasans-serif;
    
line-height1.2em;
    
color#333;
    
border1px solid #33CCCC;
    
margin0 auto;
    
text-alignleft;
    
font-size0.85em;
    
displaynone;
    
width235px;
}

.
mooSlide h1 {
    
font-size1.6em;
    
height20px;
    
padding-top22px;
    
color#333;
    
bordernone;
}

/* padlock icon from IconsPedia */
/* http://www.iconspedia.com/icon/padlocks-1464.html */
.mooSlide h1.padlock {
    
backgroundurl(../img/cadenasprivate.pngno-repeat 0 0;
    
padding-left50px;
}

{
    
text-decorationnone;
    
color#33CCCC;
}

a:hover {
    
color#333;
}

.
mooSlide form {
    
margin0 0 10px 0;
    
height26px;
}

.
mooSlide label {
    
floatleft;
    
padding-top8px;
    
clearboth;
    
width180px;
    
displayblock;
}

.
mooSlide .left {
    
width200px;
    
floatleft;
    
padding-left25px;
}

.
mooSlide .right {
    
width270px;
    
floatleft;
    
padding-left25px;
}

.
mooSlide .sep {
    
/*width: 1px;
    height: 180px;
    margin-top: 25px;
    float: left;
    border-right: 1px solid #333;*/
}

.
mooSlide input {
    
border1px #1A1A1A solid;
    
background#DCDCDC;
    
margin-right5px;
    
margin-top4px;
    
color#fff;
    
height16px;
    
floatleft;
    
clearboth;
    
displayblock;
}

.
mooSlide input:focus {
    
backgroundSilver;
}

.
mooSlide input.rememberme {
    
/*border: none;
    background: transparent;
    margin: 0;
    padding: 0;*/
}

.
mooSlide input.button_login {
    
width82px;
    
height42px;
    
cursorpointer;
    
bordernone;
    
margin-top10px;
    
backgroundtransparent url(../img/button-ok.pngno-repeat 0 0;
    
text-aligncenter;
}

.
mooSlide input.button_register {
    
/*width: 82px;
    height: 20px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    background: transparent url(../img/button_register.jpg) no-repeat 0 0;*/
}

.
mooSlide .loginClose {
    
displayblock;
    
positionabsolute;
    
right20px;
    
top10px;
    
width26px;
}

.
mooSlide .loginClose a {
    
displayblock;
    
width100%;
    
height26px;
    
backgroundurl(../img/button_close.pngno-repeat right 0;
    
padding-right10px;
    
bordernone;
    
font-size0.9em;
    
color#333;
}

.
mooSlide .loginClose a:hover {
    
backgroundurl(../img/button_close.pngno-repeat right -26px;
}


J'espère que celà va t'aider un peu

@++

Posté le : 04/10/2009 20:31

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Re: boite identification en javascript
Semi pro
Inscrit: 06/09/2005 01:34
De Royan
Messages: 609
bonjour kris,

désoler pour ma réponse tardive, quand quelques chose ne marche pas je suis comme un fous ! je cherche pendant des jours.

en faite le javascript que je t'ai gentiment emprunter fonctionne très bien exactement le même effet que sur ton site, mais uniquement sous xoops 2.4rc le même code ne fonctionne pas sous 2.33 quelque chose bloc quoi ? j'ai du modifier quelques chose mais quoi ? un conflit entre java ou une sécurité je ne sais pas j'ai essayer d'autre java pour en avoir le cœur net idem même résultat, sur d'autre thèmes idem.

donc en attendant de passer a la 2.4 je souhaiter mettre une simple pop up j'ai donc créer un fichier identification.html

<div>
    <{if !
$xoops_isuser}>
        <!-- 
boite d'identification -->
      <form class="left" action="<{xoAppUrl /user.php op=login}>" method="post">
        <h1 class="padlock"><{$smarty.const.THEME_CONNEXION}></h1>
        <label for="log"><strong><{$smarty.const.THEME_PSEUDO}>: </strong></label>
        <input name="uname" type="text" id="log" value="<{$smarty.const.THEME_PSEUDO}>" onfocus="this.value=(this.value=='
<{$smarty.const.THEME_PSEUDO}>')? '' : this.value ;" title="<{$smarty.const.THEME_DESC_PSEUDO}>" size="23"/>&nbsp;&nbsp;
        <label for="pwd"><strong><{$smarty.const.THEME_PASSWORD}>:</strong></label>
        <input name="pass" id="pwd" size="23" type="password" value="<{$smarty.const.THEME_PASSWORD}>" onfocus="this.value=(this.value=='
<{$smarty.const.THEME_PASSWORD}>')? '' : this.value ;" title="<{$smarty.const.THEME_DESC_PASSWORD}>"/>&nbsp;
        <input type="hidden" name="xoops_redirect" value="<{$smarty.server.REQUEST_URI}>" />
        <{if $lang_siteclosemsg}>
        <input type="hidden" name="op" value="login" />
        <input type="hidden" name="xoops_login" value="1" />
        <{/if}>
        <input type="submit" name="submit" value="" class="button_login" />
        </form>
        <div class="inscript"><a href="<{$xoops_url}>/user.php#lost" title="<{$smarty.const.THEME_MPASSPERDU}>" /><strong><{$smarty.const.THEME_MPASSPERDU}></strong></a></div>
        <div class="passperdu"><a href="<{xoAppUrl /register.php}>"  title="<{$smarty.const.THEME_REGISTER}>" /><strong><{$smarty.const.THEME_REGISTER}></strong></a></div>
        <div class="loginClose"><a href="#" id="close">&nbsp;</a></div>
</div>
<div id="xo-uname">
    <{else}>
        <div id="xo-uname"><{$smarty.const.THEME_WELLCOME}>&nbsp;<a href="<{xoAppUrl /user.php}>" title="<{$smarty.const.THEME_PROFILE}>" /><{$xoops_uname}></a></div>
    <{/if}>    
</div>



puis fais un appel depuis mon header comme ceci:

<div id="xo-connexion">
<
a href="#" id="login" onClick="window.open('<{xoImgUrl /}>templates/identification.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=200, height=200, left=50, top=50');return(false)"><{$smarty.const.THEME_CONNEXION}></a> </div>


la le résultat tu t'en doute le code n'est pas traduit il apparaît tel que malgré que j'ai placer dans les metas entre les head
<!-- Scripts suplèmentaire -->
    <{
includeq file="$theme_name/identification.html"}>


même constat avec ce code
<div id="xo-connexion">
        <
a href="#" id="login" onClick="window.open('<{xoImgUrl /}>modules/system/blocks/system_block_login.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=200, height=200, left=50, top=50');return(false)"><{$smarty.const.THEME_CONNEXION}></a>
</
div>


merci a toi

Posté le : 06/10/2009 17:01
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

23 Personne(s) en ligne (11 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 23 | Plus ...