Comunidad de diseño web y desarrollo en internet online

alguien sabe?

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 07 Sep 2011 02:40 pm
Alguien me podria ayudar a armar algo igual a esta web?

[url=http://www.photostudio.com/index.php?bw=1920][/url]

Necesito tener un acordeon ajustable al ancho de cada pantalla pero algo me esta faltando que no logro hacer que quede como este sitio.

gracias!

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 01:57 am
puedes empezar por postear el codigo, ahora si quieres algo asi es con Jquery y css, es mas puedes bajarte la web e ir verificando....

Por RZ

Claber

118 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 08 Sep 2011 11:49 am
Si por lo que estuve investigando el acordeon es Jquery y css pero tiene otro script que toma la medida del monitor cada vez que se abre y vuelve a cargar otra pagina segun la medida del navegador y no se como funciona.

Este es el codigo que baje pero hace un bucle interminable y no se llega a ver nada ...

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="1"><head><link rel="stylesheet" type="text/css" href="//s7.addthis.com/static/r07/widget65.css" media="all">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Chiossone Photography</title>
<meta name="revisit-after" content="2 days">
<meta name="identifier-url" content="www.photostudio.com">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<meta name="description" content="Commercial advertising, editorial and personal photography. Chiossone has been shooting beauty, fashion, kids and travel images in NYC since 1989">
<meta name="keywords" content="photographer, photography, photo studio, portraits, chiossone, carlos chiossone, fotografo, fotografia, photo nyc, photo studio nyc, ny photo studio, new model photo, ">
<meta name="Classification" content="photographer, photography, fotografo, fotografia">
<meta name="robots" content="all">
<meta name="revisit-after" content="2 days">
<meta name="identifier-url" content="www.photostudio.com">
<script language="javascript" type="text/javascript">

  function GetWidth()
  {
          var x = 0;
          if (self.innerHeight)
          {
                  x = self.innerWidth;
          }
          else if (document.documentElement && document.documentElement.clientHeight)
          {
                  x = document.documentElement.clientWidth;
          }
          else if (document.body)
          {
                  x = document.body.clientWidth;
          }
          return x;
  }

</script>
<style type="text/css">
<!--
#top {
   position:relative;
   top:0px;
   left:0px;
width:908px;
   height:0px;
   overflow:hidden;
   background-color:#CF0;
}
.imageMenu {
   position:relative;
   top:0px;
   left:-40px;
width:948px;
   height:400px;
   overflow: hidden;
   background-color:#CF0;
}

.imageMenu ul {
   list-style: none;
   margin: 0px;
   display: block;
   height: 400px;
 width:1896px;
   margin-left:0px;
   margin-right:0px;
}



.imageMenu ul li {
   float: left;
}
.imageMenu ul li a {
   text-indent: -1000px;
   background:#FFFFFF none repeat scroll 0%;
   border-right: 2px solid #fff;
   cursor:pointer;
   display:block;
   overflow:hidden;
 width:21px;
   height:400px;
}
.imageMenu ul li.final a {
   background: url(/images/final.jpg) repeat scroll 0%;
   width: 310px;
}
.clear {
   clear: both;
}
a:link {
   text-decoration:none;
   color:#000;
}
a:visited {
   text-decoration:none;
   color:#000;
}
-->
</style>


<link rel="stylesheet" type="text/css" href="/css/mediaboxAdvWhite.css" media="screen"> 
<script type="text/javascript" src="/js/mootools-core-1.3.1-full-compat.js"></script> 
<script type="text/javascript" src="/js/mootools-more-1.3.js"></script> 
<script type="text/javascript" src="/js/quickie.js"></script> 
<script type="text/javascript" src="/js/quickie.js"></script> 
<script type="text/javascript" src="/js/mediaboxAdv-1.4.6.js"></script>
<script type="text/javascript" src="/js/ImageMenu.js"></script>



<script language="javascript" type="text/javascript">
   function Reload()
      {
//         window.location.href = window.location.href
         window.location.href = 'index-2.html';

      }
   window.onresize = Reload;
