Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to create tiles using HTML, CSS and Javascript.

    How to create tiles like say “Things I want”, “Things I Need” as in the attachment (tiles.png) using HTML, CSS and Javascript.

    1. If I enter “Things I Want” in a text box and click on create button, it should create a tile as in the attachment and show the text I typed in the text box.

    2. If I click on the tile say “Things I want” it should show an alert box with how many times I clicked on a particular tile.

    Any suggestions or links on how to achieve this?

    Thanks,
    Attached Thumbnails Attached Thumbnails How to create tiles using HTML, CSS and Javascript.-tiles.png  

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,181
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Sure, just use createElement("div"), and attach it to an inclosing div, give all the divs a class name and float them left ( or whatever ) in the inclosing div, with what other properties or styles you want. Pretty simple when you do it.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I am able to create tiles dynamically using Jquery, when I click on create button.But when I refresh the page the Tiles are gone as the inner divs are created dynamically. How can I write\save the Dynamically created divs\tiles to the same HTML file, so that they don't vanish on page refresh?

    I searched the web, but can find a way to save the dynamically created elements to the HTML file.

    Below is my script:-

    <html>
    <head>
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    //array declaration
    $("#CreateDIV").click(function(){

    d=document.createElement('div');
    $(d).addClass($("#txt1").val())
    .html($("#txt1").val())
    .appendTo($('.container')) //main div

    });

    });
    </script>
    <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>
    <div class="container">
    </div>
    <input type="text" id="txt1">
    <button type="button" id="CreateDIV">Create</button>
    </body>
    </html>

    Thanks

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,181
    Thanks
    15
    Thanked 253 Times in 253 Posts
    You will need to use server side language or perhaps a cookie to save them for a page reload. Making them with javascript means they will all be 'forgotten' on page reload.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •