Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked.

This is the HTML code:

<div id="id1">
  <ul class="nav pull-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown>
        <i class="legend-icon"></i> <b class="caret"></b>
      </a>
      <div id="legend_container" class="dropdown-menu">
        <div id="smoother" title="Smoothing"></div><div id="legend"></div>
      </div>
    </li>
  </ul>
</div>

<div id="in">
   <div id="chart">

    //my data

   </div>
</div>

I have attempted using this jQuery code:

$("i.legend-icon").click(function(){
    $("#chart").animate({width: '-=50px',},"slow");
});

However, it does not seem to be working as expected. The div is not shrinking to -50px. What can I do to achieve the desired effect here?

javascriptjquerycssjquery-animate

Answer №1

Can you provide the CSS code for these elements as well?

If you take a look at my demo on jsfiddle, you'll see that it functions exactly as expected. However, please note that it's not using your specific HTML and CSS, but the functionality should be similar.

<a href="#" class="click-me">click me</a>

<div class="animate-me"></div>


.animate-me {
    width: 300px;
    height: 100px;
    background-color: aqua;
}


$(".click-me").click(function(){
    $(".animate-me").animate({width: '-=50px',},"slow");
    return false;
});

Answer №2

Everything is running smoothly...

You might want to consider using a larger value, depending on the size of your item...

In my case, it's 500px wide and I'm reducing it by 450px...

Check out this example

 $("i.legend-icon").click(function(){
$("#chart").animate({width: '-=450px',},"slow");
});

Answer №3

When defining the container's behavior after shrinking, it is important to provide specific instructions. Animat offers numerous controls for customization:

  ... animate(
                        {
                            "left":<positionafter shrinking>,
                            "width":["toggle", "swing"]
                        },
                        {
                            "duration": 0,
                            "step": function( now, fx ){},
                            "complete": function(){

For further information, refer to the documentation on animating elements.

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

Having trouble with closing the window on Mozilla and Chrome? Keep getting a scripting error message?

To close this window, click <a onclick="self.close();" href="#">here</a>. This is the code I am using. When I submit in Chrome and Mozilla, an error occurs. The error message is: "Script must not be allowed to close a window that was not o ...

javascriptc#jqueryasp.netfirefox

Transferring information to the specified link using AJAX and PHP

I'm having trouble sending data to a link that I click on. Whenever I try, I just end up with an undefined index error in my PHP file. <a href="output.php"> Click me </a> ('a').click(function(){ href = "output.php"; ...

javascriptphpajaxurl

transferring the value of a textbox into another textbox

I am trying to extract the value from one textbox and transfer it to another textbox. Here is my current code: <input type="text" value="Keyword" id="one" /> <input type="text" value="Search" id="two" /> <a href="#" id="btn">button</ ...

javascriptjquery

Having issues with opening an exported Excel file using ExcelJS

While working on my JS project, I utilized the ExcelJS library. Everything was functioning smoothly with English characters. However, when I switched the language of my application to French and attempted to export the content as an Excel sheet, I encounte ...

javascriptexcelexport-to-excelexceljs

Reversing text in mongodb

https://i.sstatic.net/Y61ML.png In my node.js and MongoDB 5 project, I am attempting to retrieve data where the field "TOTAL DUE" has a value other than '$0.00'. I have successfully selected records where "TOTAL DUE" equals '$0.00' usi ...

javascriptnode.jsmongodb

Storing files offline in Firefox 3.5 with file:// protocol

While experimenting with the code for offline storage in Firefox 3.5, I referred to a tutorial on . When the page loads, I am prompted with a dialog asking to store data, but after clicking Allow, the dialog does not disappear. The application functions co ...

javascriptfirefoxfirefox3.5

Animation triggered by scrolling is not functioning/displaying div

I'm attempting to make a div fade up when it enters the viewport by using the library found at https://github.com/michalsnik/aos Unfortunately, all that seems to happen is that the div gets hidden. In the head section of my HTML file, I've refe ...

javascriptjqueryanimation

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

javascriptjquerynode.jsjson

The Vue Router hooks are not being activated within the component when utilizing Typescript

I've been pondering this issue for quite some time. Despite my extensive search efforts, I am still unable to figure out why the route-hooks are not working in my component: 1. The component is being loaded from RouterView: <router-view class="z1 ...

javascripttypescriptvue.jsvue-componentvue-router

An in-depth guide on implementing Highcharts.Tooltip functionality in a TypeScript environment

Currently, I am trying to implement a tooltip activation on click event in Highcharts by following an example from this URL: Highcharts - Show tooltip on points click instead mouseover. The challenge I'm facing is that I am using TypeScript and strugg ...

javascripthighchartstypescript

Display popup depending on the post's identification number

Currently, I'm in the process of integrating Sanity into my blog. Using the json object returned from a query with useState, I managed to display my posts successfully. However, I am now faced with the challenge of populating a React-Modal with the ap ...

javascriptreactjsreact-hooksdynamically-generatedreact-modal

Refresh HTML table when database is updated

My panel has a user table which is populated using the following snippet of Php code : <html> <body> <div id="order_table"> <table> <thead> <tr> <th>Name</th> < ...

phpjqueryhtmlajax

Tips for dynamically including classes in NextJS component with class names from CMS?

I am in search of a solution that will offer some styling flexibility within a CMS to dynamically alter the classes of specific components within my NextJS application. The code snippet I'm working with is as follows: pages/index.js: ... import clien ...

cssreactjsnext.jstailwind-cssserver-side-rendering

A guide on adding specific rows together in a list

I'm working with a grid that contains various items and I want to calculate the total of the val_itemservico column only for the selected rows, not all of them. How can I achieve this functionality? When the user clicks on the "Calculate" button, I n ...

javascriptpythonhtmldjango

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

javascriptjquerycsscarouselowl-carousel

Learning to use Material-UI: Wrapping a list into columns

Currently, I am using Material-UI to display a list of checkboxes, similar to the example shown here. The problem arises when my list contains around 30 items and I am placing them inside a dialog box. I want the checkbox list items to stack vertically up ...

cssreactjsflexboxmaterial-ui

Missing pieces of data | Utilizing React and Redux Toolkit

I'm facing a problem that's keeping me up for almost 24 hours. I just finished coding this slice, but when I submit the data, only the automatically generated ID is returned. Let me explain further - I have a skill component with two input forms ...

javascriptreactjsasynchronousredux

The background extends beyond the confines of its container

I'm facing some challenges trying to create this specific layout, particularly with setting a background that should cover 50% of the screen size. My initial thought was to use an image as the background, but I need different colors for each page. ht ...

htmlcssionic2ionic3

Creating seamless scrolling in ReactJS without any pre-built components

Can anyone guide me on how to implement an infinite scroll in reactJs using a JSON dataset? I prefer building it from scratch without relying on any library. {data?.map((conto) => { return ( <Suspense key={conto._uid} fallback={<p>Loadin ...

javascriptreactjsjsonnext.jsinfinite-scroll

JavaScript: Determine the wild decimal value produced by subtracting two decimal numbers

In the process of creating a service price tracking bot, I encountered an issue with displaying price decreases. Here is an example of what it currently looks like: Service price decreased from 0.10 to 0.05 If you buy right now, you could save <x> ...

javascriptnode.jsregexmath