Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 6 of 6

Thread: [CSS] Dynamically Expanding Balloon window a la Google Maps

  1. #1

    [CSS] Dynamically Expanding Balloon window a la Google Maps

    Hi I've been wanting to do a balloon info window using div's but i'm having trouble splitting it. I know that I basically just have to set the first portion as background image and the tail inside another div, this div in turn inside the main div?? Where do i begin the image splitting, the tail and the body...
    I was thinking also maybe append the image inside the div instead? But I don't think it's a good idea.

    Here's a visual representation

    or should i have a div for the top (rounded corners), and the bottom(tail and rounded corners), and the middle is the one repeating? I'm quite at a loss how to weave it in css.

    Thanks in advance guys

    Flock it like it's hot.

  2. #2
    I'd do something like this in the xhtml:

    HTML Code:
    <div class="balloon">
        <h1>Some Header</h1>
        <p>Paragraph</p>
        <p>Another Paragraph</p>
    </div>
    Then, apply the "tail" section to the div.balloon (don't include the left and right spacing which you have in your image... make it only as wide as the balloon itself. Also, give a background color to div.balloon equal to the color of the balloon (it will be shown underneath the paragraphs and extra space, where no image is covering). Give a bottom padding, too, which will be equal to the height of the tail image, roughly. Add and subtract to make it prettier.

    Then, apply the top corners to the h1, which will be necessary for all balloons. Alternatively, you could simply use paragraphs without an h1, and give it a class of .first (the proper pseudo-selectors would not be parsed correctly in many browsers).

    That should work...


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  3. #3
    Hi nokrev Thanks for the input.
    Well I've finally decided to use OpenRico and Prototype. And look, no image!!
    http://one.fsphost.com/ntester/roundtest.html
    (except for the tail )
    (it uses spans and css bg's to generate the rounded corners, openrico's inspired by the nifty ws guy)
    Yayyy

    Flock it like it's hot.

  4. #4
    That works too… but then you need both css and javascript for it to work.


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  5. #5
    Quote Originally Posted by nokrev
    That works too… but then you need both css and javascript for it to work.
    Yes, sorry I guess I didn't make myself clear. These balloons have to be dynamically weaved on the fly on a certain mouse event, balloons update their positions and contents inside balloons are variable.
    I understand, practice, and also encourage unobtrusive programming but this is one exception

    Flock it like it's hot.

  6. #6
    That's not unobtrusive.

    That's fine… no worries.


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012