Print Page | Close Window

Quick UI Hack: Notification Panel height

Printed From: Illyriad
Category: Miscellaneous
Forum Name: Technology & data
Forum Description: Discussions on data dumps, downloads, and third party applications.
URL: http://forum.illyriad.co.uk/forum_posts.asp?TID=4069
Printed Date: 16 Apr 2022 at 21:07
Software Version: Web Wiz Forums 12.03 - http://www.webwizforums.com


Topic: Quick UI Hack: Notification Panel height
Posted By: Albatross
Subject: Quick UI Hack: Notification Panel height
Date 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>


-------------



Replies:
Posted By: Sisren
Date 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.

-------------
Illy is different from Physics-
Reactions are rarely Equal, and rarely the opposite of what you'd expect...


Posted By: Timrath
Date 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.


Posted By: Albatross
Date 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.

-------------



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.03 - http://www.webwizforums.com
Copyright ©2001-2019 Web Wiz Ltd. - https://www.webwiz.net