IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Scroll left ou right avec une image


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de guenfood
    Homme Profil pro
    Webdesigner
    Inscrit en
    Janvier 2004
    Messages
    255
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2004
    Messages : 255
    Par défaut 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 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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    Bonjour,
    ton salut passera par du javascript, je déplace vers ce forum.

  3. #3
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    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"

  4. #4
    Membre éclairé Avatar de guenfood
    Homme Profil pro
    Webdesigner
    Inscrit en
    Janvier 2004
    Messages
    255
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2004
    Messages : 255
    Par défaut
    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.

  5. #5
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    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>

  6. #6
    Membre éclairé Avatar de guenfood
    Homme Profil pro
    Webdesigner
    Inscrit en
    Janvier 2004
    Messages
    255
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2004
    Messages : 255
    Par défaut
    J'ai essayé, mais cela ne fonctionne pas

  7. #7
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    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/

Discussions similaires

  1. div float left, avec une image bas droite
    Par {F-I} dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/06/2008, 10h11
  2. Réponses: 6
    Dernier message: 03/04/2007, 20h40
  3. problème pour faire un insert avec une image
    Par vbcasimir dans le forum Modules
    Réponses: 3
    Dernier message: 02/11/2005, 09h21
  4. [javascript] Scroll avec une image
    Par Salih-du-91 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 05/10/2005, 07h46
  5. Centrage de texte avec une image en arriere plan
    Par MasterOfChakhaL dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 26/08/2005, 18h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo