CONSULTA - Botonera

[kidart]

Hola,

quisiera saber si alguien me puede explicar que método usan en este link para que la botonera cargue los links en el div de la derecha... es un iframe o esta hecho con AJAX???

[URL="http://www.marks-clerk.ca/"]LINK[/URL]

Saludos y
Muchas gracias

[sander]

Bueno segun veo efectivamente si llamana otra pagina mediante ajax usando jquery, pero de alli a explicarte como funciona es un poco complicado, mejor mirate en www.jquery.com alli hay mucha documentacion, y si no entiendes mucho ingles puedes ver aqui:

http://www.maestrosdelweb.com/editor...do-con-jquery/

Saludos.

[caricatos]

Iniciado por sander

Bueno segun veo efectivamente si llamana otra pagina mediante ajax usando jquery, pero de alli a explicarte como funciona es un poco complicado, mejor mirate en www.jquery.com alli hay mucha documentacion, y si no entiendes mucho ingles puedes ver aqui:

http://www.maestrosdelweb.com/editor...do-con-jquery/

Saludos.

¿Qué chorrada es esa de "usando jquery"... ?

Lo único deducible es que es un BBCode que simplemente reemplaza una cadena por otra.... en el caso concreto de:

[ URL="http://www.marks-clerk.ca/"]LINK[ /URL] debería convertirse en
<a href="http://www.marks-clerk.ca/">LINK</a>

Los BBCodes suelen usarse en sistemas de comentarios o libros de visita para evitar que malintencionados (que haberlos ailos) inserten códigos html y fastidien la presentación de las páginas donde se insertan (seguramente existan otras razones...)

Saludos

[kidart]

En realidad yo tengo esta web, donde la botonera ya esta hecha con jquery, pero no puedo lograr que los links se carguen en el div de la derecha (el del contenido)...


esto me conviene hacerlo con ajax? o hay una manera más sencilla?


Te agradezco una opinion, gracias!

[sander]

Iniciado por caricatos

¿Qué chorrada es esa de "usando jquery"... ?

Lo único deducible es que es un BBCode que simplemente reemplaza una cadena por otra.... en el caso concreto de:

[ URL="http://www.marks-clerk.ca/"]LINK[ /URL] debería convertirse en
<a href="http://www.marks-clerk.ca/">LINK</a>

Los BBCodes suelen usarse en sistemas de comentarios o libros de visita para evitar que malintencionados (que haberlos ailos) inserten códigos html y fastidien la presentación de las páginas donde se insertan (seguramente existan otras razones...)

Saludos

Pues yo me referia a codigo del enlace que puso.

http://www.marks-clerk.ca

Lo de los BBcodes que tiene que ver ...

El pregunto algo sobre los BBcodes?

Saludos.

[caricatos]

Iniciado por sander

...
Lo de los BBcodes que tiene que ver ...

El pregunto algo sobre los BBcodes?

Saludos.

Justamente ese link es el típico BBCode de los enlaces... Deberías informarte (Por ejemplo en nuestras FAQs)... y por cierto, son más antiguos que jquery...

Saludos

[sander]

Iniciado por kidart

En realidad yo tengo esta web, donde la botonera ya esta hecha con jquery, pero no puedo lograr que los links se carguen en el div de la derecha (el del contenido)...


esto me conviene hacerlo con ajax? o hay una manera más sencilla?


Te agradezco una opinion, gracias!

Pues si usas jquery es muy sencillo y el codigo jquery seria asi:

Código Javascript:

$('a').click(function(event){
event.preventDefault();
var url = $(this).attr('href');
$('#contenido').load(url);
})
 

Pero para que funcione en tus enlaces tienes que poner la direccion de forma normal como lo haces siempre y ya no "#", algo asi:

Código HTML:

<a href="midestino.html">enlace</a>
 

Saludos.

[sander]

Iniciado por caricatos

Justamente ese link es el típico BBCode de los enlaces... Deberías informarte (Por ejemplo en nuestras FAQs)... y por cierto, son más antiguos que jquery...

Saludos

Se muy bien que son los BBcodes, pero insisto:

Que tiene que ver los BBcodes con la consulta?

Una de dos o no estas leendo bien el post o no te estoy entendiendo lo que quieres decir.

Saludos.

[stock]

Iniciado por sander

Se muy bien que son los BBcodes, pero insisto:

Que tiene que ver los BBcodes con la consulta?.

jejejeje... yo tampoco entiendo a que se refiere caricatos y he leido varias veces el post original para tratar de entender lo que caricatos entendió, pero aún así no logro descubrir de donde salió eso de los BBCodes

Saludos

[kidart]

Sander,

gracias por la respuesta. El código de javascript que me pegaste hay ubicarlo en el <head> junto con todos los scripts que usa el html?

Código:

<script type="text/javascript" language="javascript" src="SpryAssets/jquery.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
	$("#firstpane p.menu_head").click(function()
    {
		$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(left.png)"});
	});
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondpane p.menu_head").mouseover(function()
    {
	     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
	});
});
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

$('a').click(function(event){
  event.preventDefault();
  var url = $(this).attr('href');
  $('#mainContent').load(url);
   })

</script>

porque me abre el link, pero en una pagina nueva, no dentro del div "#mainContent"...


Aqui dejo el link, el boton al que le aplique el codigo esta en SERVICIOS > "PATENTES"

[sander]

Sorry, lo que pasa es que falta el punto y coma al final, quedaria asi:

Código Javascript:

$('a').click(function(event){
event.preventDefault();
var url = $(this).attr('href');
$('#contenido').load(url);
});
 

se me fue ....

Saludos.

[kidart]

perdona mi insistencia, pero es que estoy probando todas las opciones posibles y siempre abre el link en una pagina nueva. Probe con ponerle "contenido" a un iframe y tambíen nombrando "contenido" el div de la derecha... Ya no se que probar.

[sander]

Iniciado por kidart

perdona mi insistencia, pero es que estoy probando todas las opciones posibles y siempre abre el link en una pagina nueva. Probe con ponerle "contenido" a un iframe y tambíen nombrando "contenido" el div de la derecha... Ya no se que probar.

Ok

mira prueba este codigo:

Código HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 
    $('a').click(function(event){
        event.preventDefault();
        var dir = $(this).attr('href');
        $('#contenido').load(dir);
    });
    
});
</script>
</head>
<body>
<a href="content/historia.html">Abrir historia</a><br />
<div id="contenido" style="width: 100%; height: 100%; background-color: #999;">aqui se cargara el contenido</div>
</body>
</html>
 

Avisame como te va.

Si te funciona solo quedaria adaptarlo a tus necesidades.

Saludos.

[kidart]

si, logre hacerlo funcionar de a poco gracias a tu codigo, pero ahora tengo un problema con los estilos y las imagenes. Se carga el html en el div, pero sin mostrar ni los estilos ni los jpg.

es inevitablemente asi?


muchas gracias!!

[sander]

Claro que no!!!!, deberia cargar todo el contenido correctamente, tu problema puede ser que la pagina que cargues ya no deberia tener head ni body si no el codigo que este en el body directamente.

Ademas que la direccion de las imagenes y los estilos ya deberian ser relativas a donde el documento principal y no al lugar en donde esta guardado el archivo.

Ejemplo:

Suponiendo que tu index esta en la raiz del sitio:
index.html

Y el archivo que llamas desde el index se encuentra en:
carpeta1/hola.html

Y en tu archivo hola.html estas llamando a una imagen que se encuentra en:
/carpeta1/img/imagen1.jpg

Lo mas seguro es que en este momento lo estes llamando asi:
<img src="img/imagen1.jpg">

Pero si lo llamas asi no te funcionara, pues ahora ese hola.html interpreta como si se encontrara en la raiz, por lo que para llamar a la misma imagen deberias hacerlo asi:
<img src="carpeta1/img/imagen1.jpg">

El mismo razonamiento bedes usar para cualquier otra llamada (imagenes, css, js, etc.) tomar como partida el lugar donde se encuentra tu html principal.

Saludos.

[kidart]

Fui deduciendo eso. todavía hay algunas que no abran a pesar de estar exactamente igual a las que si abren.

Muchas gracias por la ayuda!!!


una ultima cosita, si quisiera que un html cargue en ese DIV al abrir la web, tengo que pegar el codigo en el body?

[kidart]

Puede ser que los links solo funciones para un nivel de la botonera?

los links que estan en el 2do nivel de la botonera no logran linkear, tendra que ver con el codigo jquery?

[kidart]

Ya solucione lo de los botones en el 2do nivel. Lo que no funciona es el flash, seguro tiene que ver con borrarle las etiquetas y dejar solo el body del html que se carga!

voy a investigar en el foro al respecto
Saludos y gracias!

[caricatos]

Tema movido desde javascript

No me dí cuenta que en el primer mensaje era un enlace, por la norma 30/20 (no se permiten enlaces sin tener 30 días en los foros y al menos 30 mensajes, y tan solo se veía el bbcode.


De otra manera hubiera movido el mensaje... por cierto, jquery es una librería, las consultas sobre esa librería van en este foro...

Saludos

[sander]

Iniciado por caricatos

Tema movido desde javascript

No me dí cuenta que en el primer mensaje era un enlace, por la norma 30/20 (no se permiten enlaces sin tener 30 días en los foros y al menos 30 mensajes, y tan solo se veía el bbcode.


De otra manera hubiera movido el mensaje... por cierto, jquery es una librería, las consultas sobre esa librería van en este foro...

Saludos

Pues la verdad me parece que no leiste bien todo el mensaje y asumiste la pregunta, jaja no te preocupes a todos nos pasa, ademas entiendo que como moderardor tendras que leer un monton de post y se te fue.

Espero la proxima que se te vaya no vuelvas a confudir con tus respuestas, ya que puedes provocar que me juzguen mal y hasta que me den karma negativo entre otras cosas.

Saludos.

[sander]

Iniciado por kidart

Puede ser que los links solo funciones para un nivel de la botonera?

los links que estan en el 2do nivel de la botonera no logran linkear, tendra que ver con el codigo jquery?

Revisando tu codigo me di cuenta de los siguiente:

El codigo que te di es para cualquier enlace "a", y tu no necesitas que todos los enlaces habran su contenido en un div.

La solucion es muy simple, y seria algo asi:

Primero agregas a los enlaces que quieres que se habran en el div un id asi:

Código HTML:

<a href="larutadetupagina.html" id="externo">historia</a>
 

Luego en el codigo cambias la "a" por el id algo asi:

Código Javascript:

$('#externo').click(function(event){
        event.preventDefault();
        var dir = $(this).attr('href');
        $('#contenido').load(dir);
});
 

De este modo solo los enlaces con el id="externo" se abriran en el div que deseas.

Saludos.

[sander]

Ha se me olvidaba, a tus enlaces principales (nivel1), quitales las direcciones y ponles el clasico # en su atributo href, para que no te habran una nueva pagina.

Saludos.