Enjin Android App Released!
Install the Enjin Android App!
Page
of 2

[Code] Toggle-Sliding Chat Module

11 replies
Posts:
313
Likes:
+71
Just Started
LEVEL 1
Hello,

So just recently someone posted (original EDH thread) on EDH asking if there was a way to toggle the sliding chat module instead of just having it slide in and out upon hover. Well I figured it out and wanted to share it since it might be quite handy to the community on Enjin and not just to the community on EDH. So basically, since not many people here are registered on EDH to have known about this I'm posting it here as well. Enjoy and feel free to customize this!

<!DOCTYPE html> <head> <style type="text/css"> .chat_toggle { width: 70px; height: 30px; background: #005EFF; position: fixed; top: 400px; left: 0px; text-align: center; font-size: 18px; font-weight: bold; line-height:30px; z-index:9999999999 !important; display: block; cursor: pointer; color: #fff; text-shadow: 0px 1px 3px #000; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); } .m_chat { width:615px; height:410px; background-color: rgba(0,0,0,0.86); top: 250px; position: fixed; left: -616px; z-index: 9999999; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 3px solid #005EFF; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); } </style> <script type="text/javascript"> $(document).ready( function() { $(".chat_toggle").toggle(function() { $(".m_chat").stop().animate({ left: "0px" }, 500); $(".chat_toggle").stop().animate({ left: "616px" }, 500); }, function() { $(".m_chat").stop().animate({ left: "-616px" }, 500); $(".chat_toggle").stop().animate({ left: "0px" }, 500); }); }); </script> </head> <body> <div class="chat_toggle">CHAT</div> </body> </html>


You can see a live example here: http://nomenclature.enjin.com/home
Posted Jun 12, 13 · OP · Last edited Jun 14, 13 by Weffe
Posts:
162
Likes:
+38
Just Started
LEVEL 1
I LOVE YOU WEFFE hehehe
Posted Jun 12, 13
Posts:
40
Likes:
+5
Can you please update this? Since Enjin updated their jQuery, this no longer works on my website.
Thanks!
Posted Jun 19, 13
Posts:
12
Likes:
+1
gamerinmind - did your toggle disappear, too?

Ah - it was http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed
Posted Jun 19, 13 · Last edited Jun 19, 13 by Pander Bee...
Posts:
313
Likes:
+71
Just Started
LEVEL 1
Updated the code:
(should work now)

<!DOCTYPE html> <head> <style type="text/css"> .chat_toggle { width: 70px; height: 30px; background: #005EFF; position: fixed; top: 400px; left: 0px; text-align: center; font-size: 18px; font-weight: bold; line-height:30px; z-index:9999999999 !important; display: block; cursor: pointer; color: #fff; text-shadow: 0px 1px 3px #000; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); } .m_chat { width:615px; height:410px; background-color: rgba(0,0,0,0.86); top: 250px; position: fixed; left: -616px; z-index: 9999999; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 3px solid #005EFF; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); } </style> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> <script type="text/javascript"> $(document).ready( function() { $(".chat_toggle,.m_chat").toggle(function() { $(".m_chat").stop().animate({ left: "0px" }, 500); $(".chat_toggle").stop().animate({ left: "616px" }, 500); }, function() { $(".m_chat").stop().animate({ left: "-616px" }, 500); //set it back $(".chat_toggle").stop().animate({ left: "0px" }, 500); //set it back }); }); </script> </head> <body> <div class="chat_toggle">CHAT</div> </body> </html>
Posted Jun 19, 13 · OP
Posts:
40
Likes:
+5
Thanks man! Works now!
Posted Jun 19, 13
Posts:
12
Likes:
+1
Hey - so thank you for putting up the quick fix, Weffe, but in the JQuery patch notes they talk about how the Migrate hot-fix is meant to be a temporary solution. I'm assuming they mean that eventually it won't be usable later due to further updates... Here is my code that I worked on to get it working without the Migrate hotfix. This should be good long term. Thanks again for your toggle + thanks to ExplosionPills (see in-line credits)

Important: I had to move my <div class="chat_toggle">Chat</div> up ABOVE my javascript

Also, my script is actually for a right-side pop out chat... sorry! It should work if you just flip some things around :(

Oh... one more thing. The reason the opacity drops to .25 is because I'm trying to figure out how to set the state of that element to opacity=1.0 whenever a new message is posted to chat. Whatever triggers the sound file should also help me do that, right? I dunno - I'm a little bit out of my league there...

<body> <div class="chat_toggle">Chat</div> </body> <style type="text/css"> .chat_toggle { width: 80px; height: 80px; background: #76b900; position: fixed; top: 450px; right: 50px; text-align: center; font-size: 18px; font-weight: bold; line-height:30px; z-index:9999999 !important; display: block; cursor: pointer; color: #fff; text-shadow: 0px 1px 3px #000; -webkit-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-radius: 5px; /*-webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);*/ } .m_chat { width:615px; height:410px; background-color: rgba(0,0,0,0.86); top: 320px; position: fixed; right: -620px; z-index: 9999999999; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleftt: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-left: 3px solid #76b900; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8); } </style> <script type="text/javascript"> //Thanks to ExplosionPills for getting me pointed in the right direction at http://stackoverflow.com/questions/14490957/what-is-alternative-to-use-after-jquery-1-9-removed-togglefunction-function (function($){ $.fn.createToggle = function() { var ele = this; var startPosition = ele.css("right"); var openfn = function() { $(".m_chat").stop().animate({ right: "0px"}, 500); $(".chat_toggle").stop().animate({ right: "619px", opacity: 0.25}, 500); }; var closefn = function() { $(".m_chat").stop().animate({ right: "-615px" }, 500); $(".chat_toggle").stop().animate({ right: "4px"}, 500); }; ele.data('clickState', 0); ele.click(function() { if (ele.data('clickState')) { closefn(); } else { openfn(); } ele.data('clickState', !ele.data('clickState')); }); }; })(jQuery); $(".chat_toggle").createToggle(); </script>
Posted Jun 19, 13 · Last edited Jul 5, 13 by Pander Bee...
Posts:
24
Likes:
+1
Heyy. i tried that and it did not work for me :/

Edit: nvm Some how i did something and it started working, Thank you for the code
Posted Jun 19, 13 · Last edited Jun 19, 13 by Karrrot
Posts:
20
Likes:
0
Not working for me, the button is there but the actual chat box doesnt pop out (the button does nothing)

Help?
Posted Jul 5, 13 · Last edited Jul 5, 13 by Jamy
Posts:
12
Likes:
+1
Ah sorry - I should have added the <style> bit from the original post. Scroll up and look at the post of code above mine, and you'll see in the code two main style definitions between the <style> and </style> tags.

Copy and add that in to your page
Posted Jul 5, 13
Page
of 2
Notices