Foros del Web » Programando para Internet » Jquery »

cargar links en un div desde botonera jquery

 Estas en el tema de cargar links en un div desde botonera jquery en el foro de Jquery en Foros del Web. Hola, tengo un problema al diseñar un sitio que estaba hecho con iframes, ahora lo estoy pasando a DIV´s, pero tengo un problema cuando quiero ...
  #1 (permalink)  
Antiguo 26/07/2010, 12:33
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 10 meses
Puntos: 2
cargar links en un div desde botonera jquery
Hola,
tengo un problema al diseñar un sitio que estaba hecho con iframes, ahora lo estoy pasando a DIV´s, pero tengo un problema cuando quiero que desde la botonera (un accordion c/jquery) me cargue el contenido a un DIV sin cargar todo cada vez.


Probe con ajax, con un iframe solo en ese div, pero no puedo lograr que la botonera me cargue los links en el div "maincontent", este es mi codigo:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Barbat</title>
  6. <link href="estilo/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
  7. <!--[if IE 5]>
  8. <style type="text/css"> 
  9. /* place css box model fixes for IE 5* in this conditional comment */
  10. .twoColFixLtHdr #sidebar1 { width: 230px; }
  11. </style>
  12. <![endif]--><!--[if IE]>
  13. <style type="text/css"> 
  14. /* place css fixes for all versions of IE in this conditional comment */
  15. .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
  16. .twoColFixLtHdr #mainContent { zoom: 1; }
  17. /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
  18. </style>
  19. <![endif]-->
  20. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  21.  
  22. <script type="text/javascript" language="javascript" src="SpryAssets/jquery.js"></script>
  23. <script type="text/javascript">
  24. <!--//---------------------------------+
  25. //  Developed by Roshan Bhattarai 
  26. //  Visit http://roshanbh.com.np for this script and more.
  27. //  This notice MUST stay intact for legal use
  28. // --------------------------------->
  29. $(document).ready(function()
  30. {
  31.     //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
  32.     $("#firstpane p.menu_head").click(function()
  33.     {
  34.         $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
  35.         $(this).siblings().css({backgroundImage:"url(left.png)"});
  36.     });
  37.     //slides the element with class "menu_body" when mouse is over the paragraph
  38.     $("#secondpane p.menu_head").mouseover(function()
  39.     {
  40.          $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
  41.          $(this).siblings().css({backgroundImage:"url(left.png)"});
  42.     });
  43. });
  44. function MM_swapImgRestore() { //v3.0
  45.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  46. }
  47. function MM_preloadImages() { //v3.0
  48.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  49.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  50.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  51. }
  52.  
  53. function MM_findObj(n, d) { //v4.01
  54.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  55.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  56.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  57.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  58.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  59. }
  60.  
  61. function MM_swapImage() { //v3.0
  62.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  63.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  64. }
  65. </script>
  66. <style type="text/css">
  67.  
  68. </style>
  69.  
  70.  
  71. </head>
  72.  
  73. <body class="twoColFixLtHdr" onload="loadurl('patentes.html','maincontent')">
  74.  
  75. <div id="container">
  76.   <div id="header">
  77.      <h1>
  78.        <script type="text/javascript">
  79. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','940','height','173','src','login','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','login' ); //end AC code
  80. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="940" height="173">
  81.          <param name="movie" value="login.swf" />
  82.          <param name="quality" value="high" />
  83.          <embed src="login.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="940" height="173"></embed>
  84.        </object></noscript>
  85.      </h1>
  86.   <!-- end #header --></div>
  87.   <div id="sidebar1">
  88.     <h3><div style="float:left" > <!--This is the first division of left-->
  89.   <div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
  90.         <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/botonera_ov_01.jpg',1)"><img src="images/botonera_01.jpg" name="Image10" width="263" height="23" border="0" id="Image10" onclick="javascript:parent.contentFrame.location.href='./content/estudiobarbat.html'"/></a></p>
  91.         <div class="menu_body">
  92.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/whywork.html'">TRABAJAR CON NOSOTROS.</div></a>
  93.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/historia.html'">HISTORIA</div></a>
  94.     </div>
  95.         <p class="menu_head"><a href="javascript:parent.contentFrame.location.href='./content/servicios.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('servicios','','images/botonera_ov_02.jpg',1)"><img src="images/botonera_02.jpg" alt="Servicios" name="servicios" width="263" height="23" border="0" id="servicios" onclick="javascript:parent.contentFrame.location.href='./content/servicios.html'"/></a></p>
  96.         <div class="menu_body">
  97.         </div>
  98.         <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Staff','','images/botonera_ov_03.jpg',1)"><img src="images/botonera_03.jpg" alt="Staff" name="Staff" width="263" height="23" border="0" id="Staff" onclick="javascript:parent.contentFrame.location.href='./content/staff_lista.html'"/></a></p>
  99.         <div class="menu_body">
  100.     </div>
  101.        <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/botonera_ov_04.jpg',1)"><img src="images/botonera_04.jpg" alt="News &amp; Publications" name="News" width="263" height="23" border="0" id="News" /></a></p>
  102.         <div class="menu_body">
  103.          <a href="#"><div onclick="javascript:parent.maincontent.location.href='./content/mediacion.html'">PUBLICACIONES.</div></a>
  104.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/oposiciones.html'">FAQ.</div></a>
  105.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/prevencion.html'">DOWNLOADS.</div></a>           
  106.        </div>
  107.        <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('login','','images/botonera_ov_06.jpg',1)"><img src="images/botonera_06.jpg" name="login" width="263" height="23" border="0" id="login" onclick="javascript:parent.contentFrame.location.href='./content/links.html'"/></a></p>
  108.         <div class="menu_body">
  109.        </div>
  110.        <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/botonera_ov_05.jpg',1)"><img src="images/botonera_05.jpg" name="Links" width="263" height="23" border="0" id="Links" onclick="javascript:parent.contentFrame.location.href='./content/contacto.html'"/></a></p>
  111.         <div class="menu_body">
  112.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/mediacion.html'">BUENOS AIRES.</div></a>
  113.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/oposiciones.html'">ROSARIO.</div></a>
  114.          <a href="#"><div onclick="javascript:parent.contentFrame.location.href='./content/prevencion.html'">MENDOZA.</div></a>
  115.        </div>
  116.        <p class="menu_head"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/botonera_ov_07.jpg',1)"><img src="images/botonera_07.jpg" name="links" width="263" height="23" border="0" id="links" onclick="javascript:parent.contentFrame.location.href='./content/login.html'"/></a></p>
  117.         <div class="menu_body">                     
  118.        </div>
  119.        </div>  <!--Code for menu ends here-->
  120. </div></h3>
  121.   <!-- end #sidebar1 --></div>
  122.   <div id="mainContent">
  123. <iframe src="content/marcas.html" name="contenido" frameborder="0" scrolling="Auto" noresize="noresize" align="left" width="687px" height="500px" border="0px"></iframe>
  124.  
  125.     <!-- end #mainContent --></div>
  126.     <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  127.   <div id="footer">
  128.     <p><img src="images/fondo.jpg" width="947" height="10" /><img src="images/barbat_06.jpg" width="947" height="27" /></p>
  129.   </div>
  130. </div>
  131. </body>
  132. </html>


