Active Year Span Effect

User

let currentIndex = 0;
const slides = $('.timeline-slide');
const totalSlides = slides.length;

const progressBarFill = $('.timeline-progress-fill');
const yearSpans = $('.timeline_year_bar span');
const prevButton = $('.prev-slide');
const nextButton = $('.next-slide');
function showSlide(index) {
if (index >= 0 && index < totalSlides) {
$('.timeline-slider').css('transform', 'translateX(' + (-index * 100) + '%)');
currentIndex = index;
updateYearBar();
updateProgressBar();
updateNavigationButtons();
}
}

function updateYearBar() {
yearSpans.removeClass('active-year');
yearSpans.eq(currentIndex).addClass('active-year');
}

// Disable next button if on the last slide
if (currentIndex === totalSlides – 1) {
nextButton.prop('disabled', true).addClass('tl-disabled');
} else {
nextButton.prop('disabled', false).removeClass('tl-disabled');
}
}
$('.next-slide').click(function () {
if (currentIndex < totalSlides – 1) {
showSlide(currentIndex + 1);
}
});

$('.prev-slide').click(function () {
if (currentIndex > 0) {
showSlide(currentIndex – 1);
}
});

yearSpans.click(function () {
const index = $(this).data('slide');
showSlide(index);
});

// Initialize the first slide, year bar, and progress bar
showSlide(currentIndex);
year bar active color should span half on earch year

Assistant

To make the active year span cover half of its width and half of the neighboring year's width, you can achieve this with CSS and some JavaScript adjustments. Here's how you can do it:

### JavaScript Adjustments
Update the `updateYearBar` function to add a class to the neighboring spans of the active year for styling purposes.

function updateYearBar() {
    yearSpans.removeClass('active-year left-active-year right-active-year');
    yearSpans.eq(currentIndex).addClass('active-year');
    if (currentIndex > 0) {
        yearSpans.eq(currentIndex - 1).addClass('left-active-year');
    }
    if (currentIndex < totalSlides - 1) {
        yearSpans.eq(currentIndex + 1).addClass('right-active-year');
    }
}

### CSS Adjustments
Style the active year and its neighboring spans so the active state spans across half of their widths.

.timeline_year_bar span {
    position: relative;
    display: inline-block;
    width: 100px; /* Adjust width as needed */
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.timeline_year_bar span.active-year {
    background-color: #007bff; /* Active color */
    z-index: 2;
}

.timeline_year_bar span.left-active-year::after,
.timeline_year_bar span.right-active-year::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    background-color: #007bff; /* Active color */
    z-index: 1;
}

.timeline_year_bar span.left-active-year::after {
    right: 0;
}

.timeline_year_bar span.right-active-year::before {
    left: 0;
}

### Explanation
1. **JavaScript**:
– Add classes (`left-active-year` and `right-active-year`) to the neighboring spans of the active year.
– These classes are dynamically applied based on the `currentIndex`.

2. **CSS**:
– Use `::after` for the left span and `::before` for the right span of the active year.
– These pseudo-elements extend the active color into the neighboring spans by half of their width.

### Outcome
When a year becomes active, its color will span across itself and half of its adjacent years, creating a seamless transition effect.

User

I want active color should show half of active year in year bar

Assistant

To ensure the active color only spans half the width of the active year in the year bar, you can modify the `updateYearBar` function and use CSS `::after` or `::before` pseudo-elements for styling. Here's the updated approach:

### Updated JavaScript
You don't need to modify the logic significantly; the active span will still be determined, and the CSS will handle the visual effect.

function updateYearBar() {
    yearSpans.removeClass('active-year');
    yearSpans.eq(currentIndex).addClass('active-year');
}

### Updated CSS
Define styles to create a "half-active" effect using the `::after` pseudo-element for the active year span.

