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: 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
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
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
Albatross View Drop Down
Postmaster General
Postmaster General


Joined: 11 May 2011
Status: Offline
Points: 1118
Direct Link To This Post 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
 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.