</script>
   <script>

   window.addEvent('domready', function(){

      var myMenu = new ImageMenu($$('.imageMenu a'), {
         openWidth: 310,
         border: 2,
         onClickOpen: function(e, i){
            alert(e);
         }
      });

   });

   </script>
<link rel="stylesheet" type="text/css" href="/main2011.css">



<style id="at300bhoveriefilter" type="text/css"></style></head><body onResize="Reload()" bgColor="#ffffff" marginwidth="0" marginheight="0"><div style="width: 1px; height: 1px; visibility: hidden; position: absolute; z-index: 100000;" id="_atssh"><iframe style="border: 0px currentColor; left: 0px; top: 0px; width: 1px; height: 1px; position: absolute; z-index: 100000;" id="_atssh536" title="AddThis utility frame" height="1" src="//s7.addthis.com/static/r07/sh52.html#iit=1315421899991&amp;cb=0&amp;ab=-&amp;dh=www.photostudio.com&amp;dr=http%3A%2F%2Fwww.photostudio.com%2F&amp;du=http%3A%2F%2Fwww.photostudio.com%2Findex.php%3Fbw%3D908&amp;dt=Chiossone%20Photography&amp;inst=1&amp;lng=es&amp;pc=tbx&amp;pub=chiossone&amp;ssl=0&amp;sid=4e67becb8f3db682&amp;srd=1&amp;srf=0.02&amp;srp=0.2&amp;srx=0.5&amp;ver=250&amp;xck=0&amp;rev=103632&amp;ct=1&amp;xd=1" width="1" name="_atssh536">&lt;/body&gt;</iframe></div>
<div id="header">
   <style type="text/css">
#image_map{
width:323px;
height:83px;
background:url(/images/nav2011.png) no-repeat;
position:relative;
} 
#image_map a{
display:block;
position:absolute;
} 
#image_map a#link1{
width:0px;
height:83px;
top:0px;
left:0px;

} 

#image_map a#link2{
left:0px;
width:83px;
height:83px;

}
#image_map a#link3{
left:85px;
width:50px;
height:83px;

}
#image_map a#link4{
left:138px;
width:84px;
height:83px;

}
#image_map a#link5{
left:226px;
width:60px;
height:83px;

} 

</style>
<table cellSpacing="0" cellPadding="0" width="100%">
<tbody><tr><td vAlign="top" align="left">
<div id="logo">
<a href="/index.php"><img border="0" src="/images/logo2011.png" width="394" height="83"></a>
</div>
</td>
<td vAlign="top" align="right">
<div id="navig">
<div id="image_map">
<a id="link1" href="#nogo"></a>
<a id="link2" class="menu" href="/beauty/"></a>
<a id="link3" class="menu" href="/theKids/"></a>
<a id="link4" class="menu" title="Stories" href="/storyLinks2011.php" rel="lightbox[external 400 400]"></a>
<a id="link5" class="menu" title="Videos" href="/videoLinks2011.php" rel="lightbox[external2 720 480]"></a>

</div> 
<img border="0" src="/images/nav2011.png" width="323" height="83" useMap="#navigation">

</div>
</td>
</tr>
</tbody></table>


