Win a copy of Terraform in Action this week in the Cloud forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

Display a Pointer Box When Page Opens

 
Ranch Hand
Posts: 2119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I do not really know what to call what I want so hoplfully this explanation will do.

When a web page opens I would like a comment in the form of a box with a pointer(maybe a bubble) pointing to a particular control on the page with text inside the box giving instruction. This would be superimposed on the web page.

I know how to use DIV tags for popups but I want a fancier display than just a rectangle.
 
Sheriff
Posts: 67601
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Give the div a background image containing your "bubble" image. Make sure the image is a PNG or GIF with a transparent background.

Here's a figure from my jQuery book showing this technique:

 
Steve Dyke
Ranch Hand
Posts: 2119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Give the div a background image containing your "bubble" image. Make sure the image is a PNG or GIF with a transparent background.

Here's a figure from my jQuery book showing this technique:



I did not get the figure you mentioned.
 
Bear Bibeault
Sheriff
Posts: 67601
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hmm, it's displaying fine for me. Are you using IE6? (which has poor PNG support)
 
Steve Dyke
Ranch Hand
Posts: 2119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Hmm, it's displaying fine for me. Are you using IE6? (which has poor PNG support)



No, I am using IE7.

I put the background-image attribute in my CSS DIV definition. The image displays when I view the page in design mode but in preview mode the div displays as a colored rectangle.
 
Bear Bibeault
Sheriff
Posts: 67601
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
"Preview mode"? In what? And all that matters is what it looks like when it's deployed.
 
Steve Dyke
Ranch Hand
Posts: 2119
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:"Preview mode"? In what? And all that matters is what it looks like when it's deployed.



I use Websphere as my development IDE. When working on a JSP file I have three options, Design Mode, Source, and Preview.

Anyway, you are right, when I run it on the browser it woks.

Thanks.
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you're using jquery, Beauty Tips is an excellent plugin so such things.
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic