How to create a simple randomly greeting widget based on user's time of day

Go down

How to create a simple randomly greeting widget based on user's time of day Empty How to create a simple randomly greeting widget based on user's time of day

Post by SarkZKalie on June 7th 2020, 12:21 pm

Hello, it's me again Very Happy

Today, i will show you how to create a simple a randomly greeting widget based on user's time of day for your Forumotion site.

How to create a simple randomly greeting widget based on user's time of day Good-m10

First of all, create a new widget (or put anywhere you want), copy and paste the following code :
Code:
<p id="greeting"></p>

<script type="text/javascript">
greeta = ["Morning1", "Morning2", "Morning3"];
greetb = ["Afternoon1", "Afternoon2", "Afternoon3"];
greetc = ["Evening1", "Evening2", "Evening3"];
userz = '<a href="{USERLINK}">&nbsp;{USERNAME}&nbsp;</a>';
greetza = Math.floor(Math.random() * greeta.length);
greetzb = Math.floor(Math.random() * greetb.length);
greetzc = Math.floor(Math.random() * greetc.length);
today = new Date()
if (today.getHours() >=6 && today.getHours() < 12) {
   document.getElementById('greeting').innerHTML = greeta[greetza] + userz;
}
   else
   if (today.getHours() >= 12 && today.getHours() <= 17) {
      document.getElementById('greeting').innerHTML = greetb[greetzb] + userz;
   }
      else
      if (today.getHours() > 17 && today.getHours() <= 24) {
         document.getElementById('greeting').innerHTML = greetc[greetzc] + userz;
      }
else
   document.getElementById('greeting').innerHTML = 'Sleep well zZz';
</script>
CSS (optional):
Code:
#greeting {color:red}
#greeting a {color:blue}

Next step, replace the default text in Morning1-2-3, Afternoon1-2-3 and Evening1-2-3 to any word or text you want.

For example :
Spoiler:
greeta = ["Howdy", "Hello", "Bonjour"];
Or, you can add more text
Spoiler:
greeta = ["Howdy", "Hallå", "Bonjour", "Konnichiwa", "Marhaba", "Namaskar", "Zdraveite", "Hola", "Guten tag", "Yasou"];
Live demo

Enjoy! Twisted Evil


Last edited by SarkZKalie on June 8th 2020, 12:18 am; edited 1 time in total


How to create a simple randomly greeting widget based on user's time of day Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1212
Reputation : 198
Language : English

View user profile https://rotavn.forumotion.com/

TonnyKamper, jucarese, TheCrow and The Last Outlaw like this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by YoshiGM on June 7th 2020, 7:15 pm

Sounds interesing.
Thanks for the code and your hardwok @SarkZKalie Very good
YoshiGM
YoshiGM
Forumember

Male Posts : 995
Reputation : 121
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by Neptune- on June 7th 2020, 8:14 pm

Hello,

Nice job, but live demo seems to be broken (it worked few hours ago)
Neptune-
Neptune-
Forumember

Male Posts : 408
Reputation : 90
Language : French (10), English (8), CSS (5), HTML (4), Javascript (4)
Location : France

View user profile https://www.galaxie-series.net/

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by mSyx on June 7th 2020, 11:38 pm

Oy o/
Nice one, thanks.

You may want to fix this; there's a letter missing here (thread and live demo):
Code:
      if (today.getHours() > 17 && today.getHours() <= 24) {
        document.getElementById('greeting').innerHTML = greetc[greetz] + userz;
      }

greetc[greetz] » greetc[greetzc]
mSyx
mSyx
Forumember

Male Posts : 131
Reputation : 33
Language : French & English
Location : France

View user profile https://help.forumotion.com/

KimiD56 likes this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by SarkZKalie on June 8th 2020, 1:06 am

Hi guys, thank you. I've edited the first post

Hope you like it Smile


How to create a simple randomly greeting widget based on user's time of day Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1212
Reputation : 198
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by KimiD56 on November 4th 2020, 7:15 pm

Thank you, this is awesome! I'm not very good with codes. Can you tell me where the CSS code to change the text color goes?
#greeting {color:red}
#greeting a {color:blue}
KimiD56
KimiD56
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : Ohio, USA

View user profile https://apspplace.forumotion.com/

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by SarkZKalie on November 8th 2020, 7:28 am

@KimiD56 hi, you may find it in Admin Control Panel -> Display -> CSS Smile


How to create a simple randomly greeting widget based on user's time of day Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1212
Reputation : 198
Language : English

View user profile https://rotavn.forumotion.com/

KimiD56 likes this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by KimiD56 on November 8th 2020, 4:17 pm

Thank you
KimiD56
KimiD56
New Member

Female Posts : 5
Reputation : 1
Language : English
Location : Ohio, USA

View user profile https://apspplace.forumotion.com/

SarkZKalie likes this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by TheCrow on November 9th 2020, 5:57 pm

Thank you for sharing this @SarkZKalie,

I added this to my forum, in a different way, but it's a nice feature. Great work! How to create a simple randomly greeting widget based on user's time of day 1f60d

How to create a simple randomly greeting widget based on user's time of day Screen31
TheCrow
TheCrow
Manager
Manager

Male Posts : 6486
Reputation : 751
Language : Greek, English

View user profile https://forumote.forumotion.com

BlackScorpion, SarkZKalie and The Last Outlaw like this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by SarkZKalie on November 11th 2020, 5:45 am

@TheCrow whaaaaaa that was great idea, my dear Smile))


How to create a simple randomly greeting widget based on user's time of day Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1212
Reputation : 198
Language : English

View user profile https://rotavn.forumotion.com/

TheCrow and The Last Outlaw like this post

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by The Last Outlaw on November 17th 2020, 9:41 pm

@SarkZKalie I want to do this the same way @TheCrow did it. I've tried it a few times and it didn't work like I wanted it to. Can you advise me as to how to set it all up?
The Last Outlaw
The Last Outlaw
Forumember

Male Posts : 358
Reputation : 10
Language : English (US)
Location : Salem, Oregon, USA

View user profile https://www.betheasbyte.com/

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by TheCrow on November 18th 2020, 8:21 am

@The Last Outlaw, it is easy. You only add the html tags wherever you want in your template, and then you add the script as a javascript to your forum and it will be shown like mine. Nothing too difficult! Wink
TheCrow
TheCrow
Manager
Manager

Male Posts : 6486
Reputation : 751
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by The Last Outlaw on November 18th 2020, 8:27 am

@TheCrow wrote:@The Last Outlaw, it is easy. You only add the html tags wherever you want in your template, and then you add the script as a javascript to your forum and it will be shown like mine. Nothing too difficult! Wink

Which one? Overall Header?
The Last Outlaw
The Last Outlaw
Forumember

Male Posts : 358
Reputation : 10
Language : English (US)
Location : Salem, Oregon, USA

View user profile https://www.betheasbyte.com/

Back to top Go down

How to create a simple randomly greeting widget based on user's time of day Empty Re: How to create a simple randomly greeting widget based on user's time of day

Post by TheCrow on November 18th 2020, 10:27 am

That depends on where you want this to appear. If you want it to the header of the forum like I did, then yes, overall_header would be the one. Wink
TheCrow
TheCrow
Manager
Manager

Male Posts : 6486
Reputation : 751
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Back to top


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