Having trouble getting the pop up JavaScript code to function properly

I am currently working on a project that involves implementing a popup feature. Specifically, I want a pop up to appear when the "select country" option is clicked.

For reference, here is a link to a website that has a similar popup functionality:

I have attempted to replicate the JavaScript code used in that example on my JSFiddle, but for some reason it is not working as intended.

You can view my version of the code here: http://jsfiddle.net/6QXGG/2/


        // Code for handling locale selector actions
        $('#region-picker').click(function(){
            var foot_height = $('#footer').innerHeight();
            var foot_height_css = foot_height-12;
            var select_position = '-=' + (Number(400)+18);
            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);
            });
        });
        
        $('#footer').fadeIn(function(){
            var select_label_width = $('#region-picker .locale-select-lable').outerWidth()+8;
            $('#region-picker').width(select_label_width);
            $('#select-tab').width(select_label_width);
            // Check if we need to show the locale blip
            // This part was moved to document.ready
            // checkCookie();
        });​
    

Answer №1

Uncertain about the issue with the code. Perhaps experimenting with plugins like this could be helpful:

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

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

Launching the JQuery Dialog with an ASP.NET Button?

On one of my web pages, there is a form with two textboxes (username and password) and a submit button. If a user's membership is set to expire within the next 30 days and they click the button, I want a JQuery dialog to appear. Inside this dialog, th ...

Identify the index of a list item using a custom list created from buttons

When dealing with a dynamically built list like this: <ul id="shortcuts"> <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li> <li><input type="checkbox" value ...

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

I've been trying to get a simple Hello World app working by following different tutorials, but it doesn't seem to be functioning correctly. I've double-checked my code and everything looks right to me. Could someone please assist me in troub ...

Clicking elements reveal but page height remains unchanged?

Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below: $('#row-product_id_page-0-0 label').click(function() { var str = $(this).find('.am-product-title').text ...

PHP revealing information

I have images stored in my database that I want to display. Check out the code snippet below $num_rows = mysql_num_rows($result41); for ($i = 1; $i <= mysql_num_rows($result41); $i++) { $row = mysql_fetch_array($result41); $upload_id = $row [& ...

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

How can I use the XPath contains() function to locate a particular text within a document

If we take a look at an HTML table, it might appear like this: 2|1|28|9| 3|8|5|10| 18|9|8|0| The goal is to identify the cells that exclusively contain the number 8, specifically, only the second cell of row 2 and the third cell of row 3. My initial att ...

Styling the borders of Bootstrap divs with precise row and column positioning

I have recently created a jsFiddle that showcases my design. I am looking to place a border between the row lines while maintaining the background color displayed in the jsFiddle. How can I achieve extending the column border line? Here is the HTML markup ...

What is the reason that custom styling for a single react component instance does not function properly?

In my current view, I have integrated a react component as shown below: <Jumbotron> Lots of vital information </Jumbotron> I am looking to give this particular instance a unique style, like using a different background image. However, addin ...

Implementing personalized validation in an AngularJS form

Looking at the form below, I am currently ensuring that an email address is required: http://jsfiddle.net/U3pVM/16994/ My goal now is to enhance the validation process by checking that the first two characters of the email address begin with 'DD&apo ...

What is the method to conceal a certain element in jQuery based on the value of another element?

I am dealing with the following HTML structure: <button id="hideToggle">show/hide</button> <form id="item"> <div>Item 1 <input name="item1" type="number"/></div> <div>Item 2 <input name="item2" type="nu ...

Minimum number of coins required for a specific amount

I need assistance creating a JavaScript/jQuery function to determine the minimum number of coins required to reach a specified total amount. Here is an array object containing different coin values: var coins = [ { pennies: 200, prin ...

Python Selenium - encountering issues with interactability of elements

Trying to complete the form on () is proving tricky for me. When I utilize Javascript, document.getElementsByName("userName")[0].value = "Hello", I am successful in entering text into a form. However, when I apply the same logic in Sel ...

Mastering the art of invoking the right view method in Django

I currently have a project structure with the following files and folders: ... old project new common manage.py ... To access the "old" section, I use the link . Inside this folder, there are views, form urls, etc., which all function properly. Similarl ...

How can I target multiple classes on one HTML element using a CSS selector?

Here is the current state of my code: nav .class1, nav .class2, nav .class3 {property: value;} This is the desired outcome I am looking for (or something along those lines): nav (addition) .class1, .class2, .class3 {property: value;} ...

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

Issue in CakePHP after modifying the directory of Index

I'm currently working on a project using CakePHP and have come across an issue. Our team developed an Ajax function that sends data to a PHP function responsible for adding a folder (known as "ordner" in German) to the database. Initially, everything ...

Tips for implementing a callback refresh function following the presentation of an alert

I am struggling to make this simple password function in jQuery work as I intended. Currently, upon page load, the user is asked to enter a password to access the content of the page. If the entered password is incorrect, an alert pops up indicating so. Wh ...

Retrieving a value from an Ajax response using JQuery

Utilizing Ajax to trigger a PHP script which then sends back an array of data. When implementing the following code: .done(function( response ) { if(response === false || response === 'false') { $('.main-container').css(&ap ...