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

Is it possible to alter the font size in Vuetify depending on the viewport size?

Looking to customize font sizes based on viewports? <v-card-text style="font-size:5em"> Some Heading Here </v-card-text> If you want to change the font size to 3em on XS view, without duplicating code, consider using CSS only. Avoid dupli ...

cssvue.jsviewportvuetify.js

Unexpected JSON response from jQuery AJAX call

Trying to make a request for a json file using AJAX (jQuery) from NBA.com Initially tried obtaining the json file but encountered a CORS error, so attempted using jsonp instead Resulted in receiving an object filled with functions and methods rather than ...

javascriptjqueryjsonajax

Learn the process of transferring product details to a new component in Angular when a product is clicked from the product list component

Currently, my focus is on creating a shopping application using Angular and Django. I managed to get the products from the Django API into the angular products list component. However, I'm looking to enhance the user experience by allowing them to cl ...

htmldjangoangulardjango-rest-framework

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

jquerycssanimationjquery-animate

How to delete a specific element from the DOM using its ID in JavaScript

I am facing a challenge in removing an element from the page dynamically without refreshing using JavaScript. The script I have written successfully deletes the record from the database, but I need assistance in removing the container element based on it ...

javascriptphpjquery

Tips for resolving a 403 error while utilizing selenium with Python

What is the solution to fixing a 403 error? I have noticed that when trying to access a certain website, I am able to browse for about 30 seconds before encountering a 403 error. This issue only started occurring today, and I find it strange because if m ...

pythonhtmlselenium

Displaying foreign exchange rates using Shield UI Chart

In my quest to access and display forex data, I have stumbled upon the incredible Shield UI Chart. After some experimentation, I successfully mastered the art of implementing ajax: $.ajax({ url: 'http://api.apirates.com/jsonp/update', dataTy ...

javascriptjqueryajaxshieldui

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searc ...

csseffectslightingflashlightlight

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

Is there a way to create a navigation menu in Windows 8 Metro JavaScript that includes header menus and section labels, similar to the example shown below? ...

javascripthtmlmicrosoft-metrowinjs

Content not displaying in Bootstrap tabs when clicked on

I'm struggling to fix the tab functionality on my website. Upon loading the page, the content under the first tab is visible, but once I switch to the second tab, all content disappears. Going back to the first tab reveals no content until the page i ...

jquerywordpresstwitter-bootstrapbootstrap-4tabs

Using jQuery.ajax to manage caching and manipulating timestamps

Currently, I am utilizing the jquery.ajax techniques to transmit GET-requests to the server, with caching disabled by setting cache to false. Everything seems to be working fine so far. It appears that jQuery automatically includes a timestamp (likely epo ...

javascriptjqueryajaxcaching

Tips for achieving full width with Bootstrap

Recently, I delved into the world of bootstrap and encountered some trouble setting my width to 100%. Despite trying to assign width:100%; in my container CSS, it didn't seem to work. The only workaround I found was using container-fluid no-padding in ...

htmlcssbootstrap-5

What is the best way to extract a portion of a JSON string?

this.on('success', function(file, responseText) { var theID = JSON.stringify(responseText); alert(theID); window.location.href = ('want to put something here'); }); The ...

javascriptjqueryjson

Utilize the search bar within a JavaScript function

One issue I am facing is taking an input from a search box and using that value as a parameter for another function. However, every time I click the button, the global variable resets itself when the page refreshes. In my javascript code, this is what I h ...

javascriptjqueryhtmlsearchglobal-variables

Replicate elements along with their events using jQuery

Every time I utilize ajax to dynamically generate new content using methods like .clone(), append(), etc., the newly created element loses all triggers and events that were programmed =( Once a copy is made, basic functionalities that work perfectly on ot ...

javascriptjqueryeventsappendclone

How can you locate the position of a selector within a parent or set using jQuery

Could someone please help me determine the position of the current selector within its parent using jQuery? I need this information in order to effectively use the .insertAfter() and .insertBefore() methods to rearrange elements within their nested structu ...

javascriptjqueryhtml

What strategies can flex-shrink use to triumph over padding in the battle for space

I am facing an issue with a flex-box tag cloud where the sizing is controlled from the outside. I need the tags inside to be collapsible all the way down to zero if necessary, but currently they only collapse up to 2 times their padding. https://i.sstatic ...

htmlcssflexbox

Is jQuery failing to respond after being transferred from HTML to PHP?

The debug message from the Venkman debugger reads as follows: $("#aboutbox") is null [Break On This Error] $("#aboutbox").hide(); I'm at a loss on how to resolve this issue! It was functioning perfectly in HTML: But after transitioning it to PH ...

phpjqueryhtml

Stopping halfway through a jQuery toggle width animation to close again

Perhaps the question may be a bit unclear, but allow me to provide an example. When repeatedly clicking the button that toggles the width, the div continues to animate long after the button press, which is not visually appealing. My desired outcome is for ...

javascripthtmljquerycss

Preventing the window from resizing while an AJAX query is in progress

I have a script in jQuery that serves as a search tool and also has the capability to resize an element to match the screen height minus 40 pixels whenever the window is resized. However, I am looking for a way to turn off the resizing feature when a searc ...

javascriptjqueryhtmlajax