nodi jquery

H

halchmod

Nuovo Utente
13 Ott 2011
1
0
0
Salve a tutti,

attualmente ho un sito sviluppato in un'unica pagina index suddivisa in "n" li div dove in ciascuno abbiamo dei contenuti.

Sto cercando senza successo di spostare i diversi contenuti in nuove pagine singole ma cercando di conservare il funzionamento dinamico del menu.
file .js
Codice: 
$(function(){
	var act;
	var fl=true;
	function all_null(){
		$('#content > ul > li').css({visibility:'hidden', right:'-9999px'});
		$('#page_0').css({visibility:'visible', right:'0'});
		$('.box_img').css({width:'0', height:'0', left:'337px', top:'337px;'});
		$('.text').css({opacity:'0', visibility:'visible'});
		$('.but_close img').css({top:'29px',left:'29px', width:'0', height:'0', zIndex:'1'});
		close_anim();
	}
	function null_content(){
		
	}
	all_null();
	function open_page(page){
		nav=parseInt(page.substr(6));
		$('#footer_menu li').removeClass('active');
		$('#footer_menu li').eq(nav).addClass('active');
		$('#menu li a img').css({opacity:'0'});
		if (page=='#page_0') {
			$('.trigger').click();
			$('#menu li a img').stop().animate({opacity:'1'},400);
			$('.menu_box .images span').stop().animate({rotate:'0deg'},0);
			$('.menu_box .images span').css({opacity:'0',visibility:'hidden'});
			$('.menu_box .images .nav1').css({opacity:'1',visibility:'visible'});
			menu_hover();
			$('#page_0').stop().animate({width:'940px'});
			$('#page_0 .inner').stop().animate({marginLeft:'387', marginTop:'255'});
			fl=true;
			$('#menu #nav1 a').mouseenter();
				$('.menu_box .images span').stop().animate({rotate:'-=360deg'},800,function(){
					$('.menu_box .images span').stop().animate({rotate:'0deg'},0);
				});
			act=page;
			location.hash=page+'/'
		} else {
			if (fl) {
				$('#page_0').stop().animate({width:'270px'});
				$('#page_0 .inner').stop().animate({marginLeft:'23', marginTop:'243'});
				fl=false
			}
			$('.images span').animate({rotate:51.4+360*k+'deg'}, function(){
				$('.images span').animate({rotate:51.4+360*k+'deg'},0)													  
				$('.menu_box .images span').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})})
				$('.menu_box .images .nav1').css({visibility:'hidden', opacity:'0'});
				$('.menu_box .images .nav'+(nav+1)).css({visibility:'visible'}).stop().animate({opacity:'1'},400);
				$('.tittles > div').stop().animate({opacity:'0'},400, function(){$(this).css({visibility:'hidden'})})
				$('.tittles > .nav'+(nav+1)).css({visibility:'visible'}).stop().animate({opacity:'1'},400);
				$(page).css({visibility:'visible', right:'0'});
				close_anim();
				$(page).find('.box_img').stop().animate({width:'100%', height:'100%',left:'0', top:'0'},400, function(){
					$(page).find('.text').css({visibility:'visible'}).stop().animate({opacity:'1'},400, function(){
						$(this).css({opacity:'none'})
						$(page).find('.but_close').css({display:'block'}).find('.img').stop().animate({top:'0', left:'0', width:'100%', height:'100%'},400)
						act=page;
						location.hash=page+'/'	
					})
				})
			})
		}
	}
	var page=location.hash.slice(0,-1);
	if ((page=='')||(page=='#')) {	
		page='#page_0';
	}
	open_page(page);
	var nav=parseInt(page.substr(6));
	$('#footer_menu li').eq(nav).addClass('active');	
	$('a').click(function(){
		if ($(this).attr('href').substr($(this).attr('href').indexOf('#'),6)=='#page_') {
			page=$(this).attr('href');
			if (act=='#page_0') {
				if (page=='#page_0') {
					$('.menu').removeClass('close')
					open_page(page);
				} else{
					$('.trigger').click();
					$('#menu li a').unbind('mouseenter')
					$('#menu li a img').stop().animate({opacity:'0'},200);	
					open_page(page);
				}
			} else{
				$(act).find('.but_close').unbind('mouseenter, mouseleave').find('img').stop().animate({top:'29', left:'29', width:'0', height:'0'},400, function(){$(act).find('.but_close').css({display:'none'})});
				$(act).find('.text').stop().animate({opacity:'0'},400, function(){
					$(act).find('.text').css({visibility:'hidden'});
					$(act).find('.box_img').stop().animate({top:'337px',left:'337px', width:'0', height:'0'},400, function(){
						$(act).css({visibility:'hidden',right:'-9999px'})
						open_page(page);																								  
					})
				})	
			}
			return false;
		} 
	})
})

function close_anim(){
	$('.but_close').mouseenter(function(){
		$(this).find('.img_act').css({zIndex:'2'}).stop().animate({top:'0',left:'0', width:'100%', height:'100%'},400)
		$(this).find('.img').css({zIndex:'1'}).stop().animate({ top:'29',left:'29', width:'0', height:'0'})
	}).mouseleave(function(){
		$(this).find('.img').css({zIndex:'2'}).stop().animate({ top:'0',left:'0', width:'100%', height:'100%'})
		$(this).find('.img_act').css({zIndex:'1'}).stop().animate({ top:'29',left:'29', width:'0', height:'0'})
	})	
}