</div>
<div id="mainbody"> 

   <div class="imageMenu">
      <ul>
         <li class="p1"><a style='background: url("beauty/images/wedBW2.jpg") 50%;' id="image1" title=" <br />Settings: f |  | ISO " href="beauty/images/wedBW2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/wedBW2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Afrancisbaby2.jpg") 50%;' id="image2" title=" <br />Settings: f |  | ISO " href="beauty/images/Afrancisbaby2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Afrancisbaby2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Chirstina3.jpg") 50%;' id="image3" title=" <br />Settings: f |  | ISO " href="beauty/images/Chirstina3.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Chirstina3.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Ababy1.jpg") 50%;' id="image4" title=" <br />Settings: f |  | ISO " href="beauty/images/Ababy1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Ababy1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/IMG_7207_700.jpg") 50%;' id="image5" title=" <br />Settings: f |  | ISO " href="beauty/images/IMG_7207_700.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/IMG_7207_700.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Afrancesbabysit1.jpg") 50%;' id="image6" title=" <br />Settings: f |  | ISO " href="beauty/images/Afrancesbabysit1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Afrancesbabysit1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/KapriBW.jpg") 50%;' id="image7" title=" <br />Settings: f |  | ISO " href="beauty/images/KapriBW.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/KapriBW.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Heather4.jpg") 50%;' id="image8" title=" <br />Settings: f |  | ISO " href="beauty/images/Heather4.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Heather4.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/still1.jpg") 50%;' id="image9" title=" <br />Settings: f |  | ISO " href="beauty/images/still1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/still1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/franyellow1.jpg") 50%;' id="image10" title=" <br />Settings: f |  | ISO " href="beauty/images/franyellow1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/franyellow1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Steph3.jpg") 50%;' id="image11" title=" <br />Settings: f |  | ISO " href="beauty/images/Steph3.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Steph3.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/luisa1.jpg") 50%;' id="image12" title=" <br />Settings: f |  | ISO " href="beauty/images/luisa1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/luisa1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Madison.jpg") 50%;' id="image13" title=" <br />Settings: f |  | ISO " href="beauty/images/Madison.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Madison.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/cares2.jpg") 50%;' id="image14" title=" <br />Settings: f |  | ISO " href="beauty/images/cares2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/cares2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Avon1.jpg") 50%;' id="image15" title=" <br />Settings: f |  | ISO " href="beauty/images/Avon1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Avon1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/francis01.jpg") 50%;' id="image16" title=" <br />Settings: f |  | ISO " href="beauty/images/francis01.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/francis01.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/color1.jpg") 50%;' id="image17" title=" <br />Settings: f |  | ISO " href="beauty/images/color1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/color1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/girlbywindow.jpg") 50%;' id="image18" title=" <br />Settings: f |  | ISO " href="beauty/images/girlbywindow.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/girlbywindow.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/IMG_7499_700.jpg") 50%;' id="image19" title=" <br />Settings: f |  | ISO " href="beauty/images/IMG_7499_700.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/IMG_7499_700.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/dove.jpg") 50%;' id="image20" title=" <br />Settings: f |  | ISO " href="beauty/images/dove.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/dove.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/carlos-wedshot.jpg") 50%;' id="image21" title=" <br />Settings: f |  | ISO " href="beauty/images/carlos-wedshot.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/carlos-wedshot.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/bGirl01.jpg") 50%;' id="image22" title=" <br />Settings: f |  | ISO " href="beauty/images/bGirl01.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/bGirl01.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/wed2.jpg") 50%;' id="image23" title=" <br />Settings: f |  | ISO " href="beauty/images/wed2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/wed2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/IMG_7368_700.jpg") 50%;' id="image24" title=" <br />Settings: f |  | ISO " href="beauty/images/IMG_7368_700.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/IMG_7368_700.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/45-2.jpg") 50%;' id="image25" title=" <br />Settings: f |  | ISO " href="beauty/images/45-2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/45-2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/caress3.jpg") 50%;' id="image26" title=" <br />Settings: f |  | ISO " href="beauty/images/caress3.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/caress3.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/franbw08-resedup.jpg") 50%;' id="image27" title=" <br />Settings: f |  | ISO " href="beauty/images/franbw08-resedup.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/franbw08-resedup.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/women.jpg") 50%;' id="image28" title=" <br />Settings: f |  | ISO " href="beauty/images/women.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/women.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/37.jpg") 50%;' id="image29" title=" <br />Settings: f |  | ISO " href="beauty/images/37.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/37.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/rt.jpg") 50%;' id="image30" title=" <br />Settings: f |  | ISO " href="beauty/images/rt.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/rt.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Heather3.jpg") 50%;' id="image31" title=" <br />Settings: f |  | ISO " href="beauty/images/Heather3.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Heather3.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/12.jpg") 50%;' id="image32" title=" <br />Settings: f |  | ISO " href="beauty/images/12.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/12.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Steph2.jpg") 50%;' id="image33" title=" <br />Settings: f |  | ISO " href="beauty/images/Steph2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Steph2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/caress1.jpg") 50%;' id="image34" title=" <br />Settings: f |  | ISO " href="beauty/images/caress1.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/caress1.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/cweddingDress.jpg") 50%;' id="image35" title=" <br />Settings: f |  | ISO " href="beauty/images/cweddingDress.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/cweddingDress.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/franyell2.jpg") 50%;' id="image36" title=" <br />Settings: f |  | ISO " href="beauty/images/franyell2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/franyell2.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Lauren.jpg") 50%;' id="image37" title=" <br />Settings: f |  | ISO " href="beauty/images/Lauren.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Lauren.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/baindesoleil.jpg") 50%;' id="image38" title=" <br />Settings: f |  | ISO " href="beauty/images/baindesoleil.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/baindesoleil.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/comp-copy.jpg") 50%;' id="image39" title=" <br />Settings: f |  | ISO " href="beauty/images/comp-copy.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/comp-copy.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/Jill.jpg") 50%;' id="image40" title=" <br />Settings: f |  | ISO " href="beauty/images/Jill.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/Jill.jpg"></a></li><li class="p1"><a style='background: url("beauty/images/W2.jpg") 50%;' id="image41" title=" <br />Settings: f |  | ISO " href="beauty/images/W2.jpg" rel="lightbox[mando]"><img border="0" src="beauty/images/W2.jpg"></a></li>         <li class="final"><a style='background: url("/images/final.jpg") 50%;' id="final" title="final" href="/images/final.jpg" rel="lightbox[mando]"><img border="0" src="/images/final.jpg"></a></li>
      </ul>
   </div>
</div>
<div id="footer"> 
   <table cellSpacing="0" cellPadding="0" width="100%"><tbody><tr><td vAlign="top" align="left"><img id="phone" border="0" src="images/phone.png" width="140" height="25"></td>
<td vAlign="top" align="right">
   <img id="email" border="0" src="images/email.png" width="254" height="25"><br>
   <a href="http://www.facebook.com/photostudio.com" target="new">Join me in <img style="margin-right: 33px;" id="facebook" border="0" src="facebookIcon2.jpg" width="16" height="16"></a></td></tr></tbody></table>
</div>




<div style="left: 10px; bottom: 5px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; position: fixed; background-color: rgb(255, 255, 255);" id="copyright">
All images and content - Copyright Carlos Chiossone, 2011.
</div>

<div style="width: 200px; text-align: right; right: 10px; bottom: 5px; color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 13px; position: fixed; background-color: rgb(255, 255, 255);" id="share">
<div style="text-align: right; background-color: rgb(255, 255, 255);" class="addthis_toolbox addthis_default_style"> 
    <a class="addthis_button_facebook at300b" title="Send to Facebook" href="#"><span class="at300bs at15nc at15t_facebook"></span></a> 
    <a class="addthis_button_twitter at300b" title="Tweet This" href="#"><span class="at300bs at15nc at15t_twitter"></span></a>    
    <a class="addthis_button_googlebuzz at300b" title="Send to Google Buzz" href="http://www.addthis.com/bookmark.php?v=250&amp;winname=addthis&amp;pub=chiossone&amp;source=tbx-250&amp;lng=es&amp;s=googlebuzz&amp;url=http%3A%2F%2Fwww.photostudio.com%2Findex.php%3Fbw%3D908&amp;title=Chiossone%20Photography&amp;ate=AT-chiossone/-/-/4e67becb8f3db682/1&amp;frommenu=1&amp;uid=4e67becbc7624e26&amp;ct=1&amp;pre=http%3A%2F%2Fwww.photostudio.com%2F&amp;tt=0" target="_blank"><span class="at300bs at15nc at15t_googlebuzz"></span></a> 
    <a class="addthis_button_email at300b" title="Email" href="#"><span class="at300bs at15nc at15t_email"></span></a> 
       <span class="addthis_separator">&nbsp;</span> 
     <a class="addthis_button_compact at300m" href="http://addthis.com/bookmark.php?v=250"><span class="at300bs at15nc at15t_compact"></span>Share</a>     
