Dev Faq
1
votes

Changer l'icône de portée surCliquer et déplacer des sections?

J'ai un site Web à défilement horizontal, et comme le défilement vertical se traduit par horizontal, j'ai décidé d'ajouter des boutons de style radio à une barre de navigation inférieure fixe.

Le problème que j'ai, c'est que je veux faire passer l'icône span de «on» à «off». Je pensais que ce serait assez facile de changer de cours, mais j'ai du mal avec ça.

Les icônes radio n'apparaissent pas sur cet exemple pour une raison quelconque, mais j'essaie de changer radio-button-off en radio-button-on code > lorsque je clique sur le span .

Désolé si cela a déjà été demandé, j'ai jeté un coup d'œil mais je n'ai rien trouvé qui fonctionne pour moi. Je veux les lier à un défilement fluide par la suite, mais je pense que je comprends déjà comment y parvenir.

Un exemple de ce que j'essaie légèrement de réaliser est le petit trait de point ici: https://tympanus.net/Development/DotNavigationStyles/

Voici ce que j'ai donc loin: 

 

  <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
     <div class="bottomnav">
            <a href="#header"><span class="icon ion-ios-radio-button-on active"></span></a>
            <a href="#about"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#overview"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#web"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#drone"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#studio"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#portfolio"><span class="icon ion-ios-radio-button-off"></span></a>
            <a href="#contact"><span class="icon ion-ios-radio-button-off"></span></a>
        </div>

<div class="container" id="container">
        <div id="player">
       <section class="card cardwhite" id="1">
                <object>
                        <h2>Section 1</h2>
                        <p>Description</p>
                  
                </object>
            </section>

    <section class="card cardblack" id="2">
                <object>
                        <h2>Section 2</h2>
                        <p>Description</p>
                    
                </object>
            </section>

    <section class="card cardwhite" id="3">
                <object>
                        <h2>Section 3</h2>
                        <p>Description</p>
                 
                </object>
            </section>
</div>
</div>
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 100;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.bottomnav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 9999;
}

.bottomnav span {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 26px;
    color: white;
}

.bottomnav span:hover {
    color: white;
}

.bottomnav span.active {
    color: white;
}

#container {
    overflow-y: scroll;
    overflow-x: hidden;
    transform: rotate(270deg) translateX(-100vh);
    transform-origin: top left;
    position: absolute;
    width: 100vh;
    height: 100vw;
    white-space: nowrap;
    scroll-snap-type: y mandatory;
}

#container .card {
    width: 100vw;
    height: 100vh;
    display: inline-flex;
    position: relative;
    scroll-snap-align: start;
}

#player {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    font-size: 0;
    width: 100vh;
    height: 100vh;
    display: flex;
    /*        position: absolute;*/
}

#player section > object {
    width: 100vw;
    overflow-x: hidden;
}


section object > div {
    white-space: normal;
}

.container::-webkit-scrollbar {
    display: none;
}

section {
      padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    transition: .5s ease;
}

.cardwhite {
  color: white;
  background-color: black;
}

.cardblack {
  color: black;
  background-color: white;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'IBM Plex Serif', sans-serif;
}

p {
    font-size: 10px;
    margin-bottom: 15px;
    font-weight: 100;
    font-family: 'IBM Plex Sans', sans-serif;
}
// first try

//$('.bottomnav').click(function ({
  //          $(this).find('span').removeClass('ion-ios-radio-button-off');
    //        $(this).find('span').addClass('ion-ios-radio-button-on');
      //  });
      
      // second try
        
  //     $('.bottomnav a').click(function ({
//            $(this).find('span').removeClass('ion-ios-radio-button-off').addClass('ion-ios-radio-button-on');
 //       });

5 commentaires

J'ai essayé de simuler votre problème dans codepen. cherchez-vous quelque chose comme ça codepen.io/krish4u/pen/RXKYrO

Cherchez-vous à activer toutes les radios, ou souhaitez-vous activer uniquement la radio sur laquelle vous avez cliqué et toutes les autres désactivées?

