Mobile & Tablet Friendly Custom Shoutbox

Post: Mobile & Tablet Friendly Custom Shoutbox

06-15-2014, 11:17 AM #1

Brad

Guest

n/a

Posts

n/a

Reputation

n/a

Credits

Member

Once upon a time...

NextGenUpdate

(adsbygoogle = window.adsbygoogle || []).push({});

Mobile Friendly Custom Shoutbox

The current shoutbox on the android & iOS app isn't very user friendly, with the textbox at the top of the page, making it more effort then it needs to be to send a message. Here I show you my custom shoutbox that has been made with Tablets & Mobile Devices in mind.

This will work on PC & Android using google chrome, I haven't tested with anything else.

What it will look like on tablets:
You must login or register to view this content.

What it looks like on mobile phones:
You must login or register to view this content.

The script was only for personal use, so improvements could still be made. I didn't obfuscate it so you can make changes all you want! This works on Google Chrome on PC and Android, I haven't tested on anything else.

    

$(function(){$('head'.append('<meta name="viewport" content="width=device-width, user-scalable=no">';$('.container td:nth-child(2)'.hide();$('#well'.css({'background':'#FFFFFF','padding':'0px'});$('#shoutbox_frame'.css({'width':'99%','margin':'auto'});$('.bootstrap-navbar'.css({'position':'absolute','bottom':'0px'});$('.bootstrap-navbar-inner'.css({'padding':'0px','background':'#FFFFFF'});$('[name=vbshout_pro_shoutbox_editor]'.css({'color':'#0c0c0c','font-family':'calibri','font-size':'19px','border':'none','background':'#FFFFFF','-webkit-box-shadow':'inset 0 1px 1px rgba(0, 0, 0, 0)','-moz-box-shadow':'inset 0 1px 1px rgba(0, 0, 0, 0)','box-shadow':'inset 0 1px 1px rgba(0, 0, 0, 0)'});$('[name=vbshout_pro_shoutbox_editor]'.attr('placeholder','Type a message...';$('.container table'.attr('width','100%';$('.container tr'.append('<td><input type="button" name="bradisawesome" style="margin-right:10px;width:31px;height:27px;margin-top:-9px;border:none;background: url(https://i.imgur.com/nzYsQFL.png) no-repeat #FFFFFF;background-size:30px 27px"></td>';$('[name=vbshout_pro_shoutbox_editor]'.css('width','100%';$('.container td:first-child'.css({'padding-right':'20px','padding-left':'10px'});$('head'.append('<style>.hidden-phone{display:none;}.smallfont {font-size:16px;font-family:calibri }#shoutbox_frame div:first-child{display:none} #shoutbox_window {padding-top:5px;}</style>';$('.bootstrap a'.css({'font-size':'18px'});$('#vbshout_pro_tabs tbody tr td .alt1:nth-child(2)'.append('</table>';$('.alt2'.css({'padding-top':'1px','padding-bottom':'2px'});$('[name=bradisawesome]'.click(function(){return InfernoShoutboxControl.shout()})});

To use this, You need to go onto the detatched shoutbox (You must login or register to view this content.). When you are here, all you need to do is type "javascript:" into the url bar at the top of your browser, and paste the script above after it. For mobile users this is the same, I have it hosted on pastebin to make it easier (link bellow).

This will also work with the chrome extension TamperMonkey
I did remove the notice as this was made for mobile use, and as the notice took up a large amount of room, I decided to remove it.
This has only been tested on google chrome PC & google chrome Android

You must login or register to view this content.

Hope you find this as useful as I do Smile

(adsbygoogle = window.adsbygoogle || []).push({});

The following user thanked Brad for this useful post:

Insight