asked on

Jquery: Show/Hide div in close relation to button...

Hey guys and gals,
What I am trying to achieve will require some 'pixel perfect' positioning, which always makes me pull my hair out.

What I want to do is have the ability to display small contact form when a button is clicked. The pixel perfect positioning is because I want the button to appear as if it is inside of the 'contact div' once it is visible on the screen.

I was able to come up with a working example. I figured it was good to get the height of the items 'dynamically' with Jquery as I believe there are small differences with various browsers that would make my hard coded values not work well.

Here is an example on jsFiddle: http://jsfiddle.net/vHvrW/3/
You can find my code on there as well...

I was able to get it to work in a generic sense, however I am wondering if I am doing it the "right way"... Is there a better way to do this?

Thanks!

Rob

I've always used the dialog ui widget from jquery. it gives the ability to place it virtually anywhere on the page.

http://jqueryui.com/demos/dialog/

Slim81

ASKER

I thought about that, but wanted the button to be part of the box. I have seen it before with other site (logins, etc) and really liked the look.

As usual I make things harder than they need to be...

Rob

Taking your example i've modified it to use the jquery dialog and centred it on the body section

http://jsfiddle.net/rjurd/LpCvd/

Rob

this is all the code you need:

$("#buttonContainer").dialog({
    modal: true,
    autoOpen: false,
    position: {
        my: "center center",
        at: "center center",
        of: '#body'
    },
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
});

Open in new window

Slim81

ASKER

tagit,
Thanks for the post. I agree that the Jquery UI dialog box is a cool feature. I have used it myself a few times.

However it isn't quite what I am looking for at the moment.

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Slim81

ASKER

Wasn't quite what I was looking for as I wanted to use my own 'box' instead of the JQuery UI modal box. However, it is a good solution to the problem.

Rob

Thanks for the points and glad you liked the solution but I'm not sure about the B grade?

Just have a look at this: https://www.experts-exchange.com/help.jsp#hs=29&hi=403

Grading at Experts Exchange is not like school. It's more like the "10-point Must" system in professional boxing; in other words, an answer is worth an A, unless it doesn't resolve your issue.

Slim81

ASKER

tagit,
I understand you questioning the "B" grade and maybe I grade a bit harder than others...

This is what EE says about grading as well:

If it requires you to do a little more research, or figure out one more piece of code, then it's worth a B.

I wasn't looking for a 'floating' modal box, which is what you posted. I was looking to see if what I was doing was the 'right way' to do it as I had given a working example with my original post.

No hard feelings man, thanks for the help!

Rob

No worries and always here to help.

Though what was the reason you decided to close the question when there was an open query from myself?
What I was trying to ascertain in my last post was whether you thought the dialog would work for your project or how we could adapt the positioning class that the dialog uses to go with your original idea.

The dialog however seemed to solve your issue right away. You did ask if there was a better way to do this, which I believe to be the dialog with the information at hand. So I fail to see how you would first close the question and then to grade it a 'B'.

Look, the whole grading system is very subjective and convoluted at the best of times. Just keep in mind that all the experts are volunteers and there's no need to "grade a bit harder than others". The grading system reflects our reputation as experts, which is why I'm pushing the point.

Slim81

ASKER

Right on, I totally understand. I actually ended up using my own code, a version of what I created in my 'generic code mock up' that I posted in my original post. However the next time I plan to do something similar I will see about styling JQuery's modal box and positioning it like you mentioned.

Thanks for the help.