Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cerrar contenido al hacer click en otra sección

Estas en el tema de Cerrar contenido al hacer click en otra sección en el foro de Frameworks JS en Foros del Web. Buenas! Estoy haciento una página - aquí está la prueba: [Editado a solicitud del autor] En ella podéis ver que al hacer click en una ...
  #1 (permalink)  
Antiguo 13/05/2011, 01:15
Avatar de elacunza  
Fecha de Ingreso: mayo-2011
Mensajes: 46
Antigüedad: 12 años, 10 meses
Puntos: 0
Cerrar contenido al hacer click en otra sección

Buenas!

Estoy haciento una página - aquí está la prueba: [Editado a solicitud del autor]

En ella podéis ver que al hacer click en una sección del menú se despliega el contenido y al clickar en la x se cierra. Hasta aquí todo bien, el caso es que al clickar en otras secciones, se superponen. Lo que necesito es que al hacer click en otras secciones, se cierre la anterior y así constantemente, como un tab navigation.

Imagino que al javascript le falta alguna sentencia pero yo no tengo ni idea de esto, podría alguien echarme una mano?

Este es el javascripc:

<script type="text/javascript">
$(function() {
var $background = $('#background'),
$bgimage = $background.find('.bgimage'),
$loading = $background.find('.loading'),

$contenido = $('#contenido'),
$title = $contenido.find('h1'),
$menu = $contenido.find('.menu'),
$mainNav = $menu.find('ul:first'),
$menuItems = $mainNav.children('li'),
totalItems = $menuItems.length,
$ItemImages = new Array();

/*
for this menu, we will preload all the images.
let's add all the image sources to an array,
including the bg image
*/
$menuItems.each(function(i) {
$ItemImages.push($(this).children('a:first').attr( 'href'));
});
$ItemImages.push($bgimage.attr('src'));


var Menu = (function(){
var init = function() {
loadPage();
initWindowEvent();
},
loadPage = function() {
/*
1- loads the bg image and all the item images;
2- shows the bg image;
3- shows / slides out the menu;
4- shows the menu items;
5- initializes the menu items events
*/
$loading.show();//show loading status image
$.when(loadImages()).done(function(){
$.when(showBGImage()).done(function(){
//hide the loading status image
$loading.hide();
$.when(slideOutMenu()).done(function(){
$.when(toggleMenuItems('up')).done(function(){
initEventsSubMenu();
});
});
});
});
},
showBGImage = function() {
return $.Deferred(
function(dfd) {
//adjusts the dimensions of the image to fit the screen
adjustImageSize($bgimage);
$bgimage.fadeIn(1000, dfd.resolve);
}
).promise();
},
slideOutMenu = function() {
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
return $.Deferred(
function(dfd) {
//slides out the menu
$menu.stop()
.animate({
width : new_w + 'px'
}, 700, dfd.resolve);
}
).promise();
},
/* shows / hides the menu items */
toggleMenuItems = function(dir) {
return $.Deferred(
function(dfd) {
/*
slides in / out the items.
different animation time for each one.
*/
$menuItems.each(function(i) {
var $el_title = $(this).children('a:first'),
marginTop, opacity, easing;
if(dir === 'up'){
marginTop = '0px';
opacity = 1;
easing = 'easeOutBack';
}
else if(dir === 'down'){
/*marginTop = '60px';
opacity = 0;
easing = 'easeInBack';*/
}
$el_title.stop()
.animate({
marginTop : marginTop,
opacity : opacity
}, 200 + i * 200 , easing, function(){
if(i === totalItems - 1)
dfd.resolve();
});
});
}
).promise();
},
initEventsSubMenu = function() {
$menuItems.each(function(i) {
var $item = $(this), // the <li>
$el_title = $item.children('a:first'),
el_image = $el_title.attr('href'),
$sub_menu = $item.find('.subitem'),
$close = $sub_menu.find('.close');

/* user clicks one item : appetizers | main course | desserts | wines | specials */
$el_title.bind('click.Menu', function(e) {
$.when(toggleMenuItems('down')).done(function(){
openSubMenu($item, $sub_menu, el_image);
});
return false;
});
/* closes the submenu */
$close.bind('click.Menu', function(e) {
closeSubMenu($sub_menu);
return false;
});
});
},
openSubMenu = function($item, $sub_menu, el_image) {
$sub_menu.stop()
.animate({
height : '400px',
marginTop : '-250px'
}, 400, function() {
//the bg image changes
showItemImage(el_image);
});
},
/* changes the background image */
showItemImage = function(source) {
//if its the current one return
if($bgimage.attr('src') === source)
return false;

var $itemImage = $('<img src="'+source+'" alt="Background" class="bgimage"/>');
$itemImage.insertBefore($bgimage);
adjustImageSize($itemImage);
$bgimage.fadeOut(1500, function() {
$(this).remove();
$bgimage = $itemImage;
});
$itemImage.fadeIn(1500);
},
closeSubMenu = function($sub_menu) {
$sub_menu.stop()
.animate({
height : '0px',
marginTop : '0px'
}, 400, function() {
//show items
toggleMenuItems('up');
});
},
/*
on window resize, ajust the bg image dimentions,
and recalculate the menus width
*/
initWindowEvent = function() {
/* on window resize set the width for the menu */
$(window).bind('resize.Menu' , function(e) {
adjustImageSize($bgimage);
/* calculate new width for the menu */
var new_w = $(window).width() - $title.outerWidth(true);
$menu.css('width', new_w + 'px');
});
},
/* makes an image "fullscreen" and centered */
adjustImageSize = function($img) {
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;

if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}

$img.css({
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
});
},
/* preloads a set of images */
loadImages = function() {
return $.Deferred(
function(dfd) {
var total_images = $ItemImages.length,
loaded = 0;
for(var i = 0; i < total_images; ++i){
$('<img/>').load(function() {
++loaded;
if(loaded === total_images)
dfd.resolve();
}).attr('src' , $ItemImages[i]);
}
}
).promise();
};

return {
init : init
};
})();

/*
call the init method of Menu
*/
Menu.init();
});
</script>

