Toggle Chatbox Memberlist

Hello,

Is there any way i could add a toggle bar before the chatbox memberlist (#chatbox_members) that functions as below:
The default way to display will be: Show a bar with "<" and when pressed the #chatbox_members will appear (display:block) and the "<" will change to ">".
After that when ">" bar is pressed the #chatbox_members will toggle (display:none) and the ">" will change to "<"

I am trying to do this using a javascript but it doesn't work for some reason.

Code:

$(document).ready(function(){
  $('<span class="toggleO"> < <span class="toggleC" style="display:none"> > </span> </span>').insertBefore('body #chatbox #chatbox_members');
  $(function(onclick,"toggleO"){
    $('.toggleO').css({"display":"none"});
    $('toggleC').attr('style','block');
    $('body #chatbox #chatbox_members').toggle();
  }
  $(function(onclick,"toggleC"){
    $('.toggleC').css({"display":"none"});
    $('toggleO').attr('style','block');
    $('body #chatbox #chatbox_members').toggle();
  }
}

I know there must be a mistake but i've tried various codes with no luck..

Any help would be appreciated.

Hi @Luffy,

One of the reasons the script isn't working is because it's not directly accessing the frame the chatbox is in. To do that, you usually have to wait until the page completely loads (i.e. window.onload), and then access the frame's contentDocument or contentWindow depending on which method is supported. You can also use jQuery's contents() method, but that doesn't work on object elements which is commonly used for the chatbox on the homepage.

Try using the script below. (I modified your script so it can access iframes and objects)

Code:

$(window).load(function () { // best to wait until everything is loaded before modifying frames

  var frame = $('iframe[src*="chatbox"], object[data*="chatbox"]'), // gets all the chatbox frames
      i = 0,
      j = frame.length;

  for (; i < j; i++) {
    try {
      // use "cb" as the second param in jQuery's query selection to select elements in the chatbox : $('selector', cb)
      var cb = frame[i].contentDocument || frame[i].contentWindow.document; // find the frame's document

      // you can use "+" to connect strings on multiple lines and make them easier to read
      $('#chatbox_members', cb).before(
        '<div id="toggle_chatbox_members">'+
          '<span class="toggleO">&lt;</span>'+
          '<span class="toggleC" style="display:none">&gt;</span>'+
        '</div>'
      );
     
      // close chatbox members
      $('.toggleO', cb).click(function () {
        $(this).hide();
        $('.toggleC', cb).show();
        $('#chatbox_members', cb).toggle();
      });

      // open chatbox members
      $('.toggleC', cb).click(function () {
        $(this).hide();
        $('.toggleO', cb).show();
        $('#chatbox_members', cb).toggle();
      });

    // catch any errors related to contentDocument and contentWindow not being supported
    } catch (error) {
      window.console && console.log(error);
    }
  }
});

I don't know if you have CSS for it, but if you don't add this to your stylesheet :

Code:

#toggle_chatbox_members {
  position:absolute;
  z-index:1;
}

It'll bring the buttons to the front so they're not hidden behind the chatbox elements.

Also here's some more info for modifying iframes :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
https://www.w3schools.com/jsref/prop_frame_contentdocument.asp

Thank you @Ange Tuteur. The script works. Although i had something else in mind.
I have already set the button but i want it when the list toggles to make the #chatbox element's width 98% instead of 86.5%, but using this code doesn't have any affect:

Code:

      // close chatbox members
      $('.toggleO', cb).click(function () {
        $(this).hide();
        $('.toggleC', cb).show();
        $('#chatbox_members', cb).toggle(200);
        $('body #chatbox', cb).css({"right":"191px!important"});
      });
 
      // open chatbox members
      $('.toggleC', cb).click(function () {
        $(this).hide();
        $('.toggleO', cb).show();
        $('#chatbox_members', cb).toggle(200);
        $('body #chatbox', cb).css({"right":"0px!important"});
      });

It doesn't work, because jQuery's CSS method doesn't apply style values that have "!important", you'd have to set the value via attr('style') instead. It should work if you remove !important though.

Code:

$(window).load(function () { // best to wait until everything is loaded before modifying frames
 
  var frame = $('iframe[src*="chatbox"], object[data*="chatbox"]'), // gets all the chatbox frames
      i = 0,
      j = frame.length;
 
  for (; i < j; i++) {
    try {
      // use "cb" as the second param in jQuery's query selection to select elements in the chatbox : $('selector', cb)
      var cb = frame[i].contentDocument || frame[i].contentWindow.document; // find the frame's document
 
      // you can use "+" to connect strings on multiple lines and make them easier to read
      $('#chatbox_members', cb).before(
        '<div id="toggle_chatbox_members">'+
          '<span class="toggleO">&lt;</span>'+
          '<span class="toggleC" style="display:none">&gt;</span>'+
        '</div>'
      );
   
      // close chatbox members
      $('.toggleO', cb).click(function () {
        $(this).hide();
        $('.toggleC', cb).show();
        $('#chatbox_members', cb).toggle();
        $('#chatbox', cb).css('left', '0');
      });
 
      // open chatbox members
      $('.toggleC', cb).click(function () {
        $(this).hide();
        $('.toggleO', cb).show();
        $('#chatbox_members', cb).toggle();
        $('#chatbox', cb).css('left', '181px');
      });
 
    // catch any errors related to contentDocument and contentWindow not being supported
    } catch (error) {
      window.console && console.log(error);
    }
  }
});

Thank you very much @Ange Tuteur. This works perfectly.

Problem solved & topic archived. Please read our forum rules: ESF General Rules