The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toggle Chatbox Memberlist

View previous topic View next topic Go down

Solved Toggle Chatbox Memberlist

Post by Luffy on May 19th 2017, 12:46 pm

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.. Confused

Any help would be appreciated.





avatar
Luffy
Manager
Manager

Male Posts : 4570
Reputation : 460
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Toggle Chatbox Memberlist

Post by Ange Tuteur on May 19th 2017, 4:12 pm

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13153
Reputation : 2843
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Chatbox Memberlist

Post by Luffy on May 19th 2017, 6:18 pm

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"});
      });





avatar
Luffy
Manager
Manager

Male Posts : 4570
Reputation : 460
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Toggle Chatbox Memberlist

Post by Ange Tuteur on May 19th 2017, 6:45 pm

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);
    }
  }
});
avatar
Ange Tuteur
Forumaster

Male Posts : 13153
Reputation : 2843
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Toggle Chatbox Memberlist

Post by Luffy on May 19th 2017, 7:16 pm

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

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





avatar
Luffy
Manager
Manager

Male Posts : 4570
Reputation : 460
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum