Foros del Web » Programando para Internet » Jquery »

problema con menu en jquery

Estas en el tema de problema con menu en jquery en el foro de Jquery en Foros del Web. Buenos dias y gracias de antemano por su respuestas bueno tuve muchas dificultades para colocar el texto al costado en este menu: http://rrc-emarketing.com/mp360/Web_MAPI/menu%20acordeon/index.html pero finalmente ...
  #1 (permalink)  
Antiguo 29/12/2010, 09:26
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
problema con menu en jquery

Buenos dias y gracias de antemano por su respuestas

bueno tuve muchas dificultades para colocar el texto al costado en este menu:

http://rrc-emarketing.com/mp360/Web_MAPI/menu%20acordeon/index.html

pero finalmente lo consegui, ahora el siguiente paso seria personalizar el tamaño del ancho para cada uno cuando se abre, porque no todos tienen el mismo ancho

si fueran tan amables de ayudarme o darme una pista... para hacerlo

gracias,
  #2 (permalink)  
Antiguo 29/12/2010, 10:16
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

porque no me contestan?? porfavor necesito ayuda!!
  #3 (permalink)  
Antiguo 29/12/2010, 11:01
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 10 años, 10 meses
Puntos: 43
Respuesta: problema con menu en jquery

Eso es con CSS.
Creo que a tu div container no debes darle un ancho fijo, mas o menos como quieres que salga? un ejemplo?
  #4 (permalink)  
Antiguo 29/12/2010, 11:08
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

Hola, gracias por contestar!!!

esque no hay un ejemplo en si!!! ahora
lo que necesito esque el ancho cuando le des hover se ajuste,

aver... cuando te posicionas en uno tenga width=200px
y en el otro tenga width=50px

por ejemplo eso es lo que quiero, que se pueda ajustar cada uno...

gracias
  #5 (permalink)  
Antiguo 29/12/2010, 11:13
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 10 años, 10 meses
Puntos: 43
Respuesta: problema con menu en jquery

si te refieres a darle un ancho especifico al div container le puedes agregar clases, algo asi:
Código HTML:
Ver original
  1. <div class="container clase1">
  2.                             <a href="">Introduccion</a>
  3.                             <a href="">Hiram Bingham</a>
  4.                             <a href="">Otros Viajeros</a>
  5.                         </div>
Código CSS:
Ver original
  1. .clase1{
  2.  width: 200px !important;
  3. }
  #6 (permalink)  
Antiguo 29/12/2010, 11:26
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

aver lo voy a probar, aunque yo pensaba que era en el codigo jquery...

porque aqui, en este codigo que se pone en la web

<script type="text/javascript">
var $jQ = jQuery.noConflict();

$jQ().ready(function() {
$jQ('#example1 .kwicks').kwicks ({
max: 288,
duration: 400,
spacing: 5

});
});
</script>


yo le doy max:288 <---- este es el ancho, pero se pone ese ancho a todos!!!
no a uno en especifico, a eso me refiero


Gracias!!
  #7 (permalink)  
Antiguo 29/12/2010, 11:28
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

yo creo que lo q lograria con eso es personalizar el ancho sin el over!!

pero lo que yo quiero es personalizar el ancho, cuando esta en hover, cuando se muestran los textos...

Gracias por tu respuesta T_T

nesecito a alguien que programe jquery porfavor!!!
  #8 (permalink)  
Antiguo 29/12/2010, 12:14
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 10 años, 10 meses
Puntos: 43
Respuesta: problema con menu en jquery

