(2017-02-18, 11:09 PM)thelovelyone Wrote: [ -> ]I see, ty.
I've also noticed the sound does repeat if you change the page on the forum unless you read the alert or e.g. you have 5 alerts and you read them (visit the linked alert page) one by one, you always get the notification.
How would you add a check so it remembers that u've got the sound once? By cookie? If so, how could that work?
It's also easy, but I can't say for sure since I didn't test it out, so let me know the result. I suggest to use this small cookie library, as it's compatible with many browsers. In fact I use it in my site too.
https://github.com/js-cookie/js-cookie
1. Extract the file to the "/
jscripts" of the forum. If there is no
jscripts folder, simply make a new one in the root directory of the forum.
2. Add the following line to the "headerinclude" template
<script src="jscripts/js.cookie.js"></script>
3. Use the following code in the header_welcomeblock_member template.
<audio id="alert_sound" src="myalert.mp3"></audio>
<script>
var number = document.getElementsByClassName("myalerts")[0].innerHTML;
var num = number.match(/\d/g)[0];
if(num > 0){
if(num != Cookies.get('notification_sound'){
document.getElementById("alert_sound").play();
Cookies.set('notification_sound', num, { expires: 365 });
}
}else
{
Cookies.remove('notification_sound');
}
</script>
It considered here x scenarios.
1. the user visits the site, see no notification, the sound doesn't play at all
2. the user visits the site, see x number of notifications, the sound play, the cookie sets to x
3. the user visits the site, see x number of notifications again, x in the notifications is compared with x in the cookie, since != is used, the condition isn't fulfilled, and thus sound doesn't play
4. the user visits the site, read the notifications, thus making the notification number to zero, and then visits again, since there is no new notification, the sound doesn't play at all, the cookie is removed.
I added the fontawesome icons to myalerts icons in the usercp. Use this in myalerts_usercp_nav. since I use standard class names, it doesn't matter what theme is being used, it comes out fine as long as the theme uses the standard names as well.
![[Image: CMGKSUl.png]](https://camo.mybb.com/a0f35984758934279f860f047b555fcba64e3814/687474703a2f2f692e696d6775722e636f6d2f434d474b53556c2e706e67)
<tr>
<td class="thead tcat_menu tcat_collapse">
<div class="expcolimage">
<img src="{$theme['imgdir']}/collapse{$collapsedimg['usercpalerts']}.png"
id="usercpalerts_img"
class="expander" alt="[-]" title="[-]"/>
</div>
<div>
<span class="smalltext">
<strong>{$lang->myalerts_usercp_nav}</strong>
</span>
</div>
</td>
</tr>
<tbody style="{$collapsed['usercpalerts_e']}" id="usercpalerts_e">
<!-- -->
<!-- usercp_nav_myalerts-->
<td class="trow1 smalltext">
<a href="alerts.php" class="usercp_nav_item"><i style="font-size: 14px;" class="fa fa-exclamation-triangle fa-fw"></i> {$lang->myalerts_usercp_nav_alerts}</a>
</td>
</tr>
<!-- -->
<tr>
<td class="trow1 smalltext">
<a href="alerts.php?action=settings"
class="usercp_nav_item usercp_nav_options"><i style="font-size: 14px;" class="fa fa-cog fa-fw"></i> {$lang->myalerts_usercp_nav_settings}</a>
</td>
</tr>
<!-- -->
<tr>
<td class="trow1 smalltext">
<a href="alerts.php?action=delete_read&my_post_key={$mybb->post_code}"
onclick="return confirm('{$lang->myalerts_delete_read_confirm}')"
class="usercp_nav_item"><i style="font-size: 14px;" class="fa fa-trash-o fa-fw"></i> {$lang->myalerts_usercp_nav_delete_read}</a>
</td>
</tr>
<!-- -->
<tr>
<td class="trow1 smalltext">
<a href="alerts.php?action=delete_all&my_post_key={$mybb->post_code}"
onclick="return confirm('{$lang->myalerts_delete_all_confirm}')"
class="usercp_nav_item"><i style="font-size: 14px;" class="fa fa-times-circle fa-fw"></i> {$lang->myalerts_usercp_nav_delete_all}</a>
</td>
</tr>
</tbody>