Home
Hiya all! Good morning to you! I've got a question. Following _Twisted_Mod_'s tutorial, I made AWC work in a HTML page, yesterday and I'm very happy with it. I'm looking for someone to help me with the following: I'd like the FM notification bar installed at the top of that page, so when in chat, members can see notifications come in. Does anyone have a neat solution for that, please? Thank you! :)
Like SystemFri 15 Oct 2021, 04:50
Auto Save MessagesFri 26 Feb 2021, 13:31
New tutorial questionMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)Sun 14 Feb 2021, 01:25
Does anybody have the original Avacweb Chat CSS?Tue 09 Feb 2021, 13:40
Page 1 of 1 •
FM Notification bar in HTML AWC page
GuestWed 10 Dec 2014, 08:25
BloodbathStatus : No status yet...
Posts : 745
Join date : 2013-05-31
Age : 28
Posts : 745
Join date : 2013-05-31
Age : 28
Wed 10 Dec 2014, 08:34
There's a few scripts forumotion loads for you on the normal forum pages, often considered the header, so you could try selecting the option "Use forum header and footer", otherwise you can try loading these scripts below in the <head> element of your page:
You will also need to set up the _userdata, _lang and _board objects and call Toolbar.init, so the easiest way is indeed just using the forum header and footer.
- Code:
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/notif/FA.js"></script><script type="text/javascript">
You will also need to set up the _userdata, _lang and _board objects and call Toolbar.init, so the easiest way is indeed just using the forum header and footer.
GuestWed 10 Dec 2014, 08:35
OK, I'm gonna try that now, thanks. I can't use the header / footer because it said so in the tutorial I'm afraid.
GuestWed 10 Dec 2014, 08:41
- Code:
[panda=html]
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/notif/FA.js"></script><script type="text/javascript">
<STYLE TYPE="text/css">
<!--
body {
background-image: url('http://i39.servimg.com/u/f39/19/05/73/25/sorryc11.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
-->
</STYLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/85/frm/lang/nl.js" type="text/javascript"></script><script src="/37907.js" type="text/javascript"></script><style>
#avacweb_chat iframe{width:100%; Height:100%}
</style>
<div style="width: 100%; height: 100%;" id="chatholder">
</div>
And this:
- Code:
[panda=html]
<STYLE TYPE="text/css">
<!--
body {
background-image: url('http://i39.servimg.com/u/f39/19/05/73/25/sorryc11.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
-->
</STYLE>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/notif/FA.js"></script><script type="text/javascript">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script src="http://illiweb.com/rs3/85/frm/lang/nl.js" type="text/javascript"></script><script src="/37907.js" type="text/javascript"></script><style>
#avacweb_chat iframe{width:100%; Height:100%}
</style>
<div style="width: 100%; height: 100%;" id="chatholder">
</div>
BloodbathStatus : No status yet...
Posts : 745
Join date : 2013-05-31
Age : 28
Posts : 745
Join date : 2013-05-31
Age : 28
Wed 10 Dec 2014, 08:50
Yeah, I figured as much.
The notification API is freely accessible, I believe LG is using it already and I might just let myself get inspired by it. I'll figure something out.
The notification API is freely accessible, I believe LG is using it already and I might just let myself get inspired by it. I'll figure something out.
GuestThu 11 Dec 2014, 21:21
OK, this is SOOO cool! Add this to the body of the full page AWC HTML and you're set:
It's absolutely AWESOME! and I think this can be added to the existing tutorials by LG and _Twisted_Mods_ as a "Plug-In" or something, haha!
- Code:
[panda=html]
<!-- START init_fa_toolbar -->
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/toolbar/FAToolbar.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/json/json2.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/printf/printf.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/dotdotdot/jquery.dotdotdot-1.5.6.js"></script>
<script type="text/javascript" src="http://illiweb.com/rs3/85/frm/jquery/notif/FA.js"></script>
<iframe id="fa_data" src="/" style="display:none"></iframe>
<div id="fa_style" style="display:none;"></div>
<script type="text/javascript">var _userdata = new Object(), _lang = new Object(), _board = new Object(), fa_data = document.getElementById('fa_data');
fa_data.onload = function() {
var fa = fa_data.contentWindow, fa_style = fa.document.getElementsByTagName('STYLE');
for (var i = 0; i<fa_style.length; i++) if (/#fa_toolbar/.test(fa_style[i].innerHTML)) document.getElementById('fa_style').appendChild(fa_style[i]);
for (var a in fa._userdata) _userdata[a] = fa._userdata[a];
for (var b in fa._lang) _lang[b] = fa._lang[b];
for (var c in fa._board) _board[c] = fa._board[c];
$(document).ready(Toolbar.init)
}</script>
<!-- END init_fa_toolbar -->
It's absolutely AWESOME! and I think this can be added to the existing tutorials by LG and _Twisted_Mods_ as a "Plug-In" or something, haha!
Ange TuteurStatus : No status yet...
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Posts : 109
Join date : 2014-02-18
Age : 28
Location : North America
Thu 18 Dec 2014, 04:54
^^ You just need to make sure you include the jQuery library in your HTML page, otherwise it will throw errors.
Sponsored content
|
|
|