Scrolling back to top button
« on: May 14, 2014, 04:57:31 AM »
I'm working on a theme that I found a need to install a scroll to top button so here is how to install it. You can view it on this template http://*******/osdate/disco-lite/index.php

First upload the attached picture and install it in your themes image directory.

Download and install back_to_top.tpl and back_to_top_call.tpl into your theme.

In the index.tpl file add:
Code: [Select]
{include file="back_to_top_call.tpl"}
In the index_header.tpl file add:
Code: [Select]
{include file="back_to_top.tpl"}
In your theme css file add:
Code: [Select]
/******START BACK TO TOP********/
#back-top {
position: fixed;
bottom: 30px;
left: 0px;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(../images/up-arrow.png) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
/******END BACK TO TOP********/
« Last Edit: June 12, 2014, 11:22:31 AM by scvoyager »

*

Pharg

  • *****
  • 2,060
  • osDate Version: osDate Evo v1.0
Re: Scrolling back to top button
« Reply #1 on: May 14, 2014, 12:04:39 PM »
Hi scvoyager,

Thanks for that, awesome extra touch.
How can I make it smaller and sit at the base on the right hand side?
Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDate v2.7 & osDateEvo v1.0 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35

Re: Scrolling back to top button
« Reply #2 on: May 15, 2014, 12:43:34 AM »
In the css you can set image and font size along with setting it to right or left and then margin from bottom and side.

*

Pharg

  • *****
  • 2,060
  • osDate Version: osDate Evo v1.0
Re: Scrolling back to top button
« Reply #3 on: May 15, 2014, 01:29:26 AM »
Thanks scvoyager
Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDate v2.7 & osDateEvo v1.0 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35

*

irondutchess

  • *
  • 43
    • Date 'n' Meet
  • osDate Version: osDate v2.7
Re: Scrolling back to top button [Solved]
« Reply #4 on: January 24, 2016, 07:06:48 PM »
Hi,

All seems to work OK except that the back to top arrow is always visible and doesn't fade out when at the top of the page. All the code for that seems to be in place (see page source below).  Any idea as to why it doesn't fade out?
Code: [Select]
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="https://datenmeet.net/favicon.ico?">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

Update
For some reason it has now started working properly. Some kind of server glitch maybe, as I had made no changes, apart from the http to https in the next post.

TIA
Chris
« Last Edit: January 31, 2016, 01:21:37 PM by irondutchess »

*

irondutchess

  • *
  • 43
    • Date 'n' Meet
  • osDate Version: osDate v2.7
Re: Scrolling back to top button
« Reply #5 on: January 29, 2016, 12:24:07 PM »
As an aside to above, the line
Code: [Select]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> you might want to change to
Code: [Select]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>  in the file "back_to_top.tpl" if you use SSL, as it shows a problem when tested @ https://www.whynopadlock.com/index.html

This is only for the fussy  ::) as it shouldn't show a problem in your browser.

If you don't use SSL, and/or you are not suffering from OCD, then don't bother  :)

Nothing to do with this mod, but for the same reason, I also changed
Code: [Select]
http://pagead2.googlesyndication.com/pagead/show_ads.js to
Code: [Select]
https://pagead2.googlesyndication.com/pagead/show_ads.js in OsDate "install_files/step_5.php"
« Last Edit: January 29, 2016, 12:31:29 PM by irondutchess »

Re: Scrolling back to top button
« Reply #6 on: March 03, 2016, 02:22:04 PM »
love this addition. Everything works great. quick question though? for some reason i could not download the image you posted so i found one that i will use. of course i uploaded it to images files and changed the image name to up_arrow.png, the file extention for the image was already .png so that was not changed. But im not getting the image to show up. any ideas?  http://mustang.truedates.us/Date_now/index.php

*

irondutchess

  • *
  • 43
    • Date 'n' Meet
  • osDate Version: osDate v2.7
Re: Scrolling back to top button
« Reply #7 on: March 03, 2016, 06:08:10 PM »
Firefox element inspector results:
(1)Mine:
#back-top span {
    width: 55px;
    height: 55px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(./images/up-arrow.png) no-repeat center center;

(2)Yours:
#back-top span {
    width: 95px;
    height: 55px;
    display: block;
    margin-bottom: 7px;
    background: #OOOO url(../images/up_arrow.png) no-repeat center center;

Notice the bold red sections, your css is looking in the wrong place, it won't even be able to find the folder. Remove one of the dots before the slash, clear your browser cache and try again.

*

irondutchess

  • *
  • 43
    • Date 'n' Meet
  • osDate Version: osDate v2.7
Re: Scrolling back to top button
« Reply #8 on: March 03, 2016, 06:13:58 PM »
Also it is up-arrow.png not up_arrow.png  :)

*

Pharg

  • *****
  • 2,060
  • osDate Version: osDate Evo v1.0
Re: Scrolling back to top button
« Reply #9 on: March 03, 2016, 07:58:20 PM »
Hi irondutchess,

Thanks for correcting the typo ;)
Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDate v2.7 & osDateEvo v1.0 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35