Enabling the "visible overflow" feature in my animation

Apologies if the terminology in this question is not quite on point - I'm struggling to find the right words.

I've got a collection of circular divs styled with CSS, displayed in a row. When these circles are clicked from left to right, they animate by "popping up" - quickly enlarging and then shrinking back to their original size.

The animations work correctly, but the issue is that when one circle is animated, it causes the entire row of divs (circles) to shift along with it. I want the animation to make it appear as though the dots are all on a straight line (imagine a train track), enlarging and shrinking without moving the row.

I attempted to wrap all the dots in a single div wrapper, which did not solve the problem. I also experimented with adjusting the animation settings, specifically overflow. How can I resolve this complication?

Check out the JSFiddle link here

jquerycssanimation

Answer №1

Check out this http://jsfiddle.net/sajith/65JEq/ to see the changes made from relative to absolute positioning.

HTML

<div id='dots'></div>

Javascript

$(function () {

    var gCurrentDot = 1;

    var str = '<div id="1" class="full-circle"></div><span></span>';
    for(var i=2; i<=10; i++) {
        str += '&#8213;<div id="'+(i)+'" class="full-circle"></div><span></span>';
        $('#'+ i).css({left: i*10});
    }
    $("#dots").html(str);

    $('.full-circle').click(function() {
        $('#'+ gCurrentDot +'').addClass('full-circle-green').animate({height: "30px", width:"30px",marginLeft:"-10px",marginTop:"-5px"}, {duration: 200, complete:function() {
            $(this).animate({height: "10px", width:"10px",marginLeft:"0px",marginTop:"5px"}, {duration: 200});
        }});
        gCurrentDot++;
    });
});

CSS

