Improved Stats template

Started by Antechinus, October 14, 2011, 04:12:02 AM

Previous topic - Next topic

Antechinus

Just an idea I came up with since I was messing around with jQuery anyway.

On the stats page, the eight divs at the top ('General Stats' through to 'Most Time Online') take up more height than the average screen has available. This is a bit of a nuisance if you want to check the yearly/monthly figures in the collapsible table at the bottom of the page. Scrolling sux, right?

Easy fix:

Stats.template.php:

Find:
<div id="statistics" class="main_section">
<div class="cat_bar">
<h3 class="catbg">', $context['page_title'], '</h3>
</div>


Replace:
<div class="cat_bar">
<h3 class="catbg">', $context['page_title'], '
<a href="#" id="stats_toggle">
<img src="', $settings['images_url'], '/upshrink.png" alt="+" class="icon floatright" style="margin-top: 4px;" />
</a>
</h3>
</div><div id="stats_show_hide">


Find:
</div>
<br class="clear" />
<div class="flow_hidden">


Replace:
</div></div><!--/#stats_show_hide-->
<br class="clear" />
<div class="flow_hidden">


Find:
// ]]></script>';
}
}


Replace:

$(document).ready(function(){
$("#stats_show_hide").show();
$("#stats_toggle").show();

$("#stats_toggle").click(function(){
$("#stats_show_hide").slideToggle();
});
});

// ]]></script>';
}
}


And of course you will already be calling jQuery in the head section of your index.template.php. Details for several ways of doing that are in this post, if you need to know.

Result is that you'll have a clickable icon like the info centre collapse/expand, and when you click it the top eight divs will roll up and vanish, leaving the yearly/monthly stats table right where you can see it. Click again and the divs come back.

Obviously you could add extra show/hide triggers for each row of divs if you really wanted to. You could also add some extra js to switch upshrink images when the display states are toggled. I can't be bothered doing that at the moment. I think the basic version is fine for the number of times I use that page.

If anyone wants to nick this idea and package it as a mod, feel free. It'll probably be default in 2.1 anyway.



bloc

In fact, its worthwhile doing with or without JQuery, since the advantage is pretty clear here.

Antechinus

Well it's very easy and clean with jQuery and I'm using it anyway. Not worth writing plain old js for it, really.

bloc

I would agreed on that - I am using Mootools for the same thing/reason.

But the SMF native js code is here to used right now - I would think a mod would more easily be able to add a upshrink on that page, without having to add JQ as well. SMF 2.1 isn't even out yet..so it makes less sense referring to that at this stage, IMHO. You do say "probably", not "absolutely certain". ;)

Antechinus

Yes but for all my custom stuff I'm using jQuery like a junkie uses smack, so I'd rather rewrite the code with jQ than just adapt the default js. Gives a nicer result IMO and is hardly any more work.

thearmykid

nice share worked fantastic ! thanks

Advertisement: