CODEWITHSUNDEEP
javascriptjqueryhtml
ahmet
ahmet

Reputation: 5005

Changing the z-index of a div when a function is called?

When createCustomerCard('CUST_0') is called it opens the first order card below 

<div id="CUST_0" class="widget ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="width: 500px; height: auto; font-size: 11px; display: block; left: 29px; top: 156px; z-index: 1013; ">

with z-index of 1013, but if you try call the same function its either not drawing the customer card or not increasing the z-index beacause if a CUST_01 card is created the z-index is above the z-index of CUST_0. is there a way to increase the z-index by 1 for a div id when the function is called?

CUST_2 example below

<div id="CUST_2" class="widget ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="width: 500px; height: auto; font-size: 11px; display: block; z-index: 1014; left: 319px; top: 162px; ">

Upvotes: 0

Views: 108

Answers (3)

m1k1o
m1k1o

Reputation: 2364

Add to style position:relative says @Mr Lister or position:absolute:

<div id="CUST_0" class="widget ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="width: 500px; height: auto; font-size: 11px; display: block; left: 29px; top: 156px; position:relative;z-index: 1013; ">

and add jQuery where is the function called:

$('#CUST_N').css("z-index", $('#CUST_N').css("z-index")+1);

Upvotes: 2

Matt K
Matt K

Reputation: 6708

This should increase the z-index by 1:

$('#CUST_N').css("z-index", "+=1");

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46589

Does the div have a position other than static? Only positioned elements can use z-indexes. So give it position:relative and it might just work.

By the way, why z-index:1013? What's special about that number?

Upvotes: 2

Related Questions