Eplexx
11-24-2011, 11:00 PM
Here's an example of what I'm talking about:
https://vborg.vbsupport.ru/external/2011/11/32.png
This expands once clicked.
https://vborg.vbsupport.ru/external/2011/11/33.png
Anyway here's how to do it:
Head to headinclude and add this to the bottom:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="screen">
.slide-out-div {
width: 600px;
height: 264px;
background: #000;
border: #2779a9 2px dashed;
}
</style>
<script src="jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'ghtheme/Extra/hotbox.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '173px', //height of tab image
imageWidth: '38px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '150px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
Save that now go to FORUMHOME and add this code to the bottm right before </body>:
<if condition="$show['member']">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div>
</div></if>
Now save that, this takes simple edits with the code from your part to patch what you have set. I have this chat box but you can use any othe or change the dimensions.
Make sure to upload the attached .js file to your forum root!!!
Edit: Right so for my website I've made it so it floats upon scrolling so the shoutbox isn't in just one section. Here's how I've done it:
In the FORUMHOME at the bottom instead of adding the codes above delete them and add this:
<if condition="$show['member']">
<div id="centershoutbox"><div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div></div>
</div></if>
Save that then head over to headinclude and add after the style tag:
#centershoutbox{
position: fixed;
right: 100%;
top: 2%;
margin-top: 0.2em;
}
.slide-out-div {
width: 600px;
height: 264px;
background: #000;
border: #2779a9 2px dashed;
}
That's set to the specs of my own site. I've also attached the psd for the side image I've used, download the hoxbox.zip file, extract it and have fun designing! Remember this is by Eplexx, not another hence the updates =)
https://vborg.vbsupport.ru/external/2011/11/32.png
This expands once clicked.
https://vborg.vbsupport.ru/external/2011/11/33.png
Anyway here's how to do it:
Head to headinclude and add this to the bottom:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="screen">
.slide-out-div {
width: 600px;
height: 264px;
background: #000;
border: #2779a9 2px dashed;
}
</style>
<script src="jquery.tabSlideOut.v1.3.js"></script>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'ghtheme/Extra/hotbox.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '173px', //height of tab image
imageWidth: '38px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '150px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
Save that now go to FORUMHOME and add this code to the bottm right before </body>:
<if condition="$show['member']">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div>
</div></if>
Now save that, this takes simple edits with the code from your part to patch what you have set. I have this chat box but you can use any othe or change the dimensions.
Make sure to upload the attached .js file to your forum root!!!
Edit: Right so for my website I've made it so it floats upon scrolling so the shoutbox isn't in just one section. Here's how I've done it:
In the FORUMHOME at the bottom instead of adding the codes above delete them and add this:
<if condition="$show['member']">
<div id="centershoutbox"><div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div></div>
</div></if>
Save that then head over to headinclude and add after the style tag:
#centershoutbox{
position: fixed;
right: 100%;
top: 2%;
margin-top: 0.2em;
}
.slide-out-div {
width: 600px;
height: 264px;
background: #000;
border: #2779a9 2px dashed;
}
That's set to the specs of my own site. I've also attached the psd for the side image I've used, download the hoxbox.zip file, extract it and have fun designing! Remember this is by Eplexx, not another hence the updates =)