Floating fixed box like "back to top"

Stéphane
41 Posts
Stéphane posted this 04 September 2016

Hello,

I do not know if this is possible :
I would like to add a fixed box, let's say at 10% from left of the page, with z-index at 9999 (like the "back to top" item) where I could put :

  • a picture
  • a link
  • Joomla position
    • etc.

I know how to add a text, a button individually (http://answers.themler.com/questions/76470/call-button-similar-to-back-to-top), but could I do it placing a few controls into a container ?

I have tried, but once the container goes over the second section in my template, the content in this container disappears...
Maybe I am missing some tuning on how to setup the different elements in that container...

And if this is possible, how can I have it on all pages (I mean on the whole site like the "back to top" item) ?

Thanks in advance for your help and advise.
Regards
Stéphane

Hello, I do not know if this is possible : I would like to add a fixed box, let's say at 10% from left of the page, with z-index at 9999 (like the "back to top" item) where I could put : - a picture - a link - Joomla position - etc. I know how to add a text, a button individually ([http://answers.themler.com/questions/76470/call-button-similar-to-back-to-top)][1], but could I do it placing a few controls into a container ? I have tried, but once the container goes over the second section in my template, the content in this container disappears... Maybe I am missing some tuning on how to setup the different elements in that container... And if this is possible, how can I have it on all pages (I mean on the whole site like the "back to top" item) ? Thanks in advance for your help and advise. Regards Stéphane [1]: http://answers.themler.com/questions/76470/call-button-similar-to-back-to-top
fixed container
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 07 September 2016

You are welcome. Feel free to contact us in any other occasion.

Sincerely,
Hella

You are welcome. Feel free to contact us in any other occasion. Sincerely, Hella
Stéphane
41 Posts
Stéphane posted this 06 September 2016

Many thanks Olivia !

I hadn't thought about this solution.

regards
Stéphane

Many thanks Olivia ! I hadn't thought about this solution. regards Stéphane
Support Team
Support Team posted this 06 September 2016

Hi,

In general, you can add Animation extension and launch animation on scroll. But if need the exact behaviour of the Back to Top you will need to add custom js which creates this effect. Themler itself does not provide such functionality.

You can take any ready code for back to top and remove unnecessary code for scrolling on click.

Something like:
<script>
jQuery(function ($) {
$("#section5").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#section5').fadeIn();
} else {
$('#section5').fadeOut();
}
});
});
});
</script>

In my example section5 is ID of the Section I used as a wrapper for image/button/joomla position.
The custom js can be added to the Home tab >> Settings >> Additional HEAD HTML

Thank you,
Olivia

Hi, In general, you can add Animation extension and launch animation on scroll. But if need the exact behaviour of the Back to Top you will need to add custom js which creates this effect. Themler itself does not provide such functionality. You can take any ready code for back to top and remove unnecessary code for scrolling on click. Something like: `<script> jQuery(function ($) { $("#section5").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#section5').fadeIn(); } else { $('#section5').fadeOut(); } }); }); }); </script>` In my example `section5` is ID of the Section I used as a wrapper for image/button/joomla position. The custom js can be added to the Home tab >> Settings >> Additional HEAD HTML Thank you, Olivia
Stéphane
41 Posts
Stéphane posted this 04 September 2016

I do not know why, but I tried again and all worked... ???

A subsidiary question, how could I make it appear only when you start scrolling like the "back to top" item ?

Thanks in advance for your help and advise,
Stéphane

I do not know why, but I tried again and all worked... ??? A subsidiary question, how could I make it appear only when you start scrolling like the "back to top" item ? Thanks in advance for your help and advise, Stéphane
You must log in or register to leave comments