Question

162

jQuery – Hide menu/sidebar when click in the body area

rated 0 times [ 169] [ 7] / answers: 1 / hits: 7315 / 10 Years ago, mon, april 21, 2014, 12:00:00

I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).

Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?

I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!

Here is my site: Josh Diaz Portfolio

And here is a JSFiddle: JSFiddle

My HTML:

<div class=wrap>

<!--Sidebar-->

<!--Info Panel-->

<div class=infoPanel>

    <nav class=closeBtn>  <a href=#>X</a>



    </nav>

    <div class=infoText>

            <h2>infoPanel</h2>



        <p>Copy goes here.</p>

    </div>

</div>

<section class=sidebar>

    <div class=sidebarNav>

        <nav>   <a class=infoLink href=#>INFO</a>



        </nav>

    </div>

    <div class=content>

        <section class=projects>

            <div class=wrapper>

                <ul class=grid>

                    <li>    <a href=prj.html>

                    <div class=caption><span>Image Go Here</span></div>

                    <img src=http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg />

                </a>



                    </li>

                    <li>    <a href=prj.html>

                    <div class=caption><span>Image Go Here</span></div>

                    <img src=http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg />

                </a>



                    </li>

                    <li>    <a href=prj.html>

                    <div class=caption><span>Images Go Here</span></div>

                    <img src=http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg />

                </a>



                    </li>

                    <li>    <a href=prj.html>

                    <div class=caption><span>Image Go Here</span></div>

                    <img src=http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg />

                </a>



                    </li>

                </ul>

            </div>

        </section>

    </div>

</section>

My JS:

        $(document).ready(function () {



        var menu = close;



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



            if (menu == close) {

                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');

                menu = open;

            } else {

                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');

                menu = close;

            }

        });



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



            if (menu == close) {

                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');

                menu = open;

            } else {

                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');

                menu = close;

            }

        });



    });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadon

Add To Favorites

Follow

Total Points: 488

Total Questions: 105

Total Answers: 105

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

answered 10 Years ago elishaannac · Accepted Answer

Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?

Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.

Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/

    $(document).ready(function () {



        var menu = close;            

        var $infoLink = $(.infoLink);

        var $infoPanel = $(.infoPanel);

        var $closeButton = $(.closeBtn a);

        var $document = $(document);



        $infoLink.on(click.nav,function (e) {

            e.preventDefault();

            e.stopPropagation();

            sidebar(open);

        });



        $closeButton.on(click.nav,function (e) {

            e.preventDefault();

            e.stopPropagation();

            sidebar(close);

        });



        $document.on(click.nav, function(e) {

            if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {

                 sidebar(close);

            }

        });



        function sidebar(action) {

            if (action == open) {

                $('.infoPanel').css('-webkit-transform', 'translate(0,0)');

                menu = open;

            } else if (action == close) {

                console.log(stuff);

                $('.infoPanel').css('-webkit-transform', 'translate(100%,0)');

                menu = close;

            }

        }

    });