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

[Whiteneo]

I let myalerts do all work if you have new items only apply style of jgrowl. I like use ajax as you say but many request every x time in some hosts suppose to do many requests and blank pages or error most of time free hostings.

I use both ways but i finally decide to let myalerts do his job and take var of this with conditionals and apply their own stylization xD. Only appears like the image shared by fma965.

EDIT: I let image shows what i'm talking about, but the best way to get new items maybe with AJAX you can write and get an alert xD, but on this way only when myalerts say on new page at send message you can see if you get new alert xD, it's only style change for both cases and you can add some more styles, like red color or blue or green, yellow etc, i say to an user how to do this, because he needs to put some colors on some cases xD.

   

[ozanakkaya]

how many query one second?

[shahzebraza]

i don't have myalerts.php . in root/inc/plugins/myalerts.php... how to get this one

[bbbs]

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

I didn't get what do you mean exactly...

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

I made new stylesheet with name "jgrowl.css" contained the code you told.
And where do I add to?
Also, I do not understand (repeat this step to all templates that you use).

Could you explain them more simple words? Thanks in advance.

[martec]

I made new stylesheet with name "jgrowl.css" contained the code you told.
And where do I add to?
Also, I do not understand (repeat this step to all templates that you use).

Could you explain them more simple words? Thanks in advance.

if you using mybb 1.8 so use this http://community.mybb.com/thread-166924.html
this tutorial for 1.6, and not for 1.8

[bbbs]

I made new stylesheet with name "jgrowl.css" contained the code you told.
And where do I add to?
Also, I do not understand (repeat this step to all templates that you use).

Could you explain them more simple words?  Thanks in advance.

if you using mybb 1.8 so use this http://community.mybb.com/thread-166924.html
this tutorial for 1.6, and not for 1.8

Oh, thank you for your reply. I will try it later.

[PARADOX987]

does this work now ?

[martec]

does this work now ?

no. this is for 1.6