Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this:

<style>

.HIDE-DISPLAY-k {
    background-color: orange;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 10px;
    bottom: 0px;
    left: 10px;
    right: 0px;
    overflow: hidden;
}

#SHOW-DISPLAY-k {
    background-color: yellow;
    position: fixed;
    width: 70%;
    height: 50%;
    top: 100px;
    bottom: 0px;
    left: 10px;
    right: 10px;
    overflow: hidden;
    display: none;
    cursor: pointer;
}

.BUTTON-k {
    background-color: orange;
    position:absolute;
    top: 50px;
    left: 10px;
    cursor: pointer;
}

</style>

I am calling it from a JavaScript file like this

<script type="text/javascript" src="Scripts/sliding_Documents.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(docProperty) {
    docProperty='|FROM_top|width|10|height|1500|top|30|bottom|""|left|500|right|""|'
    sliding_NotePads(docProperty);
    });
</script>
<a class="BUTTON-k" href="#"><button>NOTEPAD</button></a>
<div class="hidden_SHOW-DISPLAY"></div>
<div id="SHOW-DISPLAY-k"></div>


//docProperty is simply an array where I put specific values to use in changing CSS such as width, height.

The JavaScript code in sliding_Documents.js is

function sliding_NotePads(docProperty) {
/*Without clicking, the hide-display-k will be in place and nothing can be seen.
When clicked, the if condition defines how the display appears*/

$('.HIDE-DISPLAY-k').hide()

/*Get the information added to the button to customize the display window*/
$('.BUTTON-k').click(function () {
    var css_changes = docProperty.split("|");

    //this is where I make changes to the CSS
    $("#DISPLAY-k").css({
        width: css_changes[css_changes.indexOf("width") + 1],
        height: css_changes[css_changes.indexOf("height") + 1],
        top: css_changes[css_changes.indexOf("top") + 1],
        bottom: css_changes[css_changes.indexOf("bottom") + 1],
        left: css_changes[css_changes.indexOf("left") + 1],
        right: css_changes[css_changes.indexOf("right") + 1]
    });

    if(css_changes[1]==="FROM_top"|| css_changes[1]==="FROM_bottom"){
     $('#SHOW-DISPLAY-k').css('z-index', 2).slideToggle("slow");
     };

     if(css_changes[1]==="FROM_left"|| css_changes[1]==="FROM_right"){
     $('#SHOW-DISPLAY-k').css('z-index', 2).animate({width: 'toggle'}, "slow")
     };
    });
};

How can I revert the changes made in #SHOW-DISPLAY-k and assign it a new ID or name so that it only affects one element and not others on the HTML page?

Answer №1

It's interesting to see a mix of lowercase and uppercase letters in class and function names. Everyone has their own style, I guess. Moving on!

It seems like using .clone() might be helpful in this situation.

var clonedElement = $('#ELEMENT-ID').clone();

// make any necessary modifications before appending to the document
clonedElement.attr('id', 'NEW-ELEMENT-ID');
$('body').append(clonedElement);

However, I'm not completely sure if I fully grasped your question. Does this code snippet address what you're trying to achieve?

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

Utilizing jQuery to automatically populate fields in an Android WebView when loading a URL

I have been able to achieve the desired output by using the following code in JS: mWebView.loadUrl("javascript:{document.getElementsByName('emailaddress')[0].value = '"+username+"'; document.getElementsByName('password')[0].v ...

Determine if two instances are within the same week, where each week starts on Friday and ends on Thursday, using moment.js

Currently, I'm in the process of developing a Discord bot using node.js and discord.js. One of the features allows users to vote through a command, but I want to restrict them to voting only once per week. The challenge lies in the fact that in this ...

When I try to post using the raw feature in Postman in Node.js, the post ends up empty

My API is supposed to receive data for saving in the database. However, when I call the PUT method, my req.body.nome returns empty. It works fine with form-urlencoded, but I've tried using body-parser and it's deprecated. Here is my request usin ...

The express app is configured to send a 301 status code when Supertest is used, and it is

Hello, I am currently utilizing supertest to test the functionality of my Node.js express server application. My goal is to accomplish the following: let request = require('supertest'); let app = require('./server.js'); request(app). ...

Are toggle functionalities triggered when an element is clicked?

How come the span triggers functions a and b when first clicked, is there a way to set it up so that it calls function a on the first click and then function b on the second click? function a(id) { $.post("url.php", {'id':id}, function() { ...

Switching the input to LTR changes the overall direction to LTR while maintaining the RTL placeholder

The text input is currently set to be RTL, including both the placeholder and the actual input. The settings for this were done elsewhere. My question is how can I modify it so that only the input changes to LTR, while the placeholder remains RTL. For exa ...

I am having trouble retrieving a JsonResult from an asp.net mvc controller using $resource in angular

I am new to Angularjs and trying to integrate it with asp.net mvc. I am facing an issue where I am unable to access an asp.net mvc controller to return a JsonResult using $resource in angular. Strangely, when I use $.getJson in JavaScript directly, it work ...

React's struggle with implementing flexbox functionality

Struggling to implement a calculator using React and flexbox, but running into issues with my flexbox layout. I've attempted to troubleshoot using the Chrome Dev Tools but haven't made any progress. import React, { Component } from "react"; imp ...

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

Can you provide guidance on securing a REST API using Google authentication?

I'm currently working on developing a REST API using NodeJS and Passport for a single-page JavaScript application. I am struggling to find the right approach to securing my REST API with Google OAuth. Can someone guide me on how to achieve this? Any ...

What are different ways to modify a bytearray within a file using angular js, whether it is an .xlsx or other

I received a bytearray response from my API that was converted from a .xlsx file. I now need to open or download this bytearray in the browser after converting it back to its original file extension. Can anyone provide guidance on how to achieve this? I ...

The controller is unable to retrieve the posted value

Whenever I try to retrieve the post value from my controller, it always returns null. Even though I can see that there is a post value present when I check, for some reason, I am not able to access that value in my controller. Does anyone know what the p ...

What is the process for displaying all indexes of a Mongo Collection using MongoDB Node native?

I am curious about how to retrieve all indexes from a specific collection in mongodb. I've tried using listIndexes, indexes, and indexInformation, but these methods only return empty values (arrays and objects). However, when I run db.getCollection(&a ...

Using jQuery to revert back to the original SRC after mouse is not hovering over an element

I've been working on a script to change the src attribute for an icon. The icon I'm loading is a different color and it's meant to notify the user about the link associated with it. Currently, I have the src changing to the second icon on h ...

Are Angular HTTP observables distinct in their behavior in comparison to standard observables?

While experimenting with Angular routing, I decided to utilize an in-memory database to retrieve information about the heroes. The original StackBlitz project can be found here. If you go to the heroes tab, select a hero, and modify their name, you' ...

Troubleshooting: Django update causing issues with CSS background image display

Recently, I made an upgrade to my Django 1.10 (Python 3.5) app to Django 1.11 (Python 3.6). Most of the functionalities are still intact, however, I am facing a peculiar issue where my CSS background images are no longer rendering (even though they work fi ...

Incorporating TypeScript basics into the if statement post compiling

As I delve into the Angular2 Quickstart, I stumbled upon a peculiar issue within app.component.js after compiling app.component.ts using tsc (version 1.8.2): if (d = decorators[i]) I am unable to pinpoint where I may have gone wrong in configuring the qu ...

Learn how to capture complete stack traces for errors when using Google Cloud Functions

In the codebase I am currently working on, I came across a backend service that I would like to utilize for logging all errors along with their corresponding Http statuses. If possible, I also want to retrieve the full stack trace of these errors from this ...

Employing [style.something.px]="2" in Angular to specify the thickness of the border

Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...

Utilizing Jquery and tablesorter in conjunction with PHP to handle the retrieval of

My attempt to use tablesorter for parsing json returned from a PHP POST request is facing issues. Although the POST request successfully returns the JSON data, the tablesorter does not seem to work properly. It appears that only the static table data is ...