Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

llamado javascript usos multiples

PHP, HTML, CSS, JS, jQuery, etc.
Avatar de Usuario
ElSanguinario
Miembro
Mensajes: 411
Registrado: 13 Ago 2012, 18:56
Edad: 26

Re: llamado javascript usos multiples

#16

Mensaje por ElSanguinario »

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="" />


[tabs][tabs:General]
Datos Generales | Mostrar
URL:http://www.sanagustinbellavista.com/
Versión phpBB: 3.0.11
Plantilla(s) usada(s): SkyBoot v1.0.2 [Beta] (+artodia mobile and seo 2)
Servidor: https://www.hospedred.net/, Pago , Linux.
Actualización desde otra versión: 3.0.10 --> 3.0.11
Conversión desde otro sistema de foros: No
Cuenta de Prueba----> Id: test-user //// Pass: test1234
[tabs:MODs Instalados]
Modificaciones | Mostrar
"Orden Descendente de acorde a instalación"
artodia mobile and seo 2
BBcode en imágenes Mitch
[RC] cBB Blockgets
[MODDB] Similar Topics 1.0.2
[MODDB] Special and Normal Rank Images 1.2.2
[MODDB] Email on Birthday 1.0.1b
[MODDB] Contact board administration 1.0.10
[RC] cBB Chat
[MODDB] Prime Links 1.3.0
[MODDB] Welcome PM on First Login 2.2.5
[MODDB] Auto Backup 1.0.3
[MODDB] Avatar on Memberlist 1.0.2
[MODDB] Default Random 'No Avatar' 1.0.4a
[BETA] Browser and OS icons 3.0.2
MOD Browser, Os & Screen 1.0.0 (solo el Screen)
Prime Login via E-Mail 1.3.2
[Beta] phpBB Calendar 0.1.1 (alightner) (En ajustes)
[MODDB] ReIMG Image Resizer 2.0.1
[MODDB] Genders 1.0.2
[RC1] Prime Birthdate - Require on Registration
[RC] cBB Follower 1.0.1
[MODDB] Rules page 1.0.1
[MODDB] ACP Add User MOD 1.1.0
[tabs:Info Adicional]Datos de Soporte Actualizados: 24/09/2013 - desinstalado [BETA] phpBB SEO Ultimate SEO URL 0.7.0, [MODDB] phpBB mChat 1.3.5, Board3 Portal 2.0.0[/font]
Editor Usado: NotePad++ o adobe dreamweaver cs6[/tabs]Imagen
Estás fresca, radiante,
en todo expectante, tan bella,
creciente, altiva, elegante.
Avatar de Usuario
leviatan21
Ex Staff
Mensajes: 8279
Registrado: 26 Mar 2008, 20:06
Género:
Edad: 50

Re: llamado javascript usos multiples

#17

Mensaje por leviatan21 »

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,
Normas de phpBB España | Normas de Soporte
No doy soporte por privado : tenga en cuenta que su problema, también puede ser el problema de otro usuario.
Cualquier mensaje privado no solicitado será ignorado :twisted:

"Education is what remains after one has forgotten everything he learned in school" - Albert Einstein
Avatar de Usuario
micontre
Ex Staff
Mensajes: 933
Registrado: 13 Sep 2008, 02:34
Edad: 55

Re: llamado javascript usos multiples

#18

Mensaje por micontre »

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
Mis datos | Mostrar
URL: http://imaginewal.com/
Plantilla usuada : imaginewal_bis (estilo propio vasado en prosilver.)
Versión de phpBB: 3.1.6
Servidor: Hosting24.com , pago
actualización desde otra versión: ( 3.0.14 __ 3.1.16)
conversión desde otro tipo de Foro: No
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: llamado javascript usos multiples

#19

Mensaje por Makoto »

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
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]

Volver a “🆘 Recursos Webmaster”