How to put a div before </body>, is this proper or can it be done better?

richardwbb · March 07, 2018, 03:41:00 PM

I have written my question in bold. I've got my first modification working and it installs and deinstalls. My modification needs to put a div element somewhere inside the generated html. For it to be "working" it may be put just after the <body> element like this;

Code Select

<body><div id="modification"></div>

But for computer (generating) speed and logica, it would be better to generate this;

Code Select

<div id="modification"></div></body></html>

Now my question;

Would the output shown below be a proper way of adding a div element all the way down (ensuring custom theme compatibillity), or is there a better way. I might not fully understand the reasoning behind 'template_html_below()'.

Code Select

function template_html_below()
{
	global $context, $settings, $options, $scripturl, $txt, $modSettings;

	echo '
<div id="modification"></div>
</body></html>';
}

Doug Heffernan · March 07, 2018, 05:31:36 PM

Where do you want to add it? Can you post a screenshot of the area?

vbgamer45 · March 07, 2018, 06:53:00 PM

I would hook into the output buffer that would look for all. Just scan for </body> then add before.

Or you can insert it via a layer check headers footer mod for details.

richardwbb · March 07, 2018, 06:54:54 PM

I've been doing my best on writing this reply but vbgamer45 beat me to it and might be right. I decided to post the following anyway, hoping to learn more. The modification I am working on, I am attempting to make as compatible as it can be and relies solely on a single div element. This element makes use of CSS 'position: absolute;', which means two things. It is rendered as one of the last things of the whole web page (which means the div element is best put as late as possible) and it really doesn't matter where this div is put, as long it is understandably between both body tags.

I don't see how a screenshot posted by me, would be helpful, I really hope I made myself clear in my previous post. I also am looking for three things, a. to make chances this modification will work with anyone's custom theme as large as possible, b. to make the generated html 'look good' and c. to make it render as fast as possible. I have not decided yet to make .c go before .b and that is my main reason why I am asking first.

While I did notice, the performance impact is negligible (but personally I almost always go for speed) when this div is put after the first body tag, I am not sure if using the end body tag, would be as compatible with most custom themes then using the first body tag. I am also unsure on how to treat the 'template_html_below()' function. I did find a technical correct way of proceeding but it seems to me going with the first body element is the most aesthetic and the last body element the best choice for performance, but not as aesthetic. This is my first modification so I hope to receive some answers or a few words from people that have more experience then I do regarding modifying (custom) themes and SMF best practices. If my answer looks ambiguous, please see my signature.

vbgamer45 · March 07, 2018, 06:57:06 PM

You can look at my simple audio video embed mod at the copyright code that modifies querystring.php and you can use it to scan all the html to find the tag

drewactual · March 07, 2018, 09:13:24 PM

what's the purpose for the div, if I may ask?

as you said it doesn't matter where it goes- because it's anchored absolute or because it's for some purpose such as identification?

the thing about placing an absolute is it may not render properly in someone's modified theme as it will be only absolute to the last declared position's location... which means you gotta put it just before the < (end)body>, right (to make sure its absolute position is where you anticipate it will be)? if it's there for some purpose that means it doesn't have to be seen (such as identification), it can be anywhere so long as it contains display:none. (NOT 'hidden', hidden still occupies space)... but i guess you already know that.

for ultimate assurance the div will be there no matter what the circumstance, you could simply insert a script in your mod that rewrites the <(end)body> with your ~open div whatever it is close div and then close body~. you can plop that just about anywhere in your code, and it's not something a user of your mod will easily find and defeat- which is what i'm assuming this is possibly about? atop of that, it will ensure that no matter the theme that action takes place.

richardwbb · March 08, 2018, 09:43:19 AM

Ah yes, I did not tell much about it, since I'm hoping for people will be interested to have at least a look at the provided screenshots when my modification has passed. The div will show an image, the modification is a template enhancement and to answer your question, it is purely cosmetic.

Thank you for remembering me that CSS takes the 'position: absolute' argument as referring to the last declared element (if it's not an element I'm not fully aware of CSS rules on top of my head). I've been using 'display: none;', but that is interfering when I try to implement a master switch.

I'm a bit lost on your last paragraph. Is that proper coding? At the moment I did what vbgamer45 proposed. I was a bit lost on the 'before' and 'after' rules in the .XML file, they seem to do the opposite. Here is the CSS I require, as far as I can tell, it will always be shown on top on a pc. On a telephone it resizes nicely. I have asked my users, there where no problems found by me.

Code Select


	position: absolute;
	top: -70px;
	left: 50%;

	width: 956px;
	height: 180px;
	margin-left: -478px;

	background: url(../../default/images/modification.png) no-repeat;

News:

How to put a div before </body>, is this proper or can it be done better?

richardwbb

Doug Heffernan

vbgamer45

richardwbb

vbgamer45

drewactual

richardwbb