how to make a box of nxn given in a url?


Tags: javascript,jquery,html,css

Problem :

I am trying to make a grid in an HTML. I have a number given in a URL and basis on that I need to make a grid of size n and then render it in HTML.

As an example, let's say my URL is like this http://localhost/x/3, then I need to make a grid of 3x3. URL can be in any format, there is no restriction on that. I don't need to use any third party libraries at all for this.

I am able to make a grid as shown in this jsfiddle but everything is manual as of now.

Below is my HTML:

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Below is my CSS:

div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

What I need to do is, given a number in url, I need to render the grid of the same size in an HTML.

  • How can I get a number from a url in javascript?
  • And then generate grid basis on that number by rendering it in HTML.

Any jsfiddle example will help me to understand better.



Solution :

HTML:

<div id="container">
    <!-- cells will be added here -->
</div>

Cells will be assigned class="gridCell" when created.

CSS:

#container {
    width: 300px;
    height: 300px;
}
#container > .gridCell {
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 1px solid;
}

To read the number from url based on the base_url/x/num format we can use something like url.split("x/")[1]. To make sure it doesn't go wrong we can have a default number just in case.

Then we'll need a function called createGrid(n) which takes a number and creates cells with width and height equal to width of container/n and append them to the container.

jQuery:

var defaultNum = 6;
var url = window.location.href;
var num = parseInt(url.split("x/")[1]) || defaultNum;
var container = $('#container');
var width = container.outerWidth();
createGrid(num);

function createGrid(n) {
    if(!$.isNumeric(n) || n <= 0)
        return;
    for(var i = 0; i < n*n; i++) {
        var dimension = width/n;
        var cell = $('<div/>').addClass('gridCell').css({
            'width': dimension + 'px',
            'height': dimension + 'px'
        });
        container.append(cell);
    }
}

jsfiddle DEMO


    CSS Howto..

    how to text zoom effect in css

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    How to prevent automatic onmouseover after onfocus?

    How to force spaces between 2 elements when position:absolute with CSS only?

    How to align the menu to center after certain width media query fires for RWD

    Integration of CSS, Javascript and html ,,,howto

    CSS: how to address Samsung Android browser?

    How to change CSS based on Season using JavaScript

    CSS + Show Animated GIF while Loads

    How do I create a DIV based on the browser size?

    How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

    How to set the horizontal menu to be center without setting the specific width

    Creating transparent text to show gradient color of underlying div

    How to modify css class of container for specific element ID

    How to create a sliding navigation with either jquery or css? [closed]

    How to add a fade effect to html transition with javascript

    How do I hover with text over div img?

    How to reference / link to a Css-File styling elements in a webview for Android

    how to change height of div to covered the text area (CSS)

    How to add a disabled internal Style node to HTML5 DOM?

    How to show foreground image and then hide on hover?

    How to deal with collapsing margins on html & body?

    How to style responsive table to make table like list?

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How to locate element on a map by xpath or css selector

    How to create responsive blocks by using just CSS and HTML

    How to add Get in Touch page in webpage? [closed]

    How can I make a two column layout's main div auto fit to browser width?

    Speechbubble tooltip in CSS - how to move the arrow

    Japanese Text not showing correctly