Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned?

Check out my code here

Here is the CSS I am using:

#cover-inspiration{
    width: 100%;
    height: 100vh;
    background: url('http://placehold.it/350x150') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    background-size: 100% 100%;
    position: relative;
}
.menu2{
    background: rgba(34,34,34,0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;    
}

In my current setup, I have to scroll down to view the content within the dropdown. Is there a way for the dropdown to automatically adjust its position to the top when it overlaps with my background section? Any help would be appreciated. Thank you!

jqueryhtmlcsstwitter-bootstrap

Answer №1

Enhance the functionality by adding the "dropup" attribute to the <div class="input-group-btn"> element in order to adjust the popup orientation.

The dropup attribute can be dynamically modified based on mouse hover events:

$.fn.visibleHeight = function() {
  var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
  scrollTop = $(window).scrollTop();
  scrollBot = scrollTop + $(window).height();
  elTop = this.offset().top;
  elBottom = elTop + this.outerHeight();
  visibleTop = elTop < scrollTop ? scrollTop : elTop;
  visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
  return visibleBottom - visibleTop
}

$(function () {
  $('#cover-inspiration').hover(function(e) {
    if ($('#cover-inspiration').visibleHeight() > 200) {
      $('.input-group-btn').addClass('dropup');
    } else {
      $('.input-group-btn').removeClass('dropup');
    }
  }, function(e) {
    if ($('#cover-inspiration').visibleHeight() > 200) {
      $('.input-group-btn').addClass('dropup');
    } else {
      $('.input-group-btn').removeClass('dropup');
    }
  });
});
#cover-inspiration{
  width: 100%;
  height: 100vh;
  background: url('http://placehold.it/350x150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
}
.menu2{
  background: rgba(34,34,34,0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="cover-inspiration">
    <div class="menu2">
        <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
            <div class="wrapitup">
                <div class="input-group">
                    <span class="input-group-addon " id="basic-addon1" aria-hidden="true"><li class="glyphicon glyphicon-search"></li></span>
                    <input type="text" class="form-control" aria-label="...">
                    <div class="dropup input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="dropup input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="#">2</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="input-group-btn">
                        <button id="go"  type="submit" class="btn btn-primary">Submit</button>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea expedita numquam at molestias, incidunt nam hic dolor nemo deserunt officia debitis voluptas laudantium itaque explicabo assumenda, inventore dolorem natus. Deleniti!</p>

    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">

    <img src="http://placehold.it/350x150">
</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

Using Jquery to find the class that matches the current element

Is it possible to select a specific div by its class when there are multiple divs sharing the same class and triggering the same function on button click? I only want to target the class where $(this) is located. I've experimented with .parent, .chil ...

javascriptjqueryhtml

Is there a simple method to submit to a URL without relying on ajax?

When it comes to using jQuery, the $.ajax() function is typically used for POST requests to a URL. However, in my particular situation, I am unable to use this function. I need the client to send a POST request to a URL and have the server redirect the use ...

javascriptjquery

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

Update: What should I do if the width size is unknown? Check out the demo on JS Fiddle If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missin ...

htmlcss

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

phpjavascriptjqueryhtml

What is the best way to incorporate text transitions using jquery?

Recently, I've come across this code snippet: $('#slider_title').text(var); This line of code successfully adds the text stored in a variable to the paragraph identified by the id "slider_title". And now, my goal is to smoot ...

javascriptjquery

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

I am facing an issue with the buttons on my website, as they seem to resize based on the amount of text present. When there are 2 lines of text, the buttons appear larger compared to those with just one line. How can I rectify this situation? Although thi ...

phphtmlwordpresscss

Angular-fontawesome icons are experiencing issues with their background color not scaling properly

Currently utilizing angular-fontawesome, I am seeking to alter the background color of a font-awesome fa-icon <fa-icon class="vue-icon" [icon]="faVue" ></fa-icon> To change the color, I modified the CSS using ...

cssangularfont-awesome

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

My current goal is to create a json file using a form and then update that file with another form. Both of these processes are handled in the process.php file. I have managed to successfully update the json file if it is named as data.json initially in pro ...

phphtmljson

Placing an item inside the container without exceeding its vertical limit

Check out this jsfiddle - http://jsfiddle.net/az47U/3/ - where you'll find a Gallery div along with a Canvas div, both located within the body. These divs have been absolutely positioned to not affect the overall body height. I've set the body he ...

jqueryhtmljquery-ui

Send data with AJAX and PHP without refreshing the page

I have implemented the "add to favorite" feature on my WordPress project using a <form> submission. Each time I click on the add to fav button, it works fine, but the page always reloads which is quite annoying. To tackle this issue, I decided to imp ...

javascriptphpjqueryajaxwordpress

Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...

htmlcssgoogle-chrome

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra

Unable to retrieve the desired information from the jQuery AJAX request

Here is an example of a C# web method: [WebMethod] public string Greetings() { return "Greetings from the server"; } This is the jQuery AJAX code used to call the web method: $.ajax({ url: "http://10.0.2.2/SampleService/ ...

c#jqueryajaxweb-services

Storing the closed state of a pop-up box in localStorage for future reference

I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...

javascriptjqueryhtmlcss

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

javascripthtmlcssreactjstailwind-css

Validate fields by iterating through an object and considering three data points for each field

The struggle is real when it comes to coming up with a title for this question. Suggestions are welcomed! When it comes to field validation, I require three data elements per field: variable name, element ID, and whether it is required or not. Although I ...

javascriptjquery

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

I have been working with GWT (Google Web Toolkit) version 2.5.1 and successfully developed a sample application to display the username and password. However, I am now facing challenges in inserting these values into a MySQL database table using JDBC or Hi ...

mysqlhtmlhibernategwt-rpc

Using -moz-transform CSS does not effectively prevent unwanted page breaks when printing in Firefox

I am facing a challenge with printing two tables, named header and details, on separate pages. The structure of the tables is as follows: <table id="header"> <!-- multiple rows here --> </table> <table id="details&quo ...

htmljquerycssfirefox

Using only HTML, I have created a collapsible accordion in Angular without the need for JS code. However, when I click the button, nothing happens. Can you help me resolve

I am attempting to add an Accordion button to my website using the HTML code provided below. I am currently incorporating this in a very basic manner, without any utilization of javascript code, within this example of accordion snippet. When the button i ...

htmlangularaccordion

Leveraging Ajax to Retrieve Data from Symfony Controller

Within a form type that utilizes a twig template, I am retrieving images attached to the current listing object and presenting them with an option for the user to delete. To enhance user experience, I aim to implement the feature where users can delete ind ...

phpjqueryajaxsymfony