Horizontal navigation bar encroaching on slideshow graphics

I'm encountering difficulties aligning the horizontal menu below the image slider. When I have just an image without the slider, the menu aligns properly (vertically), but as soon as I introduce the code for the slider, the menu moves to the top and doesn't stay beneath the image slider. I attempted adjusting the margin-top property, which does shift the menu downwards, but it fails to maintain its position under the image slider when the screen size is increased vertically. The following is my code accompanied by images illustrating the issue and the desired outcome (as indicated by the Green Arrow).

https://i.stack.imgur.com/epY5Y.jpg

 <html>
 <head>
    <!-- Including the meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Including jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- Including the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <!-- Including the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<style> 
    /* Image settings */
    img {
        width: 100% !important;
        height: 30%;
        background-size:cover;
        filter:grayscale(100%);
        -webkit-filter: grayscale(100%);
    }


    #slideshow { 
        position: relative; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute;
        width: 100% !important;
    }

</style>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>

        <div id="slideshow">    
            <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
            <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
        </div>

        <div class="categories" > 
            <ul>                    
                <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>                       
            </ul>               
        </div>




        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false" >
            <h1>Footer Text</h1>
        </div>
    </div> 
</body>
<script>
    // Slideshow Settings
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    },  5000);

    // Horizontal Scrolling Start
    $(function(){           
        var step = 1;
        var current = 0;
        var maximum = $(".categories ul li").size();
        var visible = 2;
        var speed = 500;
        var liSize = 120;
        var height = 60;    
        var ulSize = liSize * maximum;
        var divSize = liSize * visible; 

        $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
        $(".categories ul li").css("list-style","none").css("display","inline");
        $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

        $(".categories").swipeleft(function(event){
            if(current + step < 0 || current + step > maximum - visible) {return; }
            else {
                current = current + step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });

        $(".categories").swiperight(function(){
            if(current - step < 0 || current - step > maximum - visible) {return; }
            else {
                current = current - step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });         
    });
    // Horizontal Scrolling End
</script>

javascriptjqueryhtmlcss

Answer №1

Disregard my previous statement...

Upon inspection of the javascript/jQuery code, I have discovered how it operates. The slider function alters certain javascript values which necessitated additional modifications in the code.

I made adjustments to some values, so let me provide a brief explanation before showcasing the outcome.

The Height variable was modified to 210 because failure to do so would result in the div being concealed. Changing the height now affects both image size and button positioning.

A new line was introduced to set the img height as per the defined variable: 

$("img").css("height", height-60)

Furthermore, another line of code was added to adjust the top position and align the div appropriately: 

$(".categories ul").css("top", height - 60)

Below is your updated code:

<html>
 <head>
    <!-- Include meta tag for proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- Include jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <!-- Include jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<style> 
    /*image settings*/
    img {
        width: 100% !important;
        background-size:cover;
        filter:grayscale(100%);
        -webkit-filter: grayscale(100%);
    }


    #slideshow { 
        position: relative; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute;
        width: 100% !important;
    }

</style>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>

        <div id="slideshow">    
            <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
            <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
        </div>

        <div class="categories" > 
            <ul>                    
                <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>                       
            </ul>               
        </div>




        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false" >
            <h1>Footer Text</h1>
        </div>
    </div> 
</body>
<script>
    //Slideshow Settings
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    },  5000);

    //Horizontal Scrolling Start
    $(function(){           
        var step = 1;
        var current = 0;
        var maximum = $(".categories ul li").size();
        var visible = 2;
        var speed = 500;
        var liSize = 120;
        var height = 210;   
        var ulSize = liSize * maximum;
        var divSize = liSize * visible; 

        $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
        $(".categories ul li").css("list-style","none").css("display","inline");
        $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
        $(".categories ul").css("top",height-60); 
        $("img").css("height",height-60); 

        $(".categories").swipeleft(function(event){
            if(current + step < 0 || current + step > maximum - visible) {return; }
            else {
                current = current + step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });

        $(".categories").swiperight(function(){
            if(current - step < 0 || current - step > maximum - visible) {return; }
            else {
                current = current - step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });         
    });
    //Horizontal Scrolling End
</script>

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

Having a pair of submit buttons within a single form

I need assistance regarding a form with five file input controls and other various controls. Additionally, there are two submit buttons included within the form structure. Utilizing the JQuery Validation plugin for validating form inputs has been an essen ...

phpjquerysubmitvalidation

Retrieve data from a URL using jQuery's .get method and iterate over each element using

After successfully retrieving the HTML using the jQuery get function and displaying it, I now have a question. How can I use the .each jQuery function to iterate through each div contained within the retrieved data? Specifically, I want to target a single ...

jquery

What is the best way to update objects in different scopes within AngularJS?

Exploring AngularJS for the first time, I find myself struggling with understanding scopes. My current dilemma involves modifying an object or variable from multiple scopes. Here's the scenario: I'm looking to centralize the user notification Co ...

javascriptangularjs

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Is it possible for jQuery AJAX add/edit/delete actions to be compromised?

Do you guys have any thoughts on a security concern I have? Currently, I am using the function below to remove movies from my database: function deleteVideo(video_id){ function mycallbackform(v,m,f){ if(v=="yes"){ $ ...

phpjquerymysqlajax

Using jQuery to fetch and display content only when the user hovers over

Looking to optimize page loading speed by minimizing the loading time of social icons such as Facebook Like and Twitter follow buttons. Considering displaying a static image of the like buttons initially, with the actual buttons appearing on mouse hover. ...

javascriptjquery

Updating array with user input using Ajax

For the past few days, I have been struggling to extract data from a PHP page (array) and store this data in a jQuery array. The issue arises when trying to send data to the PHP page using the following code: $.ajax({ type: "POST", url: 'test ...

phpjqueryarraysjsonajax

Tips for structuring a SQL query result in an AngularJS application

Forgive me if this code is not up to par with the best standards, as I am still relatively new to angular.js. The issue I am facing is that when the data is returned from my query, it appears as a block of text. Despite using echo statements in search.php ...

phphtmlmysqlangularjs

Addressing the Compatibility Issue between jQuery Ajax Load and Firefox

To understand the issue I'm facing, please follow these steps in the latest versions of Chrome, Opera, Safari, and Explorer using this link: Click on "Blog" to Ajax load a list of links in the adjacent column. Click on "Lorem Ipsum" to Ajax load an ...

jqueryajaxfirefox

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

javascripthtmlcss

Extract data from a JSON file and refine an array

Currently, I am working with reactjs and have an array stored in a json file. My current task involves filtering this array using the selectYear function. However, when attempting to filter the data using date.filter, I encounter the following error: An ...

javascriptjsonreactjs

What are the best practices for using .toString() safely?

Is it necessary for the value to return toString() in order to call value.toString()? How can you determine when you are able to call value.toString()? <script> var customList = function(val, lst) { return { value: val, tail: lst, t ...

javascripttostring

ColdFusion encounters an HTML form error, presenting the message: "There is an undefined element in the FORM."

I'm attempting to submit an HTML form that contains checkboxes for each day of the week. Whenever a checkbox is checked, I assign a value of 1 to it. To handle unchecked checkboxes, I set a default value of 0 using a CFPARAM tag in the form action pag ...

htmlformscoldfusioncoldfusion-8

When evaluating objects or arrays of objects to determine modifications

How can we detect changes in table data when users add input to cells? For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any ch ...

javascriptarraysangulartypescriptobject

Utilizing React.js with Material-UI to retrieve data from a table row when clicked

I came across a code snippet for a material table that can handle lists as input and perform pagination, sorting, and filtering on them. The challenge I am facing is figuring out how to extract the data from a row click event and navigate to a new route al ...

htmlreactjsmaterial-uimaterial-design

What is the process for creating a unit test case for a button's onClick event with Jest?

In my attempt to unit test the onClick event of a button in a component, I encountered some challenges. Specifically, I am unsure how to properly test the onClick event when it triggers a function like Add(value). App.js function App(){ const[value,set ...

javascriptreactjsunit-testingjestjs

Swapping out the initial occurrence of every word in the list with a hyperlink

I stumbled upon a fantastic script on a programming forum that almost fits my requirements perfectly. It essentially replaces specific words in a document with links to Wikipedia. However, I have run into an issue where I only want the first occurrence of ...

javascriptregexdom

Retry request with an AngularJS interceptor

Currently, I am in the process of developing an Angular application and encountering some challenges while implementing a retry mechanism for the latest request within an HTTP interceptor. The interceptor is primarily used for authentication validation on ...

javascriptangularjshttprequestinterceptor

Having trouble getting CSS calc to work on a table cell? Wondering how to make two out of four columns the same width?

Is it possible that CSS calc doesn't work on a table cell? It seems that no matter what size I change 90px to, the result looks the same. Even after trying various calculations with calc, I cannot seem to achieve the desired number of 230. The goal i ...

css