[For 1.6] Ajax + jGrowl to notify if has new alert (myalert)

[martec]

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

[dthiago]

IF I prefer to use a CDN to use jGrow?

[dragonexpert]

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>

[dthiago]

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

[martec]

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

[dthiago]

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!

[alv4]

This looks interesting.
Thanks!

[User 51303]

Nice tutorial i implemented my own idea based on it






AJAX'd ofcourse

[Whiteneo]

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.

[martec]

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?