All geek questions in one place

Underline the transition of slides to buttons

I tried to find tutorials on this effect. The effect I wanted was an active underline (or the border below) on the link. When I click on the link, the underscore will move to the next link and so on ... One example is this question .

I know that I have buttons in html, not a navigation menu. Thus, the encoding will be different. I think that I may need to convert the buttons to the navigation menu if this does not work.

Anyway, the problem is that I tried to use the above example to underline the link to the clicked link. But it does not work ...

Here is my code which is on codepen .

$(document).ready(function() {
  
  $(".con-button").click(function(){
    if(this.id == "c-all") {
      $(".con-button").removeClass("active");
      $("#c-all").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').fadeIn("slow").show();
    } else if (this.id == "c-online") {
      $(".con-button").removeClass("active");
      $("#c-online").addClass("active");
      $('.offline').hide();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').hide();
    } else if (this.id == "c-offline") {
      $(".con-button").removeClass("active");
      $("#c-offline").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
    $('.online').hide();
      $('.none').hide();
    }
  })
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";

function getSteams() {
  
  channels.forEach(function(indchannel) {
  //for (var channel in channels) {
    //var indchannel = channel;
  var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
    
  var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
  
  $.ajax({
      url: streamURL,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    headers: {
      "Accept": "application/vnd.twitchtv.v5+json",
    },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        
        $.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
          if(data2.status == 404) {
            game = "The Account doesn't exist";
        status = "none";
          } else {
            game = "Offline";
        status = "offline";
          }
          
          $("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
          
        } );
        
      } else {
        game = data.stream.game;
        status = "online";
        
        $("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
        
      };
      
       
    }
  
  
  });
  });
}
html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.controls {
  position: relative;
  width: 100%;
}
.con-button {
  position: relative;
  background-color: white;
  border: none;
	margin: 0.5em 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
  text-align: center;
	color: rgb(100,65,164);
  font-size: 20px;
  transition: .4s;
}
.con-button:hover {
  cursor: pointer;
  /*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
  position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
 .controls .effect {
   /*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
   height: 2px;
    bottom: 5px;
    background: #6441A4;
    margin-left:/*-45px*/auto;
    margin-right:/*-45px*/auto;
   width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
  border-top: 1px solid #6441A4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button active" type="button">All</button>
				<button id="c-online" class="con-button" type="button">Online</button>
				<button id="c-offline" class="con-button" type="button">Offline</button>	
        </div>
        <div class="divider"><hr></div>
        <div id="online"></div>
        <div id="offline"></div>
      </div>
    </div>
  </div>
</div>
Run code

, .active Javascript, , . , , , CSS. .

+4
2

, jQuery. , html, nav, buttons simple div. , .

, , ( ) underline. , transition left width underline.

$("#outer-container a").on("click", function(e){
  e.preventDefault();
  var cssObj = {};
  cssObj.left = $(this).position().left;
  cssObj.width = $(this).outerWidth();
  $("#outer-container #underline").css( cssObj );
});//a click()
$("#outer-container a").eq(0).trigger("click");
#outer-container
{
 text-align: center;
 position: relative;
}
#outer-container a
{
 color: #333;
 display: inline-block;
 padding: 0 10px;
 text-decoration: none;
}
#outer-container #underline
{
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 100px;
 background-color: #333;
 transition: left 0.3s ease, width 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="outer-container">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
  
  <span id="underline"></span>
</div><!--#outer-container-->
+3

,

$(document).ready(function() {
  
  $(".con-button").click(function(){
    if(this.id == "c-all") {
      $(".con-button").removeClass("active");
      $("#c-all").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').fadeIn("slow").show();
    } else if (this.id == "c-online") {
      $(".con-button").removeClass("active");
      $("#c-online").addClass("active");
      $('.offline').hide();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').hide();
    } else if (this.id == "c-offline") {
      $(".con-button").removeClass("active");
      $("#c-offline").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
    $('.online').hide();
      $('.none').hide();
    }
  })
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";

function getSteams() {
  
  channels.forEach(function(indchannel) {
  //for (var channel in channels) {
    //var indchannel = channel;
  var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
    
  var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
  
  $.ajax({
      url: streamURL,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    headers: {
      "Accept": "application/vnd.twitchtv.v5+json",
    },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        
        $.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
          if(data2.status == 404) {
            game = "The Account doesn't exist";
        status = "none";
          } else {
            game = "Offline";
        status = "offline";
          }
          
          $("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
          
        } );
        
      } else {
        game = data.stream.game;
        status = "online";
        
        $("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
        
      };
      
       
    }
  
  
  });
  });
}
html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.controls {
  position: relative;
  width: 100%;
}
.con-button {
  position: relative;
  background-color: white;
  border: none;
	margin: 0.5em 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
  text-align: center;
	color: rgb(100,65,164);
  font-size: 20px;
  transition: .4s;
}
.con-button:hover {
  cursor: pointer;
  /*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
  position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
 .controls .effect {
   /*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
   height: 2px;
    bottom: 5px;
    background: #6441A4;
    margin-left:/*-45px*/auto;
    margin-right:/*-45px*/auto;
   width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
  border-top: 1px solid #6441A4;
}
.effect {
    position: absolute;
    left: 18%;
    transition: 0.4s ease-in-out;
}
.controls button:nth-child(1).active ~ .effect {
    left: 28%;
    /* the middle of the first <a> */
}
.controls button:nth-child(2).active ~ .effect {
    left: 50%;
    /* the middle of the second <a> */
}
.controls button:nth-child(3).active ~ .effect {
    left: 77%;
    /* the middle of the third <a> */
}
.controls button:nth-child(4).active ~ .effect {
    left: 93.5%;
    /* the middle of the forth <a> */
}
.controls .effect {
    width: 55px;
    height: 2px;
    bottom: 5px;
    background: #00ABE8;
    margin-left:-45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button active" type="button">All</button>
				<button id="c-online" class="con-button" type="button">Online</button>
				<button id="c-offline" class="con-button" type="button">Offline</button>	
          <div class="effect"></div>
        </div>
        <div class="divider"><hr></div>
        <div id="online"></div>
        <div id="offline"></div>
      </div>
    </div>
  </div>
</div>

, .

+1

Source: https://habr.com/ru/post/1676329/

More articles:


All Articles