Como unir 2 javascript

[mtpa]

Estoy diseñando una pagina web que contienes un espacio exlusivo de ficheros externo, osea con una DIV extraigo un fichero externo - una web dentro de otra web - .

el fichero me carga bien..pero ahora lo que quiero es que este enlace al ser cargado lelve un efecto slide.... y los dos codigos query son muy parecidos, pero yo soy novato en java script y necesito unir estos dos script para que se puedan ejecutar podrian ayudarme??

el script del div que carga el fichero es :::

Código:

$(document).ready(function(){
 $("#carga-loc-principal").click(function() {
	 $("div#texto").load("paginaweb.html");
   }); 
});

el script del slide es :::

Código:

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function() {
  $('#slide-fade').click(function() {
    $(this).next().slideFadeToggle('slow', function() {
      var $this = $(this);
      if ($this.is(':visible')) {
        $this.text('Successfully opened.');
      } else {
        $this.text('Sucessfully closed.');
      }
    });
  });
  
});

Como uno estos dos códigos?[/QUOTE]

[JavierB]

Hola mtpa. Bienvenido al foro.

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,

[mayid]

Al segundo hay que extirparla la función onclick, porque no la vas a usar. Vas a disparar el evento cuando cargue la pagina.

Y en realidad... hay mucho mas que se puede descargar. Lo importante ahi es este metodo: .slideFadeToggle('slow') , que esta definido en esta linea:

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

$(document).ready(function() {
$('#slide-fade').click(function() {
$(this).next().slideFadeToggle('slow', function() {
var $this = $(this);
if ($this.is(':visible')) {
$this.text('Successfully opened.');
} else {
$this.text('Sucessfully closed.');
}
});
});

});

Y al primero le vas a hacer un callback. Es decir, cuando tenga el contenido, va a disparar la otra función:

$(document).ready(function(){
$("#carga-loc-principal").click(function() {
$("div#texto").load("paginaweb.html", function() {
$(this).slideFadeToggle('slow')
});
});});

Creo que todo sería esto:

jQuery.fn.slideFadeToggle = function(speed, easing,callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};


$(document).ready(function(){
$("#carga-loc-principal").click(function() {
$("div#texto").load("paginaweb.html", function() {
$(this).slideFadeToggle('slow')
});
});});

[/QUOTE]

O resumiendo:

$(document).ready(function(){
$("#carga-loc-principal").click(function() {
$("div#texto").load("paginaweb.html").animate({opa city: 'toggle', height: 'toggle'}, "slow");

});

Proba esto ultimo a ver si te da error o si anda.

[mtpa]

Muchas Gracias por su ayuda, a continuacion le hago los comentarios de mi prueba:

El llamado del div se da, pero al cargar el fichero o la web, esta se desaparece, osea el closed se ejecuta primero. para abrirla tengo que volver apretar el boton que me hace el llamado y se abre en el div perfectamente, con el efecto.

Pero la intencion es que al dar el click, este fichero se abra automaticamente haciendo el movimiento o efecto del slide y debe quedar abierto (opened), pero se cierra.

que habria que agregarle o modificarle al codigo...muchas gracias...

el efecto del slide lo encontre en esta pagina web y es el efecto llamado

Slide-Fade Toggle

Código HTML:

http://www.learningjquery.com/2008/02/simple-effects-plugins

Como podra observar el slide esta desplegado....y al dar el click este se esconde...

lo que me ocurre a mi es que en la pagina donde estoy...Al hacer el click para hacer el llamado de la otra pagina...este lo hace...pero lo reconoce como el click para ocultarlo.

Espero haberme explicado, y de nuevo muchas gracias por su colaboración.

[mtpa]

por cierto....el que me funciono fue el antepenultimo....osea el resumido...no funciono...el que me funciono fue, el que usted pone

Creo que todo seria esto: ........

de neuvo gracias

[mayid]

Claro Eso pasa porque usamos toggle. Que significa algo así como "alternar". Si está escondido, muestra. Si esta a la vista, esconde.

Proba estas opciones:

{opacity: '1', height: '100%'}

[mtpa]

Le cuento que llama el fichero pero sin el efecto slide...lo hace normal sin el efecto....

le he cabiado otras cosas y nada aun..no se como hacerlo..y e verdad quiero hacerlo con ese efecto... ayudeme porfavor...ahi hay algo que deba impedir que se cierre automaticamente al hacer el llamado...para que no hya necesidad de volverlo a llamar.

saludos

[mayid]

Volviendo al primer ejemplo, que funcionaba al revés, yo agregaría hide()

Queda así:

jQuery.fn.slideFadeToggle = function(speed, easing,callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};


$(document).ready(function(){
$("#carga-loc-principal").click(function() {
$("div#texto").load("paginaweb.html", function() {
$(this).hide().slideFadeToggle('slow')
});
});});

Peero, sería mucho mejor tener un opacity : 1. Que raro no haya funcionado eso.

Probate esto también:

$(document).ready(function(){
$("#carga-loc-principal").click(function() {
$("div#texto").load("paginaweb.html").animate({opa city: 1, height: 400px}, "slow");

});

En height deberías poner el verdadero largo del div texto, que desconozco.

[mtpa]

Gracias....lo probare....en estos instantes

[mtpa]

Se ha logrado el efecto.

Muchas gracias por su ayuda...De verdad es usted Excelente....Gracias por su aporte para toda la comunidad y en buena hora en que me tope con Ustedes.

Saludos y éxitos en sus labores.

[mayid]

Me gustaría ver el resultado final. SI usaste el ejemplo resumido, me alegro. Si usaste el otro, espero que lo mejores en cuanto tengas más practica!