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

Customize the element of the root node of a MUI component using the styled()

Having trouble retrieving the JSON response attribute

What is the best method for extracting Google Custom Search results through parsing JSON with a RESTful API to retrieve results exactly as Google displays them?

Attempting to execute a function within a MAP operation

How to toggle classes on specific items generated with Vue JS's v-for directive

What impact does adding 'ng' in unit tests have on how promises are handled?

Error: Unable to locate module: Unable to resolve '@/src/components/layout/Header'

Error message: Angular JS encountered an issue when trying to initiate the test module. The cause

Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

Tips on hovering over information retrieved from JSON data

ClassNames Central - showcasing a variety of class names for interpolation variables

Do you find this unattractive? What are some ways to improve this unsightly JavaScript statement?

Tips for positioning the search form in the navbar header

How to create a transparent background image in a Jekyll theme without impacting the visibility of the foreground

Ways to troubleshoot JavaScript following an AJAX request?

Tips for eliminating the backslash introduced by JQuery

Issue with Heroku deployment: unable to locate JavaScript file

My JavaScript array is not working with the stringify function

Tips for styling Ajax.ActionLink elements with CSS

Setting up a div as a canvas in Three.js: Step-by-step guide