Community Forums › Forums › Archived Forums › Design Tips and Tricks › Single Page Genesis Site (NO scrolling) – theme?
- This topic has 2 replies, 2 voices, and was last updated 9 years ago by designdudes.
-
AuthorPosts
-
April 3, 2015 at 2:41 am #146536designdudesMember
Hi all.
I am trying to create a single page site with a fixed background. There should be no scrolling until it hits mobile (based entirely on content). I have figured out the CSS for the fixed background/etc., the part that is troubling me is that I would like the content for each "page" (i.e., About, Contact, Portfolio, etc.) to load on toggle of the navigation link in a specific point on the background, and when you click on the next link, the content currently there fades and the new content loads.
Basically, I am trying to make a one page website where all of the content displays based on the link clicked, but nothing new has to load. Is there a Genesis theme out there that supports this kind of work? I know how to code it with a static HTML/CSS page (toggling visibility, etc.), and even know enough jQuery to get it to work with animations, but it seems silly to do all of that to end up with a non-Genesis static page when I really am trying to keep things Genesis.
Google has about 95059383498343 "single page" themes out there, but they all seem to be scroll/Parallax sites!
Thanks for any help...
April 3, 2015 at 6:13 pm #146607ᴅᴀᴠɪᴅMemberI haven't come across a Genesis child theme that does this, no. It would be something you would create using a custom page template.
I love helping creative entrepreneurs build epic things with WP & Genesis.
April 4, 2015 at 12:21 pm #146672designdudesMemberOkay, so, it's been resolved. For anyone looking to give a shot themselves...
1) I downloaded the JS from CSS Tricks, see here: https://css-tricks.com/rethinking-dynamic-page-replacing-content/
2) In order for the script to work, you need to make sure you link jQuery and both script files (Minimizr and the custom dynamicpage.js script included in the download).
3) To get it to work specifically on your site, there are some CSS tags in the dynamicpage.js file that you're going to need to change. In particular for the StudioPress 411 theme, change every instance of...
"#main-content" to ".content"
"#page-wrap" to ".site-container"
"#guts" to ".entry"A couple of notes...
- To have it actually run the code based on the clicked link, I used this code instead of the provided code in dynamicpage.js, placed before the wrapper height calculation:$('.genesis-nav-menu a').click(function(){ _link = $(this).attr("href"); history.pushState(null, null, _link); loadContent(_link); return false; });
- I couldn't get the current-menu-item class to remove and apply to the new page's corresponding anchor tag. Since my design doesn't include a current-menu-item style difference, it's not a big deal to me, but in case that's something you want you should know you may need to dig a little more...
Here's the site with the working example, running Genesis 411 theme: http://designdudes.net
Cheers.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.