Play Now Login Create Account
illyriad
  New Posts New Posts RSS Feed - Quick UI Hack: Notification Panel height
  FAQ FAQ  Forum Search   Register Register  Login Login

Topic ClosedQuick UI Hack: Notification Panel height

 Post Reply Post Reply
Author
Albatross View Drop Down
Postmaster General
Postmaster General


Joined: 11 May 2011
Status: Offline
Points: 1118
Direct Link To This Post Topic: Quick UI Hack: Notification Panel height
    Posted: 23 Aug 2012 at 11:55
Cut and paste all the green text below into your browser's JavaScript console to make the Notification panel (top of the right-side panel) a bit bigger. Then, you can type bigger() or smaller() to change the size of the panel a bit.

var h=100; ah=function(idN,dh,lev){var o=document.getElementById(idN);for(var i=0;i<lev;i++){o=o.getElementsByTagName('div')[0]}o.style.height=dh+parseFloat(o.style.height)+'px';};doH=function(h){ah('sideBar',h,1);ah('NextEventsTab',h,0);ah('NotificationsTab',h,0);ah('Notifications',h,0);ah('DockedChat',-h,0);ah('allianceChatTab',-h,2);ah('globalChatTab',-h,2);};bigger=function(){doH(h)};smaller=function(){doH(-h)};doH(300);

Tested on Chrome.
(edit) After a bit of use, I note that the bottom panel is too big if the browser is resized. I was going to delete this post as a result, but players who undock their Chat panel might have a use for it.

For geeks, here's the readable version:
var h = 100;
ah = function(idN, dh, lev) { 
var o = document.getElementById(idN);
for (var i = 0; i < lev; i++) {
// get first div child element
o = o.getElementsByTagName('div')[0]
}
o.style.height = dh + parseFloat(o.style.height) + 'px';
};
doH = function(h) {
ah('sideBar',h,1);
ah('NextEventsTab',h,0);
ah('NotificationsTab',h,0);
ah('Notifications',h,0);
ah('DockedChat',-h,0);
ah('allianceChatTab',-h,2);
ah('globalChatTab',-h,2);
}
bigger = function() {
doH(h);
};
smaller = function() {
doH(-h);
};
doH(300);

The lev parameter recursively takes the first child <div> tag within the named item, to access items that are not named by id. So ah('foo',50,2) adjusts the height of the <div> tag that is 2 levels deep within the item having id 'foo', e.g.

<div id="foo"><div><div>This one!<div></div></div>


Edited by Albatross - 23 Aug 2012 at 17:41
Back to Top
Sisren View Drop Down
Forum Warrior
Forum Warrior
Avatar

Joined: 03 Feb 2012
Location: PA, USA
Status: Offline
Points: 446
Direct Link To This Post Posted: 24 Aug 2012 at 16:04
An other effect is it kicks the friends panel down to seeing 1-2 names at a time, at least on my screen.  I used the smaller function call 2x, and is looking great.
Back to Top
Timrath View Drop Down
Wordsmith
Wordsmith
Avatar

Joined: 24 Feb 2012
Location: Austria
Status: Offline
Points: 107
Direct Link To This Post Posted: 30 Aug 2012 at 19:12
That's wonderful! I always wanted the notifications panel to be larger (and the friends panel to be smaller or completely invisible). But how can I make this change permanent? When I reload the page, the panels revert to their original proportions.
Back to Top
Albatross View Drop Down
Postmaster General
Postmaster General


Joined: 11 May 2011
Status: Offline
Points: 1118
Direct Link To This Post Posted: 03 Sep 2012 at 23:36
Originally posted by Timrath Timrath wrote:

... How can I make this change permanent? When I reload the page, the panels revert to their original proportions.
You can't; this is a proof-of-principle hack. To do a proper job of this (which I don't have time to do), you'd need to do three things: (a) write a plug-in script that hooks onto the 'client-area resize' event, and overrides (or supplements) the existing panel-sizing behaviour, and (b) use HTML5's local storage to record the changes you made, so they are there when you refresh the page or login again later, (c) have a button that the player can press, which resets everything.
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.03
Copyright ©2001-2019 Web Wiz Ltd.