Closable box for information

Having plenty time on hand… like most all of us I imagine…
I’m trying to find how to add a “box” on my main page to give information concerning bookings etc. and which can be closed by the visitor to have a normal view of the page.
Hope this is clear ? My French is better than English nowadays !!!
Many thanks to y’all

1 Like

@AlanC76, For now this “modal” type setting isn’t doable in Sparkle.

1 Like

Thanks for your reply.
I’ve found a way round it by adding a box and text grouped together and fixed at bottom of page.
With a 5 second delay, visitors have time to see they can scroll the page before the box arrives ! Not perfect, but it’s only for the covid 19 lockdown period here in France… maybe another 4-5 weeks :frowning:

Take care !

@AlanC76, Well thought out! I did this a while back but a few of my clients didn’t take to it so I’m waiting for the function in Sparkle tp appear shortly!

I had my “modal” appearing on the right hand side of the footer. It appeared when a person scrolled down to the footer that way it didn’t interfere with anything, but like I mentioned it wasn’t ideal.

Likewise, keep positive and take care! :slight_smile:

2 Likes

Hello,
I like this idea. Perhaps it is possible to realize a closable textbox with a button and a little javascrpit code? Maybe this is not very difficult but I‘m sorry, I would like to try it, but I can‘ javascript.
Best greetings
Horst

1 Like

I’m sure if we ask really nicely Duncan could find a little spare time to add this feature :innocent: :innocent:
Would really be useful for loads of things !

1 Like

HI Horst

It is possible with a little javascript, but needs HTML element id customization in the settings. Disadvantage: Your visitor will see these informations every time he opens that page. That could be exaggerating when needing to click it away every time.

However, I can provide you with this:

  • enable Code Integration in the Site Settings under «Miscellaneous»
  • Build up your informations on a box, insert a button or link (doing nothing) and group all. Give that group an ID-name in the arrange inspector, for example «information-box».
  • insert an «Embed»-box and put this code into it:
    <script >
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.visibility == 'hidden')
    e.style.visibility = 'visible';
    else
    e.style.visibility = 'hidden';
    }
    </script>
  • now link the button or the link in the group with this code, where you set it to external content:
    javascript:toggle_visibility('information-box')

Change text «information-box» when your ID is another text.
A fugly quick-and-dirty example you will find on my page https://grafikvater.ch/Test/box.html

2 Likes

Two screenshots as well for better understanding about settings and linking button:

Bildschirmfoto 2020-03-24 um 22.01.16

Bildschirmfoto 2020-03-27 um 19.25.43

2 Likes

Hi grafikvater,

nice little and very helpful javascript! Thank you for sharing your knowledge. :+1:t3:
I don’t have that and therefore have a question: do you know how to customize the script if I want the „information.box“ to be invisible when the page opens and make it visible by clicking the button?

Maybe there is a simple solution that I didn’t figure out while I was (unsuccessful) trying.

Cheers!

Hi

Yes, there’s a little addition and change: Add a style-tag for the id to make the group hidden, and change visible respectively hidden in the javascript. It then reads like this:

<style>
#information-box {
visibility:hidden;
}
</style>

<script >
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'visible')
e.style.visibility = 'hidden';
else
e.style.visibility = 'visible';
}
</script>

If you have both scripts on the same page, you need to change the name of the function too, so the button “knows” which function to address. Then better call one “toggle_on(id)” and the other “toggle_off(id)” instead of “toggle_visibility(id)”, and do so for running the link: javascript:toggle_on('information-box') respectively javascript:toggle_off('information-box').

I hope this works for you. Cheers :slight_smile:

1 Like

Hi grafikvater,

works like a charme! :clap:
Thank you very much for your effort. I guess all I can do in return is to have a (virtual) drink on you.:slightly_smiling_face::beers:

Cheers

1 Like