D.O.A.
Well-known member
If anyones interested, I have a jquery function that will show/hide the chatbox (fade in/fade out slider) and will remember the open/closed state via cookie.
http://jqueryui.com/demos/hide/
In step three of the install, instead of adding
use all this
some css (EXTRA.css) if you wanna style the link or a button...
and you need the file cookies.js in js/jquery/cookies.js
Could probably put the js in the footer and stuff, but that's just more template edits. So here it is done easily.
Attached below
http://jqueryui.com/demos/hide/
In step three of the install, instead of adding
PHP:
<xen:include template="dark_taigachat" />use all this
PHP:
<script src="/js/jquery/cookies.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// call the cookie class and set a cookie called myCookie
$.cookie("myCookie");
// create a variable and set it to the value of the cookie
var theCookie = $.cookie("myCookie");
// toggle the view state of an panel in the form
$("#secretButton").toggle(
function () {
$("#secret").fadeIn('slow');
// when clicked, set the cookie and variable to block
$.cookie("myCookie", "block");
theCookie = "block"
},
function () {
$("#secret").fadeOut('slow');
// set the cookie and variable to none when clicked again
$.cookie("myCookie", "none");
theCookie = "none"
});
// update the hidden panels css to none, or block depending on the toggle event
$("#secret").css('display', theCookie);
});
</script>
<xen:if is="{$visitor.user_id}">
<ul id="secretButton">
<li><a href="#" id="secretButton">Show/Hide Shoutbox</a></li>
</ul>
<div id="nav" style="background:#fff;"><div id="secret" style="display:none;">
<xen:include template="dark_taigachat" /></div></div>
</xen:if>some css (EXTRA.css) if you wanna style the link or a button...
PHP:
#secretButton {
text-decoration: none;
}
#secretButton li {
text-decoration: none;
background-image: none;
}
#secretButton li a:link, #nav li a:visited, #nav li a:active {
text-decoration: none;
background-image: none;
}
#secretButton li a:hover {
padding: 3px;
text-decoration: none;
background-color: #032A46;
color: #d7edfc;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px;
}and you need the file cookies.js in js/jquery/cookies.js
Could probably put the js in the footer and stuff, but that's just more template edits. So here it is done easily.
Attached below
I am under the latest version of XenForo.
