Scroll left ou right avec une image

Version imprimable

25/09/2015, 13h18
guenfood

Scroll left ou right avec une image
Bonjour,

J'ai une portion de code que je souhaite adapter afin de pouvoir faire défiler le contenu d'une zone à droite ou à gauche en lieu et place d'une scrollbar que je vais cacher (overflow-x:hidden)
Code:

1 2 3 4 <div class="scroll-nav"> <a id="next" href="#"><i class="tieicon-right-open"></i></a> <a class="prev-scroll" id="prev" href="#"><i class="tieicon-left-open"></i></a> </div>
Comment puis-je faire pour que pour l'id "next" lorsque je clique sur l'icone "tieicon-right-open", je puisse scroller sur la droite, et que pour l'id "prev", je puisse scroller sur la gauche ?

Merci par avance pour votre aide.
26/09/2015, 16h18
NoSmoking

Bonjour,
ton salut passera par du javascript, je déplace vers ce forum.

bonjour

il faut utiliser scrollLeft
Code:

1 2 3 var elem=document.getElementById('ctn'); elem.scrollLeft=elem.scrollLeft+20+"px"

Bonjour,

Merci pour ce retour.
Le javascript et moi, c'est pas la fête.

Alors, voilà les codes des fichiers concernés par mon problème.

Déjà, le code qui permet d'afficher la div pour laquelle je veux créer le scroll :

Code:

1
2
3
4
5
6
7
<section class="cat-box scroll-box" style="text-align: left">
			<h2 class="cat-box-title">Blogosphère</h2>
<br />
<br />
<div class="scroll-nav"><a id="next" href="#"><i class="tieicon-right-open"></i></a><a class="prev-scroll" id="prev" href="#"><i class="tieicon-left-open"></i></a></div>
[feedzy-rss feeds="http://aupouvoirdesmots.canalblog.com/rss.xml,http://polar.zonelivre.fr/feed/,https://gruznamur.wordpress.com/feed/,http://dubruitdanslesoreilles-delapoussieredanslesyeux.overblog.com/rss,http://cecibondelire.canalblog.com/rss.xml,http://passionthrillers.blogspot.com/feeds/posts/default" feed_title="no" target="_blank" max="0" title="40" meta="yes" summary="no" summarylength="80" thumb="yes" size="80"]
</section>

Le shortcode compris dans le code s'appuie sur le css suivant, et utilise la div class "feedzy-horizontal" :

Code:

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
.feedzy-rss > ul {
	margin: 0;
	padding: 0;
}
.feedzy-rss .rss_item {
	list-style: none;
}
.feedzy-rss .rss_item .title {
	font-weight: bold;
}
.feedzy-rss .rss_item:after{
	content:'';
	display:block;
	clear: both;
}
.feedzy-rss .rss_item .rss_image {
	float: left;
	text-decoration: none;
	border: none;
	position:relative;
}
.feedzy-rss .rss_item .rss_image span{
	display:inline-block;
	background-size: cover;
	background-position: 50%;
	position: absolute;
}
.feedzy-rss .rss_item .rss_image {
	margin: 0.3em 1em 0 0;
}
.feedzy-rss .rss_item .rss_content small {
	display: block;
	font-size: 0.9em;
	font-style:italic;
}
 
/*TinyMce UI button*/
i.mce-i-feedzy-icon {
	background-image:  url('../img/feedzy.png');
	background-image:  none, url('../img/feedzy.svg'), url('../img/feedzy.png');
}
.mce-feedzy-media {
	padding-right: 25px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 32px;
}
.mce-feedzy-media-button {
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: block;
	-webkit-font-smoothing: antialiased;
	float: right;
	background-color: #F7F7F7;
	border: 1px solid #DDD;
	font-size: 30px;
	color: #777;
	position: relative;
	line-height: 28px;
	text-align: center;
}
.feedzy-horizontal {
	overflow-y: hidden;
	overflow-x: auto;
	width: 100%;
}
.feedzy-horizontal .feedzy-rss {
	display: table;
	border-spacing: 15px 0;
	table-layout: fixed;
	width: 100%;
}
.feedzy-horizontal .feedzy-rss .rss_item {
	width: 300px;
	display: table-cell;
}

Et voici la page du site, sur laquelle je veux mettre en place ce scroll avec les flèches : http://www.livresque-du-noir.fr
La zone concernée est celle dont l'item est "Blogosphère".

J'ai cherché sur le net, tester des tutos javascript, dont ceux de ce site : http://www.sitepoint.com/10-jquery-h...demos-plugins/
Mais je ne m'en sors pas.
Si quelqu'un peut me dépatouiller de tout cela, ce serait vraiment sympa.
Merci par avance.

en se basant sur le nom des class sur le site en ajoutant ces ligne sa devrait bon

Code:

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
var scr_btn={
 
ctn:"",
 
init:function(){
 
document.getElementsByClassName("tieicon-right-open")[0].onclick=scr_btn.plus;
 
document.getElementsByClassName("tieicon-left-open")[0].onclick=scr_btn.moins;
 
scr_btn.ctn=document.getElementsByClassName("feedzy-horizontal")[0];
 
},
 
plus:function (){
 
scr_btn.ctn.scrollLeft=scr_btn.ctn.scrollLeft+100;
 
},
 
moins:function(){
 
scr_btn.ctn.scrollLeft=scr_btn.ctn.scrollLeft-100;
 
}
}
typeof window.addEventListener == 'undefined' ? attachEvent("onload",scr_btn.init) : addEventListener('load',scr_btn.init,false);

le html que j'ai utilisé

Code:

1
2
3
4
5
6
7
8
<body>
<input type="button" id="btr" class="tieicon-left-open">moins</input>
<input type="button" id="btr" class="tieicon-right-open">plus</input>
<br>
<div id='ctn' class="feedzy-horizontal" style='overflow-y: hidden; overflow-x: scroll;width:500px;height:100px;'>
	<div style='width:2000px;height:80px;background:red'></div>
 
</body>

27/09/2015, 12h00
guenfood

J'ai essayé, mais cela ne fonctionne pas :(
27/09/2015, 14h59
melka one

dans ce que j'ai mis j'ai essayé de m'adapter au class mais si tu jette un œil sur le code qui n'est pas difficile a comprendre tu doit pouvoir l'adapter facilement

https://jsfiddle.net/dqujekur/