I've implemented the improvement suggested by Chris Wetherell in Jasper's Google Reader subscribe user script (original post) for Greasemonkey. Feed URL's containing query strings are now handled correctly. Thanks, Chris!
2006-04-13
2006-04-05
CSS styling definition lists without floating or absolute positioning
I've written before on styling definition lists (which I use to create semantic HTML forms). I described two CSS options to style the definition list:
- Positioning the definition title absolutely and the data relatively.
- Float the definition title in the definition data left margin.
The absolute option gets you in trouble when you for example want to dynamically change your page. The float option gets you in trouble when you want to support Internet Explorer 5 and 6. You will need to fix the 3px pixel gap and need to be lucky not to be running in to other problems.
Last week I've had it with these options and thought up a better way to style definition lists. Just use negative top margin on the definition data:
form dt {
width: 120px;
text-align: right;
}
form dd {
margin: -18px 0 2px 0;
padding-left: 128px;
min-height: 25px;
}
* html form dd { height: 25px; }
You can use the * html hack here because Internet Explorer 7 will ignore it and will support min-height.
2006-03-25
Formdown: rapid HTML form development
I'm working on a prototype for a web based application. For this prototype I need to create a lot of screens including forms. This is time consuming and not much fun if you need to change them every now and then. I would like to have something to:
- Create forms quickly and easily
- Modify forms quickly and easily
- Generate the forms as (semantic) HTML so I can create a click through prototype
basically I would like to have something like Markdown to generate forms. I really like the fact that the syntax is simple and readable. So I came up with Formdown. I implemented a javascript version of Formdown. This still needs some work. I needed it quickly so the code might need some optimization. Please contact me if you would like to port this to other languages or if you have ideas to improve this version.
Update 2006-04-06: This version has bugs (fieldset don't work under IE, definition data isn't closed etc.)! I will fix them, but I'm not sure when.
Syntax
Start a form:
%get|post action id
Start a fieldset (legend is optional):
+ Legend ---------------
Close a fieldset (dashes are optional):
+-----------------------
Field label (exclamation mark indicates required field):
Field label !:
Buttons:
{{Submit button}} {Other button}
Input fields must be preceded by a label
Text input:
[_____________] [_Value_]
Textarea:
[[_____________]] [[_Value_]]
Select:
> Option >* Selected option
Checkbox:
[ ] Unchecked [*] Checked
Radio button:
( ) Unchecked (*) Checked
Formdown example
Input:
%get action.do myform
+ Personal data -----------------
Name !: [_Jasper de Vries_]
Nickname : [________]
Gender : (*) male
( ) female
Interests : [*] Blogger
[*] speed skating
[ ] rain
Select something : > First option
>* Second option is selected
> Third option is no option
Remarks : [[__________]]
+--------------------------------
{{Submit}} {Cancel}
Output:
<form method="get" action="action.do" id="myform"> <fieldset> <legend>Personal data</legend> <dl> <dt><strong>Name</strong></dt> <dd> <input type="text" value="Jasper de Vries" /> <dt>Nickname</dt> <dd> <input type="text" value="" /> <dt>Gender</dt> <dd> <label><input type="radio" checked="checked"/> male</label><br /> <label><input type="radio" /> female</label><br /> <dt>Interests</dt> <dd> <label><input type="checkbox" checked="checked"/> Blogger</label><br /> <label><input type="checkbox" checked="checked"/> speed skating</label><br /> <label><input type="checkbox" /> rain</label><br /> <dt>Select something</dt> <dd> <select> <option>First option</option> <option selected="selected">Second option is selected</option> <option>Third option is no option</option> </select> </dd> <dt>Remarks</dt> <dd> <textarea cols="60" rows="6"></textarea> </dd> </dl> </fieldset> <p class="buttons"> <button type="submit" class="Submit">Submit</button> <button type="button" class="Cancel">Cancel</button> </p> </form>
Tags:
2006-03-08
Single left click tab opener user script
I browse a lot on my laptop. Since my laptop has a touchpad without a middle mouse button I need to right click links and then select "Open link in new tab". Not a big deal really, but I would like to be able to open new tabs easier. I thought up two ways to do this using a Greasemonkey user script:
- When you have your pointer on a link create a new link near the pointer which opens the link in a new tab.
- Open a new tab when you keep the left mouse button down for a while.
I choose the second option. The single left click tab opener user script was born.
Update 2006-02-21: I know that you could use Ctrl + Left click in Firefox to open links in a new tab. Since I can't use my left arm fully the Ctrl key isn't really an option for me.
2006-02-28
Show links to embedded media user script 0.4
I've updated the Embedded media linker (original post) user script for Greasemonkey.
- Improved positioning using the positioning method I used in my select element filter user script.
embedtags nested in anobjecttag now overwrite theobjecttag.- You can now exclude embedded media by mime type. This method is more reliable than excluding extensions.
- The link is now inserted above the embedded media. When the embedded media was placed in a popup window the link sometimes wasn't visible.
Subscribe to:
Posts (Atom)
Posts
