How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window.

Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes often!

So, I need to center the div after changing its width using jQuery.

I typically use this code for centering:

Unfortunately, when I change the div's width, it doesn't align to the center even after calling CenterItem function again!

In conclusion, I'm looking for something similar to what can be seen here:

jquerycsshtmlcenter

Answer №1

Is there a need to employ JQuery? It seems like CSS has the ability to center objects smoothly, even when they have varying widths that are subject to change.

Check out this demonstration for reference.

Answer №2

To implement the script provided in your link, make sure to invoke the Centeritem function both on the resize event of the element and the window.

$('#ElementsID').resize(function() {
    CenterItem('.centered');
});

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

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

javascripthtmlcsstwitter-bootstrap

Looking to execute a C# method once a jQuery dialog form has been validated

I am facing an issue where I don't know how to trigger a method after filling a textbox and clicking a button in a jQuery dialog. Once I fill the textbox in the dialog, I want to call the "addClient" method in the server-side code (aspx.cs file), whic ...

c#jqueryasp.net

Combining Text in HTML Using CSS to Create Layered Effects

Link to GitHub: http://github.com/user123/code I'm attempting to position "welcome" behind "home", but I've been struggling to achieve this. I've experimented with setting the position, but so far I haven't been successful. Here' ...

css

Make sure to keep "display:inline-block" in place while using fadeTo()

As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specifi ...

jqueryhtmlcssdisplay

Utilizing autosuggest in combination with jQuery ajax consistently generates suggestions with a delay of 1 keystroke

I'm currently working on creating an autosuggest feature for a search box, but I've run into a problem. The suggestions that are displayed don't seem to match the current keystroke input (they keep showing suggestions based on the previous k ...

javascriptjqueryajaxautosuggest

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...

javascriptphpjqueryhtml

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Currently facing a Javascript dilemma where data storage is essential in the following format: MainArray(Array(JavaScript Object, JavaScript Object, etc etc..), Array(JavaScript Object, JavaScript Object, etc etc..), etc etc..) The main array consists of ...

javascriptjqueryjson

Troubleshooting undefined value issue with pagination in AJAX GET request with Laravel

I am currently working on a GET request using AJAX. In my Laravel Controller, I attempted to use "->paginate(5);" and encountered undefined values. However, when I use "->get();", it works flawlessly. Nevertheless, I prefer to use paginate to impleme ...

javascriptphpjqueryajaxlaravel

Leveraging $.ajax() for sending a POST request to a PHP file hosted on a different domain

Is it possible to use $.ajax() for sending a POST request to a PHP file on another domain? I encountered an error message with $.ajax(). It works fine in Chrome or Firefox and sends emails, but in IE, the email is not sent. This is an HTML file <form ...

jquery

Adding color to the header's top section and leaving the navigation bar untouched

A few days ago, I posted a question on this platform regarding customizing CSS related to search forms within Bootstrap. The response I received from Charlie was incredibly helpful in refining the code for my header and navigation elements. You can view hi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

utilizing javascript once form elements are dynamically inserted

While dynamically constructing form elements, I encountered an issue with generating unique IDs when the form is submitted. Everything works fine except for the JavaScript function responsible for populating the year in a dropdown selection. The issue ari ...

javascriptjqueryhtmlforms

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

I need to assign a specific class name to certain BoundFields within the GridView control. This way, after the GridView has been populated with data and displayed, I would like to have something similar to the following: <td class="Tag1">Some data c ...

jqueryasp.netcssgridview

Obtaining template attributes in CKEditor: A guide

I have been working with the template plugin in CKEditor to load predefined templates. Each template is defined as follows: templates: [ { title: "Quickclick 1", image: "template1.png", description: "Quickclick 1 template", html_et: "& ...

javascripthtmlckeditorwysiwyg

Firefox throwing up errors with Cross-Domain Ajax Requests

I recently encountered an issue with a cross domain ajaxSubmit function in one of my views. $(".FileUploadDiv form").first().ajaxSubmit({ success: function (success) { var redirectUrl = "@(Url.Action("CreateRfp"))"; location.href = red ...

jqueryasp.netajaxfirefoxcross-domain

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

"Implementing a show/hide feature for a DIV based on a selected drop-down value using vanilla JavaScript (without any external libraries

I have different tide tables for various locations, each contained within its own div. The user can select a location from a dropdown menu, and when the page loads, it displays the tide table for the first location by default. Upon changing the location, o ...

javascriptphpjquery

The depth order of overlapping elements and the rotation effect achieved through

I have created some interactive flip cards using CSS and HTML with transitions Currently, when you hover over a card, it flips and enlarges. However, I am facing an issue with positioning the hovered card on top using z-index and relative position due to ...

htmlcsscss-transitions

What strategies can I use to make my div content more adaptable to different screen sizes and

Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends ...

javascripthtmlcssbootstrap-4grid

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...

cssreactjslesscreate-react-app