Instead of a single click, try double-clicking on the sidebar

My left sidebar is causing me some trouble. I want it to populate when clicked, but in my code, I have to double click on the "show menu" button to display the menu. What am I doing wrong?

       $(document).ready(function () {

       var slider_width = $('.menucont').width(); //automatically get width
       $('#pollSlider-button').click(function () {
           if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
               $('.menucont,#pollSlider-button').animate({
                   "margin-right": '-=' + slider_width
               });

               $(".menucont").show();

               $(".showmenu").css("display", "none");
                               $(".hidemenu").show();



           } else {
               if (!$(this).is(':animated')) //prevent double click from doubling margin
               {
                   $('.menucont,#pollSlider-button').animate({
                       "margin-right": '+=' + slider_width

                   });
                   $(".showmenu").show();

                   $(".menucont").hide();
                   $(".hidemenu").css("display", "none");

               }
           }


       });
   });

I also have a fiddle URL: http://jsfiddle.net/6834Y/

Any help would be greatly appreciated.

Answer №1

To properly adjust your div, follow these steps:

<div id="pollSlider-button" style="margin-right: 77px;">

Instead of:

<div id="pollSlider-button" style="margin-right: 0px;">

View the working example here: http://jsfiddle.net/exampleuser/1234ABCD/

Answer №2

Upon the initial click

$(this).css("margin-right")

Returns a value of 0, triggering the else block where the following code executes:

$('.menucont,#pollSlider-button').animate({
                   "margin-right": '+=' + slider_width

               });

Resulting in the menu showing up upon the next click.

You can modify the if statement as shown below:

if (($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) || $(this).css("margin-right") == "0px") 

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

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

JSON object fails to iterate with ng-repeat

It must be the scorching temperature... Having a json object that I'm eager to loop through using ng-repeat, it should be straightforward, but alas! it's just not cooperating. Here's the HTML snippet: <a data-ng-repeat="x in template.m ...

What is the process for incorporating an additional input in HTML as you write?

I am looking to create a form with 4 input boxes similar to the layout below: <input type="text" name="txtName" value="Text 1" id="txt" /> <input type="text" name="txtName2" value="Text 2" id="txt" /> <input type="text" name="txtName3" valu ...

The v-menu closes before the v-list-item onclick event is detected

I have set up the following menu using vue and vuetify: <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> ...

Facing difficulty in creating the Django JavaScript i18n catalog

Currently, I am attempting to create the JS catalog in order to translate my JavaScript strings. Following the documentation, I am doing the following: $ django-admin.py makemessages -d djangojs -l de processing locale de CommandError: errors happened wh ...

Obtaining the address and port in Express.js without interrupting the execution

Despite reading numerous guides on Nodejs and Expressjs, I still struggle to grasp the concept of how it all comes together: Consider this simple Hello World application using Express.js (excerpted from http://expressjs.com/starter/hello-world.html). va ...

What is the best way to pass a mask without using a plug-in when dealing with an input value in Vue.js?

As someone who has previously implemented the function using pure JavaScript, I am now faced with the challenge of incorporating it into vue.js and determining which lifecycle hooks are best suited for this task. This issue arises as I am a beginner prepar ...

Guide to saving an http response as a file and automatically retrying on a 503 error

When it comes to piping the response of an http request to a file, the process is pretty straightforward: http.get(url, function (res) { var file = fs.createWriteStream(filename) res.pipe(file) file.on('finish', function () { file.clos ...

Modify the color of an Ionic button for a single button, rather than changing the color for all buttons

How can I modify this code so that only the clicked button changes its color, not all of them? Here is the current code: .html: <ion-col size="6" *ngFor="let data of dataArray" > <ion-card> <ion-card-header> ...

Tips for updating images automatically

I have a HTML file where I display images on a popup window using the code below: <div id="divCheckbox" style="display: none;"> <a class="fancybox" rel="gallery01" title= "BONOS ALQUILER 2/6" href="eventos/Bonos_alquiler.jpg">o ...

Is there a way to retrieve all the selected values from multiple select inputs when a button is clicked in React?

I am currently working on developing a questionnaire where the select inputs' values are collected and averaged to generate a final score. Although it may sound simple, I'm facing difficulties in retrieving these values. At this point, my primary ...

How to Send Hidden Input Element Values to Controller?

On my ASP.NET MVC page, I have multiple hidden input elements that store integer values. They can be found using the selector $('table#ratings input[name=newReviewRatings]'). I'm wondering if it's feasible to use $.post() to send the i ...

Astro component experiencing script tag malfunction within content collection

I'm trying to create something using a script tag, but for some reason the script doesn't seem to be working properly. Below is my content collection: --- title: Essay Similarity stakeholder: THESIS articleDate: 05 Feb 2023 projectStart: 2022-08 ...

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

Why does my paragraph consistently fall behind my button no matter what?

Whenever I resize the window, the text in my footer overlaps with my button: Any suggestions on how to resolve this issue? Here is the HTML code snippet: <div data-role="footer" class="footer2"> <a href="#seiteHome" class="ui-btn-left ui-bt ...

Is it possible to make AJAX requests in the same domain without using cookies?

It's interesting how Google and Twitter autosuggest tools utilize lightweight AJAX requests that do not include any cookies. I'm curious about how they accomplish this. I've researched methods such as CORS, but those seem to be limited to re ...

Angular template src variable issue with no solution in sight

The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...

In express.js, cookies automatically expire upon the browser being closed

When working with express.js, I typically set cookies using the command: res.cookie("name", "value"); However, upon closing and reopening the browser, I noticed that the cookie is no longer there. Could someone advise me on how to mak ...