Jump to content

Archived

This topic is now archived and is closed to further replies.

Keith Vaugh

Button scrolling to part of page

Recommended Posts

Keith Vaugh

Hi All.

 

Is is possible in DMS to have one single page with the buttons jumping to a section of the page. Something similar to this example:

http://www.letterpressworkers.net/

 

Thanks

Keith

 

Share this post


Link to post
Share on other sites
Danny

HI,

 

Yeah, you will just want to use the necessary HTML and probably a smooth scrolling script. YOu could also just ScrollSpy.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh

Excellent Danny. Really don't what to deviate away from pagelines and have one or two site I want to go at.

 

Anywhere you can recommend that I should look for inspiration? Ideally I'd like the nav bar to stick to the top of the page.  I think I may have some of the HTML solution used already but not a scrolling script.

 

Thanks again

Keith 

Share this post


Link to post
Share on other sites
James B

Hi Keith

 

I've not used anything like that directly, but this seems to follow the guidelines of what you're looking for http://css-tricks.com/snippets/jquery/smooth-scrolling/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Keith Vaugh

I think I am getting the general idea. 

 

So being a complete DMS noob, I think I am over complicating development... For this smooth scrolling I guess I'll add the script to the custom code section in the header. So then in the template section, now would I create the points of interest? 

 

I was thinking I could use html markup 

<h1 Id="About">ABOUT</h1>

etc... and then add the URL to the button in the menu. If this is correct (noob question) where do I add the Id in DMS?

 

I have also noticed on the pagelines tour page, a slight colour change between section on a page. Is there a control somewhere that I have missed? 

Share this post


Link to post
Share on other sites
James B

Hi Keith

 

Scripts you'd place in the scripts tab via the css panel.

 

http://screencast.com/t/YW3dZTebotB

 

I'm not sure what you mean by add the ID in DMS, you've referenced the ID in the html.

 

Do you mean like - http://screencast.com/t/15N0Lted1o Section areas can be colored by css by assigned a class in the styling and then adding your color css code in the css panel.  Or by using the preset section area color options. http://screencast.com/t/bfYCjt1KX


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks James. 

 

The scripts is where I was thing (still in framework mode "header")

 

The styling class I am a little confused by. I have tried adding something like:

background: #dedede; 

but it had no affect and disappeared from the box. 

 

With reference to the ID tag, what I am thinking about is on a long scrolling page have a title with an ID-tag. Then in the menu I would link to a URL some like: h t t p://www.domainname.com/#ID-tag

Share this post


Link to post
Share on other sites
Danny

OK, the simplest way I can remember (did this a long time ago) would be to add your menu items and in the URL, add something like this:

 

About menu item = URL: #about

Contact menu item = URL: #contact

 

and so on for all your menu items.

 

Then on your page, use a MediaBox or TextBox, position them above the section you want to link to and in the options add something like this:

 

<span id="about"></span>

About us Section is here

 

<span id="contact"></span>

Contact section is here

 

And so on.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks Danny. That work and did some manipulating

 

Have tried the script above, but didn't get the scrolling action. Then I tried to add this line of code to the custom script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

but now I can't get back into DMS editor. The site I am working on is: http://www.themarketingsource.ie/

 

Is there anything I can do?

Share this post


Link to post
Share on other sites
Simon

Go into wp-admin there is a pagelines area, you can remove that there.

 

Jquery is already loaded by WordPress, you dont have to add that.

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks Simon.

Share this post


Link to post
Share on other sites

×