Very Simple Fixed Header

Here’s a full working demo of the entire thing in operation.

I wanted a session handling system that shows a fixed header at the top of the page informing the user that the session has ended and that he will need to login again, but without disturbing the workflow if the user is reading on the page or writing a forum post. To handle this I’ve made a very simple fixed header library. To use it simply include the javascript and css and call ”create_fixed_header(your_html)”. To remove the header call ”remove_fixed_header()”. To complete the login system I described I recommend the jQuery form plugin, which makes it dead easy to handle the form submission and response without reloading the page. You just declare the form as you would normally and then set the event handler. Here’s an example:

$('#login_form').ajaxForm(function(data){
	if (data == 'success') {
		remove_fixed_header();
	}
	else {
		alert(data);
	}
});

Here’s a full working demo of the entire thing in operation.

- Möller

Very Simple Input Overlay

I have been growing increasingly dissatisfied with the solution for overlay texts on input controls I have been using, so I decided to come up with a new system which would be easier to implement and maintain. I found this article by Sam Dunn but I found it somewhat unpolished so I worked on it a bit to make it smoother to use. Include the following script in your page: http://static.eldmyra.se/input_overlay/input_overlay.js (and the stylesheet http://static.eldmyra.se/input_overlay/input_overlay.css for some basic styling) and set an attribute ”default_value” on the input control with the value you want to display as overlay:

<input name=”foo” default_value=”overlay” type=”text”/>

And that’s pretty much it. If you update the document with new input control via javascript you will need to call updateInputOverlays() to update them though.

- Möller

Very Simple Inline Editing

I wanted inline editing for Mammon (and eventually Eldmyra), but after looking around on the net I was disappointed at the libs available. The only one I found that looked somewhat reasonable had all the code in portugese or something. Note to aspiring developers: always write code in English. Anyway, after some fiddling I present to you Very Simple Inline Editing:

1. Include the following script file: http://static.eldmyra.se/js/inline_edit.js (requires the Prototype JS library)
2. Mark up the parts you want to edit. So if you before had {{my_variable}} change it to:
   <span class="inline_editable" edit_url="/path_to_server_side_command/" id="{{my_variable}}_id">
{{my_variable}}
</span>
   Note that you need a unique id on the tag.
3. Implement the server side handler. The new data comes as a parameter ”new_content” in the POST request. Whatever is returned from the server side is inserted into the element when it’s done.

And that’s it!

- Möller