Inside this div, I have a single line of text that is not wrapped.
Is there a way to animate the text alignment so that it moves to a specific side or center? I am aware that I could measure the width and use relative/absolute positioning, but I am looking for a more straightforward solution that does not cause responsive issues.
You can view a demo without animations here.
Recently, I encountered a situation where I needed a button with text initially aligned to the right but then smoothly transitioning to the center upon hover or focus.
After exploring various solutions, I devised the following approach. Many of the existing answers focused on animating the "position", which can be inefficient. In my implementation, I chose to utilize only the "transform" property for a more optimized performance. Although the markup might seem excessive for such a simple task, it proved to be effective in achieving the desired outcome.
body {margin: 0}
ul, li {
margin: 0;
padding: 0;
}
li {
width: 30%;
padding: 10px 0;
}
button {
width: 100%;
height: 50px;
margin: 0;
}
.center-line {
position: absolute;
width: 2px;
height: 100%;
background: lightgray;
left: 15%;
top: 0;
}
.outer {
text-align: right;
transition: 200ms transform;
}
.inner {
display: inline-block;
transition: 200ms transform;
}
button:hover .outer {
transform: translateX(-50%);
}
button:hover .inner {
transform: translateX(50%);
}<ul>
<li>
<button>
<div class="outer">
<div class="inner">Text 1</div>
</div>
</button>
</li>
<li>
<button>
<div class="outer">
<div class="inner">Text Two</div>
</div>
</button>
</li>
<li>
<button>
<div class="outer">
<div class="inner">Text Longer Three</div>
</div>
</button>
</li>
</ul>
<span class="center-line" />The text-align attribute is non-animatable, meaning it cannot be used with CSS transitions or jQuery animations. Your most effective approach would involve utilizing positioning (consider using percentage units for responsiveness).
I trust this information proves beneficial...
Perhaps utilizing a JavaScript-created marquee could be beneficial in this scenario? While the <marque> tag may not be ideal, a JavaScript marquee might be more suitable.
Marquee (with optional start/stop buttons)
Update: After realizing that a marquee may not be the optimal solution for your requirements, I have devised another approach using margin-left and adjusting its value.
The value for the right button would vary depending on the length of text present, but you can always determine the width by checking elements width and making adjustments in the code. I have made modifications to the fiddle with this alteration in mind: final Fiddle
Having trouble with aligning code within floated divs? In my left div, a span and image are stuck at the bottom left, while in the right one, text is fixed to the top-right. Check out how it looks currently. If you can provide some guidance on fixing thi ...
My webpage is filled with inline-block divs that are contained within a larger div like so: <div class="container"> <div class="text">Text 1</div> <div class="text">Text 2 ... rest of the nu ...
I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...
I am facing an issue with my ItemsControl where the child items are not occupying the whole width of the control: My goal is to stretch the green bits to fill the width of the control, similar to how the blue bits are shown. I have attempted adjusting th ...
I followed a tutorial from w3schools to create a custom task list, tweaking the code to fit my requirements. My goal is to ensure that when I click the save button in the toolbar at the top and then refresh the page, the added tasks are preserved. I&apos ...
When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...
Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...
My Background My experience lies primarily in PHP rather than modern CSS, particularly Media Queries. This has left me feeling uncertain about how to effectively troubleshoot CSS layout issues. Currently, I am working on developing a user dashboard templ ...
I'm having trouble figuring out how to insert a button into a link_to_add_fields, like this: <%= link_to_add_fields "Add Another Item", f, :items %> while working on my Rails App. I've attempted to include class: "btn btn-mini btn-info" ...
Despite having code that appears to be correct, I am consistently receiving an [$injector:modulerr] error when working with AngularJS. Check out the updated Fiddle here. I can't seem to figure out what the issue is. Could I be missing something obvi ...
I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...
Has anyone ever tried to send an email with a link that, when clicked, triggers an ajax call to their server? For example, if I sent an email to a Gmail address and the recipient clicked a link in the email, could it make an ajax call to my server? Would ...
I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...
I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...
I have a website in progress and I'm facing an issue with my navbar distorting when I zoom in. As I increase the page's zoom, the navigation buttons start moving apart and eventually overlap each other. How can I prevent this from happening? Belo ...
When the navbar is in a fixed position, the margin top of the logo doesn't work correctly. The attached image shows that when scrolling down, it disappears https://i.sstatic.net/JNog6.jpghttps://i.sstatic.net/S5AJ5.jpg <div class="container"> ...
Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...
I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...
<div className="row align-items-center justify-content-center"> <div className="col-md-3 mt-3"> <div className="card bg-light"> <div className="card-img-top"> <N ...
I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...