A little help with Hoverable Dropdown...

User 232214 Photo


COO
827 posts

mark johnson wrote:
Please do. As well, can you look into the multiple drop-downs thing, too?
Thanks!
MJ

Bob Visser wrote:

(We need to look at that component to see if it needs updating in line with the post)


You really should not (have to) link in additional JS libraries for this, it only increases the chances of conflicts.

Your issue simply seems that the second button target the first dropdown with data-toggle="dropdown-2". How these dropdowns work is that the Data Toggle attribute targets the ID of the dropdown. For the second button simply change the attribute value to the ID of the second dropdown (id="dropdown-2-copy-1" in your case) and it will work already.

We documented how the Toggler works here: http://framer.coffeecup.com/tips/index.html#tip_016

(Btw, I would recommend changing both the ID and value to something like 'dropdown-3' instead of working with 'copy')

I know, as soon as you know how this works it's crazy simple :cool:
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 283347 Photo


Registered User
340 posts

Thanks, Bob...

Still messing with the toggle issue to no avial. I'll keep trying on that.

However, the script from James is the only way (so far) that keeps the whole thing from jumping to the top and closing itself when when you click on it on a mobile device...clicking on my pc does the same thing, but the hover works. ...Clicking is the issue...

Bob Visser wrote:
mark johnson wrote:
Please do. As well, can you look into the multiple drop-downs thing, too?
Thanks!
MJ

Bob Visser wrote:

(We need to look at that component to see if it needs updating in line with the post)


You really should not (have to) link in additional JS libraries for this, it only increases the chances of conflicts.

Your issue simply seems that the second button target the first dropdown with data-toggle="dropdown-2". How these dropdowns work is that the Data Toggle attribute targets the ID of the dropdown. For the second button simply change the attribute value to the ID of the second dropdown (id="dropdown-2-copy-1" in your case) and it will work already.

We documented how the Toggler works here: http://framer.coffeecup.com/tips/index.html#tip_016

(Btw, I would recommend changing both the ID and value to something like 'dropdown-3' instead of working with 'copy')

I know, as soon as you know how this works it's crazy simple :cool:
User 232214 Photo


COO
827 posts

mark johnson wrote:
Thanks, Bob...

However, the script from James is the only way (so far) that keeps the whole thing from jumping to the top and closing itself when when you click on it on a mobile device...clicking on my pc does the same thing, but the hover works. ...Clicking is the issue...


That really should not be needed.....otherwise please attach the project so I can take a look at it. Or open a support ticket.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 283347 Photo


Registered User
340 posts

Hey Bob,

I'm using the "technologic" theme. No changes at all except for adding the dropdown.
when it is clicked...which would be for mobile devices...it goes back to the top and closes. The hover works on desktop, but if you click it...to the top and close.

see herewww.5pointsswing.coffeecup.com" class="bb-url"> www.5pointsswing.coffeecup.com I just uploaded it so you can see for yourself. No need for the file as it is the provided theme with only that being added.
Thanks
MJ
User 232214 Photo


COO
827 posts

Here you go Mark: http://me.coffeecup.com/index.html

In the same theme and in the same sections as where you added the buttons I added two as well. I did exactly :P as explained in this post: http://www.coffeecup.com/forums/foundat … post265705

1. The first, blue button, links to an ID (#design) that I added to the column it sits in. The effect will be that the column scroll to the top of the window.
2. The second, purple / pink, button is not a link button but a text element using the 'button' class and data toggle with the value of the ID of the dropdown container (dropdown-3). No scrolling will happen.

I just love the power and flexibility of the Foundation 6 framework with Toggler in combination with the visual tools of Framer to make all that happen in a matter of minutes :cool:

You can download the project here to see exactly how it was done: http://bob.coffeecup.com/storage/button-demo.rff

Hope it helps!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2699991 Photo


Registered User
2,508 posts
Online Now

Hello Everybody From Sunny Bali

Please excuse my butting in at a late stage
this is my take on what I interpret as being needed,,,, if I have mis-understood then sorry and feel free to completely ignore it... :D
http://balismartproperty.coffeecup.com/index.html

attached project file

Attachments:
The Help You Need: When You Need It The Most
User 283347 Photo


Registered User
340 posts

Thanks, Bob, for the example. I was having a time getting the second one to work.
Thanks, too, Wayan, for your example. Hopefully I will be able to incorporate either or both very soon.

Have a great rest of the weekend,
MJ

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.