Oui quelque chose comme ça @krish :)

Seule la radio sur laquelle on clique sur @OliverRadini. Ceux-ci correspondront à la section qui est en vue .. espérons-le.

@CaitlinMooney Ok, réponse mise à jour

3 Réponses :

1
votes

J'espère que cela pourra vous aider 

<link rel="stylesheet" type="text/css" href="https://tympanus.net/codrops/adpacks/demoad.css?1564409193439">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bottomnav">
            <a href="#1"><span class="icon ion-ios-radio-button-on active circle"></span></a>
            <a href="#2"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#3"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#web"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#drone"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#studio"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#portfolio"><span class="icon ion-ios-radio-button-off circle"></span></a>
            <a href="#contact"><span class="icon ion-ios-radio-button-off circle"></span></a>
        </div>

<div class="container" id="container">
        <div id="player">
       <section class="card cardwhite" id="1">
                <object>
                        <h2>Section 1</h2>
                        <p>Description</p>
                  
                </object>
            </section>

    <section class="card cardblack" id="2">
                <object>
                        <h2>Section 2</h2>
                        <p>Description</p>
                    
                </object>
            </section>

    <section class="card cardwhite" id="3">
                <object>
                        <h2>Section 3</h2>
                        <p>Description</p>
                 
                </object>
            </section>
</div>
</div>
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    color: #000;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 100;
    font-size: 7px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.bottomnav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 9999;'
    
}

.bottomnav a span {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 15px;
    text-decoration: none;
    font-size: 26px;
    color: white;
}

.bottomnav span:hover {
    color: white;
}

.bottomnav span.active {
    color: white;
}

#container {
    overflow-y: scroll;
    overflow-x: hidden;
    transform: rotate(270deg) translateX(-100vh);
    transform-origin: top left;
    position: absolute;
    width: 100vh;
    height: 100vw;
    white-space: nowrap;
    scroll-snap-type: y mandatory;
}

#container .card {
    width: 100vw;
    height: 100vh;
    display: inline-flex;
    position: relative;
    scroll-snap-align: start;
}

#player {
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    font-size: 0;
    width: 100vh;
    height: 100vh;
    display: flex;
    /*        position: absolute;*/
}

#player section > object {
    width: 100vw;
    overflow-x: hidden;
}


section object > div {
    white-space: normal;
}

.container::-webkit-scrollbar {
    display: none;
}

section {
      padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    transition: .5s ease;
}

.cardwhite {
  color: white;
  background-color: black;
}

.cardblack {
  color: black;
  background-color: white;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    font-family: 'IBM Plex Serif', sans-serif;
}

p {
    font-size: 10px;
    margin-bottom: 15px;
    font-weight: 100;
    font-family: 'IBM Plex Sans', sans-serif;
}
.ion-ios-radio-button-off{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  
  
}
.ion-ios-radio-button-on{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  
  
}
.circle {
  border: 1px solid #D47474;
}
.ion-ios-radio-button-on.circle:before {
  position: fixed;
  bottom: 0px;
  content: '';
  background-color: #D47474;
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  bottom: 0px;
  overflow: hidden;
  animation: 0.2s fillin ease forwards;
  margin-left: -15px;
}

@keyframes fillin {
  0% {
    height: 0;
    background-color: #D47474;
  }
  100% {
    height: 30px;
    background-color: #D47474;
  }
}
$('.bottomnav').click(function (e){
  if($(e.target).hasClass('ion-ios-radio-button-off')){
    $('span').addClass('ion-ios-radio-button-off');
    $('span').removeClass('ion-ios-radio-button-on');
    $(e.target).toggleClass('ion-ios-radio-button-off');
    $(e.target).toggleClass('ion-ios-radio-button-on');
 //   $(e.target).parent().trigger('click');
  }
});

3 commentaires

Vous savez quoi, ce n'est pas exactement ce que je voulais mais ça pourrait marcher! Neve a pensé essayer de cette façon.

