MyBB Community Forums

Dependency:
This need jQuery library. Check link below to more information: http://demonate.com/thread-773.html

1 - Download jGrowl 1.3 in http://plugins.jquery.com/jgrowl/
1.1 - Open jquery.jgrowl.js using Notepad++
1.2 - Find

(function($) {

1.3 - Replace

jQuery.noConflict();
 
jQuery(document).ready(function($) {

1.4 - Find

})(jQuery);

1.5 - Replace

});

2 - Copy jquery.jgrowl.js to jscripts folder of mybb installation
3 - Open root/inc/plugins/myalerts.php using Notepad++
3.1 - Find

if ($settings['myalerts_enabled']) {
    $plugins->add_hook('xmlhttp', 'myalerts_xmlhttp', -1);
}

3.2 - Add above

if ($settings['myalerts_enabled']) {
$plugins->add_hook('xmlhttp', 'myalert_run_ajax');
}
function myalert_run_ajax()
{
 global $mybb, $parser;
 
 if (!is_object($parser))
 {
 require_once MYBB_ROOT.'inc/class_parser.php';
 $parser = new postParser;
 }
 
 if ($mybb->input['action'] != "newalert" || $mybb->request_method != "post"){return false;exit;}

 if (!verify_post_check($mybb->input['my_post_key'], true))
 {
 xmlhttp_error($lang->invalid_post_code);
 } 
 
 myalerts_global(true);
 
if ($mybb->input['action'] == "newalert"){
 echo $mybb->user['unreadAlerts'];
}
}

4 - Create new stylesheet wit name "jgrowl.css" and add (repeat this step to all templates that you use)

/** Special IE6 Style Positioning **/
.ie6 {
 position: absolute;
}

.ie6.top-right {
 right: auto;
 bottom: auto;
 left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
 left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
 left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
 left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
 left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
 top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
 width: 100%;
}


/** jGrowl Styling **/
.jGrowl {
 z-index: 9999;
 color: #fff;
 font-size: 12px;
 position: fixed;
}

.jGrowl.top-left {
 left: 0px;
 top: 0px;
}

.jGrowl.top-right {
 right: 0px;
 top: 0px;
}

.jGrowl.bottom-left {
 left: 0px;
 bottom: 0px;
}

.jGrowl.bottom-right {
 right: 0px;
 bottom: 0px;
}

.jGrowl.center {
 top: 0px;
 width: 50%;
 left: 25%;
}

/** Cross Browser Styling **/
.center .jGrowl-notification, .center .jGrowl-closer {
 margin-left: auto;
 margin-right: auto;
}

.jGrowl .jGrowl-notification, .jGrowl .jGrowl-closer {
 background-color: #000;
 opacity: .85;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
 zoom: 1;
 width: 235px;
 padding: 10px;
 margin-top: 5px;
 margin-bottom: 5px;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 1em;
 text-align: left;
 display: none;
 border-radius: 5px;
}

.jGrowl .jGrowl-notification {
 min-height: 40px;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
 margin: 10px;
}

.jGrowl .jGrowl-notification .jGrowl-header {
 font-weight: bold;
 font-size: .85em;
}

.jGrowl .jGrowl-notification .jGrowl-close {
 z-index: 99;
 float: right;
 font-weight: bold;
 font-size: 1em;
 cursor: pointer;
}

.jGrowl .jGrowl-closer {
 padding-top: 4px;
 padding-bottom: 4px;
 cursor: pointer;
 font-size: .9em;
 font-weight: bold;
 text-align: center;
}

/** Hide jGrowl when printing **/
@media print {
 .jGrowl {
 display: none;
 }
}

5 - Edit headerinclude templates (repeat this step to all templates that you use)
5.1 - Add code below after all

<script type="text/javascript" src="jscripts/jquery.jgrowl.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {

window.setInterval(function() {
if({$mybb->user['usergroup']}!=1) {
 $.ajax({
 type: "post",
 url: 'xmlhttp.php?action=newalert&my_post_key='+my_post_key,
 complete: function(request){
 if (request.responseText > 0) {
                                              $.jGrowl('You has new alert '+request.responseText, { position: 'bottom-left' });
}
 }
 });

}
}, 60 * 1000);

});
</script>

5.2 - I put default 60 secound to check if has new alert, but you can change 60 with any value you want

IF I prefer to use a CDN to use jGrow?

(2014-05-29, 05:28 PM)dthiago Wrote: [ -> ]IF I prefer to use a CDN to use jGrow?

Find

<script type="text/javascript" src="jscripts/jquery.jgrowl.js"></script>

Replace with

<script type="text/javascript" src="cdn_url"></script>

(2014-05-29, 06:12 PM)dragonexpert Wrote: [ -> ]

(2014-05-29, 05:28 PM)dthiago Wrote: [ -> ]IF I prefer to use a CDN to use jGrow?

Find

<script type="text/javascript" src="jscripts/jquery.jgrowl.js"></script>

Replace with

<script type="text/javascript" src="cdn_url"></script>

IF i use a CDN like CDNJS ...i can't power to edit jquery.jgrowl.js

(2014-05-29, 05:28 PM)dthiago Wrote: [ -> ]IF I prefer to use a CDN to use jGrow?

only if you has own CDN server...
because need made edit in jquery.jgrowl.js...
if not made edit will not work because conflict with prototype library

(2014-05-29, 09:22 PM)martec Wrote: [ -> ]

(2014-05-29, 05:28 PM)dthiago Wrote: [ -> ]IF I prefer to use a CDN to use jGrow?

only if you has own CDN server...
because need made edit in jquery.jgrowl.js...
if not made edit will not work because conflict with prototype library

OK..thanks!

This looks interesting.
Thanks!

Nice tutorial i implemented my own idea based on it






AJAX'd ofcourse

I remove ajax and only use jgrowl whit some jquery conditionals to add more effects and goes fine. I do not want to send many request on each time and the last way works and if you set that way only need jquery to do something similar xD.

I share my preview tomorrow night if i can because i have a lot of work and if someone want it i share it with all users.

(2014-07-19, 02:27 AM)Dark Neo Wrote: [ -> ]I remove ajax and only use jgrowl whit some jquery conditionals to add more effects and goes fine. I do not want to send many request on each time and the last way works and if you set that way only need jquery to do something similar xD.

I share my preview tomorrow night if i can because i have a lot of work and if someone want it i share it with all users.

?? but how you will check if has new alert without using any new request?