Demande d'aide pour un site horizontal

narimel · 12/01/2011, 12h08

Bonjour,
Je galère sur un script qui a priori est simple à mettre en place sur mon site.

Connaissant le html et le css, je me suis pas trop mal débrouillée, mais par contre, mon site étant à l'horizontale, je souhaite intégrer le script "tinyscrolling" (voici l'adresse : http://lab.centralscrutinizer.it/the-tiny-scrollings/)..

Jusque la tout va bien, sauf que ...ça marche pas....

j'ai fait des recherches, et j'ai essayé de voir ce qui peut ne pas aller, mais impossible de savoir...

Voici une copie de mon head :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
       <title>Pompodom</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
 
       <script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="js/lightbox.js"></script>
		<script type="text/javascript" src="js/tinyscrolling.js"></script>
		<style type="text/css">a:link{text-decoration:none}</style>
		<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
   </head>

voici une partie de la façon dont je l'ai intégré dans mon index.html pour que par exemple, lorsque l'on clique dans le menu à droite sur portfolio, le site défile jusque la rubrique "portfolio" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="#portfolio" title="portfolio"><img src="structure/porfolio_menu.png" alt="Portfolio" style ="margin-left: 0px; margin-top: 10px; border: none"></a></li>

Et enfin voici le "portfolio" en tant que destination :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="portfolio">
    		<div id="tit_portfolio" id="#portfolio">
    			<img src="structure/tit_portfolio.png"></img>
    		</div>

Merci d'avance pour votre aide, car je suis vraiment vraiment perdue

.

Bovino · 12/01/2011, 19h24

Citation:

ça marche pas

Effectivement, c'est une description assez factuelle du problème, mais qui ne permet pas vraiment de trouver une solution

narimel · 12/01/2011, 21h40

ce que j'entends par "ça marche pas"...:
Lorsque je clique sur un lien, le défilement ne se produit pas.
En pointant la souris sur l'image, on constate qu'il y a bien un lien, mais c'est tout....je ne sais pas si j'ai été claire ?

NoSmoking · 12/01/2011, 22h49

Citation:

Envoyé par narimel

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="portfolio">
    		<div id="tit_portfolio" id="#portfolio">
    			<img src="structure/tit_portfolio.png"></img>
    		</div>

Merci d'avance pour votre aide, car je suis vraiment vraiment perdue

.

normal les 2 ID sur la même div ???

narimel · 13/01/2011, 00h41

@No smoking....

Tu es mon messie...c'était tellement ENORME...que j'ai pas vu ...

Merci infiniment pour ton aide, "ça marche maintenant"

Je me permets d'abuser....ça fonctionne parfaitement, mais le défilement est super lent sur mozilla, est ce qu'il y a un moyen d'améliorer les choses ? voici le script (pour moi c'est pas loin du mandarin) : (merci encore !)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
window.onload = function() {
	HtinyScrolling.init(); scrollTips.init();
	}
 
var HtinyScrolling = {
	speed : 0,      //set here the scroll speed: when this value increase, the speed decrease. 
	maxStep: 150,	 //set here the "uniform motion" step for long distances
	brakeK: 5,		 //set here the coefficient of slowing down
	hash:null,		
	currentBlock:null,
	requestedX:0,
	init: function() {
		var lnks = document.getElementsByTagName('a');   
		for(var i = 0, lnk; lnk = lnks[i]; i++) {   
			if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
			('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
			addEvent(lnk,'click',HtinyScrolling.initScroll,false);
			lnk.onclick=function(){return false;} // Safari
			}   
		}    
	},
	getTarget: function(target) {
		while(target.tagName.toLowerCase() != 'a')
			target = target.parentNode;
		return target;
	},
	getElementXpos: function(el){
		var x = 0;
		while(el.offsetParent){  
			x += el.offsetLeft;    
			el = el.offsetParent;
		}	return x;
	},		
	getScrollLeft: function(){
		if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
		else return window.pageXOffset;   
	},	
	getWindowWidth: function(){
		if (window.innerWidth)	return window.innerWidth; 
		if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
	},
	getDocumentWidth: function(){
		if (document.width) return document.width;
		if(document.body.offsetWidth) return document.body.offsetWidth;
	},
	initScroll: function(e){
		var targ;  
		if (!e) var e = window.event;
		if (e.target) targ = e.target;
		else if (e.srcElement) targ = e.srcElement;  
		targ = HtinyScrolling.getTarget(targ);  //a fix by Skid X
		HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
		HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);   
		if(!HtinyScrolling.currentBlock) return;
		HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock); 
		HtinyScrolling.scroll(targ); 
		return false;
	},
	scroll: function(targ){
		var left  = HtinyScrolling.getScrollLeft();
		if(HtinyScrolling.requestedX > left) { 
			var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
			endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
			var offset = Math.max(2, Math.min(endDistance, HtinyScrolling.maxStep));
		} else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
		} window.scrollTo(left + offset, 0);  
		if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
			window.scrollTo(HtinyScrolling.requestedX, 0);
			if(typeof XULDocument != 'undefined') {
				location.hash = HtinyScrolling.hash;
			}
 
			//optional instructions: you can add an effect to enlight after the scroll the selected section.
			//uncomment this line below if you want to change the opacity:
			//mark.change_opacity(HtinyScrolling.hash);
 
			//you can also call the function "mark.change_colors(HtinyScrolling.hash, fps, (duration in sec), #(color in hex), #(color in hex))" to change background color of selected section   
			HtinyScrolling.hash = null;
		} else 	setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);			
	}
}
 
/* the mouse scrolling doesn't work with Opera, that hasn't a event associated to the mouse wheel */
 
