Discussion :

[guenfood]

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 html :

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

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.

[NoSmoking]

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

[melka one]

bonjour

il faut utiliser scrollLeft

Code :

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

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

[guenfood]

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 :

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

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 :

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
.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.

[melka one]

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

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
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 :

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

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>

[guenfood]

J'ai essayé, mais cela ne fonctionne pas

[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/