I want to do some kind of naval battle game in HTML5/Javascript using drag and drop on a grid (composed of div elements). The starting point is a div with 20 * 20 identical cells.
I have to perform some complex layout like in the image below and this layout may be dynamically modified by Javascript (e.g. when a ship is moved).
I know how to perform merged row cells but I cannot find out how to merge columns (like in the example below).
Is it possible with divs or would you recommend a table?
_______________________
|__|__|__|__|__|__| |__|
|__|__|__|__|__|__|__|__|
|__|__|_____|__| |__|
|__|__|__|__|__|_____|__|
|__|__|__|__|__|__|__|__|
Sorry for not posting a nicer image but my reputation is too low to post images.
To be simple use a table, you have the rowspan and colspan properties. But for ease of maintenance, I recommend not using a table, and designing a div layout similar to how Bootstrap implements div based table layouts. http://getbootstrap.com/css/#tables
If your design has to be responsive, you do not want to use table, td, tr elements, you will need to come up with a div based layout.
Other table layout libraries/techniques: http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/
I would use a grid with div's. An place the boats on top of the grid with an image and store boat info as class properties on a per cell basis.
combination of bootstrap with jquery should be possible, for example:
<div class="container">
<div class="row">
<div class="col-xs-3 shipSize3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-6 shipSize6"></div>
</div>
</div>
then you would be able to just change class with jquery(.removeClass(),.addClass()):
if (shipSize3 === 'killed'){
$('div').removeClass('shipSize3');
} else {}
It is possible, here is the code.
Screenshot:
Related
I want to place number of columns in a row dynamically. For example each student in students list should have one column.
The width of the column should depend on number of students.
Any help is much appreciated.
Thanks
Salman
With bootstrap 5, you can just use the col class, and it will stretch to fill the space. Then you can set the min-width of the elements in CSS with media breakpoints to get it to wrap when you want.
<div class="col" *ngFor="let student of studentList"></div>
I am very new to CSS..
I would like to know if there is a way to dynamically position a div element based on the length of the previous div element.
Example:
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
If these div elements were full width each and i want one to come after the other based on the length of the previous one without adjusting the length on the top property myself.
Is this possible or is there any top value that can be used?
Thank you so much.
As of now, there is no way that you can style a div (or any other element for that matter) dynamically on the basis of a previous element. But you have some options here -
either you can use Javascript to manage the styles of elements dynamically, or,
you can use CSS FlexBox Model or CSS Grid to position and change height/width of elements, which is highly recommended and super powerful for making any layout of your choice.
Here are some places which I used to learn flexbox -
freeCodeCamp flexbox tut
Brad Traversy flexbox crash course
Now for CSS grid-
Brad Traversy CSS Grid
freeCodeCamp CSS Grid
Is it possible to have two divs in a single column, where one is on top of the other, so that both have the height of the "tallest" div without using Javascript?
Here is some example code:
<div class="col col-6-lg">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
I have used Javascript successfully and I have tried using flex with a good article here: http://codepen.io/imohkay/pen/gpard but it did not work as I had hoped. All divs in a single "row" are adjusted to the highest div but it does not carry down through multiple "rows".
I am wondering is there another non JS solution?
I was/am wary about tagging Javascript and jQuery but I felt it was appropriate.
I have a clickable grid in which the cells toggle colour on clicking. I need to put some numbers along the borders of the grid. What is the best way to include that?
Final result should look like
4
1 5 3
1,2 [][][]
1,4,5 [][][]
1,3 [][][]
Here is my JSfiddle without the surrounding numbers.
Would using the existing table cells work as in https://jsfiddle.net/z9shwh0q/ If not you could create another table next to it and place these tables in a few wrappers.
<div class="top-key"
TOP KEY ETC
</div>
<div class="left-key">
TABLE FOR LEFT KEY ETC
</div>
<div class="clickable-table">
CURRENT TABLE
</div>
Then you would us CSS to postion these
I would define extra row / column which would be styled differently, and added distinct class (so you can avoid attaching listeners to these), pretty much like #Aly Sebastien outlined.
Then have your custom numbers in them.
If you want to create even smaller footprint, you could attach :before pseudos with content, and position them via css on the edges (see Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery)
Right, this is slightly hard to explain but what I'm after is as follows:
I have a database of posts that will go into an HTML page. Obviously all these posts will be different sizes so the boxes containing them will be different sizes too.
What I'm after is a way to make these boxes all appear to fit nicely in with each other, as in the picture below for example. If the first post is a small one then it will begin a line of small boxes for example. And they won't necessarily all be the same height either. In the picture each post is numbered to show where it comes in the array of posts.
See the illustration I made here:
Is this possible? I'm assuming I'll need some Javascript in there probably, and JQuery is preferable.
Thanks for any and all help.
As you're willing to go with a Javascript solution, I've found that the jQuery Masonry plugin works really well for doing a "best fit" of differently shaped rectangles.
You set it up with markup like:
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
You then float: left your .items, and attach the Masonry handler to the #container:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
...
});
});
There's also a no-jQuery version if you're not already using jQuery at all