Board Game Arena

Posted: **20 March 2021, 17:08**

Hello.
I have a question with "dynamic divs".

I have a div structure in the tpl file like this :

<div id="guildChoice">
</div>
<div id="backgroundGlobal">
    <div id="opponentBoard_wrap" class="whiteblock">
	</div>
    <div id="center_wrap">
    </div>
    <div id="myBoard_wrap" class="whiteblock">
		<div id="myBoard">
		    <div id="myBoard7Empty" class="player-rift"></div>
		</div>
		
    </div>
    <div id="myhand_wrap" class="whiteblock">
    </div>
</div>

(I have child divs that I don't show in this question

)

The CSS class are :

Code: Select all

.player-rift {
    position: relative;
    float: left;
    width: 168px;
    height: 0px;
    margin: 1px;
}
.card {
    background-image: url('img/GuildSummoners.png');
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 1100% 100%;
    position: absolute;
}
.card-normal {
    width:168px;
    height:235px;
}
.card_light{background-position: 20% 0%;}

And a js template :

Code: Select all

var jstpl_guild='<div class="card card-normal card_${guildName}" id="guild_${guildId}"></div>';

In Javascript i make the div "Guildchoice" disappear according to game state :

Code: Select all

//Display or Hide the "DIV" section named "guildChoice"
            if (stateName == 'guildSelection') {
                dojo.style( 'guildChoice', 'display', 'block' );
                dojo.style('guildChoice','height',235+'px');
                if (this.isCurrentPlayerActive())
                {
                    this.addClickActionToGuilds();
                }
            } else {
                
                dojo.style( 'guildChoice', 'display', 'none' );
                
            }

When placing cards on self and opponent board I do this :

Code: Select all

dojo.place(this.format_block('jstpl_guild', {guildName: GuildName.toLowerCase(),guildId: GuildId}), 'overall_player_board_'+ player_id,'last');
this.placeOnObject('guild_' + GuildId, 'overall_player_board_' + player_id);
this.slideToObjectPos('guild_' + GuildId, 'myBoard7Empty',indexHorizontal,indexVertical).play();
==> 'myBoard7Empty" is under the div "MyBoard".

My question is :
When I make the 'guildchoice" appear and desappear, all my card remain static on my screen unlike the divs which shift automatically.
I understood (maybe wrong) that the "absolute position" was still refering to the parent.
How can I make my card with specific position inside my div "stick" with my div ?

(Hope my question is clear

)

Posted: **20 March 2021, 18:10**

Position absolute refer to first parent with position set to something like absolute or relative. So you need to set position:relative to your parent for instance

Posted: **20 March 2021, 19:14**

Hello Tissac.

That is actually the case.
The card have "position : absolute" and the parent div (myBoard7Empty) have "position: relative" but I do this :
1 - dojo.place ==> I place it on "overall_player_board_playerID"
2 - this.placeonobject ==> I place it (again

) on "overall_player_board_playerID"
3 - this.slidetoobject ==> I move it to "myBoard7Empty"

Posted: **20 March 2021, 20:28**

Badguizmo wrote: ↑20 March 2021, 19:14 Hello Tissac.

That is actually the case.
The card have "position : absolute" and the parent div (myBoard7Empty) have "position: relative" but I do this :
1 - dojo.place ==> I place it on "overall_player_board_playerID"
2 - this.placeonobject ==> I place it (again ) on "overall_player_board_playerID"
3 - this.slidetoobject ==> I move it to "myBoard7Empty"

The parent is not myboard7empty, it's overall player board. Place on object does not change parent. You should be able to see that with the dom inspector

Posted: **20 March 2021, 21:48**

ahhhhhhhhhhhhhhhhhhhhhhhhhh !!!
that explains a lot ...

Thank you. I will check on that

Posted: **23 March 2021, 00:16**

Hello again.
My new question is :
How can I modify the parent after using "dojo.place" .
I have tried to call it a second time but it doesn't seems to have any effect ?
Do I have to destroy my object and to recreate it with another "dojo.place" ?

Thank you.

Posted: **23 March 2021, 00:22**

Badguizmo wrote: ↑23 March 2021, 00:16 Hello again.
My new question is :
How can I modify the parent after using "dojo.place" .
I have tried to call it a second time but it doesn't seems to have any effect ?
Do I have to destroy my object and to recreate it with another "dojo.place" ?

Thank you.

Dojo place should change the parent

Posted: **23 March 2021, 22:22**

Hello again

Still on my "problem".

The second dojo.place is actually effectively creating in the "new" div but it recreates an object instead of "moving" the original one.

If I call twice the same "dojo.place" is it supposed to create 2 jstpl with the same id ?

At the end I see in the html (visualization with Chrome) :

Code: Select all

<div id="toChoose" class="grid-container-guild-choice">
	<div class="card card-normal card_air" id="guild_10"></div>
</div>
<div id="opponentBoard7Empty" class="player-rift grid-border">
	<div class="card card-normal card_air possibleGuildSelection guildTooltip" id="guild_10" style="top: 419px; left: 1055px;"></div>
</div>

(Sorry if my question seems obvious, it is a lot to learn and I like to understand what I am doing

)

EDIT :
hum, I think I have found. I have to call the

Code: Select all

$()

to re-use my object ==> I will try that

Board Game Arena

Dynamic Div and cards inside them. [SOLVED]

Dynamic Div and cards inside them. [SOLVED]

Re: Dymanic Div and cards inside them.

Re: Dymanic Div and cards inside them.

Re: Dymanic Div and cards inside them.

Re: Dymanic Div and cards inside them.

Re: Dynamic Div and cards inside them. [SOLVED but still a question]

Re: Dynamic Div and cards inside them. [SOLVED but still a question]

Re: Dynamic Div and cards inside them. [SOLVED but still a question]