help, modificare evento per un singolo elemento

aekold

Nuovo Utente
23 Lug 2011
1
0
0
salve a tutti, sono proprio agli inizi con javascript, e non riesco a modificare il mio codice nel modo che mi interessa.. mi spiego.. ho creato questa pagina:

http://effepicreations.altervista.org/milledelizie/index.html

sostanzialmente tramite javascript, cliccando su una voce del menù, si espande una sezione contenente del testo. Le dimensioni di questa sezione, sono specificate sia tramite css per quanto riguarda la larghezza (che mi va bene così com'è), sia tramite javascript (per quanto riguarda l'altezza, in quanto essa varia al click sulla voce del menù, passando da 0 a, in questo caso, 400 pixel).

Il mio problema è che, per alcune ragioni, vorrei modificare l'altezza della sezione solo per quanto riguarda la prima voce (cioè "Riguardo a.."), in modo tale che l'altezza della sezione che si apre al click su questa voce, sia di altezza differente rispetto all'altezza delle sezioni per le altre voci.

sapreste aiutarmi? ecco, il codice usato è questo:


Codice:
<script type="text/javascript"> 
			$(function() {
				var $ac_background	= $('#ac_background'),
				$ac_bgimage		= $ac_background.find('.ac_bgimage'),
				$ac_loading		= $ac_background.find('.ac_loading'),
				
				$ac_content		= $('#ac_content'),
				$title			= $ac_content.find('h1'),
				$menu			= $ac_content.find('.ac_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($ac_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
						 */
						$ac_loading.show();//show loading status image
						$.when(loadImages()).done(function(){
							$.when(showBGImage()).done(function(){
								//hide the loading status image
								$ac_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($ac_bgimage);
							$ac_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('.ac_subitem'),
							$ac_close	= $sub_menu.find('.ac_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 */
							$ac_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	: '0px'
						}, 400, function() {
										//the bg image changes
							showItemImage(el_image);
						});
					},
						/* changes the background image */
					showItemImage		= function(source) {
							//if its the current one return
						if($ac_bgimage.attr('src') === source)
							return false;
								
						var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
						$itemImage.insertBefore($ac_bgimage);
						adjustImageSize($itemImage);
						$ac_bgimage.fadeOut(1500, function() {
							$(this).remove();
							$ac_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($ac_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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Passare i risultati di un foreach in un modal. Help! PHP 2
J help me C/C++ 1
Q HELP ME PLEASE!‼️‼️ E-Commerce 1
L difficoltà con Xampp. printing php mancante...help Web Server 7
K [PHP] Help me a problem... Pleases PHP 1
M HELP FORM CREATO IN PHP PHP 14
M Help - consultare (ed esportare) dati da un DB pubblico mySql PHP 2
S [PHP] help me!! PHP 2
F Cerco contatto tipo help-desk Offerte e Richieste di Lavoro e/o Collaborazione 2
F Help-PDO copiare Database MySQL PHP 3
Andrea1981 [WordPress] [HTML] Help modifica credits nel footer.Tema Customizr. WordPress 5
simgia [Javascript] Google maps help! Javascript 1
S [WordPress] Footer php - il background riempie tutta la pagina - help WordPress 1
A funzioni asincrone e callback...help! Ajax 10
F Help array da javascript a php Javascript 2
M [PHP] Help: controllo valori inseriti in un campo PHP 1
P Help con js/php PHP 6
N Sistema di Help di Delphi 7 non funziona su Win10 Windows e Software 0
silvia88 ***Help*** - Anteprima immagine photoshop diversa da file Photoshop 3
A HELP: vedo il sito posizionato in serp solo con i tool di posizionamento!!! SEO e Posizionamento 3
T [PHP] Calcolo anzianità soggetti [era: Help me :( Esercizio per me impossibile] PHP 9
trattorino Creare codice php help PHP 26
CoyotesSon [PHP] Help! Creazione di una finestra PHP 5
V help java Java 2
L help me Presentati al Forum 0
L N00b need help Webdesign e Grafica 2
I Help - Problema installazione tema di themeforest WordPress 1
claudiav ciao!! help.. Presentati al Forum 0
Z Invio mail da telecamere HIKVision - HELP!!! IP Cam e Videosorveglianza 0
M - WordPress - Sito Annunci HELP ME!!!! :crying: WordPress 2
L Hosting, help HTML e CSS 2
M HoneyPot su macchina virtuale HELP ME PLEASE!!! Reti LAN e Wireless 0
F Help con leaseweb Hosting 2
M DropDownList HELP ASP.NET 8
E [Javascript] help me !!! array da php a java Javascript 9
N Query lenta, help ! MySQL 0
P Help! modifica script Javascript 11
R cookies policy - help Leggi, Normative e Fisco 21
I Piccolo roblema di compatibilità mobile.. help! PHP 1
zorro Help paginazione PHP 10
A Help! Creare un blog/portale con chat in real time WordPress 0
P help variabile js concatenata a echo php Javascript 0
O Help, devo fare un sito web con alcune caratteristiche... HTML e CSS 2
Alessandra Fanelli Menu Collapse- help -nn iserisce azioni a pulsanti Flash 0
M php help ! PHP 3
V datepicker help.... jQuery 2
S Php HELP! PHP 2
S php help phpBB 5
P HELP: passare alla seconda maschera tramite pulsante MS Access 0
iAntis Domande per Restyling completo di un sito e nuovo Upload sul server: HELP! :/ Hosting 1

Discussioni simili