11489 sujets

JavaScript, DOM et API Web HTML5

Poblème de menu

Bonjour à tous,
J'ai récupéré un template html Onepage. Toutes les modifs marchent bien sauf au niveau du menu.
Quand j'ajoute un nouveau menu avec une nouvelle ancre, le style pour le menu actif ne marchent plus, ou plutôt le menu affiché actif n'est pas correspondant à l'ancre. Il me semble que ça vient du fichier scroll.js, mais ne connaissant rien au javascript ....
Pourtant, il me semblait que les styles des menu étaient gérés par le css.
Je sais pas si j'ai été très clair, mais si quelqu'un a une piste, merci d'avance.
C'est sûr Floreo !
Voici le fichier scroll.js

 $(document).ready(function() {
	var posit;
	var pos;
	var div= 'html';
	var fl=true;
	var amount = 6;//amount of pages
	$("a").click(function () {
		if ($(this).attr("href").substr($(this).attr("href").indexOf('#'),6)=='#page_') {
		fl=false;
      	elementClick = $(this).attr("href");
      	destination = $(elementClick).offset().top;
		if ($.browser.webkit) {div='body'}
		$(div).animate({ scrollTop: destination-248}, 1000, function(){ fl=true});
     	return false;}
    });
	var doc=0;
	setInterval(SetActBut,150);
	
	function SetActBut(){
		new_doc=$(div).attr('scrollTop');
		if ((new_doc!=doc)&&(fl)){
			doc=new_doc;
			for (var i=1; i<=amount; i++) {
				elem=$('#menu .nav'+i+' a').attr("href");
				pos=$(elem).offset().top;
				if ((pos-doc-248)<=300) {
					$('#menu li').removeClass('menu_active');
					$('#menu .nav'+i).addClass('menu_active');
					Cufon.refresh();
				}
			}
		}
	}
  });
Il faudrait le html aussi afin de se rendre compte de la structure.
Au pire, donne directement le lien vers le site en ligne s'il y a Smiley cligne
Modifié par floreo (19 Mar 2014 - 22:24)
<!DOCTYPE html>
<html lang="en" class="page">
<head>
<title>Biz Time</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Amaranth_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
	.button1, #ContactForm a {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear:both;text-align:center;position:relative'>
	<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body class="body">
<div class="body1">
	<div class="body2">
		<div class="main">
<!-- header -->
			<header>
				<div class="wrapper">
					<nav>
						<ul id="top_nav">
							<li class="bg_none"><a href="#page_Home" class="icon1"></a></li>
							<li><a href="#page_Contacts" class="icon2"></a></li>
							<li><a href="#" class="icon3"></a></li>
						</ul>
					</nav>
				</div>
				<div class="wrapper">
					<h1><a href="index.html" id="logo">SVPP, produits pétroliers</a></h1>
					<ul id="icons">
						<li><a href="#" class="normaltip" title="Facebook"><img src="images/icon_1.png" alt=""></a></li>
						<li><a href="#" class="normaltip" title="Rss"><img src="images/icon_2.png" alt=""></a></li>
						<li><a href="#" class="normaltip" title="Twitter"><img src="images/icon_3.png" alt=""></a></li>
					</ul>
				</div>
			</header><div class="ic">SVPP, vos combustibles en livraison rapide!</div>
<!-- / header -->
		</div>
	</div>
</div>
<div class="wrapper">
	<div class="main">
		<nav>
			<ul id="menu">
				<li class="menu_active nav1"><a href="#page_Home">Home </a></li>
				<li class="nav2"><a href="#page_News">News </a></li>
				<li class="nav3"><a href="#page_Services">Services </a></li>
				<li class="nav4"><a href="#page_Products">Products </a></li>
				<li class="nav5"><a href="#page_FAQ">FAQ </a></li>
				<li class="nav6"><a href="#page_Contacts">Contacts </a></li>
                <li class="nav7"><a href="#page_Services">FAQ 2</a></li>
                <li class="nav8"><a href="#page_Products">News 2 </a></li>
                <li class="nav9"><a href="#page_FAQ">Image 2 </a></li>
			</ul>
		</nav>
