<div style="height:400px; width:400px;"><!-- The parent must have defined height and width -->
<div class="ic_ui_board">
<div id="ic_ui_board"></div>
</div>
</div>
Like all the other components, the board component is optional.
The board is responsive and will expand 100% to the parent element. One of the parents must have defined height and width (and it should be the same value for both, a square of NxN).
The wrapper parent class .ic_ui_board is optional.
However, there would be usability issues without it (unless you style the classes yourself).
<div class="ic_ui_board_tabs"> <div id="ic_ui_board_tabs"></div> </div>
Clicking a board link will trigger a board.refreshUi(0, false);.
The wrapper parent class .ic_ui_board_tabs is optional.
<div class="ic_ui_material_diff"> <div id="ic_ui_material_diff"></div> </div>
The wrapper parent class .ic_ui_material_diff is optional.
Adding the CSS display: inline-block; to the component (or to the parent wrapper) will make the
horizontal line only expand as the component expands.
<div class="ic_ui_controls"> <input id="ic_ui_nav_first" value="|<" type="button"> </div>
This component triggers a board.navFirst();.
It can be a <a>...</a> styled as a button. When this is the case, a
return false; will automatically happen to prevent unwanted scrolling to the top.
Will get automatically disabled/enabled depending on the current move and the move list length.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls"> <input id="ic_ui_nav_previous" value="<" type="button"> </div>
This component triggers a board.navPrevious();.
It can be a <a>...</a> styled as a button. When this is the case, a
return false; will automatically happen to prevent unwanted scrolling to the top.
Will get automatically disabled/enabled depending on the current move and the move list length.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls"> <input id="ic_ui_nav_next" value=">" type="button"> </div>
This component triggers a board.navNext();.
It can be a <a>...</a> styled as a button. When this is the case, a
return false; will automatically happen to prevent unwanted scrolling to the top.
Will get automatically disabled/enabled depending on the current move and the move list length.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls"> <input id="ic_ui_nav_last" value=">|" type="button"> </div>
This component triggers a board.navLast();.
It can be a <a>...</a> styled as a button. When this is the case, a
return false; will automatically happen to prevent unwanted scrolling to the top.
Will get automatically disabled/enabled depending on the current move and the move list length.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls"> <input id="ic_ui_rotate" value="rotate" type="button"> </div>
This component triggers a board.toggleIsRotated();.
It can be a <a>...</a> styled as a button. When this is the case, a
return false; will automatically happen to prevent unwanted scrolling to the top.
You can disable the component by adding the class .ic_disabled.
However, if you do this make sure it is wrapped inside a parent class .ic_ui_controls or there
would be usability issues (unless you style the disabled class yourself).
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls">
<select id="ic_ui_promote">
<option value="5" selected="selected">queen</option>
<option value="4">rook</option>
<option value="3">bishop</option>
<option value="2">knight</option>
</select>
</div>
This component triggers a board.setPromoteTo($(this).val());.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_controls">
<div class="ic_ui_move_list">
<div id="ic_ui_move_list"></div>
</div>
</div>
Clicking a move link will trigger a board.navLinkMove($(this).attr("data-index"));.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
The wrapper parent class .ic_ui_move_list is optional.
However, there would be usability issues without it (unless you style the classes yourself).
<div class="ic_ui_controls"> <input id="ic_ui_fen" value="" type="text"> </div>
Clicking this component will autoselect the FEN $(this).select();.
You can group together multiple components under a single wrapper parent class .ic_ui_controls.
The wrapper parent class .ic_ui_controls is optional.
<div class="ic_ui_debug"> <a id="ic_ui_debug_toggler" href="#">Debug ▼</a> </div>
This component triggers a $("#ic_ui_debug").toggle();.
Upon clicking, its arrow direction is updated to reflect the current visibility state of
#ic_ui_debug.
A return false; will automatically happen to prevent unwanted scrolling to the top.
In the case that you change the initial visibility of #ic_ui_debug to not visible, you should
also change the initial arrow to point upwards Debug ▲ instead of downwards.
You can group together multiple components under a single wrapper parent class .ic_ui_debug.
The wrapper parent class .ic_ui_debug is optional.
<div class="ic_ui_push_alerts"> <div class="ic_ui_push_alerts_top"></div> </div>
This component lets you show a range of autogenerated alerts at the top of the UI.
You can group together multiple components under a single wrapper parent class .ic_ui_push_alerts.
Important: you must include the wrapper parent class .ic_ui_push_alerts in order for this component to work.
<div class="ic_ui_push_alerts"> <div class="ic_ui_push_alerts_bottom"></div> </div>
This component lets you show a range of autogenerated alerts at the bottom of the UI.
You can group together multiple components under a single wrapper parent class .ic_ui_push_alerts.
Important: you must include the wrapper parent class .ic_ui_push_alerts in order for this component to work.
<div class="ic_ui_debug"> <div id="ic_ui_debug"></div> </div>
You can group together multiple components under a single wrapper parent class .ic_ui_debug.
The wrapper parent class .ic_ui_debug is optional.