Cannot modify CSS Position once it has been appended

I have a dilemma where I am appending code from one document to another. After the code is appended, I attempt to set the position of the newly added item using jQuery drag and drop functionality. The positions are stored in an array and then saved in a cookie. Upon refreshing the page, I retrieve the cookie data and try to set the position based on that.

So far, everything seems to be functioning smoothly except for the final part. When I refresh the page, the element does not revert back to its saved position.

Here's the JavaScript snippet:


$(document).ready(function() {
    checkApps();
    checkpositions();
});

function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);

        $("#TimenDate").css({top:Pos[0].top, left:Pos[0].left});
        $("#User").css({top:Pos[1].top, left:Pos[1].left});
        $("#Weather").css({top:Pos[2].top, left:Pos[2].left});
        $("#facebooka1thd").css({top:Pos[3].top, left:Pos[3].left});
    };
};

// More functions here...

The content of 'facebooka1thd' document:


<style>
.facebooka1thd {background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;}
.AppHeadfacebooka1thd img {
    height:24px;
    width:24px;
    padding:0;
    margin:1px 0 1px 0;
    float:left;
}
.AppHeadfacebooka1thd h1 {
    height:26px;
    padding:2px 0 2px 0;
    margin:0;
    font:bold 15px/22px 'Arial Narrow',Arial,Sans-Serif;
    float:left;
}
</style>

<!-- Content of facebooka1thd -->

The main document it gets appended to:


<html lang="en">
<head>
    <meta charset="UTF-8">

<!-- Include necessary scripts and stylesheets -->

</head>
<body id="FullScreen">

    <section id="AppBox">
        <div class="AppList"></div>
    </section>

I'm scratching my head as to why it's not working...

Answer №1

My understanding is that in order to achieve the desired outcome, you will need to invoke checkpositions() within the callback function of your getFacebook() $.get method, following the execution of $('.AppList').append(data);

Currently, both checkApps() and checkpositions() are being called simultaneously. However, for the functionality to work as intended, checkposition() should only run after the new elements have been created.

Answer №2

Utilizing jQuery enables the placement of elements at specific positions by implementing position:relative or position:absolute. Prior to adjusting their coordinates, it is essential to make sure that the elements are draggable.

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

Tips on converting HTML code into a data image URI

My question may seem unconventional, but here is what I am trying to accomplish. I want to create a design similar to the one found at the following link: I would like to embed text with an image and retrieve the data image URL using Ajax. I know how to g ...

Creating a responsive image within a panel using Bootstrap

I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using r ...

Adjusting the bootstrap class styles

I'm brand new to Bootstrap and currently in the process of learning how to use it. I have a question regarding the customization of Bootstrap classes. Specifically, I would like to modify the border size and color of certain classes. In order to ac ...

Non-responsive behavior triggered by a button click event (JavaScript)

Help needed with displaying results on the same page for an online calculator I'm creating. Why are the results not showing up as expected? I want users to input 4 pieces of information, have the logic executed, and then display the answers below th ...

Can anyone provide tips on utilizing the .parent() method to generate a button that is exclusively associated with a single <div> element?

I'm working with the FullCalendar jQuery plugin and I'm attempting to create a 'weekends' button that will toggle weekends in the calendar display. The challenge I'm facing is that I have multiple calendar views on the same page, a ...

Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project. Take a look at my tailwind.config.ts: export const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { ...

using only css, create a centralized navigation bar without a fixed width

I managed to create a nav bar in the center (check out the link below), but for some reason there is a slight 2-3 pixel gap between each navigation element. Even though I have set both Margin and Padding to 0, the issue persists and I am unable to solve it ...

Struggling to Make Div Refresh with jQuery/JS in my Rails Application

I'm currently facing an issue in my Rails app where I am unable to refresh a specific Div element. The Div in question is located in bedsheet_lines_index.html.erb <div id="end_time_partial" class="end_time_partial"> <%= render :partial ...

Modifying content on links that are dynamically created

I have some dynamically added link elements that are initially hidden from the page. These links are generated by a third party telerik control, and I need to change the text of these links using jQuery. I have created a rule (selector) that targets the ...

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

On my webpage, I have a list of items that are constantly being updated via a WebSocket connection to the backend. Each time a new item is added to the list, I would like it to be displayed with a background color transition lasting only a brief moment. ...

Retrieving parameter values from href using jQuery

Script <a href="#?cat=MT&typ=1" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due today</a> <a href="#?cat=MT&typ=2" data-reveal-id="reveal_popup" on ...

Ways to trigger an alert box following a link click

Hey there, I'm looking to display an alert box after a user clicks on a link. The link directs to a PHP page and then returns to the original page. Any ideas on how I can make this happen? I've tried the following code, but it's not working ...

What is wrong with my notecards that they won't flip properly?

I am currently developing a text-to-flashcard program using HTML, CSS, and JS. One feature I'm working on is the ability to flip all flashcards at once with a single button click. Currently, the program only allows flipping from the back face to the f ...

Problem with Chrome Compatibility for Bootstrap Carousel

My webpage features a carousel implemented as a slider. It seems to be working fine in Firefox and mobile browsers, except for Chrome where it doesn't show up at all. I can't seem to figure out what's causing the issue. Here is the syntax I& ...

Monitor the latest website address being typed into the browser

Is it possible to track the new URL entered by a user in the browser when they leave the current page using the onunload event? For example, if a user is currently on www.xyz.com/page1.aspx and then types a new URL into the browser, I want to capture that ...

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

Creating a loop in a column-based carousel without using JavaScript

I'm currently working on developing a carousel using JavaScript or jQuery. I've attempted the code snippet below, but I'm having trouble getting it to display in 3 or 4 columns. While I understand that Bootstrap can handle this easily, I&apo ...

Dynamic HTML and CSS Table Alignment Techniques

Issue Screenshot: Is there a way to properly align the right column of the table, particularly the Student NRIC row and School's? .formstyled { width:70%; margin-left:5%; } .formstyled input[type=text],input[type=password],text ...