Welcome to our community

Be a part of something great, join today!

Resource icon

Scroll Up/Down Buttons 1.1

No permission to download
  • Thread starter
  • Admin
  • #1

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
MarkFL submitted a new resource:

Scroll Up/Down Buttons - Allows you to add fixed scroll to top/bottom buttons.

Overview:

This product is designed to allow you to add fixed buttons to the lower right of your site to allow your users to easily scroll to the top or bottom of the page. When a user is at the top of a page, only the down button is visible, and when the user is at the bottom of the page, only the up button is visible, and when somewhere in the middle, both buttons are visible. Buttons appear and disappear as needed, even when the browser window is resized, with...
Read more about this resource...
 
  • Thread starter
  • Admin
  • #2

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
Update - Version 1.1:

  • Added support for Font Awesome icons as button arrows
  • Added StyleVars for additional customization of element styling
 

masterross

New member
Jan 21, 2019
8
Thank you!
Could you please add support for mobile styles?
It's really needed there.

Thank you once again!
 
  • Thread starter
  • Admin
  • #4

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
Thank you!
Could you please add support for mobile styles?
It's really needed there.

Thank you once again!
It should work on mobile styles, as long as you select your mobile style as one of the active styles. That is, as long as that style has the needed template hooks. If not, then you'll have to manually add those hooks.
 

masterross

New member
Jan 21, 2019
8
Hi,

thank you for reply.
It looks like footer_javascript does not exist so I added the html manually in footer but still doesnt work.
Is it possible JS to be disabled in Mobile styles??
 
  • Thread starter
  • Admin
  • #6

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
Hi,

thank you for reply.
It looks like footer_javascript does not exist so I added the html manually in footer but still doesnt work.
Is it possible JS to be disabled in Mobile styles??
I see a link in the "headinclude" template for javascript (in the default mobile style), so I doubt javascript is disabled. I don't use any mobile devices for internet though, so I can't test this. You're not using Tapatalk are you? I am virtually certain it won't work with that because it ignores most PHP plugin hooks.
 

masterross

New member
Jan 21, 2019
8
You dont need to use mobile devices.
Just select mobile style from PC :)
I just tested here and no buttons too.
 
  • Thread starter
  • Admin
  • #8

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
I don't have it enabled on any mobile styles here, but I just learned that:

"vBulletin made its mobile style to be agnostic of most all add-ons and products, so they wouldn't have to worry about any of these breaking the mobile style."

So, it's not going to work on mobile at all. Sorry.
 

masterross

New member
Jan 21, 2019
8
Thx for the info, but actually I was able to display the buttons in mobile styles by adding HTML and JS in footer mobile template and pasting CSS in mobile template vbulletin.css.
But the scrolling is not OK, looks like window and aother elements statements in JS is not executed correctly.
Anyway if you have time I'll be glad if you can check it because I'm not real programmer and cant handle myself.

Regards,
Ross
 

masterross

New member
Jan 21, 2019
8

Evgeny.Makarov

Well-known member
MHB Math Scholar
Jan 30, 2012
2,485
I don't see the need for "Go to top/bottom" buttons on desktop because one can use the Home/End keys on the keyboard. These buttons may indeed be useful in the mobile browser because as far as I know there is no easy way to go to the top or bottom of the page there.
 

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
I don't see the need for "Go to top/bottom" buttons on desktop because one can use the Home/End keys on the keyboard. These buttons may indeed be useful in the mobile browser because as far as I know there is no easy way to go to the top or bottom of the page there.
XenForo (core) and IPS (addon) both include this feature, and I find it convenient when scrolling pages using a mouse to have clickable buttons, even on a PC. :)
 

gnrx

Member
Jun 7, 2018
27
Hello!
Its possible set this buttons in the middle of the page?
I have in the same positions others icons (RGPD, push notifications...).

Thanks and regards!
 

masterross

New member
Jan 21, 2019
8
Hello!
Its possible set this buttons in the middle of the page?
I have in the same positions others icons (RGPD, push notifications...).

Thanks and regards!
You can customize them from StyleVars as is written in description :)

Regards!
 

gnrx

Member
Jun 7, 2018
27
You can customize them from StyleVars as is written in description :)

Regards!
Yes, I view that, in the StyleVars I can customize this product :)

Thank you!
 

masterross

New member
Jan 21, 2019
8
Hi mate,

I convert your mod to Opencart 2.x.
I hope you dont mind.
Here is the code:

Code:
<?xml version="1.0" encoding="utf-8"?>
  <modification>
  <name>Scroll Up/Down Buttons by MarkFL</name>
  <code>Scroll_Up_Down_Buttons</code>
  <version>1.0</version>
  <author>MarkFL</author>
  <link>https://mathhelpboards.com/vbulletin-products-61/scroll-up-down-buttons-25326.html</link>  
