cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
heidi1
Community Contributor

Custom Buttons on a Page

Jump to solution

I want to create a button on the bottom of each of my module pages that will serve as an "anchor" that takes folks back to the top of the page.  Does anybody have the code for that?  I am a member of the marvelous Canvashacks course and couldn't find this information there.

Thanks,

Heidi

1 Solution

Accepted Solutions
d_ellis
Community Contributor

Hi Heidi

Yep, as  @chofer ​ says, you need to create an "anchor" ID at the top of the page and a link to the anchor in a button at the bottom of the page. ("Anchor" in HTML terminology, by the way, usually refers to the destination rather than the link that leads to it.)

Alternatively, you could use one of the IDs already in Canvas. This has the advantage of skipping the creation of an anchor - but it has the disadvantage of potentially breaking if Canvas changes the ID names further down the track. This is what a "Return to the top of the page" link would look like in HTML view:

     <a href="#wrapper">Return to top</a>

View solution in original post

9 Replies
kona
Community Coach
Community Coach

 @heidi1 , this is the best resource that I'm aware of - Using the Canvas Styleguide: Buttons

chofer
Community Coach
Community Coach

Hi  @heidi1 ​...

You'll want to check out this discussion topic that was posted last month.  Links to headers within pages​  Essentially what you'll want to do it the reverse of what  @d_ellis ​ has described in his answer.  I hope this helps, Heidi!

d_ellis
Community Contributor

Hi Heidi

Yep, as  @chofer ​ says, you need to create an "anchor" ID at the top of the page and a link to the anchor in a button at the bottom of the page. ("Anchor" in HTML terminology, by the way, usually refers to the destination rather than the link that leads to it.)

Alternatively, you could use one of the IDs already in Canvas. This has the advantage of skipping the creation of an anchor - but it has the disadvantage of potentially breaking if Canvas changes the ID names further down the track. This is what a "Return to the top of the page" link would look like in HTML view:

     <a href="#wrapper">Return to top</a>

View solution in original post

heidi1
Community Contributor

Thanks Kona.  I had located the page you referenced through the Canvashacks course, but couldn't find the anchoring info.  Chris response below nailed it for me, though.

Heidi

heidi1
Community Contributor

Perfect!

Thanks

Heidi

heidi1
Community Contributor

Additionally, I would like to know the trick for a page layout in Canvas so

that the page looks right no matter the resolution. So, I'm not sure

exactly what I'm asking for - margin info, pixel info...

If I have code for a banner on my page, what width do I use so that it runs

the length of the entire page?

Thanks,

Heidi

kona
Community Coach
Community Coach

I'm not sure about banners, but I think using the page I originally sent you to it should automatically size the buttons. Hopefully someone else can help with the banner!

d_ellis
Community Contributor

Hi again  @heidi1 . To get an image to stretch across a page you can add the code here in bold:

<img style="width:100%;" src="..." />

This will scale the image so that it always stretches across the screen. Some caveats:

  • Technically, it stretches the image so that it fills the containing object, so if you put it inside a div or paragraph it will only stretch to fill that smaller space.
  • This approach can mean that the image gets very small when viewed from a mobile device, so I suggest testing it out on a few different devices.
  • If you resize the window after loading the page the image should shrink to fit the new space. In some browsers it might not "grow" to fit an enlarged page, however. Refreshing the page will resolve this.
kona
Community Coach
Community Coach

 @d_ellis , thanks for the code! Just tried it myself and it worked perfectly! Smiley Happy