We help IT Professionals succeed at work.

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

Slim81
Slim81 asked
on
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!
Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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/

Author

Commented:
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...

RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

http://jsfiddle.net/rjurd/LpCvd/
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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

Author

Commented:
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.
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
what is it you need done differently?  the themes are easily changed but you could also leverage the position attribute if you wanted to stick with your idea?

Author

Commented:
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.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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: http://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.

Author

Commented:
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!
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
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.

Author

Commented:
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.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.