The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Back to top and Back at the end.

View previous topic View next topic Go down

Solved Back to top and Back at the end.

Post by smurfavr on October 16th 2016, 10:38 am

How can I make the code with the double-headed arrow.
Back to top.
Back at the end.



Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>


Last edited by smurfavr on October 18th 2016, 11:17 am; edited 2 times in total

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SLGray on October 16th 2016, 9:18 pm

Is the issue that the down arrow does not appear?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 16th 2016, 10:12 pm

I remember you wanting to have a back to top button. You can follow a similar process for the 'back to bottom' button.

Currently you have this code on your site for the back to top button:
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Please replace it with this one:
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

Then, also add in this code for the back to bottom button:
Code:
<a href="#bottom" style="padding:2px 6px;font-weight:bold;font-size:24px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">v</a>

I've already tested this out on your Forum using Devtools and it worked for me c:

Let me know if you have any issues ^^

Valoish
Forumember

Female Posts : 114
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.com

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 17th 2016, 4:55 am

How to buttons closer to each other because at the moment between them is a little off.


The new button want the line which is under the pointer to move over the arrow as in the other button.

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 17th 2016, 5:18 am

Decrease the value in the bolded red part for the 'back to top' button code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

To have the line above the arrow you'd have to create an image (I'd suggest making an image for both the back to top and back to bottom buttons). I believe I gave you a code with an image instead of text in it in your previous thread..

Back to top button with image:
Code:
<a href="#top" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top"><img src="back to top arrow image"></a>

Back to bottom button with image:
Code:
<a href="#bottom" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the bottom"><img src="back to bottom arrow image"></a>

Make sure to change the width and height for each button in the code, otherwise the image won't show.

Valoish
Forumember

Female Posts : 114
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.com

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 17th 2016, 5:33 am

@Valoish wrote:Decrease the value in the bolded red part for the 'back to top' button code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

To have the line above the arrow you'd have to create an image (I'd suggest making an image for both the back to top and back to bottom buttons). I believe I gave you a code with an image instead of text in it in your previous thread..

Back to top button with image:
Code:
<a href="#top" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top"><img src="back to top arrow image"></a>

Back to bottom button with image:
Code:
<a href="#bottom" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the bottom"><img src="back to bottom arrow image"></a>

Make sure to change the width and height for each button in the code, otherwise the image won't show.


I put this code but arrows disappeared. I do not know how to set up. Can you do it and give it?

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 17th 2016, 5:39 am

I'm currently on a phone so I'll work on it some time tomorrow. Unless someone beats me to it xD

Valoish
Forumember

Female Posts : 114
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.com

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 18th 2016, 2:48 am

Back to top:
Code:
<a href="#top" style="width: 30px; height: 32px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/213.png"></a>

Back to bottom:
Code:
<a href="#bottom" style="width: 30px; height: 32px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/113.png"></a>

The buttons are slightly separated so that they don't look super squished together, or reflected.

Valoish
Forumember

Female Posts : 114
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.com

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 5:47 am

Can the size of the buttons is as of this code.
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Those of your code are quite large.

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 18th 2016, 5:53 am

Sure thing I'll resize the arrows when I'm on my laptop tomorrow c:

Valoish
Forumember

Female Posts : 114
Reputation : 25
Language : English
Location : NYC

http://www.canvasforums.com

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SarkZKalie on October 18th 2016, 8:10 am

Add a new class to these code, give it some css, like this :
Code:
<a href="#top" class="valoish" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>
Same w bottom one.
Then, add this to your CSS
Code:
a.valoish img {width:22px}

SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 9:03 am

I do not know how to do about the bottom of the forum.

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by vietkanpy on October 18th 2016, 10:33 am

Code:
<a href="#top" style="width: 20px;height: 22px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/213.png" style="width: 20px;"/></a>
 
<a href="#page-footer" style="width: 20px;height: 22px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/113.png" style="width: 20px;"/></a>

test?

vietkanpy
Forumember

Male Posts : 39
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 11:17 am

Thank you vietkanpy.

smurfavr
Active Poster

Male Posts : 1417
Reputation : 12
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SLGray on October 18th 2016, 10:58 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum