Jump to content

Add X of Y creatures to HTML5 page


Recommended Posts

  • 3 months later...
  • Root Admin

Ann. 3397 - [2015-03-30 03:06:36 - Stage 12] - Permalink - Posted By Chewett
Your current number of creatures, and maximum recruitable are now visible on the HTML5 creature page. This has not been backported to the Flash one since we are moving towards only using the HTML5 one.

Link to comment
Share on other sites

I'm not certain why your's is showing up with nice spacing below that text, but in Opera Classic, there is no room between the bottom of the text and the top of the creature icons. Adding 20px to the base of the absolute positioning used by the elements should provide the correct spacing.


I've attached screenshots of what it looks like currently, what it looks like with 20px spacing (ignore the first column, I was seeing what it looked like with 40px spacing), and a highlighted version showing exactly where the top of the element is with 20px spacing.

Link to comment
Share on other sites

  • Root Admin

I am using google chrome, latest.

As I said >>This is a known issue but will be fixed in the future when I have finalised work on HTML5 interface.

Its not being fixed now is because im going to have to adjust how it works out the "length" of the page a couple times, and I dont want to waste time doing it each and every single time I modify it all.

Link to comment
Share on other sites

Well, how about we change it so that it doesn't do absolute positioning then?


Some jQuery code to achieve the desired effect:

// Now, on to the main changes.
// First we replace all of the absolute positioned pieces with relative positioned versions.
// The creature holders are inline-block so that they flow appropriately.
$('div[id^="div_allcreatures_holder_"]').attr('style', 'display: inline-block; height: 128px; vertical-align: top;');
$('#div_allbckpids_holder').attr('style', 'text-align: center');

// There is an outermost div that is aligning the content to center by default,
// we need it to align left for things to look right.
$('body > table > tbody > tr > td > div[align="center"]').attr('align', 'left');

// We could just put a div around all the creature holders and set a left margin on that,
// but it's a pain to do via jQuery, so we do it this way instead.
$('div[id^="div_allcreatures_holder_"]').each(function(i, elem)
	if (i % 4 == 0)
		elem.style.marginLeft = "8px";

// Now we get to remove the padding lines that are added by the current code to
// account for the size of the normal content.
$('body > p:has(> br)').remove();

// Add a blank line after the creature capacity info.
$('#div_allcreatures_holder_1').before('<br />');

And, if you are running that code to test what it looks like, you'll also have to recalculate the size of the pagecontent frame:

// And, lastly, we re-calculate the pagecontent size, because we've changed it.
// This doesn't need to be done in the actual changes.
var pagecontent_ifrm = parent.document.getElementById('pagecontent');
pagecontent_ifrm.style.height = 800; //reset
pagecontent_ifrm.style.height = document.body.scrollHeight; //orig

Link to comment
Share on other sites

  • Root Admin

Simply put, we are probably not going to use absolute positioning.


The code just needs some cleaning, its a throwback from the old old old days. Its never been properly changed and made nice with new stuff.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Forum Statistics

    Total Topics
    Total Posts
  • Recently Browsing

    • No registered users viewing this page.
  • Upcoming Events

    No upcoming events found
  • Recent Event Reviews

  • Create New...