Creating Functional Tabs Using CSS and JavaScript

Question

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today tabs.

Within the div (#data-container), there are two child divs (.project, .today) that I want to display side by side like tabs. When clicked, they should swipe and show their respective content. While I have managed to make it functional, I am encountering two problems.

Functionality Explanation - The #data-container has white-space: nowrap set (to keep child divs side by side and enable sliding functionality) while its child divs (.project and .today) have widths set to 100% and are positioned as inline-block.

Issues Encountered

The data-container is required to allow vertical scrolling and wrap text around the selected div. However, using white-space: nowrap causes text overflow. Attempts to resolve this using word-wrap: break-word have been unsuccessful. Although setting display: hidden resolves the issue, it interferes with the swiping functionality desired.
An unexpected complication arises when setting #data-container to overflow-y: scroll, causing the divs to scroll horizontally, disrupting the entire system.

A solution is needed to enable vertical scrolling within data-container while maintaining text wrapping functionality.

Jade Code Snippet

extends ./layout.jade

block content
    #maindiv
        .sidebar
            // Sidebar Content
        header
            // Header Content
        .container
            // Container Content

Associated CSS Styles

.container {
  // CSS styles for container
}

// Additional CSS styling properties

JavaScript Animation Functionality

// JavaScript animation functions

// Sample JavaScript code block provided

// Sample CSS code block provided

<div id="maindiv">
  <div class="sidebar">
    // Sidebar HTML content
  </div>
  <header>
    // Header HTML content
  </header>
  <div class="container">
    // Main container HTML content
  </div>
</div>

javascript jquery html css

Answer 1

Answer №1

If you want to achieve this in a clean and straightforward manner, consider implementing it with flexbox. Take a look at my approach:

#container {
    display: flex;
}

.item1, .item2 {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

This method also provides vertical scrolling when the contents of any div exceed the height.

Answer 2

If you want to achieve this in a clean and straightforward manner, consider implementing it with flexbox. Take a look at my approach:

#container {
    display: flex;
}

.item1, .item2 {
    display: flex;
    min-width: 100%;
    white-space: normal;
}

This method also provides vertical scrolling when the contents of any div exceed the height.

Answer 3

Answer №2

Feeling impatient, I decided to take matters into my own hands and find a solution. While not exactly what I had envisioned or flawless, it does give the impression of meeting my goals.

To achieve this, I modified the CSS properties for elements like .today, setting it to display: none, adjusting #data-container with overflow-y: auto and overflow-x: hidden, and making changes to the animation effects.

The updated animation now shifts the current division to a different location before bringing it back through an animated process.

Updated Animation Script

$('.navbar-inside-two').click(function() {
        if($(this).hasClass('above')) {
            $(".today").css({
                display: 'inline-block',
                left: $("#data-container").width()
            });
            $(".project").css('display', 'none');
            $(".project, .today").animate({left: '0px'}, 150);
            $(".navbar-inside-one").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

    $('.navbar-inside-one').click(function() {
        if($(this).hasClass('above')) {
            $(".project").css({
                display: 'inline-block',
                left: '-' + $("#data-container").width()
            });
            $(".today").css('display', 'none');
            $(".project").animate({left: "0"}, 150);
            $(".navbar-inside-two").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

Answer 4

Feeling impatient, I decided to take matters into my own hands and find a solution. While not exactly what I had envisioned or flawless, it does give the impression of meeting my goals.

To achieve this, I modified the CSS properties for elements like .today, setting it to display: none, adjusting #data-container with overflow-y: auto and overflow-x: hidden, and making changes to the animation effects.

The updated animation now shifts the current division to a different location before bringing it back through an animated process.

Updated Animation Script

$('.navbar-inside-two').click(function() {
        if($(this).hasClass('above')) {
            $(".today").css({
                display: 'inline-block',
                left: $("#data-container").width()
            });
            $(".project").css('display', 'none');
            $(".project, .today").animate({left: '0px'}, 150);
            $(".navbar-inside-one").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

    $('.navbar-inside-one').click(function() {
        if($(this).hasClass('above')) {
            $(".project").css({
                display: 'inline-block',
                left: '-' + $("#data-container").width()
            });
            $(".today").css('display', 'none');
            $(".project").animate({left: "0"}, 150);
            $(".navbar-inside-two").removeClass('below').addClass('above');
            $(this).removeClass('above').addClass('below');
        }
    });

Answer 5

Answer №3

Here is a helpful suggestion:

#info-block {
    white-space: nowrap;
}
.section, .daily-info {
    white-space: normal;
}

You may also want to try using #info-block {overflow-y: auto} to eliminate the unsightly scrollbar without sacrificing functionality.

An additional option is to set the width of #info-block to 200%, and give its children a width of 50%, then slide #info-block.

Answer 6

Here is a helpful suggestion:

#info-block {
    white-space: nowrap;
}
.section, .daily-info {
    white-space: normal;
}

You may also want to try using #info-block {overflow-y: auto} to eliminate the unsightly scrollbar without sacrificing functionality.

An additional option is to set the width of #info-block to 200%, and give its children a width of 50%, then slide #info-block.

Answer 7

Answer №4

word-wrap: break-word doesn't function properly with white-space: nowrap, so it is necessary to specifically target .project children paragraph.

Simply remove the following CSS from .project.

word-wrap: break-all;

Then add the following CSS to your code

.project p {
   white-space: normal;
}

I have made the above changes in the code snippet below, hoping it will assist you. Thank you

$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});

/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
... [TRUNCATED FOR BREVITY] ...e Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 8

word-wrap: break-word doesn't function properly with white-space: nowrap, so it is necessary to specifically target .project children paragraph.

Simply remove the following CSS from .project.

word-wrap: break-all;

Then add the following CSS to your code

.project p {
   white-space: normal;
}

I have made the above changes in the code snippet below, hoping it will assist you. Thank you

$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar < 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});

/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
... [TRUNCATED FOR BREVITY] ...e Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Creating Functional Tabs Using CSS and JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What method does jQuery Validation use to configure the validation message?

Uniquely tag an uploaded file

Issues with managing ajax response handlers

Can you explain the distinction between $scope.$root and $rootScope?

Using Redux with Next.js to implement getStaticPaths

The compatibility between Javascript and AJAX functions is currently not functioning as expected

What are the steps to implement $navigateTo() in a NativeScript Vue application?

Creating a conditional query in Mongoose: A step-by-step guide

Activate video playback when scrolling, but ensure it only occurs one time

Is it possible to convert a blob to an image file using the FileReader in HTML

Create an array using modern ES6 imports syntax

Creating JSON on iPhone using jQuery is a straightforward process that involves using the built-in

Can CSS be altered dynamically in Laravel blade?

Avoid reloading the page when the form is submitted using form.trigger('submit') command

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

Creating multiple instances of an object

Ways to extract the id after clicking

Tips for editing bootstrap-vue table columns using non-Latin characters?

What is the best way to sort my API responses to display only users who are either currently online or offline?

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path