Show and Hide Content Issue - Please Help

Design help Animations & Interactions
1

Hi all,

Using webflows built in interactions I managed to recreate my project planner - which is an interactive form that pops up from my footer.

I had to lose the sliders from my old website as Webflow doesn’t support these yet and I’m trying to create everything I can without external code.

The only issue I have is that when I click to open the Project Planner it opens below the browser meaning I have to scroll down to see its content.

Does anyone know how I can get it to open so it opens and pushes the footer down like on my old hand coded site.

Here is the new site (only the homepage at mo - links wont go anywhere) http://overtongraphics.webflow.com/

Edit Mode: https://webflow.com/design/overtongraphics?preview=4267affed08145f6daf9539b1a4a8833

And here is my old site - so you can see how I wish the Project Planner to open

http://www.overtongraphics.com/overtongraphics

Thanks for any help

Much appreciated

Josh

2

It actually pushes the footer away. What you’d like is the site to scroll along I guess. Couldn’t find how to, but your page is very nice. I like how the header behave and loops, your planner, refinement ion hover on images, apparition of images… very nice.

1 Like
3

Thanks Vincent! really appreciate your feedback on my design.
Got a long way to go to get the site live but its definitely faster than hand coding.

Hope someone else finds a way to fix my issue.

How is your site build going? anything to share?
Cheers

4

@OvertonGraphics You could try a little hack for this one. Give a footer a unique id and make the button to scroll to that section. Maybe that will work for you?

1 Like
5

Thanks - thats an interesting idea - can you go into more detail for me please? Sorry

8

I think @bartekkustra is mentioning the in-page linking feature of Webflow. It’s the third icon in the link panel : http://cl.ly/image/0U043L341R2P of the Settings (D) tab. The drop-down list will list the UNIQUE IDs you’ve put on certain elements in their General Settings panel in the Settings (D) tab http://cl.ly/image/441S0R162i2o

Tip: if you want to link to a section with unique ID on another page, use the normal link (first icon) and write the unique ID name after a “#” sign, like that : /about#job-section (the unique ID here is “job-section” and the page is “about.html”)

2 Likes
9

Wow - that worked 100% - check it out

http://overtongraphics.webflow.com/

Thanks very much to you both!

Made my day that has.

2 Likes
10

(:

I keep your site as a reference for inspiration. I also like the very subtle image behind the header. Could you let the public link work for another week? I’d like to check 2 or 3 things but I don’t have time right now.

1 Like
11

Actually… how does your unfolding planner works? To begin with, I don’t get why the planner is visible by default in edit and hides as soon as we enter preview? And what’s the solution you opted for? In page linking or the script one? (script has been erased here it seems)

1 Like
12

Hi Vincent, in this case, I removed that script, because it did not add any value to the solution by @bartekkustra and the linking of section IDs. But yes, one can just use jQuery slideToggle function as an alternate to interactions and standard ui elements. I was happy that in this case, all was able to be done using the UI :smile:

We will add some documentation too soon, on using jQuery with Webflow, if you want to do a few custom things in code, some neat little tricks. We can include how to make a slideToggle for the people who want to know how it is done in Webflow.

Cheers

1 Like
13

Public link will always be up. Just message me if its not working - not sure if webflow randomly generate that link every week or something.

Thanks again regarding my site design - very much appreciated!

14

Its visible in planner because it gets hidden by an “initial appearance” interaction that the whole row has - and interactions don’t activate till in preview - therefore I can leave that on whilst working on it in design without having to constantly hide it again when I want to test. :slight_smile:

15

Hi Dave - Yes it seems the script wasn’t needed this time - thanks for it though. Its so cool that everything I’ve built so far was achievable without code. Never seen such a powerful website builder.

Congratulations, can’t wait for all the new features :smile:

16

Gotcha. I was under the false impression that “initial appearance” was not applyable to a target element. So simple then (:

1 Like