Challenges with altering the height of a div through animation

HTML

   <div class="blok1" ></div>
   <div class="blok2"></div>
   <div class="blok3"></div>

CSS

.blok1 {    
    background-color: green;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    position: relative;     
}

.blok2 {        
    background-color: blue; 
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 300px;
    margin-top: -200px;
}

.blok3 {        
    background-color: purple;   
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;    
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 600px;
    margin-top: -200px;
}

Jquery

$(document).ready(function(){
  $(".blok1").hover(function(){
        $('.blok1').stop().animate({'height': '400px'}, 100);

      }, function(){
          $('.blok1').stop().animate({'height': '200px'}, 100);      
      });

  $(".blok2").hover(function(){
          $('.blok2').stop().animate({'height': '400px'}, 100);
      }, function(){
          $('.blok2').stop().animate({'height': '200px'}, 100);
      });

  $(".blok3").hover(function(){
        $('.blok3').stop().animate({'height': '400px'}, 100);
  }, function(){
          $('.blok3').stop().animate({'height': '200px'}, 100);
      });
});

http://jsfiddle.net/dtadesigns/2263p/

When hovering the second and third div it works as intended. However, when you hover over the first div, the second and third div move along with the first one!

I have attempted various solutions but have not been able to resolve the issue.

jqueryhtmlcss

Answer №2

Striving for the most efficient solution, I devised the following approach. Nevertheless, it necessitates modifying the HTML structure slightly:

<div class="wrapper">
    <div class="blok" id="a"></div><div class="blok" id="b"></div><div class="blok" id="c"></div>
    <!-- intentional removal of whitespace between bloks -->
</div>

This adjustment allows for the subsequent CSS styling, employing display: inline-block and vertical-align:top for achieving the desired outcome:

.wrapper {
    white-space: nowrap; // ensures all three bloks align on the same line
}
.blok {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
#a {
    background-color: green;
}
#b {
    background-color: blue;
}
#c {
    background-color: purple;
}

Furthermore, assigning a shared class to the boxes significantly simplifies the JavaScript implementation:

$(document).ready(function () {
    $(".blok").hover(function () {
        $(this).stop().animate({ // current blok is always referenced with $(this)
            'height': '400px'
        }, 100);
    }, function () {
        $(this).stop().animate({
            'height': '200px'
        }, 100);
    });
});

http://jsfiddle.net/2263p/9/

Answer №3

Here is the CSS code you need:

.section1 {    
background-color: green;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height: 200px;
width: 300px;
position: absolute;     
}

.section2 {        
background-color: blue; 
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
position: absolute; 
height: 200px;
width: 300px;
margin-left: 300px;
}

.section3 {        
background-color: purple;   
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;    
position: absolute; 
height: 200px;
width: 300px;
margin-left: 600px;
}

Answer №4

Take note of 2 key aspects regarding:

position:absolute

1. The positioning of an element with position:absolute is relative to the closest parent element that has position:relative.

2. It is advisable to use top, left, right, and bottom properties when using position:absolute to accurately position the element outside of the content flow.

Adhering to proper programming conventions can greatly enhance efficiency in your work.

Check out my solution here:

http://jsfiddle.net/jchnxu/PG69Z/

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

There appears to be an issue with the dynamic functionality of RouterLink in Angular 6

user-dashboard.html <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" routerLink='/dashboard'>User Dashboard</a> </li> <li class="nav-item" *ngFor="let cat of categories; let i = in ...

htmlangulartypescript

Using jqgrid to customize column header tooltips which are distinct from the actual column label

From what I gather, there are multiple methods for setting distinct column header tooltips. At the moment, my approach involves using jQuery's .attr() to set the tooltips. I'm curious if there is a more streamlined way to save the custom header ...

javascriptjqueryjqgridtooltip

CSS footer element refuses to disappear

This sample application features a header, footer, and a content div that includes a table displaying various statistics of basketball players. One issue I encountered was with the footer when there were many entries in the table. This caused the footer t ...

