phpBB España Oficial

Publicado: **10 Jun 2013, 00:07**

hola máster,
entonces usando string tal como se hace con los sprites para usar el mismo class con un sub-class (tal como lo hace el font-awesome)
el script sería así:

Código: Seleccionar todo

$(function() {
        $("div[id^=mostrar-mini-profile-]").click(function(){
        $('#profile-popup').fadeIn('fast',function(){
            $('#profile-popup-box').animate({'top':'160px'},500);
        });
    });
    $('#profile-popup-box-close').click(function(){
        $('#profile-popup-box').animate({'top':'-200px'},500,function(){
            $('#profile-popup').fadeOut('fast');
        });
    });

y el uso HTML sería asi (uso con avatar de usuario)

Código: Seleccionar todo

                <!-- IF postrow.U_POST_AUTHOR --><div id="mostrar-mini-profile-{postrow.POST_ID}" title="Mostrar información del Usuario">{postrow.POSTER_AVATAR}</div><!-- ELSE --> {postrow.POSTER_AVATAR}<!-- ENDIF --><!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" width="90" alt="" />

Publicado: **10 Jun 2013, 00:31**

No puedo dar una clase sobre como utilizar jquery, pero intentaré ser explicativo con tu código
yoy a diseccionar el js por lineas y dar la explicación e lo que hace para que tengas una idea y quizás notes xq tu código no funcionaría nunca de la manera en que tu lo usas

1) linea :

Código: Seleccionar todo

$("div[id^=mostrar-mini-profile-]").click(function(){

Significa que cuando hagas click en un elemento html con un id que comienza con mostrar-mini-profile- comenzará a ejecutar el código en su interior.

2) Linea :

Código: Seleccionar todo

$('#profile-popup').fadeIn('fast',function(){

basados en la explicación anterior, cuando se hace click en un elemento, buscará en cualquier parte de la página un elemento html con el id exacto a profile-popup y lo mostrará yendo de trasparente a totalmente visible rápidamente.

3) linea :

Código: Seleccionar todo

$('#profile-popup-box').animate({'top':'160px'},500);

Basados en la explicación anterior, luego de mostrar el elemento anterior, buscará en cualquier parte de la página un elemento html con el id exacto a profile-popup-box y lo moverá de su posición hacia arriba hasta la posición de 160px relativo a la página, y lo ahrá en 500 milisegundos.

Ahora ¿ por que digo que no funcionara ?
Porque solo el primer elemento está basado en un id cambiante, el resto son fijos y exactos, por lo que solo mostrará el primero que coincida con él .

Armar un código que haga lo que tu deseas (aunque nunca dijiste como sería pero me imagino cual puede ser tu idea ) necesitas conocimientos medios a avanzados en html y jQuery,

Publicado: **12 Jun 2013, 20:43**

haber si te sirve esto
abre overall_header.htlm
cambia el código que tienes por

Código: Seleccionar todo

<script type="text/javascript">
            $(function() {
                $('.profile-popup-activador').click(function(){
                    $('#profile-popup').fadeIn('fast',function(){
						 $('.profile-popup-box').animate({'top':'260px'},500);
                    });
                });
                $('.profile-popup-box-close').click(function(){
					$('.profile-popup-box').animate({'top':'-400px'},500,function(){
                        $('#profile-popup').fadeOut('fast');
                    });
                });
			 });  
        </script>

en viewtopic_body.htlm
busca:

Código: Seleccionar todo

{postrow.RANK_IMG}</dd><!-- ENDIF -->

		<dd>&nbsp;</dd>

añade después:

Código: Seleccionar todo

<dd><div class="tabspopup">
   
   
   <div class="conten-popup">
       <input type="radio" id="tab-popup{postrow.POST_ID}" name="popup-profile">
       <label for="tab-popup{postrow.POST_ID}"><div class="profile-popup-activador" title="Mostrar información del usuario"></div></label>
      <div class="profile-popup" id="profile-popup" style="display:none;"></div> <div class="profile-popup-box" > <div class="apadado-box" title="cerrar información de usuario">
       <input type="radio" id="apagar" name="popup-profile" checked>
       <label class="profile-popup-box-close" for="apagar"> </label>
       </div>    
		<!-- NOTE: colocar a partir de aquí lo que quiere que salga en poppup -->
        
        </div>
   </div>
    </div></dd>

coloca el código de tu profile-popup-box exceptuándolo la parte del cierre que ya esta colocado.

en stylesheet.css o creando un archivo nuevo :

Código: Seleccionar todo

.profile-popup-activador{
            width:153px;
            height:150px;
            position:absolute;
            top:-225px;
            left:20px;
            z-index:1;
            cursor: help;
        }
        /* Style for overlay and box */
        .profile-popup{
			background:rgba(0, 0, 0, 0.5)repeat top left; 
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:1;
        }

        .profile-popup-box-close{
            float: right;
            width:26px;
            height:26px;
           
            background: url("{T_THEME_PATH}/images/cancel.png") repeat top left ;
            margin-top:-10px;
            margin-right:100px;
            cursor:pointer;
            z-index:2;
        }
.tabspopup { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 15px;
position: relative;
width: auto;
}
.conten-popup { /* cada una de las pestañas */
float: left;
}
.conten-popup label { /* la parte superior con el título de la pestaña */



color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding:0;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.conten-popup [type=radio] { display: none; }


.apadado-box { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 15px;
position: relative;
width: auto;
}
.apadado-box { /* cada una de las pestañas */
float: right;
}
.apadado-box label { /* la parte superior con el título de la pestaña */

.apadado-box label { /* la parte superior con el título de la pestaña */
border-radius: 5px 5px 0 0;
color: #DDD;
cursor: pointer;
left: 25px;
margin-right: 1px;
padding: 0px;
position: relative;
text-shadow: 1px 1px #000;
top:15px
}
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.apadado-box [type=radio] { display: none; }

/* el contenido de las pestañas */
.profile-popup-box {
	
	 position:fixed;
            top:-400px;
            left:30%;
            right:30%;
            color:#7F7F7F;
            padding:0px;  
            -moz-border-radius: 20px;
            -webkit-border-radius:20px;
            -khtml-border-radius:20px;
            -moz-box-shadow: 0 1px 5px #333;
            -webkit-box-shadow: 0 1px 5px #333;
            z-index:1;
	
}
/* y un poco de animación */
.profile-popup-box > * {
opacity: 0;

-moz-transform: translatey(-100%);
-webkit-transform: translatey(-100%);
-o-transform: translatey(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}


/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .profile-popup-box{ z-index: 1; }
[type=radio]:checked ~ label ~ .profile-popup-box > * {
opacity: 1;
-moz-transform: translatey(0);
-webkit-transform: translatey(0);
-o-transform: translatey(0);
-ms-transform: translatey(0);
}
.postprofile-popup , postprofile-popup online{
	height:auto;
	width:500px;
	float:left;
	background-color:#999;
	
	
	}

esto tendrás que adaptarlo a tu estilo seguro que se puede mejorar, pero al menos cumple con lo que quieres

pd: si que es lo que puse en mi foro pero con algunos añadidos
edito : corregir código css en .profile-popup

Publicado: **09 May 2014, 04:08**

Disculpen si se aqui o no mi consulta u_u

uso jquery.ui.tooltip

deseo usar ese efecto en enlaces que tengan el id="qtip" eh aqui mi error como hago que este efecto se vea en solo algunos enlaces o algunos div o span no lo sé

link de un ejemplo solo en 1ra practica se ve el efecto en el signo de interrogacion

phpBB España Oficial

llamado javascript usos multiples

Re: llamado javascript usos multiples

Re: llamado javascript usos multiples

Re: llamado javascript usos multiples

Re: llamado javascript usos multiples