CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
samana ghimire
samana ghimire

Reputation: 124

Issue with positioning in full screen overlay

I want a full screen div overlay on button click. It is working fine for initial but when we change the tabs and back again click the button, it gets confined to a div that has relative positioning and it doesn't show in full screen. Well i tried to unset the position of that div on button click.But it is not working. I may be doing something wrong. Any help would be appreciated.

$('.seemore').click(function(){
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
    
})
$('.closebtn').click(function(){
  $(this).parent().removeClass('opened');
})
function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab +
          '"]'
      );
      var temp_content_js = document.querySelector(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab_js +
          '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}

$(function() {
  vertical_tabs();
});
.tabs{
display:table;
}
.ux-vertical-tabs {
  position: relative;
  
}

.ux-vertical-tabs .tabs {
     -webkit-transform: translateY(0px); 
     transform: translateY(0px); 
}

.ux-vertical-tabs .tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 1.2rem;
  /*width: 100%;*/
  outline: none;
  text-align: left;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 3px #ccc;
  /*font-size: .85rem;*/
  color: #666;
  text-transform: uppercase;
  transition: background 250ms ease;
  float: left;
}

.ux-vertical-tabs .tabs button:first-child {
  border-top: 1px solid #ddd;
}

.ux-vertical-tabs .tabs button:hover {
  background: #edf0d0;
}

.ux-vertical-tabs .tabs button.active {
  background: #00a651;
  border-right: 0;
  color: #fff;
}

.ux-vertical-tabs .tabs button span {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc;
  transform: translateX(1rem);
  opacity: 0;
  transition: all 350ms ease;
  display: inline-block;
}



.ux-vertical-tabs .maincontent {
  flex: 1;
  box-shadow: 0 0 3px #ccc;
  padding: 2rem;
  overflow: hidden;
}

.ux-vertical-tabs .maincontent .tabcontent {
  display: none;
}

.ux-vertical-tabs .maincontent .tabcontent.active {
  display: flex;
  flex: 1;
  position: relative;
}

button.seemore {
    background: #5cb85c;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 9px 30px;
    font-size: 12px;
}




.teamy{
  position: relative;
}

.teamy__layout{
  position: relative;
  overflow: hidden;
}

.teamy__avatar{
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.teamy__back{
  display: none;
}

.teamy:hover .teamy__back{
  width: 100%;
  height: 100%;  
  display: flex;

  position: absolute;
  top: 0;
  left: 0;    
  z-index: 3;
}
.teamy__back-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.opened{
  height: 100%;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
<!DOCTYPE html>
<html>

<head>
    <title>Packages</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>

<body>

    <section class="team">
        <div class="container">
            <div class="row">
                <div class="container maxwidth">
                    <div class="ux-vertical-tabs">
                        <div class="tabs">
                            <button data-tab="tab1" class="active">AA<span></span></button>
                            <button data-tab="tab2">BB<span></span></button>
                            <button data-tab="tab3">CC<span></span></button>

                        </div>
                    
                    <div class="maincontent">
                            <div data-tab="tab1" class="tabcontent active">

                                <div class="teamy-team scroller">
                                    <div class="scroller__box">
                                        <div class="scroller__item">
                                            <div class="teamy teamy_mask-circle teamy_zoom-slide-photo">
                                                <div class="teamy__layout">
                                                    <div class="teamy__preview">
                                                        <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1140421945%2F960x0.jpg%3Ffit%3Dscale" class="teamy__avatar" alt="The demo photo">
                                                    </div>
                                                    <div class="teamy__back">
                                                        <div class="teamy__back-inner">

                                                            <button class="seemore">Read More</button>

                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="teamy__content">
                                                    <span class="teamy__name">Dr abc</span>
                                                    <span class="teamy__post">abc</span>
                                                </div>
                                            </div>

                                        </div>
                                        <div id="myNav" class="overlay">
                                            <a href="javascript:void(0)" class="closebtn">&times;</a>
                                            <div class="overlay-content">
                                                <a href="#">About</a>
                                                <a href="#">Services</a>
                                                <a href="#">Clients</a>
                                                <a href="#">Contact</a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            </div>

    </section>

</body>

</html>

Upvotes: 2

Views: 135

Answers (2)

Growyour GK
Growyour GK

Reputation: 463

function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
          temp_tab +
          '"]'
      );
      var temp_content_js = document.querySelector('.ux-vertical-tabs .maincontent .tabcontent[data-tab="' + temp_tab_js + '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");

          //####  Clear transform: translateX(100%) attribute once your animation time ends  ############
          var t = setTimeout(function(){
            temp_content.removeAttr("style");
            clearTimeout(t);
          },450);
          //####  Clear transform: translateX(100%) attribute once your animation time ends  ############
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}

In vertical_tabs function, you are using animation_start function which adds translateX CSS attribute on tab div.

Which overrides the behavior of position fixed. You need to remove this inline CSS attribute when animation completes.

To clear the CSS attribute I have include setTimeout function for 450 milliseconds(ms) which will remove the style attribute from tab.

Hope it will help.

Upvotes: 0

djolf
djolf

Reputation: 1196

It seems that the tab has a style transform: translateX(0%) after animation that is causing the problem. I don't know why the transform rule messes it up, but you can remove this css style on button click for a workaround.

$('.seemore').click(function() {
  $(this).parents('.tabcontent.active').css('transform','none'); // add this line
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
})


$('.seemore').click(function() {
  $(this).parents('.tabcontent.active').css('transform','none'); // add this line
  $(this).parents('.scroller__item').next('.overlay').toggleClass('opened');
})
$('.closebtn').click(function() {
  $(this).parent().removeClass('opened');
})

function vertical_tabs() {
  if ($(".ux-vertical-tabs").length > 0) {
    $(".ux-vertical-tabs .tabs button").on("click", function() {
      var temp_tab = $(this).data("tab");
      var temp_tab_js = this.getAttribute("data-tab");
      var temp_content = $(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
        temp_tab +
        '"]'
      );
      var temp_content_js = document.querySelector(
        '.ux-vertical-tabs .maincontent .tabcontent[data-tab="' +
        temp_tab_js +
        '"]'
      );
      var temp_content_active_js = document.querySelector(
        ".ux-vertical-tabs .maincontent .tabcontent.active"
      );

      $(".ux-vertical-tabs .tabs button").removeClass("active");
      $('.ux-vertical-tabs .tabs button[data-tab="' + temp_tab + '"]').addClass(
        "active"
      );

      var animation_start = anime({
        duration: 400,
        targets: temp_content_active_js,
        opacity: [1, 0],
        translateX: [0, "100%"],
        easing: "easeInOutCubic",
        complete: function() {
          $(".ux-vertical-tabs .maincontent .tabcontent").removeClass("active");
          temp_content.addClass("active");
          var animation_end = anime({
            duration: 400,
            targets: temp_content_js,
            opacity: [0, 1],
            translateX: ["100%", "0"],
            easing: "easeInOutCubic"
          });
        }
      });
    });
  }
}

$(function() {
  vertical_tabs();
});
.tabs {
  display: table;
}

.ux-vertical-tabs {
  position: relative;
}

.ux-vertical-tabs .tabs {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.ux-vertical-tabs .tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 1.2rem;
  /*width: 100%;*/
  outline: none;
  text-align: left;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 3px #ccc;
  /*font-size: .85rem;*/
  color: #666;
  text-transform: uppercase;
  transition: background 250ms ease;
  float: left;
}

.ux-vertical-tabs .tabs button:first-child {
  border-top: 1px solid #ddd;
}

.ux-vertical-tabs .tabs button:hover {
  background: #edf0d0;
}

.ux-vertical-tabs .tabs button.active {
  background: #00a651;
  border-right: 0;
  color: #fff;
}

.ux-vertical-tabs .tabs button span {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #ccc;
  transform: translateX(1rem);
  opacity: 0;
  transition: all 350ms ease;
  display: inline-block;
}

.ux-vertical-tabs .maincontent {
  flex: 1;
  box-shadow: 0 0 3px #ccc;
  padding: 2rem;
  overflow: hidden;
}

.ux-vertical-tabs .maincontent .tabcontent {
  display: none;
}

.ux-vertical-tabs .maincontent .tabcontent.active {
  display: flex;
  flex: 1;
  position: relative;
}

button.seemore {
  background: #5cb85c;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 9px 30px;
  font-size: 12px;
}

.teamy {
  position: relative;
}

.teamy__layout {
  position: relative;
  overflow: hidden;
}

.teamy__avatar {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.teamy__back {
  display: none;
}

.teamy:hover .teamy__back {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.teamy__back-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.opened {
  height: 100%;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Packages</title>

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>

<body>

  <section class="team">
    <div class="container">
      <div class="row">
        <div class="container maxwidth">
          <div class="ux-vertical-tabs">
            <div class="tabs">
              <button data-tab="tab1" class="active">AA<span></span></button>
              <button data-tab="tab2">BB<span></span></button>
              <button data-tab="tab3">CC<span></span></button>

            </div>

            <div class="maincontent">
              <div data-tab="tab1" class="tabcontent active">

                <div class="teamy-team scroller">
                  <div class="scroller__box">
                    <div class="scroller__item">
                      <div class="teamy teamy_mask-circle teamy_zoom-slide-photo">
                        <div class="teamy__layout">
                          <div class="teamy__preview">
                            <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1140421945%2F960x0.jpg%3Ffit%3Dscale" class="teamy__avatar" alt="The demo photo">
                          </div>
                          <div class="teamy__back">
                            <div class="teamy__back-inner">

                              <button class="seemore">Read More</button>

                            </div>

                          </div>
                        </div>

                        <div class="teamy__content">
                          <span class="teamy__name">Dr abc</span>
                          <span class="teamy__post">abc</span>
                        </div>
                      </div>

                    </div>
                    <div id="myNav" class="overlay">
                      <a href="javascript:void(0)" class="closebtn">&times;</a>
                      <div class="overlay-content">
                        <a href="#">About</a>
                        <a href="#">Services</a>
                        <a href="#">Clients</a>
                        <a href="#">Contact</a>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

  </section>

</body>

</html>

Upvotes: 1

Related Questions