Sliding up panel using container link


Registered User
148 posts

Hi CC
I have a file 'slide-up.rsd' (attached .. sorry about zip files but wont upload .rsd) that brings up a panel from below when hovering over the red panel (container) at the bottom. The problem is that the 'hover' state doesn't work on touch screens.

On the file 'slide-up2.rsd' (attached) ive used a link container. this seems to work ok going up in 'RSD preview' but does not scroll down when clicking on the container link panel again, it just makes it move up again.
When clicking outside the panel the container panel downs scroll down again with a smooth transition.

Also in the 'Chrome' preview nothing much seems to work at all!

If its possible i would like the container panel to move up on a click and move down on a click (moving the panel down on a click weather clicking inside the container panel or outside it.)

any suggestions? (also cant figure out why something works in RSD preview and not Chrome?)

Thanks Tim

Attachments:
So we’re all good then : )


Registered User
434 posts

I have tried unsuccessfully to do the same thing you are trying. Most developers when researching this on the net will advise not to try to acheive this because you really must provide some kind of "hint" that a transition resides in the container for mobile touch. However I do like the plus sign in your project file and it does hint loudly to click, hover or touch me.

You can replace the hover and use mouseenter and mouseleave. This will require jquery to use addclass and removeclass.

The addclass is not so hard but acheiving removeclass relies on a click outside the area, or a button that says "close me", or somehow link into another "touch event" or even better the user scroll of the screen causing the "effect" to resume to the "normal state". I hope someone has a simple answer because this project I was experimenting with was shelved and is collecting dust.

Here was some example jquery code:


$('#elementid1')
.on('mouseenter', function() {
$("[data-tog='nest1']").each(function() {
$(this).removeClass("togon");
});
})
.on('mouseleave', function() {
$("[data-tog='nest1']").each(function() {
$(this).addClass("togon");
});
})


It does require you to add a custom data attribute call data-tog with the value of "nest1". I was trying to allow for mutiple toggling of element groups so that more than one element could be toggled off of one element id.
Break on through to the other side


Registered User
434 posts

I just remembered that Foundation 6 has a powerful built-in feature called the Toggler which can target multiple elements also and does not require any jquery. :cool:

https://foundation.zurb.com/sites/docs/toggler.html
Break on through to the other side


Registered User
148 posts

Thanks Twinstream
I’ll look into it
T.
So we’re all good then : )

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.