.timeline_year_bar span {
    position: relative;
    display: inline-block;
    width: 100px; /* Adjust width as needed */
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Default year styles */
.timeline_year_bar span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* Start halfway */
    width: 50%; /* Cover half */
    height: 100%;
    background-color: transparent;
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* Active year styles */
.timeline_year_bar span.active-year::after {
    background-color: #007bff; /* Active color */
}

### How It Works
1. **Default Year Styles**:
– All spans have a `::after` pseudo-element that starts at 50% width (`left: 50%`) and spans the remaining 50% of the element's width. By default, it's transparent.

2. **Active Year Styles**:
– When a span has the `active-year` class, its `::after` pseudo-element's background color changes to the active color (`#007bff`).

### Visual Effect
The active year will display its active color starting from the middle (left half uncolored, right half colored). The transition is smooth due to the `transition` property.

Let me know if you'd like to tweak it further!

User

Here is my orignal code
let currentIndex = 0;
const slides = $('.timeline-slide');
const totalSlides = slides.length;

const progressBarFill = $('.timeline-progress-fill');
const yearSpans = $('.timeline_year_bar span');
const prevButton = $('.prev-slide');
const nextButton = $('.next-slide');
function showSlide(index) {
if (index >= 0 && index < totalSlides) {
$('.timeline-slider').css('transform', 'translateX(' + (-index * 100) + '%)');
currentIndex = index;
updateYearBar();
updateProgressBar();
updateNavigationButtons();
}
}

function updateYearBar() {
yearSpans.removeClass('active-year');
yearSpans.eq(currentIndex).addClass('active-year');
}

// Disable next button if on the last slide
if (currentIndex === totalSlides – 1) {
nextButton.prop('disabled', true).addClass('tl-disabled');
} else {
nextButton.prop('disabled', false).removeClass('tl-disabled');
}
}
$('.next-slide').click(function () {
if (currentIndex < totalSlides – 1) {
showSlide(currentIndex + 1);
}
});

$('.prev-slide').click(function () {
if (currentIndex > 0) {
showSlide(currentIndex – 1);
}
});

yearSpans.click(function () {
const index = $(this).data('slide');
showSlide(index);
});

// Initialize the first slide, year bar, and progress bar
showSlide(currentIndex);

$settings = $this->get_settings_for_display();
if (isset($settings['rose_timelines']) && count($settings['rose_timelines']) > 0) {
?>

Assistant

To modify the code so that the active year color spans only half of the active year's width in the timeline year bar, you'll need to adjust the CSS to apply the half-width effect specifically to the active year. Here’s how you can adjust your existing code:

### Updated JavaScript
You don’t need to modify the JavaScript much, but ensure that the correct `active-year` class is being applied as you're already doing:

function updateYearBar() {
    yearSpans.removeClass('active-year');
    yearSpans.eq(currentIndex).addClass('active-year');
}

### Updated CSS for Half-Active Year Effect
You’ll need to adjust the CSS to ensure that only half of the active year span is highlighted. This can be done using the `::before` or `::after` pseudo-element to create the effect.

.timeline_year_labels span {
    cursor: pointer;
    position: relative;
    color: $color-white;
    transition: color 0.3s;
    flex: 1;
    text-align: center; /* Optional: Center text inside the span */
}

.timeline_year_labels span.active-year {
    color: $color-primary; /* Change text color to active color */
}

.timeline_year_labels span.active-year::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%; /* This covers half of the year span */
    height: 100%;
    background-color: $color-primary; /* Active color */
    z-index: -1; /* Ensure it’s behind the text */
    transition: background-color 0.3s ease;
}

/* Optional: If you want to add a slight border or shadow effect to the active span */
.timeline_year_labels span.active-year::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Optional shading effect */
    z-index: -2;
}

### How It Works:
– **`::after` pseudo-element**:
– This is used to create the active color effect that will cover half of the width of the active year.
– The `width: 50%` ensures only half of the active year is colored, starting from the left of the span.
– **`position: relative` on the span**:
– This allows the `::after` pseudo-element to be positioned relative to each span.
– **`z-index: -1`**:
– The `::after` element is placed behind the text to avoid overlapping the year text.