Muchos besos y mil gracias de antemano

Última edición por Panino5001; 09/03/2012 a las 08:07 Razón: Editado a solicitud del autor
  #2 (permalink)  
Antiguo 13/05/2011, 13:43
Avatar de livemusic  
Fecha de Ingreso: abril-2011
Ubicación: Lima - Chorrillos
Mensajes: 150
Antigüedad: 12 años, 11 meses
Puntos: 18
Respuesta: Cerrar contenido al hacer click en otra sección

Antes de ayudarte, dime de donde descargaste este ejemplo, esta muy bueno....
Rapidamente e encontrado 3 posibles soluciones.

1.- Puedes usar el metodo hide de Jquery para ocultar, el menu, que deseas que sea reemplazado, por el que selecciono el usuario.

2.- Si bien es cierto, la primera opcion es muy brusca te ocultara el menu pero de forma muy brusca, para esto, podemos ocultarlo con el slideToggle, que tambien es una funcion de Jquery.

3.- Opcion para mi la mejor, si la X es la que cierra el menu, entonces podemos simular un cierre al dar click a otro menu,.. ahora ¿ como podemos simular un click de un usuario ?
-----------------
En Jquery existe el metodo .trigger() .... =o ''',, que basicamente lo podemos usar para simular el cierre del menu.

///////// Ahorita ando en le trabajo, espero llegar temprano para ayudarte a programar un poco,, suerte saludos, me comentas si te funciono ¡¡...
  #3 (permalink)  
Antiguo 19/05/2011, 01:14
Avatar de elacunza  
Fecha de Ingreso: mayo-2011
Mensajes: 46
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Cerrar contenido al hacer click en otra sección

Cita:
Iniciado por livemusic Ver Mensaje
Antes de ayudarte, dime de donde descargaste este ejemplo, esta muy bueno....
Rapidamente e encontrado 3 posibles soluciones.

1.- Puedes usar el metodo hide de Jquery para ocultar, el menu, que deseas que sea reemplazado, por el que selecciono el usuario.

2.- Si bien es cierto, la primera opcion es muy brusca te ocultara el menu pero de forma muy brusca, para esto, podemos ocultarlo con el slideToggle, que tambien es una funcion de Jquery.

3.- Opcion para mi la mejor, si la X es la que cierra el menu, entonces podemos simular un cierre al dar click a otro menu,.. ahora ¿ como podemos simular un click de un usuario ?
-----------------
En Jquery existe el metodo .trigger() .... =o ''',, que basicamente lo podemos usar para simular el cierre del menu.

///////// Ahorita ando en le trabajo, espero llegar temprano para ayudarte a programar un poco,, suerte saludos, me comentas si te funciono ¡¡...
Gracias! todo esto estaba en la pag de Codrops, ahora mismo no tengo el link pero debe estar en las primeras páginas ya que es de hace poco.

El que venía predeterminado, al hacer click en una sección, se ocultaba el resto del menú como tú bien dices, yo lo que he hecho es dejar el menú constantemente ahí para que no se oculte, por eso necesito que se cierre el contenido de una sección al intentar ver otra

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