Invision Byte: Scrollbar/Emoticon Box Issue Fix (JS) - Legacy Versions (IP.Board 2) - Tutorials - Invision Byte

Jump to content

Welcome to Invision Byte

Welcome to Invision Byte, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information. Take advantage of it immediately, Register Now or Sign In.

  • Start new topics and reply to others
  • Subscribe to topics and forums to get automatic updates
  • Purchase one of the products available and quickly receive support for it!
  • View and use the shoutbox to communicate
  • Get your own profile and make new friends
  • Customize your experience here
Guest Message by DevFuse

User is offline Author

Find Posts Tutorial info

  • Added on: Oct 24 2008 03:18 PM
  • Views: 920

Collaboration


  Like

Scrollbar/Emoticon Box Issue Fix (JS)

This article describes the method to fix the horizontal/vertical
scrollbars, that do appear in the emotion box of the Post Screen.
Screenshots:Before and After
The workaround is quite simple to apply.

1. First you need to get a fresh uncompressed copy of the file ips_text_editor_func.js from the Development folder and open it with a text editor such as notepad (Development\javascript_uncompressed\jscripts)

2. Search for:

if ( _mode == 'open' )
	{
		_editor.style.width	  = '80%';
		
		if( is_opera )
		{
			_editor.style.width	  = '100%';
			_editor.style.display	 = 'block';
		}

		_options.style.width	 = 'auto';
		_options.style.height	= 'auto';
		_options.style.display   = 'block';
		_options._panel_open	 = 1;
		
		document.getElementById( editor_id + '_spacer-bar' ).style.width = '4px';


Replace with:

if ( _mode == 'open' )
	{
		_editor.style.width	  = '80%';
		
		if( is_opera )
		{
			_editor.style.width	  = '100%';
			_editor.style.display	 = 'block';
		}
		
				if( is_ie )
		{	
		_options.style.height	= 'auto';
		_options.style.display   = 'block';
		_options._panel_open	 = 1;
		document.getElementById( editor_id + '_spacer-bar' ).style.width = '4px';
		}
		 else
		 {
		_options.style.width	 = '100%';
		_options.style.height	= 'auto';
		_options.style.display   = 'block';
		_options._panel_open	 = 1;
		
		document.getElementById( editor_id + '_spacer-bar' ).style.width = '4px';
		}

3. Search for:

var _div  = document.createElement( 'div' );
		_div.style.width	 = '100%';
		_div.style.height	= '120px';
		_div.style.overflow	 = 'auto';
		_div.style.overflowY = 'auto';
		_div.style.overflowX = 'auto';


Replace with:

		var _div  = document.createElement( 'div' );
		_div.style.width	 = '100%';
		_div.style.height	= '100%';
		_div.style.overflow	 = 'auto';
		_div.style.overflowY = 'auto';
		_div.style.overflowX = 'auto';


Please note, that the edited value for : _div.style.height
can remain in pixels and in order to get rid of the vertical scroll,
you will need to set a higher px value. If you change it to percent
value, like shown in this tutorial, you will need to add exactly the
same number of smilies(12) on the second page, if you do not want to
see the emotion box changing it's hight.


4. After saving the file, you may want to compress it again, to reduce page load times. You could use for that purpose a Web GUI for YUI compressor

5. Overwrite the original file, which is located in folder jscripts/ with the edited/recompressed one and you are done.
Note: Clear browsers cache, if you want to see the immediate results!

</div>
0
Powered by Tutorials 1.2.2 © 2019, by Michael McCune