Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Sep 2004
    Posts
    12
    Member #
    7529
    Hey everyone,

    I would like to have a calendar(in a table), that is rather small, small enough that it makes it difficult to read the text in each table cell.. When you mouse over a date, a larger box appears above that date, with the text from that date. You can roughly see the effect I'm going for here(not in IE, but most anything else):

    http://mat.is-a-geek.com/April2-2005.html

    This example is much too 'jumpy' for my liking, but I can't seem to find a way to accomplish what I'm imagining. Like I said, instead of the box actually getting bigger, like I have done it, I would like a new box, which is a little larger, to 'float' above, with the text this is current in the date you mouse'd over.

    I'm not sure if it can be done, or how difficult it would be, but any suggestions, or 'points in the right direction', would be most appreciated.

    bcode

  2.  

  3. #2
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    Look into <div> and absolute positioning. It can be done, a good example is Google Maps, which shows something similar when you click on map destinations.

  4. #3
    Junior Member
    Join Date
    Sep 2004
    Posts
    12
    Member #
    7529
    Hey Fallout,

    Thanks for the reply, and in fact I was assuming I would have to css for the positioning, but the thing that I'm not sure about, is how to get the text from a < td > tag, and stick it in the new box I have floating... Any suggestions?

    bcode

  5. #4
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    Just try to have a bigger div, initially hidden, inside each <td>. Set position:absolute for the <td>'s, and position:relative for the <div>'s (that's a trick that's been covered in a tutorial here to make this work in IE). Then use javascript mouseover event to show the hidden div. I think you can change the relative position of the div with left: and top:.

    I know this can work, but oddly, on IE <td>'s to the left and below the div will be in front of it, no matter what I try.

    Anyway, that does the job, and resizing table cells are really annoying.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  6. #5
    Member
    Join Date
    Jan 2005
    Posts
    97
    Member #
    8727
    If I know what you are talking about, you have two sets of divs, one for the big boxes, one for the small, and set the visibility to none for the big boxes. Then, use Javascript to change visibility.
    If you don't like Javascript (I don't) make them all anchors with no href atrribute, set the display to block, and use a:hover to change the visibility. Something like this:
    Code:
    a:hover {
    visibility: true; //(I dunno, never use this)
    display:block;
    //extra css
    }
    a {
    visibility:none;
    display:block;
    //extra css
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com