Moving elements across an external div

[locerol]

Hi all,

in the game I am developing, at dome point, I display a div in the upper part of the screen where the cards and tiles selected by players are shown.
After that, based on those cards and tiles selected, the players get victory points, tiles or resources. In order to make what is happening clear, I am moving those elements from the main board to the overall player board.

The problem is, although the animation is happening, when the elements moving cross the div in the upper part of the screen, they disappear. It loooks like they go beneath that div.

I have tried to use the z-index property in the css, but with no luck.

When I creat that div, I use this sentence to show it:

Code: Select all

dojo.style('playerChosenElementsDisplay', 'display', 'inline-block');

with the following css style:

Code: Select all

#playerChosenElementsDisplay
{
    position:relative;  
    width: 100%;
    height: 300px;
    border-style:solid;
    border-width: 2px;
    display: none;
}

An example of how I create the elements I am moving and its corresponding animation:

Code: Select all

for (i=0; i<notif.args.num_resources_2move; i++)
            {
		dojo.place( this.format_block( 'jstpl_resourceToken', {
                RESTOKENCOLOR: notif.args.player_color,
		RESTOKENPLAYERID: notif.args.player_id,
		RESTOKENNUMBER:i
		} ) , 'overall_player_board_'+notif.args.player_id);
	
		var delay= i*100;
		this.slideToObjectAndDestroy( 'overall_player_board_'+notif.args.player_id, 'resourceToken_'+notif.args.player_id+'_'+i, 1000, delay);                  
            }

with the css:

Code: Select all

.resourceToken {

    position: absolute;
    width: 19px;
    height: 30px;
    background-image: url('img/Resources_building_peq.png');
    z-index: 10;

}

I am not sure how I can make these elements visible when they move across the created div. Any help would be much apreciated.

Thanks in advance.

Lorenzo

[RicardoRix]

No idea if this helps, but....
I had the same problem, turns out I had overflow: hidden which caused the animation to slide under a div and disappear.
You can also use css visibility property to hide/show a div.
I think the stock items use a z-index, you can always try a z-index of 1000.

[DrKarotte]

So the object should move from the left to the player panels on the right and on its way it crosses another div and disappears there.

ATM I wonder about the slide and destroy you give - according to doc, the first argument is the token to move, the second the destination, and so it works for me. When I change this, in fact the panel is moved and destroyed (not so good). So I wonder why there starts a correct animation at all.

What happens when you removet he div which makes the token disappear?

[locerol]

Hi again,

thank you for your replies.

RicardoRix, I tried with a z-index of 1000, but the behavior of the moving elements is still the same.

DrKarotte, the animation works fine,even though it is true the code I posted is incorrect. You are right about the order of the elements in the slideToObjectAndDestroy function. The good one is this:

Code: Select all

for (i=0; i<notif.args.num_resources_2move; i++)
            {
			dojo.place( this.format_block( 'jstpl_resourceToken', {
                	RESTOKENCOLOR: notif.args.player_color,
		        RESTOKENPLAYERID: notif.args.player_id,
			RESTOKENNUMBER:i
			} ) , 'resourceCounterImage_'+notif.args.player_color);
			var delay= i*100;
			this.slideToObjectAndDestroy( 'resourceToken_'+notif.args.player_id+'_'+i, 'overall_player_board_'+notif.args.player_id, 100, delay);
            }

Here is the screen of a token moving just before crossing the div. The red arrow shows the intended movement and the upper div is the one that blocks the view of the moving token once it moves there. Maybe it will clarify what I meant.

Screen

Test.JPG (88.55 KiB) Viewed 2933 times

It still puzzles me, no idea how to solve it.

Thanks anyway for trying.

Regards,

Lorenzo

[vincentt]

Hi,

On which project are you working? (if we want to take a look at the code).
Could it be linked to the zone element that you are using?

I think I remember we had a issue of the same kind, and we fixed it through nested div (stacking context):
https://medium.com/@jberniertech/z-inde ... 2f52cb3fab

Hope it helps

[A-dam]

Hi,

since you immediately destroy the element after moving, have you tried to place the element somewhere else + use placeOnObject before moving? Same as Vincentt, I also suspect the zone element, so place the element fo different div might help..

[DrKarotte]

Maybe trying to add z-index to the parent element of the resource token?

To clarify: The token becomes visible again after crossing the div, before being destroyed on the player panel?

[locerol]

Hello again,

I have been trying some of the things you mentioned, and finally I discovered what was happening.

As RicardoRix said at the beginning, there was an css property overflow:hidden that I did not remember was there. The cause was that I was using the scrollmap, which in its description in the documentation says to add the following code to your css:

Code: Select all

#map_container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

I copied that at the beginning of working on the project and did not remember the overflow:hidden was there. Luckily, once I removed it, the tokens could move across the external div visibly.

Thank you all for your help. Without your comments, I would not have found it.

Best regards,

Lorenzo