### Final Result
With this approach, only the left half of the active year will be highlighted, and it will adjust dynamically when the active year changes. The remaining portion of the span will retain the default style, while the neighboring years will remain unaffected.

Let me know if you need further adjustments!

User

we are filling progressBarFill

Assistant

To fill the progress bar along with the year bar such that the active year only spans half its width and still reflect the progress, you can combine the two concepts. The progress bar itself can reflect how far along you are in the timeline, and the year bar can highlight half of the active year.

Here’s how to adjust both the **progress bar** and the **year bar**:

### Updated JavaScript for Progress Bar and Year Bar
Make sure the **progress bar** is updated correctly in the `updateProgressBar` function. Also, update the year bar highlighting logic as mentioned earlier.

function updateYearBar() {
    yearSpans.removeClass('active-year');
    yearSpans.eq(currentIndex).addClass('active-year');
    // Apply half active year color effect for the current active year
    yearSpans.eq(currentIndex).css('width', '50%');
}

function updateProgressBar() {
    const progress = ((currentIndex + 1) / totalSlides) * 90; // Adjust the percentage to suit your design
    progressBarFill.css('width', progress + '%');
}

### Updated CSS for the Active Year and Progress Bar

For the **year bar**, we’ll highlight only half the width of the active year:

.timeline_year_bar {
    position: relative;
    width: 100%;
    margin-top: 48px;
}

.timeline-progress {
    position: relative;
    height: 4px;
    background-color: $color-white;
    width: 100%;
}

.timeline-progress-fill {
    height: 100%;
    background-color: $color-primary;
    width: 0%; /* Starts from 0% width */
    transition: width 0.5s ease-in-out;
}

.timeline_year_labels {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.timeline_year_labels span {
    cursor: pointer;
    position: relative;
    color: $color-white;
    transition: color 0.3s;
    flex: 1;
    text-align: center; /* Optional: Center text inside the span */
}

.timeline_year_labels span.active-year {
    color: $color-primary; /* Change text color to active color */
}

/* Create half active effect for active year */
.timeline_year_labels span.active-year::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%; /* This covers half of the year span */
    height: 100%;
    background-color: $color-primary; /* Active color */
    z-index: -1; /* Ensure it’s behind the text */
    transition: background-color 0.3s ease;
}

### Explanation:
1. **Progress Bar**:
– The progress bar fills based on the slide position with a width calculated as `((currentIndex + 1) / totalSlides) * 90`. Adjust this value as necessary to match your design.

2. **Year Bar**:
– The active year now gets its color, and only the left half of the active year span will show the active color (`width: 50%`).

3. **CSS `::after` pseudo-element**:
– The active year uses the `::after` pseudo-element to fill the left half of the year span with the active color.

### Final Outcome:
– The progress bar fills as you navigate through the slides.
– The year bar will show the active color for the current year and fill only the left half of the active year span.

This approach ensures the active year is visually highlighted with half of its width filled while also updating the progress bar as you move through the slides.

Let me know if you need more adjustments!

User

let currentIndex = 0;
const slides = $('.timeline-slide');
const totalSlides = slides.length;

const progressBarFill = $('.timeline-progress-fill');
const yearSpans = $('.timeline_year_bar span');
const prevButton = $('.prev-slide');
const nextButton = $('.next-slide');
function showSlide(index) {
if (index >= 0 && index < totalSlides) {
$('.timeline-slider').css('transform', 'translateX(' + (-index * 100) + '%)');
currentIndex = index;
updateYearBar();
updateProgressBar();
updateNavigationButtons();
}
}

function updateYearBar() {
yearSpans.removeClass('active-year');
yearSpans.eq(currentIndex).addClass('active-year');
}

function updateProgressBar() {
const progress = ((currentIndex + 1) / totalSlides) * 100;
progressBarFill.css('width', progress + '%');
}

Assistant

It looks like you're working on updating the progress bar and year bar based on the current slide. The functionality for the year bar and progress bar should work well as described, but you also mentioned that you want to fill the active year bar by half, and I’ll walk you through how to update it accordingly.

