Hi Aaron,
I,m not sure if it's just me, but it doesn't appear that your arrow is working on your linked page... No matter how many times I have clicked on it, it doesn't take me 'back to top'.
Same here. Your URL adds the "/#sm-page-header" to the end but stays in place. Maybe it's the #sm-page-header? The href used in most of the other codes on this page are #Top. Or maybe it needs to be a capital #Sm-page-header due to SM url rules?
Either way, for those interested, here's what I used in my HTML tab.
<div id="topButton">
<a href="#Top" title="Return to Top"><img src="/photos/i-JF9XMkb/0/X3/i-JF9XMkb-X3.png" title="Return to Top" alt="" /></a>
</div>
Hi Aaron,
I,m not sure if it's just me, but it doesn't appear that your arrow is working on your linked page... No matter how many times I have clicked on it, it doesn't take me 'back to top'.
Ahh, bummer. I tested it in Chrome on a Winblows machine and it worked fine. I've now fixed the HTML so that it works. Test it out and let me know?
Same here. Your URL adds the "/#sm-page-header" to the end but stays in place. Maybe it's the #sm-page-header? The href used in most of the other codes on this page are #Top. Or maybe it needs to be a capital #Sm-page-header due to SM url rules?
Either way, for those interested, here's what I used in my HTML tab.
<div id="topButton">
<a href="#Top" title="Return to Top"><img src="/photos/i-JF9XMkb/0/X3/i-JF9XMkb-X3.png" title="Return to Top" alt="" /></a>
</div>
I'm not sure exactly why my original code didn't work but for some reason the page didn't load the "sm-page-header" HTML code for every browser. I changed it to point to "sm-page-content", and it works fine.
Here's how the code works. When you create HTML you can give things "ID's". You specify it like "<div id="MyID">Some text</div> You can link to these ID's using the "#" symbol. In this case you could have the browser jump to the spot where "MyID" is by using "#MyID".
In Allen's code he specifies his div to be called "Top". This means that your link will jump to wherever you've placed the HTML block. If you place the HTML block at the top of your page, you're OK. But if you place the HTML block at the very bottom of the page like I did, then your "Back to Top" will actually jump to the bottom of the page!
My code makes it so that it doesn't matter where you put the HTML block, it will always link to something at the top of the code ... something that SmugMug has hard coded in. My fixed code should be all set now (I hope!).
Thanks for pointing me in the right direction. I have no HTML knowledge other than what I scrounge up around here. I wanted to create a button on my wedding services page that takes a user right to the package/pricing section. Trying what you said I first made an HTML block and used similar code to what Allen used to ID the top of the page.
Allen's original.
<div id="[COLOR="Red"]topButton[/COLOR]">
<a href="[COLOR="red"]#top[/COLOR]">BACK TO TOP</a>
</div>
First I used "wedPackPrice" where both those red "topButton" and "#top" are located. It didn't work. I just stayed at the top of the page.
I then found some code online to place a name to the specific part of the page.
<a name="[COLOR="Red"]exactname[/COLOR]" id="[COLOR="Red"]exactname[/COLOR]">Linking Directly to a Specific Location</a>
Using what you told me I then changed that to:
<a name="[COLOR="Red"]wed[/COLOR]" id="[COLOR="Red"]wed[/COLOR]"><span style="font-family: Lancelot; color: #5A515E; font-size: xx-large;">So, What's It All Cost?</span></a>
My button HTML
<div id="[COLOR="Red"]wedPackPrice[/COLOR]">
<a href="[COLOR="Red"]#wed[/COLOR]" title="Jump to Package & Price"><img src="/photos/i-hGg7f5c/0/O/i-hGg7f5c.png" title="Jump to Package & Price" alt="" /></a>
</div>
Yadda-yadda-yadda CSS stuff in the pertinent tab, and presto, it worked!
Thanks for the tip! It's on the link in the sig here, just hit the $ symbol. I'm going to be modifying it further to get a nicer landing too. Right now it's too high.
Cool beans. Just in case someone else is trying this out. I just sorted how to get my jump moved up with out having to have any text, or whatever. I simply put an HTML block in place and added this code. You'll have to use your own ID naturally.
Ahh, bummer. I tested it in Chrome on a Winblows machine and it worked fine. I've now fixed the HTML so that it works. Test it out and let me know?
I'm not sure exactly why my original code didn't work but for some reason the page didn't load the "sm-page-header" HTML code for every browser. I changed it to point to "sm-page-content", and it works fine.
Here's how the code works. When you create HTML you can give things "ID's". You specify it like "<div id="MyID">Some text</div> You can link to these ID's using the "#" symbol. In this case you could have the browser jump to the spot where "MyID" is by using "#MyID".
In Allen's code he specifies his div to be called "Top". This means that your link will jump to wherever you've placed the HTML block. If you place the HTML block at the top of your page, you're OK. But if you place the HTML block at the very bottom of the page like I did, then your "Back to Top" will actually jump to the bottom of the page!
My code makes it so that it doesn't matter where you put the HTML block, it will always link to something at the top of the code ... something that SmugMug has hard coded in. My fixed code should be all set now (I hope!).
Aaron, your code seems to be working fine for me now on your linked page.
Is there anyway to add this feature to ALL collage landscape style pages w/o adding an html block to each individual page?
I tried this using a gallery wide html box and it worked for ALL the galleries EXEPT those swithed to "Make this gallery custom." Two issues... I only want the arrow to display on the collage landscape style pages and those are all marked "Make this gallery custom."
Any way to this site wide even for those custom galleries or do I have to add the code for each now that I made them custom?
Any way to this site wide even for those custom galleries or do I have to add the code for each now that I made them custom?
Hmm, that's a good question. I imagined that anything in "All Galleries" would take, regardless of whether or not you made it custom. I thought the Custom Gallery just made it so that any additional things added were only specific to that page. It should still take anything in All Galleries.
If it doesn't work that way, I might email the Support Heroes and see what they say.
For what it's worth, the class "sm-tiles-row-organic" seems to be specific to the collage layout. Not sure how we can use that to show the jump to top button though.
Hmm, that's a good question. I imagined that anything in "All Galleries" would take, regardless of whether or not you made it custom. I thought the Custom Gallery just made it so that any additional things added were only specific to that page. It should still take anything in All Galleries.
If it doesn't work that way, I might email the Support Heroes and see what they say.
For what it's worth, the class "sm-tiles-row-organic" seems to be specific to the collage layout. Not sure how we can use that to show the jump to top button though.
Comments
I,m not sure if it's just me, but it doesn't appear that your arrow is working on your linked page... No matter how many times I have clicked on it, it doesn't take me 'back to top'.
I'm using a Macbook Pro with Google Chrome
Robin
Either way, for those interested, here's what I used in my HTML tab.
Ahh, bummer. I tested it in Chrome on a Winblows machine and it worked fine. I've now fixed the HTML so that it works. Test it out and let me know?
I'm not sure exactly why my original code didn't work but for some reason the page didn't load the "sm-page-header" HTML code for every browser. I changed it to point to "sm-page-content", and it works fine.
Here's how the code works. When you create HTML you can give things "ID's". You specify it like "<div id="MyID">Some text</div> You can link to these ID's using the "#" symbol. In this case you could have the browser jump to the spot where "MyID" is by using "#MyID".
In Allen's code he specifies his div to be called "Top". This means that your link will jump to wherever you've placed the HTML block. If you place the HTML block at the top of your page, you're OK. But if you place the HTML block at the very bottom of the page like I did, then your "Back to Top" will actually jump to the bottom of the page!
My code makes it so that it doesn't matter where you put the HTML block, it will always link to something at the top of the code ... something that SmugMug has hard coded in. My fixed code should be all set now (I hope!).
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Allen's original.
First I used "wedPackPrice" where both those red "topButton" and "#top" are located. It didn't work. I just stayed at the top of the page.
I then found some code online to place a name to the specific part of the page.
Using what you told me I then changed that to:
My button HTML
Yadda-yadda-yadda CSS stuff in the pertinent tab, and presto, it worked!
Thanks for the tip! It's on the link in the sig here, just hit the $ symbol. I'm going to be modifying it further to get a nicer landing too. Right now it's too high.
Aaron, your code seems to be working fine for me now on your linked page.
Robin
Is there anyway to add this feature to ALL collage landscape style pages w/o adding an html block to each individual page?
I tried this using a gallery wide html box and it worked for ALL the galleries EXEPT those swithed to "Make this gallery custom." Two issues... I only want the arrow to display on the collage landscape style pages and those are all marked "Make this gallery custom."
Any way to this site wide even for those custom galleries or do I have to add the code for each now that I made them custom?
Hmm, that's a good question. I imagined that anything in "All Galleries" would take, regardless of whether or not you made it custom. I thought the Custom Gallery just made it so that any additional things added were only specific to that page. It should still take anything in All Galleries.
If it doesn't work that way, I might email the Support Heroes and see what they say.
For what it's worth, the class "sm-tiles-row-organic" seems to be specific to the collage layout. Not sure how we can use that to show the jump to top button though.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I tried that. I actually posted another thread since this one died...
http://dgrin.com/showthread.php?t=248118
It did not work.