Xat no final da pagina

Qual é minha questão:
Olá!
Minha questão é o seguinte, podem observar em meu fórum que o xat é na lateral da pagina, eu gostaria de coloca-lo no final da pagina, como esse blog: http://www.fatalitydesign.com.br/
Se puderem me ajudar, agradeço..

Obs: É Para meu fórum, e não para o blog, precisava de coloca-lo o mesmo código só que no final da pagina :S
Obs²: Meu xat é xat normal, da xat.com e não xat box rsrs..

Código que uso no meu fórum no JavaScript:

Código:

jQuery(document).ready(function(){s="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();";jQuery('body').prepend('<div style="overflow: visible; position: fixed; bottom: 30px; height: 450px; right: 0px; z-index:1000;"><iframe src="http://bcvgames.forumbrasil.net/h8-xat-lateral-da-pagina" id="chatboxpop" scrolling="yes" style="height: 300px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:530px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="'+s+'" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i32.servimg.com/u/f32/17/42/80/81/button12.png" id="chatboxopen" style="display: inline; "><img src="http://i32.servimg.com/u/f32/17/42/80/81/button11.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>')});

Agradeço a quem puder me ajudar

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://bcvgames.forumbrasil.net/

Versão do meu fórum:
PHPBB3

Troca seu código JavaScript por esse

Código:


$(document).ready(function(){
$('body').prepend('
<div id="gb" style="left:25%; bottom:-37%"><div class="gbtab">
</div><div class="gbcontent">
<embed align="middle" allowscriptaccess="sameDomain" flashvars="id=176956688&rl=Brazilian" height="310" name="chat" pluginspage="http://xat.com/update_flash.shtml" quality="high" src="http://www.xatech.com/web_gear/chat/chat.swf" type="application/x-shockwave-flash" width="590" wmode="transparent"></embed></div></div>
');

$('.gbtab').click(function(){
var position = ($('#gb').css('bottom') == '-37%') ? '0%' : '-37%' ;
$('#gb').animate({
                            bottom: position
        }, 1000);
});

});


E se tiver algum css tire e coloque esse no lugar.

Código:


#gb {
position:fixed;
z-index: 999;
}
* html #gb {
position:relative;
}
.gbtab {
position:relative;
left:25%;
height:50px;
width:440px;
float:none;
cursor:pointer;
background:url('http://i.imgur.com/vbhwQ.png') no-repeat;
}
.gbcontent {
float:right;
background:#fff;
padding:8px;
}


Usei a imagem do blog que você mandou de exemplo, tava sem imagens aqui para usar

Bom, tava com um problema na CSS, dei umas ajustadas e ficou +/-, mais mesmo assim não consegui chegar a posição dele para baixo, olhe no meu fórum e vera.
Código que estou usando na CSS atualmente:

Código:

/* Xat no final da Pagina */
#gb {
position:fixed;
z-index: 999;
}
* html #gb {
position:relative;
}
.gbtab {
position:relative;
left:25%;
height:43px;
width:440px;
float:none;
cursor:pointer;
background:url('http://i.imgur.com/vbhwQ.png') no-repeat;
}
.gbcontent {
float:right;
background:#fff;
padding:0px;
}

Abraços

Para arrumar a posição dele, você arrumar oque está no js

Na linha 3 ou 4 vai ter essa parte <div id="gb" style="left:25%; bottom:-37%"><div class="gbtab">

Você deve mexer no bottom:-37%

Depois acha mais essa parte, vai estar entre as linhas 12 e 14
var position = ($('#gb').css('bottom') == '-37%') ? '0%' : '-37%' ;

Onde está -37% troque pelo mesmo valor que você trocou na primeira parte.

Obrigado cara. Resolveu muito mesmo rsrs..
+rep para você
Tópico Resolvido!