instant chat mod overview facebook style

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • instant chat mod overview facebook style

      hay i have a little project im trying to implement into my site but i hit a snag.......could anyone help

      i included a pic to show hat i mean


      im having problems with getting user info and displaying it avitar ( i havent placed a default pic yet)

      codes is included thanks

      JavaScript Source Code

      1. /this function can remove a array element.
      2. Array.remove = function(array, from, to) {
      3. var rest = array.slice((to || from) + 1 || array.length);
      4. array.length = from < 0 ? array.length + from : from;
      5. return array.push.apply(array, rest);
      6. };
      7. //this variable represents the total number of popups can be displayed according to the viewport width
      8. var total_popups = 0;
      9. //arrays of popups ids
      10. var popups = [];
      11. //this is used to close a popup
      12. function close_popup(id)
      13. {
      14. for(var iii = 0; iii < popups.length; iii++)
      15. {
      16. if(id == popups[iii])
      17. {
      18. Array.remove(popups, iii);
      19. document.getElementById(id).style.display = "none";
      20. calculate_popups();
      21. return;
      22. }
      23. }
      24. }
      25. //displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
      26. function display_popups()
      27. {
      28. var right = 220;
      29. var iii = 0;
      30. for(iii; iii < total_popups; iii++)
      31. {
      32. if(popups[iii] != undefined)
      33. {
      34. var element = document.getElementById(popups[iii]);
      35. element.style.right = right + "px";
      36. right = right + 320;
      37. element.style.display = "block";
      38. }
      39. }
      40. for(var jjj = iii; jjj < popups.length; jjj++)
      41. {
      42. var element = document.getElementById(popups[jjj]);
      43. element.style.display = "none";
      44. }
      45. }
      46. //creates markup for a new popup. Adds the id to popups array.
      47. function register_popup(id, name)
      48. {
      49. for(var iii = 0; iii < popups.length; iii++)
      50. {
      51. //already registered. Bring it to front.
      52. if(id == popups[iii])
      53. {
      54. Array.remove(popups, iii);
      55. popups.unshift(id);
      56. calculate_popups();
      57. return;
      58. }
      59. }
      60. var element = '<div class="popup-box chat-popup" id="'+ id +'">';
      61. element = element + '<div class="popup-head">';
      62. element = element + '<div class="popup-head-left">'+ name +'</div>';
      63. element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">✕</a></div>';
      64. element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
      65. document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
      66. popups.unshift(id);
      67. calculate_popups();
      68. }
      69. //calculate the total number of popups suitable and then populate the toatal_popups variable.
      70. function calculate_popups()
      71. {
      72. var width = window.innerWidth;
      73. if(width < 540)
      74. {
      75. total_popups = 0;
      76. }
      77. else
      78. {
      79. width = width - 200;
      80. //320 is width of a single popup box
      81. total_popups = parseInt(width/320);
      82. }
      83. display_popups();
      84. }
      85. //recalculate when window is loaded and also when window is resized.
      86. window.addEventListener("resize", calculate_popups);
      87. window.addEventListener("load", calculate_popups);
      Display All
      Images
      • facebook style.png

        1.57 MB, 1,366×768, viewed 742 times
    • CSS Source Code

      1. @media only screen and (max-width : 540px)
      2. {
      3. .chat-sidebar
      4. {
      5. display: none !important;
      6. }
      7. .chat-popup
      8. {
      9. display: none !important;
      10. }
      11. }
      12. body
      13. {
      14. background-color: #e9eaed;
      15. }
      16. .chat-sidebar
      17. {
      18. width: 200px;
      19. position: fixed;
      20. height: 100%;
      21. right: 0px;
      22. top: 0px;
      23. padding-top: 10px;
      24. padding-bottom: 10px;
      25. border: 1px solid rgba(29, 49, 91, .3);
      26. }
      27. .sidebar-name
      28. {
      29. padding-left: 10px;
      30. padding-right: 10px;
      31. margin-bottom: 4px;
      32. font-size: 12px;
      33. }
      34. .sidebar-name span
      35. {
      36. padding-left: 5px;
      37. }
      38. .sidebar-name a
      39. {
      40. display: block;
      41. height: 100%;
      42. text-decoration: none;
      43. color: inherit;
      44. }
      45. .sidebar-name:hover
      46. {
      47. background-color:#e1e2e5;
      48. }
      49. .sidebar-name img
      50. {
      51. width: 32px;
      52. height: 32px;
      53. vertical-align:middle;
      54. }
      55. .popup-box
      56. {
      57. display: none;
      58. position: fixed;
      59. bottom: 0px;
      60. right: 220px;
      61. height: 285px;
      62. background-color: rgb(237, 239, 244);
      63. width: 300px;
      64. border: 1px solid rgba(29, 49, 91, .3);
      65. }
      66. .popup-box .popup-head
      67. {
      68. background-color: #6d84b4;
      69. padding: 5px;
      70. color: white;
      71. font-weight: bold;
      72. font-size: 14px;
      73. clear: both;
      74. }
      75. .popup-box .popup-head .popup-head-left
      76. {
      77. float: left;
      78. }
      79. .popup-box .popup-head .popup-head-right
      80. {
      81. float: right;
      82. opacity: 0.5;
      83. }
      84. .popup-box .popup-head .popup-head-right a
      85. {
      86. text-decoration: none;
      87. color: inherit;
      88. }
      89. .popup-box .popup-messages
      90. {
      91. height: 100%;
      92. overflow-y: scroll;
      93. }
      Display All
    • the data needed is when users are on line the right side will populate.....im goimgvto have to edit the right side so when their is alot of players more then 10 you scroll for the rest
    • Сделай по принципу как левая панель сделанная, только отобрази справа.

      Например подгружай main.rigth_navigation.tpl и распиши всё что хочешь что нужно.

      layout.full.tpl вот в этом файле мой пример

      {include file="main.header.tpl" bodyclass="full"}
      {include file="main.topnav.tpl"}
      {include file="main.navigation.tpl"}
      <div id="contentss" class="innersi">
      <div id="content">
      {block name="content"}{/block}
      </div>
      </div>
      {include file="main.rigth_navigation.tpl"} <---- тут что хочешь грузи только укажи что грузить с право кстати можно и блок <div></div> а в стилях распиши как грузить
      {foreach $cronjobs as $cronjob}
      <img src="cronjob.php?cronjobID={$cronjob}" alt="">
      {/foreach}
      {include file="main.footer.tpl" nocache}

      The post was edited 2 times, last by Klon ().

    • so i dropped the this because it would populate too much and it was over whelming, i have integrated a system that does the same idea but much better ( still testing and editing), but it looks promising......it create chat rooms and shows members online with instant chat like facebook, and it is capable to do video chat etc, its great script ........2moons.de/index.php?attachment…a45fd0595fcadab90d9ae18392moons.de/index.php?attachment…a45fd0595fcadab90d9ae1839
      Images
      • fri.png

        1.04 MB, 1,366×768, viewed 489 times
    • justa little hint almost finished just need to know



      its asking me $ses = LOGGED_IN_USERID///tell script the userid of the current user

      eg, if site uses PHP SESSION to store users in $_SESSION['user_id'], then
      LOGGED_IN_USERID will become $_SESSION['user_id']

      not sure what to put here for this ...any help please