<div class="atclear"></div></div> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=chiossone"></script>
</div>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script> 
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11019983-1");
pageTracker._trackPageview();
} catch(err) {}
</script>

<div style="display: none; visibility: hidden; opacity: 0;" id="mbOverlay"></div><div style="display: none;" id="mbCenter"><div id="mbImage"></div><div style="visibility: hidden; opacity: 0;" id="mbBottom"><a id="mbCloseLink" href="#"></a><a id="mbNextLink" href="#"></a><a id="mbPrevLink" href="#"></a><div id="mbTitle"></div><div id="mbNumber"></div><div id="mbCaption"></div></div></div></body></html>

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 12:30 pm
Lo que buscas es esto:
http://www.jeremymartin.name/projects.php?project=kwicks

Sobre determinar el tamaño de la ventana: es la función GetWidth() que está casi al inicio del código que has posteado.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 04:33 pm
si el tema del acordeon lo entiendo pero lo que necesito es un acordeon que se adapte al ancho de la resolucion de la pantalla como hace en el link que adjunte antes y no encuentro ningun tutorial o script que lo haga. Tenes alguna idea de donde puedo encontrar o como hacerlo?

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 05:36 pm
Tomando el ancho de la ventana, el resto es trivial.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 06:20 pm
disculpa no entiendo ... tengo el acordeon armado con el link que me pasaste (me parecio mas dinamico del que yo habia conocido) ahora que tengo que hacer? porque le agregue este script pero el acordeon no se adapta al ancho de distintas pantallas ...

Código Java :

<script language="javascript" type="text/javascript"> 
 
  function GetWidth() 
  { 
          var x = 0; 
          if (self.innerHeight) 
          { 
                  x = self.innerWidth; 
          } 
          else if (document.documentElement && document.documentElement.clientHeight) 
          { 
                  x = document.documentElement.clientWidth; 
          } 
          else if (document.body) 
          { 
                  x = document.body.clientWidth; 
          } 
          return x; 
  } 
 
</script>



y me queda asi ...


Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
   <head>
      <title>Kwicks 1.5.1 Example Page</title>
        
    <script language="javascript" type="text/javascript"> 
 
  function GetWidth() 
  { 
          var x = 0; 
          if (self.innerHeight) 
          { 
                  x = self.innerWidth; 
          } 
          else if (document.documentElement && document.documentElement.clientHeight) 
          { 
                  x = document.documentElement.clientWidth; 
          } 
          else if (document.body) 
          { 
                  x = document.body.clientWidth; 
          } 
          return x; 
  } 
 
</script>     
        
      <!-- IMPORTANT!!! Include the stylesheet *BEFORE* the JavaScript (necessary for Safari 3.1.1) -->
      <link rel="stylesheet" type="text/css" href="css/main.css" />
      
      <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
      <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
      <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
      
      <script type="text/javascript">
         $().ready(function() {
            $('.kwicks').kwicks({
               max : 400,
               spacing : 5
            });
         });
      </script>
   </head>
   
   <body>
       <div style=" position: absolute; top:50%; left: 50%; margin-top: -200px; margin-left: -400px; z-index:52;" >

      <ul class="kwicks horizontal" >
         <li id="kwick_1"></li>
        <li id="kwick_2"></li>
        <li id="kwick_3"></li>
         <li id="kwick_4"></li>
      </ul>
    </div>      

   </body>
</html>

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 06:43 pm
Perdona, ¿tú sabes programar en JavaScript?

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 06:45 pm
no ... por eso es el problema :S, me doy una idea si es que leo y lo veo funcionando pero de cero no se programar ... es por eso que pregunto y pido ayuda para aprender :)

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 06:55 pm
Pues hubieses comenzado por ahí :P
A ver...
Así rapidito y sin mirar...
Supongo que en main.css tienes las definiciones de la clase kwicks. Y tienes cuatro <li> dentro del <ul>, entonces, en la parte donde llamas al plugin Kwicks...