javascriptjqueryhtmlcssjquery-mobile

Transforming JSON into a structured table with the help of jQuery's get() function

I am facing a challenge in parsing the JSON data and converting it into an HTML table. Here is the code snippet I'm working with: jQuery.get("/path/to/json?filter=date&pagesize=25&pagestart=1", function(json) { console.log(json) }): It ...

jqueryjson

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

I am facing an issue with escaping HTML in my Extjs grid. I have used the following configuration : return Ext.String.htmlEncode(value); In the renderer of my column, this method works perfectly for simple HTML tags like h1, b, i, etc. However, if I in ...

javascriptjqueryhtmlextjs

Swapping Header and Footer in Kendo UI

My header and footer seem to be swapped, with the header appearing at the bottom and the footer at the top. I'm puzzled as this is a basic issue. Here is my code: <head> <title>kProduct Details</title> <link rel="sty ...

jqueryjquery-mobilekendo-uitelerikkendo-mobile

Send a distinct input value from a textbox to PHP

I have a dynamic search feature on my website that populates an HTML textbox with search results using AJAX. It's working well so far. However, I want to take it a step further by displaying the text of the article in the textbox while passing the art ...

phpjqueryajaxposttextbox

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

I am currently facing an issue with my table that populates using ng-repeat. The table contains 100 rows, and clicking on any row reveals a new table (using ng-show) with more detailed product information. However, the performance of my web app is being af ...

javascripthtmlangularjsangularjs-ng-repeat

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

After clicking the button, the layout of the table changes. I want to keep the original table layout even after the JavaScript function runs. I am still learning about JavaScript. function toggle(button) { if(document.getElementById("1").value=="Show ...

javascripthtmlcss

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

Trigger event once item is selected from the jQuery combobox dropdown

I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...

javascriptjqueryhtmlformsjquery-ui

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Even though I have specified the width of the Header table to be 100% and applied a margin-right of 1cm for PDF reports with landscape orientation, the table is not taking up the full width. However, when my PDF report has portrait orientation, the header ...

cssruby-on-railswicked-pdf

Sending POST parameters via Jquery POST from a Java Servlet to Javascript

My JavaScript code initiates a POST request on my Servlet. $.post("RecipeServlet", { r_id: r_id, }, function(data, status){ var foo = data.foo; var bar = data.bar; }); Now, the Servlet is expected to work with the received r_id and then send ...

javajavascriptjqueryjsonservlets

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

I have a search form that includes select options with two values. However, I want to have two select options for both the Max and Min price values. <input type="hidden" id="budget_min" name="filter_budget_min" value="0" /> <select onchange="upda ...

javascriptphphtml

Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles ...

htmlcsshtml-table

Is there a way to remove a specific object key from a JavaScript object?

One thing I would like to achieve is transforming a JSON structure. Let's start with an example like this: { "de": { "errors.de.i18n.js": { "errors": { "addcreditcard": "Wir konnten diese Karte nicht verifizier ...

javascriptjqueryjson

A straightforward guide on utilizing data-attributes to achieve a linear-gradient background

considering the following input .prettyRange { -webkit-appereance: none; } .prettyRange::-webkit-slider-runnable-track { background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%); } <input class="prettyRange" type="range" name="cap ...

htmlcssbackgroundgradientcustom-data-attribute

Do not request for this element within the array

I have a function that applies to all elements in an array, except for the currently clicked one. For example: cubesmixed = [array, with, 145, elements] cubesmixed[54].click(function() { for(var i = 0; i < 145; i++) { var randomnumber=Math.flo ...

javascriptjqueryhtmlarrays

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

htmlcsstwitter-bootstrap

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

My current project is stored locally, with a specific directory structure that I've simplified for clarity. What I'm aiming to do is include an external HTML file as the contents of a <header> element in my index.html file without manually ...

javascriptjqueryhtmlload