<!-- content -->
		<section id="content">
			<div id="page_Home">
				<div id="slider">
					<img src="images/img1.jpg" alt="">
					<img src="images/img2.jpg" alt="">
					<img src="images/img3.jpg" alt="">
                    <img src="images/img4.jpg" alt="">
				</div>
				<div id="slider_shadow"></div>
				<div class="banners">
					<div class="col1">
						<div class="ban1">
							<div class="pad">
								<h2><strong>24/7</strong> Client <span>Support</span></h2>
								<p>This is one of <a href="http://blog.templatemonster.com/free-website-templates/ " target="_blank">free web- site templates</a> created by TemplateMonster.com team. This website template is optimized for 1024X768 screen res.</p>
								<div class="center">
									<a href="#" class="button1">Read More</a>
									<div class="button1_shadow"></div>
								</div>
							</div>
						</div>
						<div class="banner_shadow"></div>
					</div>
					<div class="col1 pad_left1">
						<div class="ban2">
							<div class="pad">
								<h2>Premium<strong>&nbsp;</strong> <span>Services</span></h2>
								<p>This <a href="http://blog.templatemonster.com/2011/04/18/free-business-website-template-smart-solution/" target="_blank">Free Business Website Template</a> goes with two packages – with PSD source files and without them.<br><br></p>
								<div class="center">
									<a href="#" class="button1">Read More</a>
									<div class="button1_shadow"></div>
								</div>
							</div>
						</div>
						<div class="banner_shadow"></div>
					</div>
					<div class="col1 pad_left1">
						<div class="ban3">
							<div class="pad">
								<h2>Our<strong>&nbsp;</strong><span>Strategy</span></h2>
								<p>This website template has several pages: <a href="#page_Home">Home</a>, <a href="#page_News">News</a>, <a href="#page_Services">Services</a>, <a href="#page_Products">Products</a>, <a href="#page_FAQ">faq</a>, <a href="#page_Contacts">Contacts</a> (note that contact us form – doesn’t work).</p>
								<div class="center">
									<a href="#" class="button1">Read More</a>
									<div class="button1_shadow"></div>
								</div>
							</div>
						</div>
						<div class="banner_shadow"></div>
					</div>
				</div>
			</div>
			<div id="page_News">
				<h2>Latest News &amp; Events</h2>
				<div class="box1_bot">
					<div class="box1_left">
						<div class="box1_right">
							<div class="box1">
								<div class="pad">
									<div class="wrapper pad_bot2">
										<figure class="left marg_right1"><img src="images/page1_img1.jpg" alt=""></figure>
										<p class="pad_bot1 pad_top1"><strong>Sed ut perspiciatis unde omnis iste natus</strong></p>
										<p>Dit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
									</div>
									<div class="wrapper">
										<figure class="left marg_right1"><img src="images/page1_img2.jpg" alt=""></figure>
										<p class="pad_bot1 pad_top1"><strong>At vero eos et accusamus et iusto odio dignissimos</strong></p>
										<p>Et harum quidem rerum facilis est et expedita distinctio. Namhy libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus emporibus autem quibusdam et aut officiis debitis.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="page_Services">
				<h2>Our Services</h2>
				<div class="wrapper">
					<div class="col2">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<div class="wrapper">
												<figure class="left marg_right2"><a href="#"><img src="images/page2_img1.png" alt=""></a></figure>
												<h3><a href="#">Management</a></h3>
												<p>Nemo enim ipsam volup tate vuoluptas aspernatur aut odit aut fugit, sed quia consequuntur magni dolores voluptatem.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col2 pad_left1">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<div class="wrapper">
												<figure class="left marg_right2"><a href="#"><img src="images/page2_img3.png" alt=""></a></figure>
												<h3><a href="#">Planning</a></h3>
												<p>Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inven tore veritatis.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="wrapper marg_top1">
					<div class="col2">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<div class="wrapper">
												<figure class="left marg_right2"><a href="#"><img src="images/page2_img2.png" alt=""></a></figure>
												<h3><a href="#">Banking</a></h3>
												<p>Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inven tore veritatis.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col2 pad_left1">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<div class="wrapper">
												<figure class="left marg_right2"><a href="#"><img src="images/page2_img4.png" alt=""></a></figure>
												<h3><a href="#">Tax Services</a></h3>
												<p>Nemo enim ipsam volup tate vuoluptas aspernatur aut odit aut fugit, sed quia consequuntur magni dolores voluptatem.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="page_Products">
				<h2>Products</h2>
				<div class="wrapper">
					<div class="col1">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<figure class="pad_bot1"><a href="#"><img src="images/page3_img1.jpg" alt=""></a></figure>
											<h3><a href="#">Product #1</a></h3>
											<p>Namhy libero temporem soluta nobis.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col1 pad_left1">
						<div class="box1_bot"><div class="box1_left"><div class="box1_right">
							<div class="box1">
								<div class="pad">
									<figure class="pad_bot1"><a href="#"><img src="images/page3_img2.jpg" alt=""></a></figure>
									<h3><a href="#">Product #2</a></h3>
									<p>Namhy libero temporem soluta nobis.</p>
								</div>
							</div>
						</div></div></div>
					</div>
					<div class="col1 pad_left1">
						<div class="box1_bot"><div class="box1_left"><div class="box1_right">
							<div class="box1">
								<div class="pad">
									<figure class="pad_bot1"><a href="#"><img src="images/page3_img3.jpg" alt=""></a></figure>
									<h3><a href="#">Product #3</a></h3>
									<p>Namhy libero temporem soluta nobis.</p>
								</div>
							</div>
						</div></div></div>
					</div>
				</div>
				<div class="wrapper marg_top1">
					<div class="col1">
						<div class="box1_bot"><div class="box1_left"><div class="box1_right">
							<div class="box1">
								<div class="pad">
									<figure class="pad_bot1"><a href="#"><img src="images/page3_img4.jpg" alt=""></a></figure>
									<h3><a href="#">Product #4</a></h3>
									<p>Namhy libero temporem soluta nobis.</p>
								</div>
							</div>
						</div></div></div>
					</div>
					<div class="col1 pad_left1">
						<div class="box1_bot"><div class="box1_left"><div class="box1_right">
							<div class="box1">
								<div class="pad">
									<figure class="pad_bot1"><a href="#"><img src="images/page3_img5.jpg" alt=""></a></figure>
									<h3><a href="#">Product #5</a></h3>
									<p>Namhy libero temporem soluta nobis.</p>
								</div>
							</div>
						</div></div></div>
					</div>
					<div class="col1 pad_left1">
						<div class="box1_bot"><div class="box1_left"><div class="box1_right">
							<div class="box1">
								<div class="pad">
									<figure class="pad_bot1"><a href="#"><img src="images/page3_img6.jpg" alt=""></a></figure>
									<h3><a href="#">Product #6</a></h3>
									<p>Namhy libero temporem soluta nobis.</p>
								</div>
							</div>
						</div></div></div>
					</div>
				</div>
			</div>
			<div id="page_FAQ">
				<h2>Frequently Asked Questions</h2>
				<div class="box1_bot">
					<div class="box1_left">
						<div class="box1_right">
							<div class="box1">
								<div class="pad">
									<p class="pad_bot1"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit</strong></p>
									<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
									<p class="pad_bot1"><strong>Excepteur sint occaecat cupidatat non proident, sunt officia deserunt</strong></p>
									<p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
									<p class="pad_bot1"><strong>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut</strong></p>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p>
									<p class="pad_bot1"><strong>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</strong></p>
									<p>Suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <div id="page_Test">
				<h2>Frequently Asked Questions</h2>
				<div class="box1_bot">
					<div class="box1_left">
						<div class="box1_right">
							<div class="box1">
								<div class="pad">
									<p class="pad_bot1"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit</strong></p>
									<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
									<p class="pad_bot1"><strong>Excepteur sint occaecat cupidatat non proident, sunt officia deserunt</strong></p>
									<p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
									<p class="pad_bot1"><strong>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut</strong></p>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p>
									<p class="pad_bot1"><strong>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</strong></p>
									<p>Suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <div id="page_image">
            	<p>
                	<h2>IMAGE TEST</h2>
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                </p>
            </div>
            <div id="page_image2">
            	<p>
                	<h2>IMAGE TEST</h2>
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                    IMAGE TEST
                </p>
            </div>
			<div id="page_Contacts">
				<h2>Contacts</h2>
				<div class="wrapper">
					<div class="col3">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<form id="ContactForm">
												<div>
													<div class="wrapper"><span>Your Name:</span><input type="text" class="input" ></div>
													<div class="wrapper"><span>Your E-mail:</span><input type="text" class="input" ></div>
													<div class="wrapper"><span>Your City:</span><input type="text" class="input" ></div>
													<div class="textarea_box"><span>Your Message:</span><textarea name="textarea" cols="1" rows="1"></textarea></div>
													<a href="#" class="button" onClick="document.getElementById('ContactForm').submit()"><span class="shadow"></span>Send</a>
													<a href="#" class="button" onClick="document.getElementById('ContactForm').reset()"><span class="shadow"></span>Clear</a>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col1 pad_left1">
						<div class="box1_bot">
							<div class="box1_left">
								<div class="box1_right">
									<div class="box1">
										<div class="pad">
											<p><span class="right marg_right2">USA</span>Country:<br>
											<span class="right marg_right2">California</span>State:<br>
											<span class="right marg_right2">San Diego</span>City:<br>
											<span class="right marg_right2"><a href="mailto:">lilly@mail.com</a></span>Email:<br></p>
											<p class="pad_bot1"><strong>Miscellaneous Info:</strong></p>
											At vero eos et accusoaus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
<!-- / content -->
	</div>
</div>
<div class="body3">
	<div class="body4">
		<div class="main">
<!-- footer -->
			<footer>
				<a href="#page_Home" id="footer_logo">Biz Time</a>
				<div><a rel="nofollow" href="http://www.html5xcss3.com/" target="_blank">Free HTML5 Templates</a> designed by TemplateMonster.com</div>
			</footer>
<!-- / footer -->
		</div>
	</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Sujet clos
Aller à