implementing jquery for dynamic pop up placement

When I click the English button, a pop-up appears, but I can only see the full contents of the pop-up after scrolling down. Is there any way to view the entire pop-up without scrolling?

Below is the code that I am using: http://jsfiddle.net/6QXGG/130/

Original code:

There seems to be an issue in the JavaScript code.


    // Locale selector actions
    $('#region-picker').click(function(){
        var foot_height = $('#footer').innerHeight();
        var foot_height_css = foot_height-1;
        var select_position = '-=' + (Number(400)+18);
        console.log("hallo"+select_position);
        var $selector = $('#locale-select');
        $('#locale_pop').fadeOut();
        $selector.css({top:foot_height_css});
        $selector.fadeIn(function(){
            $(this).addClass('open');
            $(this).animate({top:select_position}, 1000);
        });
    });

    $('#select-tab').click(function(e){
        e.stopPropagation()
        closeSelector('slide');
    });

    // Don't hide when clicked within the box
    $('#locale-select').click(function(e){
        e.stopPropagation();
    });

    $(document).click(function(){ 
        if ($('#locale-select').hasClass('open')) {
            closeSelector('disappear');
        }
    });

    $('.locale-link').click(function(){
        var desired_locale = $(this).attr('rel');
        createCookie('desired-locale', desired_locale, 360);
        createCookie('buy_flow_locale', desired_locale, 360);
        closeSelector('disappear');
    })

    $('#locale_pop a.close').click(function(){
        var show_blip_count = readCookie('show_blip_count');

        if (!show_blip_count) {
            createCookie('show_blip_count', 3, 360);
        } else if (show_blip_count < 3 ) {
            eraseCookie('show_blip_count');
            createCookie('show_blip_count', 3, 360);
        }

        $('#locale_pop').slideUp();
        return false;
    });

    function closeSelector(hide_type){
        var foot_height = $('#footer').innerHeight();
        var select_position = '+=' + (Number(400)+20);

        if (hide_type == 'slide') {
            $('#locale-select').animate({top: select_position}, 1000, function(){
                $(this).removeClass('open');
                $(this).fadeOut();
            });
    } else if (hide_type == 'disappear'){
        $('#locale-select').fadeOut('fast');
        $('#locale-select').removeClass('open');
    }
}

Answer №1

The pop-up window is rather large, so depending on the dimensions of your monitor, it may not fully display on the screen all at once. However, you can adjust its position by modifying:

var select_position = '-=' + (Number(400)+18);

to:

var select_position = '-=' + (Number(700)+18);

See updated fiddle here

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

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spa ...

In a designated paragraph, set the display of all <span> elements to none using JavaScript

I have a long paragraph with over 10,000 lines of text and I need a way to quickly remove all the lines without hiding the entire paragraph. Specifically, I want to hide each line individually by changing the span style from "display:block" to "display:non ...

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

Double submission issue with Angular form (multiple ajax requests)

My controller seems to be causing a form submission issue in AngularJS where the form is being submitted twice via a get request. Upon checking my database and the console network tab, I noticed that two submissions are logged, with the first submission sh ...

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

Incorporating personalized CSS and JavaScript into Shopify

Currently, my project involves integrating vertical tabs into a Shopify page that is utilizing the 'Atlantic' theme. Since this particular theme doesn't come with vertical tabs built-in, I have incorporated external JS and CSS files known as ...

Tips for aligning a div in the center while adjusting screen size

My goal is to showcase a dashboard with a card layout. The desired layout can be seen : Here is a snippet from the HTML File: <div id="overallCanvasWrapper" class="statistic-container"> <p ng-show="emptyAlltimeStats">No data a ...

Arranging Images with CSS Overlapping

I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down. As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, ...

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

analyzing information from a variety of HTML tables

I am currently working on extracting financial data from Income Statements tables within 8-K Forms retrieved from the Edgar Database (http://www.sec.gov/edgar/searchedgar/companysearch.html). Here are a couple of examples: Apple Alcoa The specific table ...

Steps for choosing all choices in a multi-select menu without changing the order

What is the best way to choose all the options from a multiselect box using Java Script? ...

Autoprefixer encountered a TypeError while executing the npm script: Patterns must be specified as a string or an array of strings

Upon executing npm run prefix:css, the following error message is displayed: Error: Patterns must be a string or an array of strings { "name": "natours", "version": "1.0.0", "description": "A project for natours", "main": "index.js", "script ...

JavaScript: A guide to finding CSS properties within a string

Checking for CSS Properties in Over 1,000 Sentences Is there a way in Javascript to check sentences against a built-in CSS index? Currently… If I need to search for CSS properties in the sentences below, I have to create an array containing all the CS ...

The onClick event is not executing my function

Having trouble triggering the onclick() event when trying to modify table data using ajax. Here's the code snippet: (the onclick() event is located in the last div tag) @{ ViewBag.Title = "Edit_Room"; Layout = "~/Views/Shared/_LayoutAdmin.csh ...

Guide to fetching JSON data following an AJAX submission of a form to the database

I am having trouble with my code that inserts data into a database using Ajax. I want the client side to automatically retrieve a callback JSON after saving the data to the database. However, the JSON is not showing in the console. Can anyone help me? Thi ...

Concealing and organizing navigation bar items for mobile devices

Currently, my navbar looks like this on a larger screen: But here's how it appears on a smaller screen (phone): What I'm hoping to achieve is to make the U logo on the top left disappear and align "get in touch" closer to the other elements. On ...

Issue with sender field in contact form and mailer function

Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...

The tag that is mandatory is not functioning properly in the Bootstrap form

I am currently working on integrating a Bootstrap form into my Flask website, and I am facing an issue with making certain fields mandatory before submission. I have tried using the "required" attribute in the input tags, but for some reason, it is not wor ...

The replaceWith function in jQuery does not support <script> elements

I am faced with a situation where my AJAX response includes HTML code, including <script> elements. My goal is to replace an existing element with this HTML content. However, when I attempt to do so using the following code: $(element).replaceWith( ...