Owl carousel issue: Fixed position not functioning properly

To view the page with the issue, click here

I am attempting to make the column (div) day/date headers sticky when they scroll out of view so that users can always see what day they are looking at. Instead of directly manipulating the header itself, I have set up a second hidden span with fixed position (currently visible in red) that will be shown when scrolling down.

The headers load as fixed correctly initially but then switch to absolute positioning once the carousel function loads, and I am unable to determine why this is happening.

If anyone has any suggestions on how to fix this or approach it differently, please share. The only limitation is to avoid using tables to maintain responsiveness for mobile devices.

Thank you in advance for your input!

- Rich

jquerycsspositionfixedowl-carousel

Answer №1

The issue lies in the placement of the element:

To resolve it, change the span to a div and reposition it as indicated below.

Remember to apply the provided CSS styles. While this may not be the most visually pleasing solution, it does address your specific problem.

<div class="day-title-fixed">Wed, Mar 12</div><!--Position it here -->
    <div id="schedule-wrap"> ....</div>

#main > div.day-title-fixed {
    position: fixed;
    left: 510px;
    width: 126px;
    background-color: red;
    z-index: 1;
    height: 35px;
}

Answer №2

In this scenario, the issue arises when a div element becomes fixed because its width automatically adjusts to 100%, causing the owl carousel to not properly hide the upcoming slides. To fix this problem, we can determine the width of the wrapper div and then assign the same width to the fixed div using JavaScript.

    <script type="text/javascript">
        var divAWidth = $('#carousal-wrapper-outer').css('width');
            $('#carousal-wrapper-inner').css('width', divAWidth);    
    </script>


            <div id="carousal-wrapper-outer" style="overflow: hidden;" class="col-sm-6">
                <div id="carousal-wrapper-inner" style="position:fixed;top:30%" >
                    <div id="owl-demo" class="owl-carousel owl-theme">
                          <div class="item"><img class="img-responsive" src="img/dig-tab-img-1.png" alt="" /></div>
                          <div class="item"><img class="img-responsive" src="img/digital-1.png" alt="" /></div>
                          <div class="item"><img class="img-responsive" src="img/digital-2.png" alt="" /></div>
                   </div>
                </div>   
            </div>

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

Incorporate spacing between columns in Bootstrap 5 by adding gutters

I've been exploring ways to incorporate spacing between my columns in Bootstrap 5. I diligently followed the guidelines provided in the documentation, but I'm facing difficulties in adding gutters between my columns. Currently, I am utilizing g- ...

htmlcsstwitter-bootstrapbootstrap-5

I am looking for a way to distinguish between mandatory and non-mandatory input fields in React

I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rou ...

cssreactjsmaterial-ui

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

javascriptjqueryhtmlcross-browser

Steps to incorporate Ajax into current pagination system built with PHP and Mysql

Greetings! I am a beginner programmer looking to enhance my PHP & Mysql based pagination with Ajax functionality. Despite searching through numerous tutorials, I have been unsuccessful in finding a guide that explains how to integrate Ajax into existin ...

phpjquerymysqlhtmlajax

Sending a second request with jQuery to upload a file

After successfully uploading a file using jQuery AJAX along with a progress bar (XHR), the next step involves processing the uploaded file on the server side. To check the status of this server-side processing, I attempt to make another jQuery AJAX request ...

javascriptjqueryajaxjquery-file-upload

Adjustable icon dimensions in Material-UI

My current setup involves utilizing material-UI icons <ArrowRightAlt/> I have been able to manipulate the size of the icon using the fontSize attribute <ArrowRightAlt fontSize="large" /> However, I am interested in having the size ...

cssreactjsmaterial-ui

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before? <body> < ...

javascriptjqueryhtmlajaxmagnific-popup

Immersive full-screen YouTube video embedded as hero background

Seeking a solution in HTML & CSS to display this embedded video as a 75vh height hero background. Currently, the iFrame maintains its width: 100% and height: 75vh, but the images themselves do not cover the entire header width. Essentially, I want it ...

htmlcssyoutuberesponsive

Using JQuery, ensure that the scroll function runs in advance of the ajax call finishing

I am currently working on using jQuery to scroll down to a text box when the click event occurs. However, I have noticed that the scroll event is happening after the AJAX call within the function. $("#execute_btn").click(function(){ $('html, b ...

javascriptjqueryajax

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

javascripthtmlcssviewportsticky

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

javascripthtmljquerycsscss-animations

Invoke two functions simultaneously on a single Onchange event

Can someone help me understand how to trigger two functions by changing the value of a specific dropdown list using the "OnChange" event in Ajax? Note: The system typically only displays the output of the showhistory() function. Here is my existing code: ...

javascriptphpjqueryajax

Search bar placeholder text appears off-center in Firefox browser

I have implemented a universal search bar on our website and it is working perfectly in Chrome and Safari. However, I am facing an issue with Firefox where the placeholder text is aligned to the bottom of the bar instead of the middle. Usually, placeholder ...

csssearchplaceholder

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty. I need these buttons to line up horizontally and adjust their width accordingly ...

htmliphonecssmobilefooter

Despite importing jQuery, the variable '$' cannot be located

Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...

javascriptjqueryhtml

Can the CSS be used to conceal the PNG image while still preserving the drop shadow effect?

I recently applied the "Filter: drop-shadow" effect to my png photo and it worked perfectly. However, I am now interested in hiding the actual png image while retaining the shadow effect. My initial attempt involved adjusting the translate and drop-shadow ...

htmlcss

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

csstwitter-bootstrap-3

Unable to resubmit form via ajax more than once

Greetings to all, I seem to be encountering some issues with a supposedly simple form submission using ajax. Upon the initial submission of the form by the user, everything proceeds smoothly: The content within the div changes as expected and the PHP proc ...

javascriptjqueryajax

JavaScript code to shift a box beyond the boundaries of a grid

I have a yellow square within a grid. Upon clicking the 'UP' button, the yellow square moves up by one box. How can I ensure that the square stops at the edge of the grid and does not move out? let moveCounter = 0; var grid = document.getElem ...

javascriptjquery