Web Design Poole and Bournemouth - Neon.

Creating brighter websites.

Charlotte's web.

JQuery – Show Element From Centre

I recently encountered a requirement for a hidden div to ‘grow’ from its centre outwards, rather from the top, right, bottom or left.  Here is how to do it:

First write your html:

    <div id="container">
         <div id="link">
             <a href="javascript:void(0)" id="boxOne">Click Me</a>
         </div>
         <div id="boxOneContent" class="box">
             <div class="content">
                 <h1>Hello World</h1>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit. Ut ullamcorper consequat dui tempor euismod.</p>
                 <p>Nam vel odio massa, sed lacinia sapien. Cras ac
                 nisi.</p>
             </div>
         </div>
    </div>

The id of the link matches the first part of the id for the corresponding box. For the demo I’ve added in a container div so users can click anywhere on the page to make the box close.  There is also a container for the content within the box to stop the content wrapping as the box expands.

Now your CSS, which positions the box centrally over the link.  I’ve only put the key aspects of it here, check the demo for the full code:

#link {
    float: left;
    border: 1px solid red;
    text-align: center;

    width: 40px;
    height: 40px;
    padding: 5px;

    margin-left: 125px;
    margin-top: 125px;
}

#boxOneContent {
    background-color: #000;
    color: #fff;

    padding: 20px;
    width: 160px;
    height: 160px;
    position: absolute;

    top: 150px;
    left: 150px;

    margin-left: -100px;
    margin-top: -100px;

    display: none;
}

By defining the width, height, padding and margins for #link, the centre of this element is 150px from the top and 150px from the left. Here are the workings: 125+((40+(5*2))/2) = 150.

With padding included, the total width and height of #boxOneContent is 200px.  Therefore the margins set will move the div up and left by half the size of the box.

This is what makes the div ‘grow’ outwards when it appears as the div is expanding bottom right (as usual) but also moving top left to get to these margins.

Finally here is the jQuery that pulls it all together:

$(document).ready(function($) {

    $('a').click(function(){

        if($('.box#'+$(this).attr('id')+'Content').hasClass('active') == true) {
            $('.box#'+$(this).attr('id')+'Content').removeClass('active').hide(200);
        } else {
             $('.box.active').removeClass('active').hide(200);
             $('.box#'+$(this).attr('id')+'Content').addClass('active').show(1000);
        }
     });

     $("body").click(function(){
          $(".box").removeClass("active").hide(200);
     });

     $("a").click(function(e){
          e.stopPropagation();
     });

 });

If the box corresponding with clicked link is visible (active), then its hidden. Otherwise, any visible boxes are hidden and the box that corresponds with clicked link is shown.

If user clicks anywhere on the page (apart from links), any open boxes are closed.

Happy coding!

Our Services

You know that well designed websites, and services, make people come to you.
For high quality web solutions in Bournemouth and Poole, you can rely on our skills and experience.

Get in touch ›

