problema con menu en jquery

[MeryDurCam]

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,

[MeryDurCam]

porque no me contestan?? porfavor necesito ayuda!!

[chicohot20]

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?

[MeryDurCam]

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

[chicohot20]

si te refieres a darle un ancho especifico al div container le puedes agregar clases, algo asi:

Código HTML:

<div class="container clase1">
                            <a href="">Introduccion</a>
                            <a href="">Hiram Bingham</a>
                            <a href="">Otros Viajeros</a>
                        </div>
 

Código CSS:

.clase1{
 width: 200px !important;
}
 

[MeryDurCam]

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!!

[MeryDurCam]

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!!!

[chicohot20]

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:

/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
    
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php
 
    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
 
 
(function($){
    $.fn.kwicks = function(options) {
        var defaults = {
            isVertical: false,
            sticky: false,
            defaultKwick: 0,
            event: 'mouseover',
            spacing: 0,
            duration: 500
            
        };
        var widths=[100,150,200,250,300,350];
        var o = $.extend(defaults, options);
        var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
        var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
        
        return this.each(function() {
            container = $(this);
            var kwicks = container.children('despl li');
            var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
            if(!o.max) {
                o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
            } else {
                o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
            }
            // set width of container ul
            if(o.isVertical) {
                container.css({
                    width : kwicks.eq(0).css('width'),
                    height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
                });             
            } else {
                container.css({
                    width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
                    height : kwicks.eq(0).css('height')
                });             
            }
 
            // pre calculate left or top values for all kwicks but the first and last
            // i = index of currently hovered kwick, j = index of kwick we're calculating
            var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
            for(i = 0; i < kwicks.size(); i++) {
                preCalcLoTs[i] = [];
                // don't need to calculate values for first or last kwick
                for(j = 1; j < kwicks.size() - 1; j++) {
                    if(i == j) {
                        preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
                    } else {
                        preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
                    }
                }
            }
            
            // loop through all kwick elements
            kwicks.each(function(i) {
                var kwick = $(this);
                // set initial width or height and left or top values
                // set first kwick
                if(i === 0) {
                    kwick.css(LoT, '0px');
                } 
                // set last kwick
                else if(i == kwicks.size() - 1) {
                    kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
                }
                // set all other kwicks
                else {
                    if(o.sticky) {
                        kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
                    } else {
                        kwick.css(LoT, (i * normWoH) + (i * o.spacing));
                    }
                }
                // correct size in sticky mode
                if(o.sticky) {
                    if(o.defaultKwick == i) {
                        kwick.css(WoH, o.max + 'px');
                        kwick.addClass('active');
                    } else {
                        kwick.css(WoH, o.min + 'px');
                    }
                }
                kwick.css({
                    margin: 0,
                    position: 'absolute'
                });
                
                kwick.bind(o.event, function() {
                    // calculate previous width or heights and left or top values
                    var prevWoHs = []; // prevWoHs = previous Widths or Heights
                    var prevLoTs = []; // prevLoTs = previous Left or Tops
                    kwicks.stop().removeClass('active');
                    for(j = 0; j < kwicks.size(); j++) {
                        prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
                        prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
                    }
                    var aniObj = {};
                    
                    var pcurrent = $(this);
                    var pabort = false;
                    var pi=0;
                    while (!pabort) {
                        if (pcurrent.prev().length!=0){      
                            pi++;
                            pcurrent=pcurrent.prev();
                        }
                        else pabort = true;
                    }
                    aniObj[WoH] = widths[pi];
                    
                    var maxDif = o.max - prevWoHs[i];
                    var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
                    kwick.addClass('active').animate(aniObj, {
                        step: function(now) {
                            // calculate animation completeness as percentage
                            var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
                            // adjsut other elements based on percentage
                            kwicks.each(function(j) {
                                if(j != i) {
                                    kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
                                }
                                if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
                                    kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
                                }
                            });
                        },
                        duration: o.duration,
                        easing: o.easing
                    });
                });
            });
            if(!o.sticky) {
                container.bind("mouseleave", function() {
                    var prevWoHs = [];
                    var prevLoTs = [];
                    kwicks.removeClass('active').stop();
                    for(i = 0; i < kwicks.size(); i++) {
                        prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
                        prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
                    }
                    var aniObj = {};
                    aniObj[WoH] = normWoH;
                    var normDif = normWoH - prevWoHs[0];
                    kwicks.eq(0).animate(aniObj, {
                        step: function(now) {
                            var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
                            for(i = 1; i < kwicks.size(); i++) {
                                kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
                                if(i < kwicks.size() - 1) {
                                    kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
                                }
                            }
                        },
                        duration: o.duration,
                        easing: o.easing
                    });
                });
            }
        });
    };
})(jQuery);
 

[MeryDurCam]

oh my!!! aver aver!!!

voy a probarlos muchas gracias

[MeryDurCam]

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

[MeryDurCam]

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

[chicohot20]

te mando mensajes en privado!

[MeryDurCam]

no funciona en IE no?

alguna ayuda con eso porfavor?!

[MeryDurCam]

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

yuda porfavor!

[MeryDurCam]

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!