MyBB Community Forums
[For 1.6] Ajax + jGrowl to notify if has new alert (myalert) - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.6] Ajax + jGrowl to notify if has new alert (myalert) (/thread-154127.html)

Pages: 1 2


Ajax + jGrowl to notify if has new alert (myalert) - martec - 2014-05-26

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

[Image: EdXHSH4.png]


RE: Ajax + jGrowl to notify if has new alert (myalert) - dthiago - 2014-05-29

IF I prefer to use a CDN to use jGrow?


RE: Ajax + jGrowl to notify if has new alert (myalert) - dragonexpert - 2014-05-29

(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>



RE: Ajax + jGrowl to notify if has new alert (myalert) - dthiago - 2014-05-29

(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


RE: Ajax + jGrowl to notify if has new alert (myalert) - martec - 2014-05-29

(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


RE: Ajax + jGrowl to notify if has new alert (myalert) - dthiago - 2014-05-30

(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!


RE: Ajax + jGrowl to notify if has new alert (myalert) - alv4 - 2014-07-09

This looks interesting.
Thanks!


RE: Ajax + jGrowl to notify if has new alert (myalert) - fma965 - 2014-07-18

Nice tutorial i implemented my own idea based on it Smile
[Image: 19e7c93f45.png]

[Image: 0269a180e4.png]

[Image: d3a7544390.png]

AJAX'd ofcourse


RE: Ajax + jGrowl to notify if has new alert (myalert) - Whiteneo - 2014-07-19

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.


RE: Ajax + jGrowl to notify if has new alert (myalert) - martec - 2014-07-20

(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?