Happy Clients...

  • Neon provided Suttles with an excellent, professional service from start to finish of our project and the results are amazing. We now have a brilliant new website that massively improves and updates on our previous site. Charlotte was extremely helpful and easy to deal with and we can recommend Neon Web Design highly!
    John Suttle, Suttles Group
  • I have just had a new author website built and am thrilled with it. It's fresh, contemporary and stylish. My publishers, Simon & Schuster, are also delighted with it, saying it is one of their favourite author websites. Charlotte is efficient and talented; if I need to update or add to the pages, she does it quickly for me. I feel in very good hands and wouldn't hesitate to recommend Neon Web Design.
    Alice Peterson, Author
  • I have been commissioning website development for over 10 years now, and can safely say that Neon Web Design are the best supplier I have ever used.

    The work is always on time, of the highest quality, and very reasonably priced. I can highly recommend Charlotte and her team, they are also very flexible, always available to talk and open to new ideas.
    Clive Percival — Director, 2pm Design
  • Neon Web Design are terrific and I’ll be going back to them for more promotional materials. They really listened and understood exactly what I wanted—even better than I could explain.

    I love the website Neon created and I’ve had great feedback from everyone who’s seen it. The site’s functions are excellent. Their prices were very fair and as agreed, and they kept to the promised time scales. I recommend them wholeheartedly and without reservation. Quick, get in their queue!
    Sara Pascoe, Children's Author — sarapascoe.co
  • Working closely with Charlotte, we are delighted with our new website from Neon. Our new site is not only aesthetically strong, the back end functionality really is top drawer. We were suitably impressed, however our clients were really impressed. Neon have delivered a solution that provides tremendous ease of use.

    The price was reasonable for our requirement, and the deadline was met comfortably. If you require a high quality website, especially with enhanced functionality, you'd do well to contact Neon. We're delighted, and would recommend Charlotte whole-heartedly.
    James Nash, UK Sales Director, Shadehaus Ltd
  • Charlotte, I would like to say that I am delighted with what we have achieved here. I showcased my funky new website to a select number of clients, family, and friends to gauge reaction... I have been absolutely delighted with the feedback so far.

    Every person who has seen my new site has reacted in the same way. “WOW” “Your new site looks amazing” we'd like to thank you for listening to the brief, and delivering a funky, slick new website that gets the Total Creative Talent message across perfectly... We’re Absolutely Chuffed!
    Steven Martin, Director - Total Creative Talent
  • I am thrilled with the new website Charlotte has created for our company. We have received great feedback from colleagues and I will not hesitate to endorse her.

    In particular, Charlotte provided extra value with her continued advice throughout the project based on her prior experience. I am very impressed with the service received.
    Richard Field, Chief Executive, Richard Field Property Search Ltd
  • We are extremely pleased with our new website. The team worked hard to ensure all our requirements were fulfilled, including creating a user registration and log-in area.

    They were committed and professional throughout this long-term project and Charlotte was always more than happy to be flexible to fulfill our changing demands.
    Oliver Scott, Partner and Fund Manager, Kestrel Partners
  • Just a note to say that I am extremely pleased with the new website you created for me. It was done very efficiently, with the minimum of fuss and incorporates many features which I have not previously considered were within either my competence or reach.

    You made the whole process very easy and used considerable flair in envisaging how it would best be presented. I shall not hesitate to tell my clients of your excellent service.
    Roger J Gould, Copywriter
  • Charlotte’s advice and recommendations in putting together the initial website for our new event and wedding planning venture were terrific. From the outset she understood absolutely what was required, but also she added that certain indefinable “je ne sais quoi” which helped to elevate the project beyond our most ambitious expectations.

    Not only would I recommend her to anyone looking for the design and build of a new website, I would also unhesitatingly go back to Charlotte in the future, knowing that I could expect the best possible results.
    Nigel Passingham, Director, Infoplan Event & Wedding Planning
  • Charlotte worked with us to develop powerful web design strategies and translate those concepts into an actionable, cost-effective website.

    Her proprietary approach to online marketing and web design was results-oriented and focused on our individual needs. She was utterly committed to doing things right the first time.
    Isabel Camano, Shave the Bush
  • Charlotte listened to our brief for a new company website and understood our needs.

    She provided a very prompt and efficient service – often pushing us to adhere to deadlines and assisting with corporate redesign in addition to the original brief.
    Janet Sealy, Director, Janet Sealy Partnership Ltd
  • A really positive experience and am keen to use services again and again.
    I’m very pleased all round.
    Graeme Ogilvy, Jardine Lloyd Thompson
  • Charlotte helped our small business define our requirements and vision, and then personally built our web-site. We had the opportunity to review the progress and direction during check points in the process.

    Charlotte was great to work with, shielded us from the technology, and delivered a great result.
    Jack Barnett, Jordans Village Store
[X]

Thank you for visiting the Neon website.

We are currently booked up until September 2018 and not taking on any new projects.

Please do visit us again soon though!

Best regards,

Charlotte