Si me pueden indicar como cargar los links en un div de la misma pagina lo agradezco.

Saludos,
  #2 (permalink)  
Antiguo 26/07/2010, 12:40
Avatar de maycolalvarez
Colaborador
  
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: cargar links en un div desde botonera jquery
en los eventos como onclick no hace falta colocar javascript:, es es solo para el href

además, esta una de las formas correctas y simples:

<div onclick="window.open('./content/mediacion.html','maincontent');">PUBLICACIONES.</div></a>
  #3 (permalink)  
Antiguo 26/07/2010, 13:14
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: cargar links en un div desde botonera jquery
Muchas gracias por la respuesta,



La linea para linkear que me pasaste funciona perfecto, pero abre una ventana nueva. lo que yo necesito es que ese link se abra en el div id="mainContent" .

La funcion window.open es para una pagina nueva o estoy haciendo algo mal?

Código HTML:
 <a href="#"><div onclick="window.open('./content/marcas.html','mainContent');">MARCAS</div></a>
  #4 (permalink)  
Antiguo 26/07/2010, 16:42
Avatar de maycolalvarez
Colaborador
  
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: cargar links en un div desde botonera jquery
ahh, pero dijiste que estabas usando iframes, entonces, si quieres cargar el contenido de otro archivo en un DIV necesitas innerHTML, pero por medio de AJAX
  #5 (permalink)  
Antiguo 26/07/2010, 23:17
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: cargar links en un div desde botonera jquery
cualquiera de las opciones me viene bien, porque necesito terminarlo urgente, pero no funcionó tampoco con el iframe.

te dejo el link online para ver si se te ocurre donde puede estar el error. el boton que tiene la linea de codigo es: "SERVICIOS" > "MARCA", pero abre el link en una ventana nueva en lugar de abrirlo en el iframe "maincontent"...

[URL="http://www.barbat.com/new/barbat_main.html"]LINK[/URL]


mil gracias.

Etiquetas: links, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:08.