.full-circle {
 background-color: rgba(51, 51, 51, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 margin-top:5px;
}

.full-circle-green {
 background-color: rgba(11, 227, 0, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
}

#dots span {
    width: 20px;
    height: 20px;
    display:inline-block;
}

Answer №2

I totally agree with @sajithnair, so the solution is to implement absolute positioning.

You can see an example here.

Just like this, I have utilized absolute positioning and it worked perfectly. All you need to do now is add a hyphen between the dots.

Simply update your CSS like this:

.full-circle {
 background-color: rgba(51, 51, 51, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 top:5px;
}

.full-circle-green {
 background-color: rgba(11, 227, 0, 100);
 border: 5px solid #333;
 border-radius:50%;
 height: 10px;
 width: 10px;
 -moz-border-radius:15px;
 -webkit-border-radius: 15px;
 display:inline-block;
 position:absolute;
 top:5px;

Answer №3

Include CSS Styles

.test{ position:absolute;}
.wrapper{ position:relative}

HTML Markup

<div class="wrapper">
  <div id="1" class="full-circle"></div>&#8213;
  <div id="2" class="full-circle"></div>&#8213;
  <div id="3" class="full-circle"></div>&#8213;
  <div id="4" class="full-circle"></div>&#8213;
  <div id="5" class="full-circle"></div>&#8213;
  <div id="6" class="full-circle"></div>&#8213;
  <div id="7" class="full-circle"></div>&#8213;
  <div id="8" class="full-circle"></div>&#8213;
  <div id="9" class="full-circle"></div>&#8213;
  <div id="10" class="full-circle"></div>
</div>

Add a New Wrapper Division

Javascript Function

var gCurrentDot = 1;

$('.full-circle').click(function() {
   var pos = $('#'+ gCurrentDot +'').position();
   var posLeft = pos.left;
   var posTop = pos.top; 

   $('body').append('<div class="full-circle-green test"></div>');
   $('.test').css('left',posLeft).css('top',posTop).animate({height: "30px", width:"30px"}, {duration: 200, complete:function() {
        $(this).animate({height: "10px", width:"10px"}, {duration: 500});
    }});

         setTimeout(function () {
             $('.test').remove();
            $('#'+ gCurrentDot +'').addClass('full-circle-green');
             gCurrentDot++;
        }, 500);

});

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

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

Conceal the button once the page has been converted to an HTML format

Located at the bottom of the HTML page is a button that triggers an onClick function. Since the page only contains internal CSS, when users save the page (by right-clicking and selecting Save As) as an HTML file, it is saved without any additional folders ...

javascripthtmlcss

Submitting form data via Ajax without refreshing the page

I am trying to submit my form using Ajax without refreshing the page. However, it seems that the $_POST values are not being picked up. I don't receive any errors, but I suspect that my form is not submitting correctly. HTML Form <form action="" ...

javascriptphpjqueryajaxforms

After refreshing the page, users are redirected back to the login page

On my website, I created a main page and an index.html page that redirects to the main page through a login panel. The issue I am encountering is that when I log in successfully on the main page and then refresh the page, it takes me back to the login pag ...

javascriptjqueryhtmlcss

Achieving perfect center alignment for the middle element with flexbox

When it comes to the layout below, my objective is to always keep the middle item centered within the container div. This means that the left and right items should be aligned to the far left and right of the container respectively. The current styling fo ...

htmlcsssassflexboxstyling

Validation is not being applied to the radio button

Link: Issue with Form I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order Unfortunately, the script is not functioning as intended on the first link. The Java ...

jqueryhtmlcss

Using jQuery to transfer data via POST method

I'm currently working on integrating a third-party tool into our website. The tool requires the use of a form with the post method to send data to their site. Is there a way for me to replicate this action without relying on the form tag? I am not ver ...

javascriptjqueryhtml

Clicking on elements within a Scrollview does not work when the Scrollview is set to an

Currently, I am facing an issue with my Scrollview as its children are not clickable despite having a position of absolute. Click events seem to just pass through them and interact with components below. I have searched extensively for a solution online, b ...

cssreact-nativescrollview

Steps to create spaces between the bootstrap cards

Just diving into Bootstrap and attempting to incorporate images as cards, I encountered a challenge where the cards were piling up one after another without any spaces between them. Below is the code snippet utilizing Bootstrap4: <body> <div class ...

csstwitter-bootstrapbootstrap-4

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

javascriptjqueryhtmlcsshover

What is the best way to display JSON within a partial?

Within my Rails app, I have implemented a JavaScript graph. Whenever I click on a circle in the graph, it displays the name of the corresponding user. Now, my goal is to retrieve additional information from the related database table based on this user&apo ...

javascriptjqueryruby-on-railsjson

Challenges with the "//" syntax in UNIX

$('#lang_choice1').each(function () { var lang = $(this).val(); $('#lang_files').empty(); $.ajax({ type: "POST", url: '< ...

javascriptjqueryajax

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Can Modernizr and jQuery be combined to create a transition effect similar to CSS3 if it's not supported? My current approach looks like this... <div class="hoverable"> <p>This div changes both width and height on hover</p> </di ...

javascriptjquerycsstransition

Is there anything incorrect or lacking in the Struts 2 jQuery tag?

Beginner in Struts 2 jQuery, Seeking Help <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="/struts-jquery-tags" prefi ...

jquerystruts2struts2-jquery

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

javascriptcssreactjsnext.jstailwind-css

Flowing vertically and horizontally while adjusting line height within the <small> HTML tag

While working on the typography for my new website, I encountered an unusual issue with the <small> tag. It seems to be messing up the line-height, unlike other elements like heading tags and paragraphs. Here's a visual representation of the pr ...

htmltagsvertical-alignmentcss

What is the best way to showcase several divs, along with their respective child elements, in an inline format?

I am struggling to get 4 div sections to display side by side by using the following CSS for the parent div: .parent { display: inline; } <div class="parent"> <div class="child"> <ul> <li>t ...

htmlcss

What is the significance of vh and percentage values in CSS?

Can anyone help me figure out why the .navbar is not displaying correctly on half of the screen? I think there might be another container causing the issue, but I'm unsure. I've set the body to 100vh to cover the entire screen The .navbar ...

htmlcssdjangobootstrap-4

What is the best method for converting a string picture URL into an image and showcasing it in an image tag?

I have a URL for an image that looks like this: C:\inetpub\MaujApp\OMSAPI\ManualReceivingImages\WhatsApp Image 2021-03-24 at 12.07.41 PM.jpeg My goal is to convert the original image and display it to the user using jQuery. I woul ...

javascriptc#jqueryasp.netajax

Measuring the pixel distance of scrolling on a page with overflow hidden

I am trying to implement a functionality where a class is toggled for the body element on a page with hidden overflow and single screen, based on the amount of scroll. However, there is a challenge: the scrolling behavior involves animation rather than act ...

javascriptjqueryhtmlcssscroll