Here’s how you can update both the year bar (with half of the active year) and the progress bar:

### JavaScript Updates

You will continue to update the progress bar and year bar based on the current slide, with the change that the active year bar will only show half of the width.

1. **`updateYearBar` function**:
– The active year should now fill only half of its width when active.
– We can add a CSS rule directly via JavaScript to modify the width of the active year.

2. **`updateProgressBar` function**:
– This remains the same and updates the progress bar.

### Updated JavaScript:

let currentIndex = 0;
const slides = $('.timeline-slide');
const totalSlides = slides.length;

const progressBarFill = $('.timeline-progress-fill');
const yearSpans = $('.timeline_year_bar span');
const prevButton = $('.prev-slide');
const nextButton = $('.next-slide');

function showSlide(index) {
    if (index >= 0 && index < totalSlides) {
        $('.timeline-slider').css('transform', 'translateX(' + (-index * 100) + '%)');
        currentIndex = index;
        updateYearBar();
        updateProgressBar();
        updateNavigationButtons();
    }
}

function updateYearBar() {
    yearSpans.removeClass('active-year');
    yearSpans.eq(currentIndex).addClass('active-year');
    // Set the width of the active year to 50% to show half the year as active
    yearSpans.eq(currentIndex).css('width', '50%');
}

function updateProgressBar() {
    const progress = ((currentIndex + 1) / totalSlides) * 100;
    progressBarFill.css('width', progress + '%');
}

function updateNavigationButtons() {
    // Disable previous button if on the first slide
    if (currentIndex === 0) {
        prevButton.prop('disabled', true).addClass('tl-disabled');
    } else {
        prevButton.prop('disabled', false).removeClass('tl-disabled');
    }

    // Disable next button if on the last slide
    if (currentIndex === totalSlides - 1) {
        nextButton.prop('disabled', true).addClass('tl-disabled');
    } else {
        nextButton.prop('disabled', false).removeClass('tl-disabled');
    }
}

$('.next-slide').click(function () {
    if (currentIndex < totalSlides - 1) {
        showSlide(currentIndex + 1);
    }
});

$('.prev-slide').click(function () {
    if (currentIndex > 0) {
        showSlide(currentIndex - 1);
    }
});

yearSpans.click(function () {
    const index = $(this).data('slide');
    showSlide(index);
});

// Initialize the first slide, year bar, and progress bar
showSlide(currentIndex);

### Explanation of Changes:
1. **`updateYearBar` function**:
– We use `css('width', '50%')` on the active year span to ensure that only half of the active year gets the highlight.

2. **`updateProgressBar` function**:
– This remains the same, filling the progress bar based on the current slide's index.

### CSS for Year Bar Highlight:

You’ll also need to ensure that the year bar itself behaves correctly with this half-highlighting. Here’s the updated CSS for the active year effect:

.timeline_year_labels span {
    cursor: pointer;
    position: relative;
    color: $color-white;
    transition: color 0.3s;
    flex: 1;
    text-align: center; /* Optional: Center text inside the span */
}

.timeline_year_labels span.active-year {
    color: $color-primary; /* Change text color to active color */
}

/* Create half active effect for active year */
.timeline_year_labels span.active-year::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%; /* This covers half of the year span */
    height: 100%;
    background-color: $color-primary; /* Active color */
    z-index: -1; /* Ensure it’s behind the text */
    transition: background-color 0.3s ease;
}

### Key Points:
– **Active Year Highlight**: The active year is highlighted by applying `width: 50%` directly to the active year span using jQuery. The `::after` pseudo-element is also used to ensure the left half of the active year gets the active color.

– **Progress Bar**: The progress bar correctly updates based on the current index and fills up as you navigate through the timeline.

This should achieve your goal of filling half the active year and properly managing the progress bar and year bar. Let me know if you need further adjustments!

Active Year Span Effect

Leave a Comment Cancel