11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] [JQUERY] Probleme ScrollTo Content

Bonjour à tous,

Mon problème est le suivant, je viens d'installer le script scrollTo sur mon site pour que tout le contenu glisse à droite ou à gauche selon le lien qu'on a cliqué.

Tout marche sans problème, mise à part le menu permettant cette navigation. En effet,selon l'endroit ou je le place, les liens fonctionnent ou non. Sauf sur Internet Explorer, Oh surprise cela fonctionne parfaitement.

Si je veux le mettre dans le div id="header", le menu est incliquable. Je comprend pas.

Si je le met tout en haut, il fonctionne bien, mais ce n'est pas là que je veux le mettre Smiley decu . Je suis novice en jQuery, c'est pourquoi, je sollicite votre aide.

Autre chose, j'ai une page contact, et lors de l'envoi du formulaire, le message est bien envoyé, mais on se retrouve directement à la page accueil, comment rester sur la page contact, pour voir le message de confirmation ?

Voici mes pages principales :

Le CSS pour Jquery




#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:50px;left:0;
	overflow:hidden;
}

	#mask {
		width:500%;
		height:100%;
		
	}

	.item {
		width:20%;
		height:100%;
		float:left;
		
	}
	
	
	.content {
		width:900px;
		height:auto;
		top:20%;
		margin:0 auto;
		
		position:relative;
	}
	
	.selected {
		background: transparent;
		color: #d0d0d0;
		text-decoration:overline;
	}

	.clear {
		clear:both;
	}


Le code de ma page index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">@import url(styles.css);</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css" media="screen" />


<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script>

$(document).ready(function() {

	$('a.panel').click(function () {

		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		
		current = $(this);
		
		$('#wrapper').scrollTo($(this).attr('href'), 800);		
		
		return false;
	});

	$(window).resize(function () {
		resizePanel();
	});
	
});

function resizePanel() {

	width = $(window).width();
	height = $(window).height();

	mask_width = width * $('.item').length;
		
	$('#debug').html(width  + ' ' + height + ' ' + mask_width);
		
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}

</script>

 	
<script type="text/javascript">
	$(document).ready(function() 
	{
		$("a[rel=example_group]").fancybox({
			'transitionIn'		: 'elastic',
			'transitionOut'		: 'elastic',
			'titlePosition' 	: 'over',
			'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) 
			{
				return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
			}
		});

	});
</script>

</head>

<body>



    


	
	<div id="header">
<!-- Menu qui ne fonctionne pas (sauf explorer) -->
        <div id="menu">
            <ul>
                <li><a href="#item1" class="panel">Accueil</a></li>
                <li><a href="#item2" class="panel">Concept</a></li>
                <li><a href="#item3" class="panel">Portfolio</a></li>
                <li><a href="#item4" class="panel">Contact</a></li>
            </ul>
            
        </div>
<!-- Fin Menu qui ne fonctionne pas -->
    </div>
    <div id="wrapper">

	<div id="mask">

		<div id="item1" class="item">
			<div class="content"><? include("pages/accueil.php"); ?></div>
		</div>
		
		<div id="item2" class="item">
			<div class="content"><? include("pages/concept.php"); ?></div>
		</div>
		
		<div id="item3" class="item">
			<div class="content"><? include("pages/portfolio.php"); ?></div>
		</div>
		
		<div id="item4" class="item">
			<div class="content"><? include("pages/contact.php"); ?></div>
		</div>
	
	</div>

</div>
 
	<div id="footer"> 
	    
		<div id="footer-box">
           	
            <img src="images/valide.jpg" alt="Valide" />XHTML 1.0 Strict Valid<br />
            <img src="images/valide.jpg" alt="Valide" />CSS 2.1 Valid
                
    	</div>
          
	</div>
 
</body>

</html>


Merci d'avance ! Smiley cligne
Modifié par 20cents31 (16 May 2010 - 16:09)
Bonjour 20cents31,
Je vois que personne ne t'as répondu... as tu trouvé une solution? J'ai moi même le soucis au niveau de l'envoi de mon formulaire de ma page contact... donc si t'as trouvé quelque chose qui t'as permis de résoudre ce pb... je suis preneuse ^^
Sujet clos
Aller à