Features
Plans and prices
Community
Support
About us
EN PT ES
Wiki
Search
Content
Discussion
History
Backlinks

How to build a single page website with slide effects?

This article explains how to build a website where menu options target different places within the same page, with smooth transitioning between views.

First, let’s see how to create options that slide to another place in the same page.

To achieve this, follow the steps below:  
 
1) Create a menu with all options, setting each option to point to an external link. Each link will be the name of an anchor.
For example, an option will point to the #services external link. 
The image below shows how to define options:

 




 

2) Set the anchors in the corresponding places; that is to say, the places where you want to go upon clicking on each menu option.

The HTML code to set an anchor is as follows:
<a name="services"></a>

If you only want to set one anchor in a certain place, you can add a Free HTML GXportlet using the code shown above. Repeat this process for every anchor you want to create.
To add an anchor in a Content GXportlet, you can add this code at the beginning of the content abstract or body.

Once we have completed the previous two steps we will have a menu with options. Clicking on an option will take us to a certain place within the same page.

The websites G. CASCO and TecnoSeguridad show in action what we have explained.
 

How to configure a sliding transition effect?

If you want to make this sliding effect smoother that with HTML, you can add JavaScript code at the beginning of the page.

To do so, follow the steps below:
 
1) From the backend, go to the options Design -> HTML.
Click on the New button to open an editor. 
Click on this button 

In the edit area, copy the following code:

<script src="http://www.mysite.com/static/shared/jquery/jquery-1.7.1.min.js"></script>
<script src="http://www.mysite.com/static/shared/jquery/jquery.noconflict.js"></script>
<script src="http://www.mysite.com/static/landingpages/plugins.js"></script>

Replace http://www.mysite.com by the URL of your site in production.

Click on the Save button.
 
If the website is in more than one language, you will have to add this code to each language.


2) Open the page design view, and add the Free HTML GXportlet at the beginning of the page.
Click on this button:   and associate the HTML code defined in the previous step.



Categories:

Wiki home
Categories
Recents changes
Do you want to know the latest news? Follow us on

PRODUCT
Features
GXportal Online
GXportal Corporate
Frecuently Asked Questions
TOUR
Demo
Free online course
Documentation
Showcase
COMPANY
About us
Contact
Support
Terms of use
COMMUNITY
Wiki
Blog
Facebook
Twitter
© All rights reserved. GeneXus TM is registered to GeneXus S.A. | Privacy Policy | Contact information