Código Javascript :

$().ready(function() { 
            $('.kwicks li').css('width',parseInt(GetWidth()/4)+'px');
            $('.kwicks').kwicks({ 
               max : 400, 
               spacing : 5 
            }); 
         });

Lo que hago aquí es tomar el tamaño de la ventana y dividir por la cantidad de <li> dentro del <ul> que tiene la clase kwicks antes de aplicarle el plugin.
Una cosa, es mejor si pones "min", en vez de "max" y en vez de 400 pon algo como 50:

Código Javascript :

$().ready(function() { 
            $('.kwicks li').css('width',parseInt(GetWidth()/4)+'px');
            $('.kwicks').kwicks({ 
               min : 50, 
               spacing : 5 
            }); 
         });

Esto debería funcionar.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 07:10 pm
le agregue la linea que me dijiste y no pasa nada solo se ponen las imagenes de 50px fijas una abajo de la otra ...
en este link lo tengo subido para que lo veas
http://www.pabloterren.com.ar/coleccion

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 07:20 pm
Si te refieres a esta:
http://www.pabloterren.com.ar/coleccion/coleccion-error.html

Ni has cargado el plugin, ni has puesto la función como corresponde.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 07:40 pm

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 07:41 pm
tenes razon no me di cuenta ... lo que le hice ahora a
http://www.pabloterren.com.ar/coleccion/coleccion-error.html
fue ponerle el siguiente codigo pero no pasa nada.. se ve que no estoy entendiendo muy bien :S
le cambie el

Código Java :

(GetWidth()/4)+'px');

por

Código Java :

(GetWidth()/7)+'px');

ya que tengo 7 fotos cargando .. se ve que no estoy entendiendo muy bien :S

(la verdad que muchas gracias por tomarte el tiempo de explicarme y corregirme :))

Código HTML :

   <link rel="stylesheet" type="text/css" href="css/main.css" />
      
      <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
      <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
      <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
      
<script language="javascript" type="text/javascript">  
  
  function GetWidth()  
  {  
          var x = 0;  
          if (self.innerHeight)  
          {  
                  x = self.innerWidth;  
          }  
          else if (document.documentElement && document.documentElement.clientHeight)  
          {  
                  x = document.documentElement.clientWidth;  
          }  
          else if (document.body)  
          {  
                  x = document.body.clientWidth;  
          }  
          return x;  
  }  
  
</script> 

      <script type="text/javascript">
   $().ready(function() {  
            $('.kwicks li').css('width',parseInt(GetWidth()/7)+'px'); 
            $('.kwicks').kwicks({  
               min : 50,  
               spacing : 5  
            });  
         });  
      </script>

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 07:44 pm
Mira mi mensaje anterior.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 08 Sep 2011 07:51 pm
aaaaaaaaaaaaaah!! al final lo habia hecho bien la ultima vez!! lo que pasa es que se modifica cuando actualizas el navegador no lo hace automaticamente si es que se achica la ventana, por eso no me daba cuenta ... y se ve que mientras escribia vos me mandaste el link jeje

Asi me re sirve pero ya que me estas dando una mano hay posibilidad de que cambie automaticamente si es que se achico la ventana del navegador? sin necesidad de actualizar?

Si es muy complicado no importa porque la verdad que te re agradezco que te tomes el trabajo de responderme :)

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 08:05 pm
solucionado le agregue el siguiente codigo y actualiza cada vez que se cambia la medida del navegador :)

Código Java :

 
<script language="javascript" type="text/javascript"> 
   function Reload() 
      { 
//         window.location.href = window.location.href 
         window.location.href = 'coleccion.html'; 
 
      } 
   window.onresize = Reload; 
</script>


muchas gracias por todooo!!!

Por derone

18 de clabLevel



 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 08 Sep 2011 08:26 pm
Esto último no es la mejor manera. Lo ideal es controlar el evento correspondiente de la ventana. A ver si hago una prueba de concepto.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.