veuillez expliquer exactement ce que vous voulez.

Merci, j'aime plutôt ça! Cela me sera très utile, je prendrai des notes pour référence.

1
votes

Vous pouvez ajuster les classes en utilisant uniquement du javascript, et parfois c'est plus facile que d'essayer de faire de même avec jquery: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<div class="bottomnav">
  <span class="icon ion-android-radio-button-on active"></span>
  <span class="icon ion-android-radio-button-off"></span>
  <span class="icon ion-android-radio-button-off"></span>
</div>

<span class="icon ion-android-radio-button-off"></span>
.bottomnav {
  padding: 30px;
  background-color: rgba(220, 240, 250);
}
const setIconState = (icon, state) => icon.className = state
    ? icon.className.replace('button-off', 'button-on')
    : icon.className.replace('button-on', 'button-off')

const toggleIcon = element => {
  const className = element.className;
  element.className = className.indexOf('button-on') > -1
    ? setIconState(element, false)
    : setIconState(element, true);
}

document.querySelectorAll('.bottomnav span.icon')
  .forEach(icon => {
    icon.onclick = (e) => {
      const {
        target: clickedSpan
      } = e;
      
      const siblings = [...clickedSpan.parentElement.querySelectorAll('span.icon')]
        .filter(sibling => sibling != clickedSpan);

      siblings.forEach(icon => setIconState(icon, false));
      setIconState(clickedSpan, true);
    };
  })

6 commentaires

Je pense que je dois faire quelque chose de mal, car la durée est enveloppée dans une balise , je pense qu'il y a un problème pour aller au-delà de l'élément bottomnav .

@CaitlinMooney J'ai mis à jour la réponse pour inclure un sélecteur qui ajuste uniquement ces icônes dans le bottomnav , si c'est ce que vous essayez de faire?

Votre extrait est exactement ce que j'essaie de réaliser mais ne fonctionne pas du tout pour moi, je pense que peut-être à cause des balises entourant mon span , mais ils doivent Soyez là. Voici un codepen: codepen.io/caitlinmooneyx/pen/eqgKGo

Cela fonctionne dans le codepen mais la classe ne supprime pas, ne fonctionne pas dans mon projet complet cependant, je ne sais pas pourquoi pour le moment. Mais une aide massive!

@CaitlinMooney Merci, ce stylo aide; le problème est que mon code ne recherchait que le parentElement , alors que le div dont il avait besoin était de deux niveaux, donc .parentElement.parentElement est nécessaire. Vous devriez pouvoir le voir fonctionner ici: codepen.io/anon/pen/mNRvdP

Cela fonctionne parfaitement! Merci beaucoup, je prendrai quelques notes pour référence future!

0
votes

Le problème dans votre code est que le code écrit ci-dessous est exécuté avant le chargement de la bibliothèque jQuery. 

$('document').ready(function() {
    $(".bottomnav").click(function(event) {
        $(this).find('span').removeClass('ion-ios-radio-button-off');
        $(this).find('span').addClass('ion-ios-radio-button-on');
    });
});

Cela pourrait être résolu en écrivant ce code dans l'événement ready comme ci-dessous: p> 

$(".bottomnav").click(function(event) {
   $(this).find('span').removeClass('ion-ios-radio-button-off');
   $(this).find('span').addClass('ion-ios-radio-button-on');
});

J'ai essayé celui-ci dans mon sandbox de code . J'ai donné du texte dans votre espace pour qu'il soit visible

3 commentaires

C'est ma faute, j'ai enlevé cela en travaillant sur autre chose par accident. Je pensais que cela fonctionnerait, mais cela ne fonctionnait pas, je pense que peut-être en raison de la façon dont ma navigation est imbriquée, mais c'est inévitable. L'icône de la radio span ne change pas.

Donc, au lieu de span, vous avez besoin de boutons radio? Est-ce exact?

Pas vraiment, j'utilise des ionicons, ils ont une icône de style radio-on et radio-off. Je vais ajouter une image à ma question de ce que j'ai

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO