Dynamically manipulate the z-index of elements by adding or removing CSS styles

$('.sn').css({'z-index':'-1000'});
(hiding the entire group) upon loading the whole class. From that class, I want to either show or apply css 
$('#item1').css({'z-index':'1000'});
(showing only one from the group) dynamically when clicking on an element, but this is not working as expected. Can anyone please assist me? When using hide() and show() methods, everything works fine.

//on click ..
$(document).on('click','#slider1prev',function(){   

    selected = selected-1;

    if(my_text != ""){
        $('#noteImage'+selected).css({'z-index':'1000'});
        $('#noteText'+selected).css({'z-index':'1000'});
    }

});

//onload..

$('.sn').css({'z-index':'-1000'});
$('.notes').css({'z-index':'-1000'});
jquerycssdynamic

Answer №1

Have you considered utilizing the show() and hide() methods instead of adjusting the z-index property? Z-index specifically alters the stacking order of elements and only functions on those that are positioned. Therefore, if you intend to use z-index, ensure the elements are either set to absolute or fixed positioning.

For more information on z-index, visit here.

Rather than just setting the z-index:

.css({'z-index':'1000'});

You can instead:

.css({'position': 'absolute', 'z-index':'1000'});

or

.css({'position': 'fixed', 'z-index':'1000'});

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

JS for accessing Meteor templates through the DOM

This is a meteor template I created: {{#each p}} <div class="cpl"> <div class="chat-post"> <li class="post"> <div class="nm" id={{_id}}> <a>{{username}}</a> </div> < ...

javascriptjquerymongodbmeteor

jquery version 1.8 includes support for case-insensitive searching using the "starts with

Currently seeking a plugin/extension for jQuery's :contains selector that is case insensitive and only matches words starting with the specified text. The goal is to prevent 'account' results when searching for 'count' specificall ...

jquerycontainscase-insensitivestartswith

Updating the source of an iframe when the linked file is modified or updated

Currently, I am in the process of developing a page named live_link_frame.php. This page includes loading an iframe through a URL retrieved from a local file called live_link.txt: <?php $filePath = 'live_link.txt'; $handle = @fopen($filePath, ...

javaphphtmljquerydom

Displaying Text on Mouseover with JQuery

I have created a unique set of graphs that unveil hidden text when hovered over with the mouse. To start, I carefully outlined the layout of my text: <article class="fundamental_metrics"> <h2>Fundamental Metrics</h2> <p id="nu ...

javascriptjqueryhtmlcssd3.js

Alignment issue with column headers in Bootstrap Table

https://i.sstatic.net/nKtgx.png <table class="table"> <thead> <tr class="d-flex"> <th class="col-0">JOB ID&l ...

cssbootstrap-4

Passing array data from JavaScript to PHP using POST method in Joomla 3.x

Looking for a way to send an array from JavaScript to a Joomla 3.x PHP file? var data = ['foo', 'bar']; $.post('index.php?option=component&view=componentview&Itemid=123&tmpl=component&layout=xlsx', {'xls ...

javascriptphpjqueryjoomlajoomla3.0

How to use JavaScript to hide an element (field) in XPages

In XPages, I understand that only editable fields are able to retrieve values from context. My question is: how can I hide a field using CSS or JavaScript in XPages while still being able to get its value from the context? Many thanks ...

javascriptcssfieldhidexpages

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

How can you set up an interval to automatically restart after it has been cleared?

I am currently developing a slideshow that automatically starts when the page is loaded and stops when someone presses the prev/next buttons (clearInterval). My issue is that I want the interval to restart after some time once it has been cleared. I attemp ...

javascriptjqueryslidersettimeoutslideshow

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Is it possible to implement a fade in and fade out effect for the supersized loader element with the ID of #supersized-loader?

My experience working with jQuery is limited, but I can usually navigate through tasks. However, a current project requires the 'preloading' image to fade in and out before the slideshow sequence starts. I noticed the code in the 3.2.7 JS file th ...

jqueryfadeinfadeoutsupersized

How can we begin to create this dynamic animation?

Can someone help me figure out how to create an animation effect similar to the one seen in this link? I have some basic knowledge of css and html5, but I'm not sure where to start. Is this done with css, html5, plugins, or something else? I am looki ...

csshtmlweb-animations

A layout featuring three columns with two collapsible navigation menus on the left side

An Overview of My Current Project My ongoing project involves a webpage layout consisting of three columns arranged from left to right as follows: Project List Code Details Code Window The Project List and Code Details columns are set with a max-width ...

htmlcssbootstrap-4

Fade out the notification div when the user clicks anywhere outside of it

I am currently working on a website with a notification feature. When the user clicks on the notification button, a notification box will appear at the bottom of the button. I would like the behavior of this notification to be similar to Facebook's - ...

javascriptjquery

Is it possible to display two PrimeFaces growl components on a single page with distinct positions?

How can I place several p:growl components on the same page in different positions - one on the left, one on the right, and one in the center? When I try to override the style for each growl individually, it affects all of them like this: <style type= ...

cssjsfprimefaces

Significant memory leakage in JavaScript

Hey there! I'm currently working on developing an event calendar using jQuery for the front-end and PHP for the back-end. All the calendar data is generated with PHP and then sent to the client in JSON format. Take a look at this simplified code snip ...

javascriptjqueryjsonmemory-leaksclosures

What is the method for adjusting a "column" of spans to align with the right side?

I need help with aligning the first "column" of spans to the right using only spans instead of divs. Here is the link to my fiddle: http://jsfiddle.net/f6a01v9a/1/ <h4>How to align first "column" of spans to the right?:</h4> <span style=" ...

htmlcss

An error has occurred: the variable chart.axisX is not defined

I am in search of the maximum and minimum points on the X-axis of a CanvasJS chart. The code snippet can be found at: https://jsfiddle.net/canvasjs/zxrkh502/ The relevant code for this task is as follows: var axisXMin = chart.axisX[0].get("minimum&quo ...

jquerychartscanvasjs

How to center a div within another div with percentage-based height and width dimensions

I am struggling to vertically align a div within another div in order to create a play button for a video. I have attempted various traditional methods of vertical alignment and even tried using a jQuery script, but so far have been unsuccessful. EDIT - T ...

jqueryhtmlcss

Implementing MVC architecture in web development allows for the encryption of parameters sent

I have a scenario where I'm utilizing an ajax call to trigger my action method. The call involves sending two parameters, and I aim to secure/ encrypt these parameters before transmitting them to the action method, then decrypting those values within ...

javascriptjqueryajaxasp.net-mvcencryption