a verlo dicho antes pense que te referias a los textos que le metiste en las opciones, estuve jugando un poco con el codigo fuente de kwicks, aunque no funciona con jQuery 1.4, reemplaza este codigo que te adjunto en jquery.kwicks-1.5.1.pack.js
En la linea 24 estan los anchos para cada opcion, puedes cambiarlos:
Código Javascript:
Ver original
  1. /*
  2.     Kwicks for jQuery (version 1.5.1)
  3.     Copyright (c) 2008 Jeremy Martin
  4.     http://www.jeremymartin.name/projects.php?project=kwicks
  5.    
  6.     Licensed under the MIT license:
  7.         http://www.opensource.org/licenses/mit-license.php
  8.  
  9.     Any and all use of this script must be accompanied by this copyright/license notice in its present form.
  10. */
  11.  
  12.  
  13. (function($){
  14.     $.fn.kwicks = function(options) {
  15.         var defaults = {
  16.             isVertical: false,
  17.             sticky: false,
  18.             defaultKwick: 0,
  19.             event: 'mouseover',
  20.             spacing: 0,
  21.             duration: 500
  22.            
  23.         };
  24.         var widths=[100,150,200,250,300,350];
  25.         var o = $.extend(defaults, options);
  26.         var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
  27.         var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
  28.        
  29.         return this.each(function() {
  30.             container = $(this);
  31.             var kwicks = container.children('despl li');
  32.             var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
  33.             if(!o.max) {
  34.                 o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
  35.             } else {
  36.                 o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
  37.             }
  38.             // set width of container ul
  39.             if(o.isVertical) {
  40.                 container.css({
  41.                     width : kwicks.eq(0).css('width'),
  42.                     height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
  43.                 });            
  44.             } else {
  45.                 container.css({
  46.                     width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
  47.                     height : kwicks.eq(0).css('height')
  48.                 });            
  49.             }
  50.  
  51.             // pre calculate left or top values for all kwicks but the first and last
  52.             // i = index of currently hovered kwick, j = index of kwick we're calculating
  53.             var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
  54.             for(i = 0; i < kwicks.size(); i++) {
  55.                 preCalcLoTs[i] = [];
  56.                 // don't need to calculate values for first or last kwick
  57.                 for(j = 1; j < kwicks.size() - 1; j++) {
  58.                     if(i == j) {
  59.                         preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
  60.                     } else {
  61.                         preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
  62.                     }
  63.                 }
  64.             }
  65.            
  66.             // loop through all kwick elements
  67.             kwicks.each(function(i) {
  68.                 var kwick = $(this);
  69.                 // set initial width or height and left or top values
  70.                 // set first kwick
  71.                 if(i === 0) {
  72.                     kwick.css(LoT, '0px');
  73.                 }
  74.                 // set last kwick
  75.                 else if(i == kwicks.size() - 1) {
  76.                     kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
  77.                 }
  78.                 // set all other kwicks
  79.                 else {
  80.                     if(o.sticky) {
  81.                         kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
  82.                     } else {
  83.                         kwick.css(LoT, (i * normWoH) + (i * o.spacing));
  84.                     }
  85.                 }
  86.                 // correct size in sticky mode
  87.                 if(o.sticky) {
  88.                     if(o.defaultKwick == i) {
  89.                         kwick.css(WoH, o.max + 'px');
  90.                         kwick.addClass('active');
  91.                     } else {
  92.                         kwick.css(WoH, o.min + 'px');
  93.                     }
  94.                 }
  95.                 kwick.css({
  96.                     margin: 0,
  97.                     position: 'absolute'
  98.                 });
  99.                
  100.                 kwick.bind(o.event, function() {
  101.                     // calculate previous width or heights and left or top values
  102.                     var prevWoHs = []; // prevWoHs = previous Widths or Heights
  103.                     var prevLoTs = []; // prevLoTs = previous Left or Tops
  104.                     kwicks.stop().removeClass('active');
  105.                     for(j = 0; j < kwicks.size(); j++) {
  106.                         prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
  107.                         prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
  108.                     }
  109.                     var aniObj = {};
  110.                    
  111.                     var pcurrent = $(this);
  112.                     var pabort = false;
  113.                     var pi=0;
  114.                     while (!pabort) {
  115.                         if (pcurrent.prev().length!=0){      
  116.                             pi++;
  117.                             pcurrent=pcurrent.prev();
  118.                         }
  119.                         else pabort = true;
  120.                     }
  121.                     aniObj[WoH] = widths[pi];
  122.                    
  123.                     var maxDif = o.max - prevWoHs[i];
  124.                     var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
  125.                     kwick.addClass('active').animate(aniObj, {
  126.                         step: function(now) {
  127.                             // calculate animation completeness as percentage
  128.                             var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
  129.                             // adjsut other elements based on percentage
  130.                             kwicks.each(function(j) {
  131.                                 if(j != i) {
  132.                                     kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
  133.                                 }
  134.                                 if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
  135.                                     kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
  136.                                 }
  137.                             });
  138.                         },
  139.                         duration: o.duration,
  140.                         easing: o.easing
  141.                     });
  142.                 });
  143.             });
  144.             if(!o.sticky) {
  145.                 container.bind("mouseleave", function() {
  146.                     var prevWoHs = [];
  147.                     var prevLoTs = [];
  148.                     kwicks.removeClass('active').stop();
  149.                     for(i = 0; i < kwicks.size(); i++) {
  150.                         prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
  151.                         prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
  152.                     }
  153.                     var aniObj = {};
  154.                     aniObj[WoH] = normWoH;
  155.                     var normDif = normWoH - prevWoHs[0];
  156.                     kwicks.eq(0).animate(aniObj, {
  157.                         step: function(now) {
  158.                             var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
  159.                             for(i = 1; i < kwicks.size(); i++) {
  160.                                 kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
  161.                                 if(i < kwicks.size() - 1) {
  162.                                     kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
  163.                                 }
  164.                             }
  165.                         },
  166.                         duration: o.duration,
  167.                         easing: o.easing
  168.                     });
  169.                 });
  170.             }
  171.         });
  172.     };
  173. })(jQuery);
  #9 (permalink)  
