CODEWITHSUNDEEP
jquery
Autoresponder
Autoresponder

Reputation: 129

how to toggle a sliding panel with javascript

First time poster here. I've assembled a scrolling website that also has a sliding panel gallery. Which is where the problem is - when a user clicks on a thumbnail, a corresponding large image slides up using an "animate" command. The user is required to click again on the large image to return to the thumbnail view, to navigate further.

THE PROBLEM: It turns out this isn't very intuitive. People like to click where they want to click, not in a prescribed / recommended sequence. While in the large image view, nothing else is visible even if a user has clicked on "Home" or some other section, which scrolls into position upon click but is invisible behind the large gallery image.

I need to find the code to close the large image view when a user either clicks on the image, or on any of the other menu sections visible at the bottom,and scroll to the relevant clicked section. All these sections use a "goToByScroll" script. The initial thumbnail view of the gallery also slides into view using a "goTobyScroll" script.

Per this response from the help forum on the jquery site, the # image and # wrapper are what need to close upon click.

Thanks for reading, and for any help.

UPDATE: (Apologies at the belated update. As an amateur coder this stuff can be intimidating - I depend on others to actually do anything that is more than mere cut-paste:-)Thanks to both posters for taking the time and trouble. For the benefit of those visiting via search, here is the code that actually worked in this case:

$('#top').live('click',function(){ $this = $('#wrapper > img'); $('#description').empty().hide();

                $('#thumbsWrapper').css('z-index','100')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $('#wrapper > img');
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });

});

Thanks also to everybody involved with running/moderating SO.

Upvotes: 0

Views: 369

Answers (2)

fedmich
fedmich

Reputation: 5381

put this code inside goToByScroll() function

$('#wrapper img').trigger('click')

$('#wrapper img') only shows if you have something is shown. but add some class to the main image so its more specific. Something like

$('#wrapper img.big_preview').trigger('click')

Upvotes: 1

DanyZift
DanyZift

Reputation: 687

Create your handler and assign it to your image and the other areas you mention.

var isOpen = false;
...

$('container').delegate('.my-image', 'click' function(e)){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
}.delegate('other-area', 'click', function(){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
})

Use a boolean value to determine if the state is open or closed. You can also use a classname if you wish. In jQuery also you have the option of using a toggle() function.

Upvotes: 0

Related Questions