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

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

Using data-image as the source for Bootstrap Modal

I am currently working on an image gallery that utilizes the Paver jQuery plugin. The gallery is functional, but I am facing an issue where it displays the same image in the modal instead of showing the respective data-image for each image. My goal is to ...

Load nodes for jsTree based on the results of a query when requested by the user

I've been researching extensively, but I have yet to discover the correct solution. I am interested in learning how to dynamically generate a jsTree where the nodes are loaded from a database. The data will be retrieved by a function. My objective i ...

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

Customize the appearance of buttons and tabs located in the header section

Front end development is new to me and I'm trying to learn, but I've hit a roadblock. I have 4 components - 2 buttons and 2 tabs that I want to style in a header at the top of the page. Specifically, I want one button on the top left with padding ...

View complex response objects in Postman as easily digestible tables

I am interested in displaying the data provided below as a table using Postman Tests. The table should have columns for product, price, and quantity, with Items listed in rows. It's important to note that there may be multiple shippingGroups within th ...

Tips on transforming a JSON array object into a JSON array

**Background:** I have been utilizing lodash to eliminate the empty key from my JSON data. However, upon removal of the keys, it transforms my array into an object. For instance: { "projection": "Miller", "series": [ { "mapPolygons": { ...

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

Arrange text boxes within a form and table to be in alignment with the labels

https://i.stack.imgur.com/MFQnD.png I'm facing difficulty aligning checkboxes with labels within a form and a table. Despite reviewing various answers and websites, I am still unable to achieve the desired alignment. How to consistently align check ...

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

Verify if a fresh message has been added using AJAX

Is it possible to create a notification system similar to Facebook, where the tab title displays the number of new messages without refreshing the entire page? Below is a snippet of code from my website's message box feature that I am working on. < ...

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

transmitting information via submission with the help of colorbox ajax

HTML <div class="cus_input"> <form id="category_form" method="GET" action="<?php echo base_url(); ?>welcome/find/" > <input type="text" id="category_input" name="q" placeholder=" Find Category"/> <a type="su ...

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here You may notice a difference in spacing between the two. Here is my CSS code: .custom_list l ...

Using HelloJS and AngularJS for an asynchronous call to the login function with oAuth

I've been working on integrating HelloJS into my AngularJS app. According to the documentation, in order to authenticate I need to call the login function like this: hello("google").login().then(function(){ }); After that, I should listen for the &a ...

What could be the reason for my form submission redirecting to the PHP page?

(I recently discovered that I could edit and reopen the post I had previously made. Feeling a bit confused about the process...) After submitting the form, the email is sent successfully, but then I am redirected to my php page displaying the number 0. Th ...

Tips for substituting @media (max-width) with Stylish or Greasemonkey?

I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

Using NodeJS to Send JSON Data via HTTP POST Request

Issue with Sending JSON Data via Http Post in NodeJS const http = require('http'); const fs = require('fs'); var options = { hostname: 'www.postcatcher.in', port: 80, path: '/catchers/5531b7faacde130300002495&apo ...