Antiguo 29/12/2010, 12:56
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

oh my!!! aver aver!!!

voy a probarlos muchas gracias
  #10 (permalink)  
Antiguo 29/12/2010, 13:01
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

wow!!!! mi respetos!! lo hiciste!!! T_T

voy a llorar definitivamente quiero aprender mas de jquery...
revisare el codigo para ver como lo hiciste...

recomiendame una web donde pueda aprender mas a fondo esta programacion!!!!
o tu me puedes enseñar? te pago

Gracias, saluditos..

y Bendiciones... Feliz año nuevo... quiza te moleste con algo mas adelante gracias gracias
  #11 (permalink)  
Antiguo 29/12/2010, 13:04
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

y si no quiero q se deslice? le pondria el mismo ancho no?

me podrias explicar un poco el codigo, esque necesito varios menus de esos
y no todos son de 6 items, quiero saber para ya hacerlo solita

Muchas pero muchas Gracias
  #12 (permalink)  
Antiguo 29/12/2010, 13:05
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 10 años, 10 meses
Puntos: 43
Respuesta: problema con menu en jquery

te mando mensajes en privado!
  #13 (permalink)  
Antiguo 29/12/2010, 13:21
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

no funciona en IE no?

alguna ayuda con eso porfavor?!
  #14 (permalink)  
Antiguo 29/12/2010, 13:23
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

me salen muchos errores en las librerias, con IE que puedo hacer?!

yuda porfavor!
  #15 (permalink)  
Antiguo 29/12/2010, 14:38
 
Fecha de Ingreso: noviembre-2010
Mensajes: 32
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: problema con menu en jquery

este es el menu y se ve bien

http://rrc-emarketing.com/mp360/Web_MAPI/menu%20acordeon/index.html

y este es en mi pagina pero se ve mal

http://rrc-emarketing.com/mp360/Web_MAPI/ciudadela/descubrimiento.html

le puse el jquerycomflict para que no haga conflicto con mi banner pero no se que puede estar mal porfa una ayuda!

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 19:41.