Foros del Web » Creando para Internet » HTML »

cargar links en un div desde usando jquery

 Estas en el tema de cargar links en un div desde usando jquery en el foro de HTML 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:34
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 10 meses
Puntos: 2
cargar links en un div desde usando 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, 17:41
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.052
Antigüedad: 15 años, 3 meses
Puntos: 46
Respuesta: cargar links en un div desde usando jquery
Hola.

creo que lo que buscas seria algo asi:

Código Javascript: 
Ver original
  1. $("#id_del_link").click(function(){
  2.    $("#id_del_div").load("url");
  3. });

suerte. si no es por ahi el problema avisanos

Etiquetas: jquery, 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 11:04.