var scrollTips = {
	dx : null,
	init : function() {	
		if (window.addEventListener) {
		window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
		} else document.attachEvent("onmousewheel", this.mouseScroll); 
		var left = document.getElementById('left');
		addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
		addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
		var right = document.getElementById('right');
		addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
		addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
	},
	mouseScroll : function(e) {
		if (!e) var e = window.event;
		if (e.wheelDelta <= 0 || e.detail>=0){  
		window.scrollBy(80,0);
		} else  window.scrollBy(-80,0) ; 
	},	
	arrowScroll: function(val) {
		if(val==1) {
			window.scrollBy(70,0);
		} else {
			window.scrollBy(-70,0)
		}
	}
}
 
var mark = {        //first four functions are based on The Fade Anything Technique by Adam Michela 
	valop : 100,
	req : 0,
	make_hex: function(r,g,b) {
		r = r.toString(16); if (r.length == 1) r = '0' + r;
		g = g.toString(16); if (g.length == 1) g = '0' + g;
		b = b.toString(16); if (b.length == 1) b = '0' + b;
		return "#" + r + g + b;
	},
	change_colors: function(id, fps, duration, from, to) {  
		var frames = Math.round(fps * (duration / 1000));
		var interval = duration / frames;
		var delay = interval;
		var frame = 0;		
		if (from.length < 7) from += from.substr(1,3);
		if (to.length < 7) to += to.substr(1,3);		
		var rf = parseInt(from.substr(1,2),16);
		var gf = parseInt(from.substr(3,2),16);
		var bf = parseInt(from.substr(5,2),16);
		var rt = parseInt(to.substr(1,2),16);
		var gt = parseInt(to.substr(3,2),16);
		var bt = parseInt(to.substr(5,2),16);		
		var r,g,b,h;
		while (frame < frames) {
			r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
			g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
			b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
			h = this.make_hex(r,g,b); 		
			setTimeout("mark.set_img_bgcolor('"+id+"','"+h+"')", delay);
			frame++;
			delay = interval * frame; 
		}
		setTimeout("mark.set_img_bgcolor('"+id+"','"+to+"')", delay);
	},  
 
	set_img_bgcolor: function(id, c) {   
	    if(document.getElementById(id).getElementsByTagName('img')[0]) {
		var o = document.getElementById(id).getElementsByTagName('img')[0];
		o.style.backgroundColor = c;} else return;
	},
	get_img_bgcolor: function(id)  { 
		var o = document.getElementById(id).getElementsByTagName('img')[0];
		while(o) {
			var c;
			if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
			if (o.currentStyle) c = o.currentStyle.backgroundColor;
			if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
			o = o.parentNode;
		}
		if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
		var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
		if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
		return c;
	},
	change_opacity: function(el) {
		if(!(/^menu/.test(el))) {
			var post = document.getElementById(el);
			if (mark.valop > 10 && mark.req == 0) {
				mark.valop -= 10;
				mark.set_opacity(post,mark.valop);
				if(mark.valop == 10) {mark.req = 1};
			} else 
			if (mark.valop < 100 && mark.req == 1) {
				mark.valop += 10;
				mark.set_opacity(post,mark.valop);
				if(mark.valop == 100) {mark.req = 2};
			} 
			if (mark.req != 2){
			setTimeout("mark.change_opacity('"+el+"')", 50);
			}
			else { mark.set_opacity(post,9999); mark.req = 0; return;}
		}
	},
	set_opacity: function(post,val){
		post.style.opacity='0.' + val ;
		post.style.filter="alpha(opacity=" + val + ")";
	}
}
 
function addEvent( obj, type, fn ) {
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}
 
function removeEvent( obj, type, fn ) {
	if (obj.removeEventListener)
		obj.removeEventListener( type, fn, false );
	else if (obj.detachEvent) {
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}

SpaceFrog · 14/01/2011, 13h32

ça fait pas un peu beaucoup de code juste pour un simple scroll horizontal ...

au vu de tou ce code je m'attendais à un truc un peu plsu élaboré du style:
http://tympanus.net/Tutorials/WebsiteScrolling/

narimel · 14/01/2011, 16h25

Citation:

Envoyé par SpaceFrog

ça fait pas un peu beaucoup de code juste pour un simple scroll horizontal ...

au vu de tou ce code je m'attendais à un truc un peu plsu élaboré du style:
http://tympanus.net/Tutorials/WebsiteScrolling/

Merci pour ta réponse et ton lien spaceFrog..et bien je ne me rends pas compte puisque je ne comprends pas le contenu du code. En l'occurence celui ci me permet de faire glisser de gauche à droite et de droite à gauche.
Le code du site que tu m'as donné et apparemment fait en jquery ? aurais tu un lien sur le sujet ? un tuto ? un pack "code" je sais pas un truc ...
en plus celui que j'ai déconne selon les navigateurs

merci

14/01/2011, 13h32	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ça fait pas un peu beaucoup de code juste pour un simple scroll horizontal ... au vu de tou ce code je m'attendais à un truc un peu plsu élaboré du style: http://tympanus.net/Tutorials/WebsiteScrolling/ __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

12/01/2011, 21h40	#3
narimel Invité de passage Inscription : septembre 2006 Messages : 6 Détails du profil Informations forums : Inscription : septembre 2006 Messages : 6 Points : 0 Points : 0	ce que j'entends par "ça marche pas"...: Lorsque je clique sur un lien, le défilement ne se produit pas. En pointant la souris sur l'image, on constate qu'il y a bien un lien, mais c'est tout....je ne sais pas si j'ai été claire ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email