The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


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