Creating a horizontal scroll Week Plan with 7 columns

I'm looking to create a unique weekly plan layout that features three days of the week: today in the middle, yesterday on the left, and tomorrow on the right. I want this layout to update as the days progress so that clicking on the next day will display a new set of 3 days (with 3 panels always showing).

For example, if today is Friday:
Three columns are shown by default
Left: Thursday
Middle: Today = Friday
Right: Saturday

When the user clicks "previous":
Left: Wednesday
Middle: Thursday
Right: Friday

Link to Image

Implemented using Bootstrap...

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
        <title>Justified Nav Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="css/weekplan.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            WEEK PLAN
            <!-- ROW -->
            <div id="weekplan" class="row">
                <!-- Day 1 -->
                  <div class="col-md-4 eh hidden">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                              <h3>Day 1 - Sunday</h3>
                        </div>
                        <div class="panel-body">
                              <p>Content here...</p>
                              <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
                        </div>
                   </div>
                </div>
                
                // Additional days follow...
            
            </div>
        </div> 
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

CSS

body {
    padding-top: 50px;
}
.footer {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
    border-top: 1px solid #eee;
}
.col-md-4{
    border:1px solid #e0e0e0;

}
#weekplan {
    display: table;
    white-space: nowrap;
}
#weekplan .eh {
    float: none;
    display: table-cell;
    vertical-align: top;
    display: inline-block;
}
.panel-heading h3{
    text-align: center;
}
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Below is a simple demonstration of a three-slide carousel, but you can add more slides as needed. This carousel rotates smoothly using the insertBefore and insertAfter functions. For added visual interest, consider hiding the slide before moving it and then revealing it once it's in its new position.

(See Demo)

HTML

<div class="wrap">
    <div class="carousel">
        <div class="item">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
    </div>
    <a href="javascript:void()" id="previous"><</a>
    <a href="javascript:void()" id="next">></a>
</div>

CSS

.wrap {
    position: relative;
}
.carousel {
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
}
.item {
    font-size: initial;
    width: 33.3333%;
    display: inline-block;
}
.item:
#previous {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

JAVASCRIPT

$("#next").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:first").insertAfter(parent.find(".item:last"));
});
$("#previous").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:last").insertBefore(parent.find(".item:first"));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it just me or is one of these pieces of javascript not functioning properly?

I set out to develop a checklist that would automatically adjust a slider as users interacted with checkboxes. After some research, I stumbled upon the following two code snippets: http://jsfiddle.net/t2nvft7q/ $(document).on('click', '.ch ...

javascriptjqueryhtmlcheckbox

The data displayed by the jQuery alert(data) method cannot be properly rendered within a div element

Within my textarea with the ID "wraped," there are HTML codes that I need to send to fsjquery.php using AJAX GET method in order to save the data into an SQL database. Prior to sending the data, I am removing the IDs from the HTML codes within the textare ...

phpjqueryajaxalert

Update the value of a Bootstrap input field using the response from a jQuery AJAX

I need to update two elements based on the ajax result: The value of the following input field: <input type="text" id="typeahead" name='name' placeholder='Name' class="form-control" data-provide="typeahead" autocomplete="off" /> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Combining KendoUI tables with the power of AngularJS

Currently, I am in the process of developing a versatile table widget (utilizing KendoUI) with data binding integrated through AngularJS. The layout of the table widget will be as shown below in the HTML file (accessible via this fiddle: http://jsfiddle.ne ...

htmlangularjsdata-bindingkendo-uihtml-table

C# web service is unable to return a specific value

I attempted to use a basic web service (just to test if the value will populate in the JavaScript code). I experimented with a very simple snippet, but it kept returning 'undefined'. Can you offer some guidance? I have tried several solutions wit ...

javascriptc#ajax

Unable to append anything beyond the background image

Working on a Bootstrap website and encountered an issue with adding content after the background image. Despite trying to add paragraphs below the image, nothing is displaying. Here's the code snippet: <html> <body> <form id="form ...

asp.nettwitter-bootstrap

Is it possible to activate ng-class following an ng-click event?

Here is the element in question: <a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhot ...

javascriptangularjs

When I increase the length of my website's header and footer, I notice that the data in the footer is only displayed on the homepage and not on the other

I am facing an issue with extending my header and footer in Django. The problem is that when I pass data to the footer, it only appears on the home page and not on other pages. I understand that I need to pass the data to every page individually, but I am ...

pythonhtmldjangodjango-templatesjinja2

Implementing ajax functionality for a form component in vuejs

I am currently working with a Vue.js component that serves as a form with a single field for an email input. The default value of this field, "email", is provided to the component by the parent as a prop. Upon form submission, I need to trigger an event to ...

javascriptajaxformsvue.jsvuejs2

How to implement an image loader display when clicking on a thumbnail using jQuery

A jQuery code has been created for an image gallery consisting of one large image and four small thumbnails. When clicking on the small thumbnails, a loader needs to be displayed on the large image. Feel free to review the code below: $('.img1 a ...

jquery

Press the [Submit] button to conceal DIV Container 1, reveal DIV Container 2, and populate DIVs discovered in a .PHP file within DIV Container 2

Trying to achieve the following steps: 1 - Press Submit Button 2 - Conceal DIV Container 1 3 - Reveal DIV Container 2 4 - Load and display all DIVs from "PricingDisclaimer.php" into Div Container 2 DIV Code snippet: <div id="MainContainer"> &l ...

javascriptphpjqueryhtmlcss

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

Incorporate a 'back' button in the tab content of vue-form-wizard

Currently, I'm working on implementing a vue form wizard from the repository: https://github.com/BinarCode/vue-form-wizard My challenge is to include a button in the second tab-content itself instead of having it placed in the footer. I attempted th ...

javascriptvue.js

Utilizing JavaScript scope effectively in Express.js within a Node environment

I'm currently diving into the world of JavaScript and full-stack development and one concept that's giving me some trouble is understanding how to properly utilize express with JavaScript .... Here is my question: In all the tutorials I've ...

javascriptnode.jsexpressscopefunction-parameter

Performing a Node.js PATCH request that includes the If-Match header

I have a question that has been puzzling me for some time now. While working with Node.js and creating a PATCH request, I want to set the if-match header to *. Is the code snippet below the correct way to do it? Will this actually work? headers: { &a ...

javascriptnode.jshttphttps

What is the best way to display a modal box using NodeJs on the server side?

I recently created a contact page on my website where users can fill out a form. Upon submitting the form, I capture the information using a post method in my server.js file. If everything is correct, I want to display a modal box on the contact page to co ...

javascriptnode.jsexpress

Anchor element not displaying Bootstrap popover upon focus trigger

I'm exploring ways to implement bootstrap popovers that respond to both click and hover events without relying on jQuery. I have a variety of controls on my page and I want to bind popovers to them using JavaScript. While testing with buttons and anc ...

javascripttwitter-bootstrapbootstrap-5popoverbootstrap-popover

Unable to locate the section element in the Internet Explorer browser

When using the find("Section") function in Internet Explorer, it seems to not be working properly. Here is the XML content I am working with: var xmlContent = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?/><Section type="two_colum ...

jqueryxml

Is it possible to create models that can be used in both Node.js and angular without duplication

Currently, I am diving into the world of Node.js and Angular (part of a MEAN project) through an online course on Udemy. One challenge I have encountered is the need to create identical models for both the back-end and front-end (specifically with angular2 ...

javascriptangularjsnode.jsangular

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

javascriptpythonhtmlcssflask