11486 sujets

JavaScript, DOM et API Web HTML5

HTML + Jquery ScrollTo

Bonjour, pour mon premier Post sur Alsacréations, je commence par un peti problème d'implantation du Plugin Scroll To...

Mon niveau en Html est nul, j'ai appris tout seul, donc niveau théorie 0% et pratique 70 %...
Voici pour la présentation rapide et scuccinte de ma perosnne...

Je vais donc essayer de m'expliquer le mieux et le plus clairement possible...
Je suis actuellement sur la création de mon petit site pour ma futur interface pour Windows Mobile...

Mais je n'arrive pas à intégrer le scroll to v1.4.2...
a écrit :

<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
</head>

a écrit :

<body>
<!---Tuto Lock start--->
<div id="lock" class="article">
<h2><span>Lockscreen</span> secret</h2>
<div class="clr"></div>
<img src="images/gallery/thumb1.png" width="240" height="400" alt="" /> <img src="images/tuto/thumb1.jpg" width="240" height="400" alt="" />
<p>1 • Top bar : Phone provider Icon (<strong>32x32 *.jpg</strong>, can be change) with 4 squares to display meter signal. Standard icon to display 3G, Wifi, Bluetooth, Notifications, battery (<strong>icon and percentage</strong>).</p>
<p>2 • Minimalistic Weather icon based on your location.</p>
<p>3 • <strong>Slide Action Screen</strong>: Launch Quick Function.</p>
<p>4 • City name, Current temperature and conditon and last line is Forecast conditon and temperature.</p>
<p>5 • <strong>Call button</strong>, Switch to Phone.</p>
<p>6 • <strong>Unlock Phone</strong>, Long press to switch to Home Page.</p>
</div>
<!---Tuto Lock End--->

<!---Tuto Home start--->
<div id="home" class="article">
<h2><span>Home Page</span> secret</h2>
<div class="clr"></div>
<img src="images/gallery/thumb2.png" width="240" height="400" alt="" /> <img src="images/tuto/thumb2.jpg" width="240" height="400" alt="" />
<p>1 • Avatar and owner Name : Avatar can be changed using menu available in settings button (<strong>3</strong>). Owner is from your <strong>device</strong>).</p>
<p>2 • <strong>Slide Action Screen</strong>: Go to Lockscreen.</p>
<p>3 • <strong>Settings button</strong>, Display a menu with <strong>wireless</strong>, <strong>sound</strong>, some <strong>Xtra system settings</strong> and skin menu... Small animations and work for all device.</p>
<p>4 • Contacts, Calendar, Contacts, Messaging, Weather and Programs are a button (<strong>Slide to effect</strong>) to switch in specific page.</p>
</div>
<!---Tuto Home End--->
</div>

[...]

<!---Sidebar 3 start--->
<div class="gadget">
<h2 class="star"><span>Chapters</span></h2>
<div class="clr"></div>
<ul class="ex_menu">
<li><a title="$.scrollTo( '#lock', 800, {easing:'elasout'} );" href="#lock">Lockscreen</a><br />
top bar, action screen, information</li>
<li><a title="$.scrollTo( '#home', 800, {easing:'elasout'} );" href="#home">Home page</a><br />
Avatar, menu, information, action screen</li>
</ul>
</div>
<!---Sidebar 3 End--->
</body>


il me semble que tout est bon... je pointe vers des DIV comme dans la demo... j'utilise bien la librairie Jquery et la dernière version de ScrollTo...
Je ne crois pas me tromper sur les appels de la routine de ScrollTo... tout mes tests sont fait en local...

Merci pour votre aide éventuelle...

LeSScro
Bonjour,

En regardant tes sources et le pluggin scrollTo, je crois voir ce qui t'a induit en erreur.
Le fait de mettre $.scrollTo( '#lock', 800, {easing:'elasout'} ); dans l'attribut title de ton lien lock ne permet en aucun cas d'exécuter un script, dans la démo de scrollTo ils le mettent en title pour avoir un tooltip lorsque tu passe la souris au dessus du lien.

En gros ce qu'il te manque c'est l'essentiel, l'appel de la fonction scrollTo dans un script (externe ou pas, mais préfère externe) qui pointe vers ton lien (grâce a un id par exemple) qui liera ton lien au scroll.

Dans les demos scrollTo regarde le fichier init.js, il regroupe tous les appels vers le scroll.
C'est un code du type :
$('#relative-position-hash').click(function(){
    $paneTarget.stop().scrollTo( {top:'-=100px',left:'+=100'}, 500 );
});

là ils lient l'évènement onClick de l'objet html ayant l'id "relative-position-hash"
celui ci :
<a href="#" id="relative-position-hash" title="$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );">Relative position(hash)</a>


N'hésite pas si ce n'est pas clair pour toi,
KalNex
Modifié par KalNex (11 Jan 2011 - 10:33)
Finalement je viens de comprendre simplement comment cela fonctionnait...

j'ai mis çà dans mon script.js...

	//borrowed from jQuery easing plugin
	//http://gsgd.co.uk/sandbox/jquery.easing.php
	$.easing.elasout = function(x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	};
	
	$('ul a').click(function(e){
										  
		// If a link has been clicked, scroll the page to the link's hash target:
		
		$.scrollTo( this.hash, 1500, { easing:'elasout' });
		e.preventDefault();
	});

	$('.fr a').click(function(e){
										  
		// If a link has been clicked, scroll the page to the link's hash target:
		
		$.scrollTo( {top:'0px',left:'0px'}, 800 );
		e.preventDefault();
	});
	
	// This one is important, many browsers don't reset scroll on refreshes
	// Reset all scrollable panes to (0,0)
	$('div.article').scrollTo( 0 );
	// Reset the screen to (0,0)
	$.scrollTo( 0 );
});


Donc merci monsieur... ravie d'avoir pu faire affaire avec vous...
Sujet clos
Aller à