how to make a popup validtion?

[Michael Hubele]

Hi

I am wondering if anyone knows a tutorial or an easy way to make a bubble pop out if the user fails to enter the right information?

Something along this lines

asp.net Ajax Callout

I rather have something I can make myself. I really don't want to have a couple .js scripts just to make the popout thing to work.

If it actually takes this much code to right then its ok.

I just don't know where to even begin so I can't really comprehend how many lines it takes to do something like this.

I am using Jquery by the way.
[ June 18, 2008: Message edited by: Michael Hubele ]

[Eric Pascarello]

You just need to have to find the location of the element of the page and move a layer over to that location. It is basic DHTML.

Eric

[Bear Bibeault]

In the chapter 8 code for jQuery in Action, I created a 'popup' to define terms. You can take a look at that code -- same idea.

[Michael Hubele]

Originally posted by Eric Pascarello:
You just need to have to find the location of the element of the page and move a layer over to that location. It is basic DHTML.

Eric

Maybe for you.... I never done anything like that before I don't know you just really said and I have not really used DHTML. So i don't know what you mean of stuff like make a layer over a location. I am guessing the finding part would be with Jquery?

So if you can show me how to do this that would great.

In the chapter 8 code for jQuery in Action, I created a 'popup' to define terms. You can take a look at that code -- same idea.

I will check it out.


edit-

Ok I checked it out but its kind hard to know whats going on since I can't really used the examples since they require php what I don't have setup up and really don't want to see up right now(if not done properly it most likely will conflict with iis).

I see this is your css that makes the callout

.lookerUpperFlyout {
  width: 240px;
  padding: 4px 8px;
  border: 2px ridge maroon;
  background-color: #ffffcc;
  z-index: 10;
  color: black;
}

So I am not sure how you can move it so its not ontop of the control through.

This looks like this moves it but I can't get it to work

.css({
position: 'absolute',
left: event.pageX,
top: event.pageY,
cursor: 'pointer',
display: 'none'
})

[ June 18, 2008: Message edited by: Michael Hubele ]

[Bear Bibeault]

This looks like this moves it but I can't get it to work

This doesn't tell us what is happening. What's not working? What is happening? What did you expect?

That code assumes that it's in an event listener with the event instance passed in.

[Michael Hubele]

Originally posted by Bear Bibeault:
This doesn't tell us what is happening. What's not working? What is happening? What did you expect?

That code assumes that it's in an event listener with the event instance passed in.

Ah I figured it out.

ya I had to pass event listener in. That's why some of the stuff in that code did not work like the event.pageX;

Now I just have to figure out how to make a bubble. I guess I have to find some image.

 var x = event.pageX - 20;
 var y = event.pageY - 20;
        $("<div></div>").appendTo("#content").addClass("lookerUpperFlyout").css({ position: 'absolute', left: x, top: y, cursor: 'pointer', display: 'inline'}).html("You must click at least one checkbox");

So that's a code snippet. I pass in a event handler to the method when the button is clicked.