nemrod.se Various guides and experiments

Warriors2 Toolbar


Warriors2 is a turn-based browser game that I’ve enjoyed rather much the past couple of years. When you get a thousand turns a day the clicking can get a bit tedious, though, so some user scripts have been made to make life easier for the hardcore warriors. This extension puts some of those user scripts together into a neat package with auto-update features and a user interface you can’t get without.

Extension information:

Extension:
W2 Toolbar
Latest version:
v1.0
Download link:
W2 Toolbar v1.0 Can’t be used with newer Chrome versions
Description:
Gives you a few checkboxes to enable/disable helpful scripts for W2.
Browser compatibility:
Should work with any recent Chrome dev build.
Features:
  • Easy to use interface – simply check or uncheck boxes in the toolstrip
  • Auto-updates when new features or fixes are available
  • Currently implemented scripts:
    1. Follower auto-join
    2. Auto-attack
    3. Refresh stats (next to users online)
Screenshots:
W2 Toolbar
Refresh is always active, auto-attack and followers auto-join can easily be activated and deactivated.

Revision history:

Version 1.0 [11:05, 2009-08-03]:
Initial release.

Posted in Chrome Extensions | Leave a comment

Custom Context Menu with jQuery


This is just a thing that might come in handy for when I make future web applications that use extensive jQuery to make it feel like a real app. Basically it binds your right-click to open a menu that can be made to do stuff related to the site instead of the usual “View source” and stuff that’s usually going on.

More technically speaking it uses jQuery to simply bind the event generated when you right-click on the page to showing a div at the place where the mouse was when you clicked and then preventing the default menu to show up.

Here’s a link: Custom context menu

Edit: Apparently this doesn’t work in Internet Explorer either. Really can’t do anything fun with that browser, can you? u_u


Posted in Experiments | Leave a comment

Rotating Divs with jQuery


This is based on something my girlfriend made when I told her to make a design (she always complains about mine). She wanted bubbles and stuff <_<. I said it'd be too hard to make, but intrigued by the idea of divs moving in and out of focus depending on what you choose I decided to take a look at how it could be made. I quickly came to the conclusion that jQuery's animate method is exactly what I needed, and thereafter I spent an hour or two making four simple divs positioned in a circle in 3D space rotate, fade and change size upon the click of a button.

It was quite a long code, since I changed all the properties manually with animate. I decided I should write a plugin that could take a class and animate to it, but after deciding that it wasn’t worth spending that much time I took a look on the net and found a plugin that already did what I wanted. The one I post here is using that animateToClass plugin to make them rotate.

It works by having four classes (conveniently named box1-4) in the stylesheet with the properties like width, height, top, left, opacity, font-size etc. set to make them look like they’re positioned in a circle 3D space. I then use animateToClass to make box1 turn into box2 (with the time set to 1000), box2 turn to box3, and so on until they’ve all changed. After having used animateToClass I also remove and add the appropiate class to the div so I can rotate again.
Example: $(‘.box2’).animateToClass(‘box1’, time).addClass(‘box1’).removeClass(‘box2’);
In the HTML code all I have to do is make four divs with class box1-4 and a button to make them rotate and it’s done.

Here is a link to the page: Rotating divs. Note that it doesn’t work in Internet Explorer.


Posted in Experiments | Leave a comment

Table Stripe


Background:
I just wanted to make a better presentation of the member register I’ve been doing, so I made this tablestripe plugin that zebra stripes a table as well as highlighting the one the mouse is currently over.
Usage:
Simply run “$(‘tabletorunon’).tablestripe();”. You’ll have to do the CSS yourself, though. Every second row gets .striped and the one the mouse is currently over gets .mouseover. Stylesheet them as you see fit. :)
Shortcomings:
I’m not 100% sure how it behaves if you’ve got tables nested within another table, but I guess it shouldn’t really be a problem. Haven’t tested it with rowspan or anything either.
Example/demonstration:
Example HTML file
Download link:
jquery.tablestripe.js

Posted in jQuery plugins | Leave a comment

Toggle Columns


Background:
I was doing a member register with an awful lot of fields, enough to make them not fit without scrolling to the sides. I didn’t want to choose what not to show in the code though, because that’s not quite as dynamic as I want it to be. If they want to show a field that is usually not important, then they should be able to.
Usage:
Add “<ul id=’togglecol’></ul>” where you want the list in the code and then run “$(‘tabletorunon’).togglecol(‘Optional description that appears at the top of the list’);”. To make it look like you want you can simply use CSS on #togglecol ul and li. When the column is visible the li has the class showingcol and if not it has hidingcol, so you can use that to indicate the states. The states are also saved in cookies, so you can safely use page numbering and other stuff without losing the toggled columns.
Shortcomings:
As it is now it doesn’t really work well with colspan and the likes because I had no need for it, but it’s something I’m considering looking at and see if I can fix in the future.
Example/demonstration:
Example HTML file
Download link:
jquery.togglecol.js

Posted in jQuery plugins | Leave a comment