<file path="catalog/view/theme/*/template/common/header.tpl">
<operation error="skip">
<search><![CDATA[
</head>
]]></search>
<add position="before"><![CDATA[
<style type="text/css">
.scrollcontainer {
    display: none;
    z-index: 5000;
    position: fixed;
    bottom: 5.25em;
    right: 0.4em;
    border-radius: 3px;
    padding: 2px 2px 0px;
    font-size: 30px;
    text-align: center;
    background: #D7D7D7;
    opacity: 0.75;
	
}

.scrollcontainer div {
    height: 0;
    overflow: none;
    border: 1px solid #AAAAAA;
    border-radius: 3px;
    margin-bottom: 2px;
    padding-bottom: 0.25em;
    background: #F7F5EC;
    color: rgb(0, 153, 255);
    height: 1em;
    width: 1.1em;
    cursor: pointer;
}
.scrollcontainer .fa {
font-size: 22px;
}

.scrollcontainer > div > i {
	position: relative;
	top: -0.02em;
}
.scrollcontainer:hover, .scrollcontainer:active {
	opacity: 1;
}

.scrollcontainer div:hover, .scrollcontainer div:active {
	background: #FFFFFF;
	color: rgb(0, 111, 255);
}
.fadeout {
	transition: opacity 1s ease-in, max-height 1s ease-in;
	opacity: 0; 
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden;
}
.fadein {
    transition: opacity 1s ease-out, max-height 1s ease-out;
    opacity: 1;
    max-height: 1em;
}	
</style>
]]></add>
</operation>
</file>  
<file path="catalog/view/theme/*/template/common/footer.tpl">
<operation error="skip">

			<search position="before"><![CDATA[
</footer>
      			]]></search>
	<add><![CDATA[
<div id="scrollblock" class="scrollcontainer">
	<div class="fadeout" id="markflScrollTop" onclick="myScrollTop()" title="Scroll To Top"><i class="fa fa-angle-double-up"></i></div>
	<div id="markflScrollBottom" onclick="myScrollBottom()" title="Scroll To Bottom"><i class="fa fa-angle-double-down"></i></div>
</div>

<script>
function scrollbarVisible(element)
{
	return element.scrollHeight - element.clientHeight;
}

function myScrollTop()
{
	window.scroll({top: 0, left: 0, behavior: 'smooth'});
}

function myScrollBottom()
{
	window.scroll({top: document.body.scrollHeight, left: document.body.scrollWidth, behavior: 'smooth'});
}

function scrollButtons()
{
	if (window.scrollY <= 10)
	{
		document.getElementById("markflScrollTop").className = "fadeout";
		document.getElementById("markflScrollBottom").className = "fadein";
	}
	else if ((window.innerHeight + window.pageYOffset) >= (document.body.offsetHeight - 10))
	{
		document.getElementById("markflScrollTop").className = "fadein";
		document.getElementById("markflScrollBottom").className = "fadeout";
	}
	else
	{
		document.getElementById("markflScrollTop").className = "fadein";
		document.getElementById("markflScrollBottom").className = "fadein";
	}
}

function doButtons()
{
	if (scrollbarVisible(document.documentElement))
	{
		document.getElementById("scrollblock").style.display = "block";
		document.getElementById("markflScrollBottom").className = "fadein";
	}
	else
	{
		document.getElementById("scrollblock").style.display = "none";
		document.getElementById("markflScrollTop").className = "fadeout";
		document.getElementById("markflScrollBottom").className = "fadeout";
	}
}

window.addEventListener("load", function() {doButtons()});
document.addEventListener("scroll", function() {scrollButtons()});
window.addEventListener("resize", function() {doButtons()});
</script>
    ]]></add>

    
</operation> 
</file>

</modification>
Save this code in TXT file and name it scroll_up_middle.ocmod.xml

You can see it on my brother's site:
https://www.ceramic-glazes.com/
 

MarkFL

Pessimist Singularitarian
Staff member
Feb 24, 2012
13,684
St. Augustine, FL.
Interesting to see this product ported to another platform. I don't mind at all, especially since you retain my name on the project.

You may be interested in my XenForo 2.x version as it works with a more responsive software, more friendly to mobile devices. For example, on small screens the XenForo version looks like this:

taz_addon_scroll_04.png

I will attach the XenForo version here, just in case you're interested...
 

Attachments

masterross

New member
Jan 21, 2019
8
Thanks Mark,

I was thinking to move my vB forums to Xeno but since I found Sultan's responsive theme I'm happy with it :)
 

gnrx

Member
Jun 7, 2018
27
Thanks Mark,

I was thinking to move my vB forums to Xeno but since I found Sultan's responsive theme I'm happy with it :)
Some times I think the same, convert my vb to xenforo, vb 4.2x is discontinued, but I have my vb very personaliced with addons and theme (from here, I thank MarkFL again for all his help!)