I'm currently using the code below, but I am not satisfied with the margin adjustment achieved by text-align:center;. Is there a way to smoothly transition the text alignment to center similar to how it is done in the following snippet of code?
if ($(".resource-section").hasClass("resource-section--expanded")) {
$(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}
If you're looking to center an element horizontally, there's a nifty technique that can help you achieve just that.
And the best part? You can even add some animation to it using only CSS!
.centered-element {
position: absolute;
transform: translateX(0%);
left: 0%;
animation: centerAnimation 2s infinite;
}
@keyframes centerAnimation {
0%, 10% {
transform: translateX(0%);
left: 0%;
}
90%, 100% {
transform: translateX(-50%);
left: 50%;
}
}<h1 class="centered-element">CENTERED ELEMENT</h1>To apply animation for center alignment using the margin-left property, follow these steps:
let headingWidth = $('h1').width();
let parentWidth = $('.container').width();
$('h1').animate({'margin-left':(parentWidth/2 - headingWidth/2)}, 1500);.container {
border: 1px solid black;
height: 100px;
}
h1 {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Your Text Here</h1>
</div>It seems that to utilize the text-align:center property, you can use the following code snippet for help, however, keep in mind that the text-align property is not animatable
$(function(){
$('.resources_header h2').click(function(){
$(this).toggleClass('align-center');
});
});.align-center{
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>One issue with this approach is the lack of animation. If you're looking to animate from left to center, consider the following alternative:
$(function(){
$('.resources_header h2').click(function(){
var windowHalfWidth = $(window).width()/2;
$(this).css('position','absolute');
var elemHalfWidth = $(this).width()/2;
var left = windowHalfWidth - elemHalfWidth;
$(this).animate({
marginLeft: left
},"slow",function(){
$(this).css('position','static');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>I am looking to implement a factory in my REST Controller that will return an array of Strings. I want to be able to reuse this function in my services.js file. Here is the HTML for an Autocomplete input field: <input type="text" ng-model="vertrag.ver ...
Here is a function that I have, which was mainly borrowed from the solution to another problem on SO: function sendPostRequest(url, data) { request( { url: url, method: "POST", json: true, body: data }, function(error, response, body) ...
Having trouble with two custom dropdown lists that share the same markup. Ideally, only one should be visible at a time. However, both are currently opening simultaneously. Additionally, I need them to close when clicking outside of the list. It's ne ...
I've exhausted all the current configuration options and I'm still unable to resolve this issue. My goal is to have the style tag appended to the selected element without generating an additional span. For example: <p>Hello World!</p> ...
I am attempting to use before and after pseudo-elements for a parallax effect on my div element <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_ima ...
Consider this scenario, where I have a component created in SFC format: // Parent.vue <template> <div> {{ txt }} </div> </template> <script> export default { name: 'ParentComponent', data() { return ...
I am currently in the process of customizing a WordPress plugin that utilizes a front-end form powered by ajax/jquery to submit entries to various logs. My goal is to incorporate an extra field, pass its value to the .js file, and submit this additional in ...
Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...
I am facing a challenge in handling an empty route parameter when a path is not specified. My intention is to return a new date if the route parameter is empty. However, the server's response so far is: Cannot GET /api/timestamp/ app.get("/api/timest ...
This question is in relation to a previous query about arranging 3 arrays to correspond with each other. After creating my objects, I am now attempting to push values into their respective arrays based on JSON data received. let objName = ["object1", "obj ...
I've been facing various challenges with Node and databases lately, hence the numerous questions I've posted here recently. Here's some background: I have an Electron app with an AngularJS frontend. On the electron side, I run an express s ...
As a beginner in creating meteor apps, I am working on a project that involves querying git issues from a specific repository. The goal is to generate tasks from these issues after retrieving them using the Github API. However, I keep encountering an error ...
I have been given a design that is 960px wide and approximately 7000px tall, divided into five segments stacked vertically at random points. There is a fixed sidebar that scrolls to each segment when a navigation link is clicked. The layout includes slider ...
I am facing an issue with sending state values from parent to child components. Initially, the state value is empty but after making an API call, the state value gets updated. However, the props in my child component are still stuck with the initial empty ...
I am in the process of creating an e-commerce website using Magento for a client. The issue I am facing is that when I include a configurable product as a related item, it displays the product but without a checkbox. From what I have researched, Magento do ...
My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...
Is there a way to change the class of a li element in a PHP view after it has been clicked? <ul> <li> <a href="<?=base_url()?>home" id="home" onclick="select_class('home');" class="shortcut-dashboard" title="Home">Home& ...
Here is the current progress I have made: from django.views.generic import View from django.views.decorators.csrf import csrf_exempt class ConfigurationView(View): @csrf_exempt def dispatch(self, *args, **kwargs): return super(Configurati ...
As someone who is relatively new to Jquery and Javascript, I have been attempting to search for a solution to my question on this platform. However, it seems that the terminology I am using may not be accurate enough to yield relevant results. If there is ...
Transitioning to TypeScript from plain old JavaScript is a step I'm taking because I believe it offers significant advantages. However, one drawback that has come to light is that not all attributes are typed, as I recently discovered. For instance: ...