struttura html

Codice: 
<section id="content">
				<ul>
					<li id="page_0">
						<div class="inner">
							<nav class="menu">
								<ul id="menu" class="reset">
									<li id="nav1"><a href="#page_0"><img src="images/nav1.png" alt="" class="img"><img src="images/nav1_active.png" alt="" class="img_act"></a></li>
									<li id="nav7"><a href="links.php"><img src="images/nav7.png" alt="" class="img"><img src="images/nav7_active.png" alt="" class="img_act"></a></li>
									<li id="nav6"><a href="contatti.php"><img src="images/nav6.png" alt="" class="img"><img src="images/nav6_active.png" alt="" class="img_act"></a></li>
									<li id="nav5"><a href="attrezzatura.php"><img src="images/nav5.png" alt="" class="img"><img src="images/nav5_active.png" alt="" class="img_act"></a></li>
									<li id="nav4"><a href="servizi.php"><img src="images/nav4.png" alt="" class="img"><img src="images/nav4_active.png" alt="" class="img_act"></a></li>
									<li id="nav3"><a href="portfolio.php"><img src="images/nav3.png" alt="" class="img"><img src="images/nav3_active.png" alt="" class="img_act"></a></li>
									<li id="nav2"><a href="company_1.php"><img src="images/nav2.png" alt="" class="img"><img src="images/nav2_active.png" alt="" class="img_act"></a></li>
								</ul>
							</nav>
							<div class="menu_box">
								<div class="images">
									<span class="nav1"></span>
									<span class="nav2"></span>
									<span class="nav3"></span>
									<span class="nav4"></span>
									<span class="nav5"></span>
									<span class="nav6"></span>
									<span class="nav7"></span>
									<span class="nav8"></span>
									<span class="nav9"></span>								</div>
								<div class="tittles">
									<div class="nav1">
										<h2>Home  </h2>
									</div>
									<div class="nav2">
										<h2>Company  </h2>
										<ul class="addit_menu">
											<li><a href="company_1.php">Mission</a></li>
											<li class="end"><a href="#page_1b">Il Team </a></li>
										</ul>
									</div>
									<div class="nav3">
										<h2>Portfolio  </h2>
										<ul class="addit_menu">
											<li><a href="#page_2">Showreel</a></li>
											<li class="end"><a href="#page_2b">Works</a></li>
										</ul>
									</div>
									<div class="nav4">
										<h2>Servizi  </h2>
									</div>
									<div class="nav5">
										<h2>Attrezzatura </h2>
								        <ul class="addit_menu">
											<li><a href="#page_4">Produzione</a></li>
											<li class="end"><a href="#page_4b">Post produzione</a></li>
										</ul>
									</div>
									<div class="nav6">
										<h2>Contatti  </h2>
									</div>
									<div class="nav7">
										<h2>Links  </h2>
									</div>
									<div class="nav8">
										<h2>Privacy  </h2>
									</div>
									<div class="nav9">
										<h2>Read more  </h2>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li id="page_1">
						<div class="box">
							<img src="images/box.png" alt="" class="box_img">
							<a href="#page_0" class="but_close"><img src="images/close1.png" alt="" class="img"><img src="images/close_active.png" alt="" class="img_act"></a>
							<div class="text">
								<h3>Mission  </h3>
								<div class="scroll-pane">
									<p>CONTENUTO PRESENTAZIONE</p>
								</div>
							</div>
						</div>
					</li>
					<li id="page_1b">
						<div class="box">
							<img src="images/box.png" alt="" class="box_img">
							<a href="#page_0" class="but_close"><img src="images/close1.png" alt="" class="img"><img src="images/close_active.png" alt="" class="img_act"></a>
							<div class="text">
								<h3>Il Team  </h3>
								<div class="scroll-pane">
									<div class="wrapper">
										<div class="cols marg_right1">
											<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
											<p><span class="color1">Mauris fermentum.</span><br>
													Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phasellus porta.<br>
										</div>
										<div class="cols marg_right1">
											<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
											<p><span class="color1">Quisque nulla.</span><br>
													Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phallus porta. Quisque nulla. Vestibulum libero nisl  ac turpis.<br>
										</div>
										<div class="cols">
											<figure class="pad1"><img src="images/page4_img1.jpg" alt=""></figure>
											<p><span class="color1">Duis ac turpis.</span><br>
													Praesent vestibulum molestie lacus. Aenea nomy hendrerit mauris. Phasellus porta.<br>
										</div>
									</div>
								</div>
							</div>
						</div>
					</li>

qualche idea di come possa o se possa procedere ? Grazie in anticipo
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
R cammino minimo per lista di picking: nodi "imposti" da visitare Programmazione 1
felino [VBScript] [HP UFT] Iterare nodi di un TreeView (WPF) Visual Basic 0
fabryx [PHP]RISOLTO: Parsing xml nodi con caratteri speciali PHP 1
L xml e php. Problema con i nodi PHP 4
L contare nodi figli di un determinato nodo madre XML 0
L Problema Select con Javascript e nodi Dom XML. Javascript 0
A Visualizzare albero DOM completo oppure Visualizzare Nodi che fanno parte di una Selezione Javascript 6
W Inserimento e cancellazione nodi con XMLDOM XML 1
A XML e Nodi XML 73
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2

Discussioni simili

Alto Basso