Back to the top of page ????

aschendel · August 16, 2013

The alt doesn't matter for this, although you could replace the word "image" with something more descriptive, like "Back to the top" or something else that would help screen-readers, etc.

Butlerkid · August 16, 2013

But I don't want any text....I am trying to use an image.....as referenced in the coding.

If I wanted words, I could using the coding in post #5 of this thread.....

Hikin' Mike · August 16, 2013

Butlerkid wrote: »

Here is the current coding. Does it need the " alt-image" part.....I've deleted it twice and SM puts it back in!!!!!

<a href="#top"><img src="http://www.pleasanttravelsphotography.com/photos/i-TQdn2FC/0/30x30/i-TQdn2FC-30x30.png" alt="image" /></a>

And here is the link for the image:

http://butlerkid.smugmug.com/photos/i-TQdn2FC/0/Ti/i-TQdn2FC-Ti.png

I don't see an image. <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

Butlerkid · August 16, 2013

That's the problem....the image is not appearing!

aschendel · August 16, 2013

the alt text won't show under normal circumstances, but in some situations it can be very valuable (i.e. when the image is missing). Google should provide a wealth of information if you are concerned about it - it's a little bit of an esoteric construct in HTML so it's not exactly easy to explain.

So the main problem is that your image isn't showing up sometimes, right? (fwiw, it's not showing for me) I'd clear your cache (or try a browser you haven't used to view your site recently), and then if the image fails to show up for you I'd check the permissions all the way down to the image to ensure that it's not passworded, or in a folder that is passworded or private.

Andy

Butlerkid · August 16, 2013

How can this be so hard? Please read the postings above. Or let me summarize:

Image is in an unlisted folder. Sharing is On. External embedding is ON.

When I am NOT logged in to SM and I am using FF, the image IS showing up for me and does take me to the top of the page.

Using IE, the image does NOT show up, and there is an "x" and the word image. It does take me to the top of the page.

Another user, using the same version of FF, says the image is not showing up for him.....(but it is for me. Strange......)

I'd like the image to show up regardless of browser used. I don't understand why is it showing up for me in FF but not showing for others....

aschendel · August 16, 2013

It's not hard. Either the link is wrong or somehow restricted (passworded or private).

You are probably seeing it because it's in your browser's cache (which is why I recommended clearing that). The word "image" is unrelated to the actual problem which is that we can't get to the file using the link.

Andy

** edit, maybe try a different image, I can see this one (http://butlerkid.smugmug.com/Avatar/AVATAR/i-s92FPpS/1/Th/Clown_left-Th.png), see if that works if you put it into the img src spot.

Butlerkid · August 16, 2013

Not sure what happened to my response....

Thanks for the help. I really do not know coding....but I am generally pretty good at copying and pasting...

I guess we are making progress. I cleared the cache and now I can't see the image either!

!

So, I tried my avatar image.....no joy! Now I just see the word "image". I really think it is the coding and not the image. I even tried moving the To the Top icon into the folder with my avatar. Still no luck.

Here is the coding using the avatar:

Allen · August 16, 2013

I see spaces in the image link above, make sure you remove those.
Although it might just be a forum display problem adding the spaces, seen this in the past.

This image works removing the spaces at spots in red.
<a href="#top"><img src="http://www.pleasanttravelsphotography.com/photos/i-s92FPpS/1/30x30/i-s92FPpS-30x30.png" alt="image" /></a>

paulbrock · August 16, 2013

I can see the arrow at
http://www.pleasanttravelsphotography.com/photos/i-TQdn2FC/0/30x30/i-TQdn2FC-30x30.png

so whatever settings you had to change, they're working. Use that as the img src and you should be all set

Butlerkid · August 16, 2013

BLESS YOU, ALLEN! THANK YOU ! ! ! !<img src="https://us.v-cdn.net/6029383/emoji/wings.gif" border="0" alt="" >

OK - Here is the latest: (apparently my copy and paste skills are lacking!)

<a href="#top"><img src="http://www.pleasanttravelsphotography.com/photos/i-TQdn2FC/0/30x30/i-TQdn2FC-30x30.png" alt="image" /></a>

I checked FF and IE.....and both seemed to work!

paulbrock · August 16, 2013

working here on chrome

Butlerkid · August 17, 2013

Thanks, Paul! Today I designed a fleur de lys icon for my "To Top" image! I wanted to add a little style to my clean site!

! Too bad it's so far at the bottom of each page!

VNemeth · August 18, 2013

Butlerkid wrote: »

Thanks, Paul! Today I designed a fleur de lys icon for my "To Top" image! I wanted to add a little style to my clean site! ! Too bad it's so far at the bottom of each page!

I like the idea of having a back to top link at the bottom of galleries. I am able to get the text. I would like put the text in a solid box so it stands out. Any suggestions.

Vic

Butlerkid · August 18, 2013

I confess I have no coding experience!

((( I would just create what you want in PS and save it as a .png file. That is what I did with the fleur de lys and text.....

J Allen · August 18, 2013

VNemeth wrote: »

I like the idea of having a back to top link at the bottom of galleries. I am able to get the text. I would like put the text in a solid box so it stands out. Any suggestions.

Vic

See if you like this:

html-

<a href="#" class="mybox">Top</a>

style-

.mybox {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.mybox:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.mybox:active {
	position:relative;
	top:1px;
}

J Allen · August 18, 2013

You'll want to add some positioning rules to your class so it stays put where you want it

Butlerkid · August 18, 2013

WooHOOOOO! Someone who knows this coding stuff!

If you have any coding to get my folders and galleries to have rounded corners....I'd be mighty grateful!

!

J Allen · August 18, 2013

Butlerkid wrote: »

If you have any coding to get my folders and galleries to have rounded corners....I'd be mighty grateful! !

See here

Butlerkid · August 18, 2013

WooHOOOOO! You are my HERO!

Thank you so very much!

If you have any suggestions to improve my site.....let me have 'em!

Butlerkid · August 18, 2013

I noticed that sometimes the images on the right side are cut off..... I'll have to look into that.

And I pinned the left side menu....and when the menu slides down, it gets slightly wider (???) and that causes the images on the left side to be cut off.

Regardless, I am happy! This just means I have a little more "tweaking" to do!

!

VNemeth · August 18, 2013

J Allen wrote: »

See if you like this:

html-

 
<a href="#" class="mybox">Top</a>

style-

 
.mybox {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.mybox:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.mybox:active {
    position:relative;
    top:1px;
}

J Allen
Wow that is really cool. One final thing it is on the left side of the page. How do I get it to be on the right side.
Many thanks
Vic

J Allen · August 18, 2013

VNemeth wrote: »

J Allen
Wow that is really cool. One final thing it is on the left side of the page. How do I get it to be on the right side.
Many thanks
Vic

got a link to your site where i can see it on your page

VNemeth · August 18, 2013

J Allen wrote: »

got a link to your site where i can see it on your page

www.vnemeth.com

Vic

J Allen · August 18, 2013

VNemeth wrote: »

www.vnemeth.com

Vic

Try this, kinda a guess, I didn't see the box on your site, it's probably going to over lap your photos all the time...this would be so much smoother with java-script...if you can publish to your site I'll get it working a little better, but I need to see it.

.mybox {position:absolute;right:10px;bottom:10px}

VNemeth · August 18, 2013

J Allen wrote: »
Try this, kinda a guess, I didn't see the box on your site.
 
.mybox {position:absolute;right:10px;bottom:10px}
 

That didn't work.

Here is link to a specific gallery

http://www.vnemeth.com/Galleries/Travel/Local-Areas-Parks/Seney

Vic

J Allen · August 18, 2013

VNemeth wrote: »

That didn't work.

Here is link to a specific gallery

http://www.vnemeth.com/Galleries/Travel/Local-Areas-Parks/Seney

Vic

Try this, tested in FF:

.mybox  {position:absolute !important;right:0px}

VNemeth · August 18, 2013

J Allen wrote: »
Try this, tested in FF:
 
.mybox  {position:absolute !important;right:0px}
 

Joe
That worked perfect. Thanks for taking the time to help me.

Vic

Darter02 · August 19, 2013

Cool beans. I used this myself after seeing this thread. Thanks.

macromeister · August 19, 2013

Doesn't the HOME key on your keyboard do this?

Back to the top of page ????

Comments