Grow your CSS skills. Land your dream job.

Problems with Tables

  • # March 9, 2012 at 1:15 pm

    Hello,

    I am relatively new to web coding and I need to create a calendar that has different colored days for different events. This is what I have so far:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">













    September




    Sunday

    Monday

    Tuesday

    Wednesday

    Thursday

    Friday

    Saterday































































    26 27 28 29 30 31 1
    2 3 4 5 6 7 8
    9 10 11 12 13 14 15
    16 17 18 19 20 21 22
    23 24 25 26 27 28 29
    30 1 2 3 4 5 6

    ….etc.

    What I need next is to have some code that will allow me to display information when a certain day is clicked. I tried using :active but that would crop the image/text within the square area of the specific day.

    Thanks, any help would be greatly appreciated!

    # March 9, 2012 at 1:17 pm

    oh, something happened to all my div tags sorry…

    # March 9, 2012 at 1:18 pm

    Please select your code in the post and then hit the CODE button (the white paper with the blue thingies on it).

    # March 9, 2012 at 1:40 pm

    You should use some jQuery for that.

    Basically, first create a class called “selected”.
    When you click on any TD, remove the class “selected” from all TDs, and apply it to the one you just clicked.

    Like this: http://jsfiddle.net/DvrEB/

    Also, it’s called SatUrday.

    # March 9, 2012 at 2:54 pm

    ok, where do I insert the jQuery?

    haha, I know I was typing fast and forgot to change it :)

    # March 9, 2012 at 2:57 pm

    and how? sorry don’t know much about that, just some css and html :)

    # March 9, 2012 at 3:09 pm

    Start at http://docs.jquery.com/How_jQuery_Works

    # March 10, 2012 at 12:20 am

    Hey, still kinda confused on how to insert it into my page … :(

    I tried doing this but nothing happened…

    ….


    .selected {
    background-color:green;
    }















    September




    Sunday

    Monday

    Tuesday

    Wednesday

    Thursday

    Friday

    Saterday

























    26 27 28 29 30 31 1
    2 3 4 5 6 7 8

    …..

    THANKS!!

    Rob
    # March 11, 2012 at 9:45 am

    You need to wrap it in document ready. If you have a look at http://docs.jquery.com/How_jQuery_Works it will show you.



    # March 11, 2012 at 12:49 pm

    Also, any content in a table should always be in a CELL. So when we take the first part of your code for example:





    September




    Sunday

    Monday

    ......
    Saterday






    ....
    26 27

    Should be something like this:








    ....






    September




    Sunday

    Monday

    ......
    Saterday



    26 27

    And, again, it’s SatUrday not SatErday. ;)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".