Dynamic Div and cards inside them. [SOLVED]

[Badguizmo]

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

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

Code: Select all

<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 )

[Tisaac]

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

[Badguizmo]

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"

[Tisaac]

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

[Badguizmo]

ahhhhhhhhhhhhhhhhhhhhhhhhhh !!!
that explains a lot ...

Thank you. I will check on that

[Badguizmo]

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.

[Tisaac]

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

[Badguizmo]

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