Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot?

    $(document).ready(function() {
      var is_Clicked = false;
      $("#togglebutton").click(function() {
        if (is_Clicked) {
          $('#myToggleDiv').css('float','left');
          $("#myToggleDiv").animate({
            left: '0%'
          });
          is_Clicked = false;
        } else {
           $('#myToggleDiv').css('float','right');
            $("#myToggleDiv").animate({
                $('#myToggleDiv').css('right','calc(100vw - 40px));
          });
          is_Clicked = true;
        }
      });
    });

    $(document).ready(function() {
      document.getElementById("myText").innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br><br;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
    });
html,
body {
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  height: 20%;
  float: left;
  border: 1px solid;
}

#myToggleDiv {
 position: relative;
  border: 1px solid;
}

#togglebutton {
  width: 10%;
  height: 40%;
  margin-right: 5px;
  margin-top: 5px;
  float: right;
}

@media screen and (min-width: 1366px) {
  #myToggleDiv {
    width: 60vw;
  }
}

@media screen and (max-width: 1365px) {
  #myToggleDiv {
    width: 70vw;
  }
}

@media screen and (max-width: 1024px) {
  #myToggleDiv {
    width: 90vw;
  }
}

@media screen and (max-width: 800px) {
  #myToggleDiv {
    width: 100vw;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myToggleDiv">

  <input type="button" value="Toggle" id="togglebutton">
  <p id="myText"></p>
</div>

Answer №1

That's because the .animate function requires an object as its parameter. To fix this, update your code to look like this:

$("#myToggleDiv").animate({
       'right':'calc(100vw - 40px)'
});

Make sure to keep 'calc(100vw - 40px)'within quotes.

http://jsfiddle.net/100pvu95/40/

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

Eliminating unused CSS space on a website

I am in need of assistance with removing the white space between the border of the Marquee text and the slider image on my website. I realize this may not be the appropriate place to ask, but any help would truly save my day. You can view the issue at . ...

Error message appearing when attempting to add a product to the cart in Magento using AJAX

Encountering an error with the magento 1.8 ajax cart, stating "product not found" The javascript code I implemented: function setLocationAjax(url,id){ var data = jQuery('#product_addtocart_form').serialize(); data += '& ...

Verify Radio Buttons in AngularJS

I thought validating a selection from a radio group would be simple, but I'm struggling to find the right solution. In my form, I need to ensure that at least one option is selected from the radio buttons. Using the 'required' attribute on e ...

Repetitive calling of a Node.js function

Currently, I am developing using the nodejs express framework. On my webpage, there are two buttons: 1) Submit, which triggers the following function: router.get('/record_enrich_quick/:quick', function(req, res) { console.trace(); var j ...

elementToBeClickable is not supported by webdriverio

I am having some trouble with the 'waitForEnabled' function as it does not seem to behave like Webdriver's elementToBeClickable. Is there anyone who can provide some guidance on how to use this API effectively? ...

Opacity animation in IE does not seem to function properly with jQuery

Having an issue with jQuery animation on the homepage of my website. I'm using Drupal views to load content and initially setting the display to none. The goal is to fade in and out each row. Everything functions correctly in most browsers, except fo ...

Using Selenium, effortlessly upload JPEG images through the Selenium webdriver

Sample HTML Code: <form id="frmUploadVisualAsset" enctype="multipart/form-data" method="Post" action="uploadVisualAsset" novalidate="novalidate"> <input id="slideIdForAsset" type="hidden" name="slideIdForAsset"> <input id="course ...

Bug detected in the brfs plugin for browserify

I'm currently working on a project where I need to consolidate all the .html template files into a single bundle.js file by reading the content from each .html file. In my main.js, I have written the following code: var fs = require('fs'); ...

Starting an AngularJS module without an HTML page may seem like a daunting task,

I am currently developing a browser extension project using AngularJS. Within the background.js file (which contains the code that runs in the background), I have created a module with a run block. var myExtensionModule = angular.module('myExtension ...

After being initialized, the added Vue.js DOM elements do not function together

I updated an HTML page with ajax contents and incorporated Vue.js for front-end events. Unfortunately, the dynamically added elements are not interacting with the Vue.js instance, even when I attempted to forceUpdate them. Any suggestions on how to resol ...

Ways to safeguard your API endpoint

Just starting out with Node.js/Express, I'm looking to have my front end retrieve data from an endpoint ('/1') without displaying the JSON data to users when they access that specific endpoint. Any guidance on how to accomplish this would be ...

Sending blank AJAX data to a PHP function

I am facing a challenge where I need to utilize AJAX to send the ID of an element and a specific value (1,2,3) to a PHP document for validation. Despite successfully logging both values in the console, the PHP file always returns that the data is empty. ...

Is it necessary to employ JQuery for populating my second drop down menu when the values match those of the first drop down menu?

Currently, I am working on implementing two drop-down menus that will function as time intervals. The objective is to have the second menu populate with values greater than or equal to the selection made in the first menu when a user chooses a year. Below ...

Crash in the Android WebView of the Galaxy S3 device due to Signal 11 SIGSEGV

My Android WebView is experiencing issues with memory access and crashes on a Galaxy S3 running Android 4.0.4. The HTML5 content includes interactive battles where enemies appear for the user to slash, interspersed with normal HTML pages. Despite the use o ...

Getting to the values within a JSON object that contains multiple arrays

Is there a way to retrieve array data from the json object data? const [data, setData] = useState([]) const getData = () => { axiosInstance .get(url + slug) .then(result => setData(result.data)) } useEffect(() = ...

Enhance the appearance of Font Awesome stars by incorporating a hover effect

Is there a straightforward way to make them turn solid yellow when you hover over them? const styles = theme => ({ root: { flexGrow: 1, overflow: 'hidden', padding: theme.spacing(0, 3), }, paper: { maxWidth: 800, mar ...

Retrieving user input in React by utilizing the onChange event handler

I have been tasked with creating a Quiz App and I am currently working on building it. The app consists of several components such as "question", "question-list", and "add-question". Within the "add-question" component, there is a form that allows users ...

Identifying the method through which a simple modal window was closed, whether it be through an iframe, closeHTML, escClose, or overlayClose

My goal is to utilize simplemodal in order to showcase a form through an iframe. The form has the ability to close the modal and trigger the onClose callback function which refreshes the main screen, updating the displayed information. However, I am lookin ...

What is the best way to calculate the total number of results using ajax?

Encountering an issue with the total count of ajax search results. Getting an error message "Method Illuminate\Database\Eloquent\Collection::total does not exist." when using directives, for example: <div class="searched-item"&g ...

Why is the validate function not being executed in the Backbone Model?

I am a beginner in learning Backbone and I am attempting to implement simple validation in my Person Model. However, I am facing an issue where the validate method does not run when I set a new age. Can someone guide me on where I might be making a mistake ...