tag:blogger.com,1999:blog-121296872024-03-07T10:12:38.029+01:00BrowservulselHTML, CSS, Javascript and moreUnknownnoreply@blogger.comBlogger109125tag:blogger.com,1999:blog-12129687.post-48434366338885298412010-02-27T10:01:00.002+01:002010-02-27T10:02:43.033+01:00JSP Tag Library for Web Services: where to find<p>
What really amazed me this week is that there I couldn't find a JSP Tag Library for Web Services. I did find a <a href="http://jcp.org/en/jsr/detail?id=267">specification request for JSP Tag Library for Web Services</a>, but I couldn't find anybody who was working on it. If somebody knows of an existing JSP tag library, please let me know.
</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-49035130886946938842008-08-03T12:18:00.000+02:002008-08-03T12:20:21.697+02:00Google open all 0.6.1<p>The <a href="http://userscripts.org/scripts/source/1748.user.js">Google open all</a> user script (<a href="/2005/06/google-open-all-user-script.html">original post</a>) for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> was updated to support the new HTML structure Google uses.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Google" rel="tag">Google</a></li>
<li><a href="http://www.technorati.com/tag/Tabs" rel="tag">Tabs</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
</ul>
</div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-12129687.post-1163625081907843922006-11-15T22:03:00.000+01:002006-11-15T22:12:59.463+01:00RTL gemist direct video link<p>This one is for the Dutch readers... again:</p>
<div lang="nl">
<p>Het <a href="http://userscripts.org/scripts/source/1997.user.js">Programma gemist directe video link</a> (voorheen “Omroep.nl video's direct linken”) user script (<a href="http://browservulsel.blogspot.com/2005/10/omroepnl-direct-video-link-user-script.html">oorspronkelijke post</a>) voor <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> ondersteunt nu ook <a href="http://www.rtl.nl/(vm=/experience/media/)/system/video/html/components/service/miMedia/rtl_gemist.xml">RTL Gemist</a> (RTL4, RTL5 en RTL7).</p>
</div>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/RTL" rel="tag">RTL</a></li>
<li><a href="http://www.technorati.com/tag/uitzending" rel="tag">uitzending</a></li>
<li><a href="http://www.technorati.com/tag/programma" rel="tag">programma</a></li>
<li><a href="http://www.technorati.com/tag/gemist" rel="tag">gemist</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Video" rel="tag">Video</a></li>
<li><a href="http://www.technorati.com/tag/Windows Media Player" rel="tag">Windows Media Player</a></li>
</ul>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-12129687.post-1150531537963026072006-06-17T10:07:00.000+02:002006-06-17T10:10:12.866+02:00Uitzendinggemist.nl direct ASF link and 'this week' filter<p>This one is for the Dutch readers... again:</p>
<div lang="nl">
<p>Het <a href="http://userscripts.org/scripts/source/1997.user.js">Omroep.nl video's direct linken</a> user script (<a href="http://browservulsel.blogspot.com/2005/10/omroepnl-direct-video-link-user-script.html">oorspronkelijke post</a>) voor <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> is op twee punten verbeterd.</p>
<ul>
<li>Bij een Window Media Player video krijg je geen wit scherm meer, maar blijf je op de huidige pagina.</li>
<li>
In overzichten is een checkbox toegevoegd waarmee je de lijst tot de afgelopen week kunt beperken.
<p><img src="http://photos1.blogger.com/blogger/1762/1012/400/dezeweek.gif" width="320" height="150" alt="Checkbox beperking afgelopen week" /></p>
</li>
</ul>
</div>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/omroep" rel="tag">omroep</a></li>
<li><a href="http://www.technorati.com/tag/uitzendinggemist" rel="tag">uitzendinggemist</a></li>
<li><a href="http://www.technorati.com/tag/uitzending gemist" rel="tag">uitzending gemist</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Video" rel="tag">Video</a></li>
<li><a href="http://www.technorati.com/tag/Windows Media Player" rel="tag">Windows Media Player</a></li>
</ul>
</div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-12129687.post-1150312666374855592006-06-14T21:14:00.000+02:002006-06-14T21:17:46.396+02:00Firefox extension tip: RefreshBlocker<p>I'm a frequent visitor of <a href="http://www.uitzendinggemist.nl/">uitzendinggemist.nl</a>. It has an annoying meta refresh on most pages. You, unfortunately, can't remove these refreshes using <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>. When you remove the meta tag from the DOM tree, the refresh has already been set.</p>
<p>There is an extension for <a href="http://www.mozilla.com/firefox/">Firefox</a> called <a href="http://www.allesdurcheinander.de/refreshblocker/">RefreshBlocker</a> which blocks those meta refreshes. You can create a white- or blacklist of sites using regular expressions.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Firefox" rel="tag">Firefox</a></li>
<li><a href="http://www.technorati.com/tag/Extension" rel="tag">Extension</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
</ul>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-12129687.post-1149322295831096232006-06-03T10:08:00.000+02:002006-06-03T10:11:35.833+02:00Uitzendinggemist.nl direct video link user script<p>This one is for the Dutch readers:</p>
<div lang="nl">
<p>Het <a href="http://userscripts.org/scripts/source/1997.user.js">Omroep.nl video's direct linken</a> user script (<a href="http://browservulsel.blogspot.com/2005/10/omroepnl-direct-video-link-user-script.html">oorspronkelijke post</a>) voor <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> is aangepast voor de vernieuwde <a href="http://www.uitzendinggemist.nl/">uitzending gemist site</a>.</p>
<p>Het heeft even op zich laten wachten maar gelukkig is <a href="http://userscripts.org/">Userscripts.org</a> weer in de lucht en had ik nu even tijd om het nieuwe script online te zetten.</p>
</div>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/omroep" rel="tag">omroep</a></li>
<li><a href="http://www.technorati.com/tag/uitzendinggemist" rel="tag">uitzendinggemist</a></li>
<li><a href="http://www.technorati.com/tag/uitzending gemist" rel="tag">uitzending gemist</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Popup" rel="tag">Popup</a></li>
<li><a href="http://www.technorati.com/tag/Embed" rel="tag">Embed</a></li>
<li><a href="http://www.technorati.com/tag/Video" rel="tag">Video</a></li>
<li><a href="http://www.technorati.com/tag/Real" rel="tag">Real</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1146993270561072192006-05-07T11:12:00.000+02:002006-05-07T11:14:30.580+02:00Google Reader subscribed indicator user script<p><a href="http://persistent.info/">Mihai Parparita</a> of <a href="http://persistent.info/">persistent.info</a> has added a check icon to <a href="http://browservulsel.blogspot.com/2006/01/jaspers-google-reader-subscribe-user.html">my Google Reader subscribe user script</a> which appears when you are subscribed to at least one of the feeds that the site advertises via auto-discovery. The idea is great but it still has some <a href="http://persistent.info/archives/2006/05/06/google-reader-subscribe">caveats</a>. I personally would have used a smaller check icon because I wrote it in the first place to use as little screen size as possible.</p>
<p><a href="http://persistent.info/greasemonkey/google-reader-subscribe.user.js">Install Mihai's user script</a>.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Google Reader" rel="tag">Google Reader</a></li>
<li><a href="http://www.technorati.com/tag/Google" rel="tag">Google</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Feed" rel="tag">Feed</a></li>
<li><a href="http://www.technorati.com/tag/RSS" rel="tag">RSS</a></li>
<li><a href="http://www.technorati.com/tag/Atom" rel="tag">Atom</a></li>
<li><a href="http://www.technorati.com/tag/RDF" rel="tag">RDF</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1146901917877985992006-05-06T09:49:00.000+02:002006-06-03T10:14:35.056+02:00Userscripts.org large description textarea user script<p>Today I was editing a description on one of my user scripts on <a href="http://userscripts.org/">Userscripts.org</a> and decided to write a small <a href="http://userscripts.org/scripts/source/4034.user.js">user script to enlarge the description textarea</a> for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Userscripts.org" rel="tag">Userscripts.org</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1144955656815590312006-04-13T21:12:00.000+02:002006-04-13T21:16:28.080+02:00Jasper's Google Reader subscribe user script improved<p>I've implemented the improvement <a href="http://browservulsel.blogspot.com/2006/01/jaspers-google-reader-subscribe-user.html#c114491474980105559">suggested by Chris Wetherell</a> in <a href="http://userscripts.org/scripts/source/2571.user.js">Jasper's Google Reader subscribe user script</a> (<a href="http://browservulsel.blogspot.com/2006/01/jaspers-google-reader-subscribe-user.html">original post</a>) for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>. Feed URL's containing query strings are now handled correctly. Thanks, Chris!</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Google Reader" rel="tag">Google Reader</a></li>
<li><a href="http://www.technorati.com/tag/Google" rel="tag">Google</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Feed" rel="tag">Feed</a></li>
<li><a href="http://www.technorati.com/tag/RSS" rel="tag">RSS</a></li>
<li><a href="http://www.technorati.com/tag/Atom" rel="tag">Atom</a></li>
<li><a href="http://www.technorati.com/tag/RDF" rel="tag">RDF</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1144264496241246092006-04-05T21:31:00.000+02:002006-04-05T23:57:57.816+02:00CSS styling definition lists without floating or absolute positioning<p>I've written before on <a href="http://browservulsel.blogspot.com/2005/10/css-styling-definition-lists.html">styling definition lists</a> (which I use to create <a href="http://browservulsel.blogspot.com/2005/04/semantic-html-forms-2.html">semantic HTML forms</a>). I described two CSS options to style the definition list:</p>
<ol>
<li>Positioning the definition title absolutely and the data relatively.</li>
<li>Float the definition title in the definition data left margin.</li>
</ol>
<p>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 <a href="http://www.positioniseverything.net/explorer/threepxtest.html">3px pixel gap</a> and need to be lucky not to be running in to other problems.</p>
<p>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:</p>
<pre>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; }</pre>
<p>You can use the <code>* html</code> hack here because Internet Explorer 7 will ignore it and will support <code>min-height</code>.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/CSS" rel="tag">CSS</a></li>
<li><a href="http://www.technorati.com/tag/HTML" rel="tag">HTML</a></li>
<li><a href="http://www.technorati.com/tag/Form" rel="tag">Form</a></li>
<li><a href="http://www.technorati.com/tag/Semantic" rel="tag">Semantic</a></li>
<li><a href="http://www.technorati.com/tag/Bug" rel="tag">Bug</a></li>
<li><a href="http://www.technorati.com/tag/IE" rel="tag">IE</a></li>
<li><a href="http://www.technorati.com/tag/MSIE" rel="tag">MSIE</a></li>
<li><a href="http://www.technorati.com/tag/Internet Explorer" rel="tag">Internet Explorer</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1143302061011697272006-03-25T17:20:00.000+01:002006-06-03T10:12:56.493+02:00Formdown: rapid HTML form development<p>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:</p>
<ul>
<li>Create forms quickly and easily</li>
<li>Modify forms quickly and easily</li>
<li>Generate the forms as (semantic) HTML so I can create a click through prototype</li>
</ul>
<p>basically I would like to have something like <a href="http://daringfireball.net/projects/markdown/">Markdown</a> to generate forms. I really like the fact that the syntax is simple and readable. So I came up with Formdown. I implemented a <a href="http://members.lycos.nl/jepsar/formdown.js">javascript version of Formdown</a>. 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.</p>
<p><strong>Update 2006-04-06</strong>: 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.</p>
<h4>Syntax</h4>
<p>Start a form:</p>
<pre>%get|post action id</pre>
<p>Start a fieldset (legend is optional):</p>
<pre>+ Legend ---------------</pre>
<p>Close a fieldset (dashes are optional):</p>
<pre>+-----------------------</pre>
<p>Field label (exclamation mark indicates required field):</p>
<pre>Field label !:</pre>
<p>Buttons:</p>
<pre>{{Submit button}} {Other button}</pre>
<p>Input fields must be preceded by a label</p>
<p>Text input:</p>
<pre>[_____________]
[_Value_]</pre>
<p>Textarea:</p>
<pre>[[_____________]]
[[_Value_]]</pre>
<p>Select:</p>
<pre>> Option
>* Selected option</pre>
<p>Checkbox:</p>
<pre>[ ] Unchecked
[*] Checked</pre>
<p>Radio button:</p>
<pre>( ) Unchecked
(*) Checked</pre>
<h4>Formdown example</h4>
<p>Input:</p>
<pre>%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}</pre>
<p>Output:</p>
<pre><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></pre>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Formdown" rel="tag">Formdown</a></li>
<li><a href="http://www.technorati.com/tag/form" rel="tag">form</a></li>
<li><a href="http://www.technorati.com/tag/HTML" rel="tag">HTML</a></li>
<li><a href="http://www.technorati.com/tag/GUI" rel="tag">GUI</a></li>
<li><a href="http://www.technorati.com/tag/UI" rel="tag">UI</a></li>
<li><a href="http://www.technorati.com/tag/prototype" rel="tag">prototype</a></li>
<li><a href="http://www.technorati.com/tag/prototyping" rel="tag">prototyping</a></li>
<li><a href="http://www.technorati.com/tag/CSS" rel="tag">CSS</a></li>
<li><a href="http://www.technorati.com/tag/javascript" rel="tag">javascript</a></li>
</ul>
</div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-12129687.post-1141851048724970452006-03-08T21:50:00.000+01:002006-03-21T20:45:04.953+01:00Single left click tab opener user script<p>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 <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> user script:</p>
<ol>
<li>When you have your pointer on a link create a new link near the pointer which opens the link in a new tab.</li>
<li>Open a new tab when you keep the left mouse button down for a while.</li>
</ol>
<p>I choose the second option. The <a href="http://userscripts.org/scripts/source/3458.user.js">single left click tab opener user script</a> was born.</p>
<p><strong>Update 2006-02-21</strong>: 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.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Mozilla" rel="tag">Mozilla</a></li>
<li><a href="http://www.technorati.com/tag/Firefox" rel="tag">Firefox</a></li>
<li><a href="http://www.technorati.com/tag/Tab" rel="tag">Tab</a></li>
<li><a href="http://www.technorati.com/tag/Tabs" rel="tag">Tabs</a></li>
<li><a href="http://www.technorati.com/tag/Mouse" rel="tag">Mouse</a></li>
<li><a href="http://www.technorati.com/tag/Touchpad" rel="tag">Touchpad</a></li>
<li><a href="http://www.technorati.com/tag/Accessibility" rel="tag">Accessibility</a></li>
</ul>
</div>Unknownnoreply@blogger.com10tag:blogger.com,1999:blog-12129687.post-1141161119009252142006-02-28T22:12:00.000+01:002006-02-28T22:11:59.010+01:00Show links to embedded media user script 0.4<p>I've updated the <a href="http://userscripts.org/scripts/source/2004.user.js">Embedded media linker</a> (<a href="http://browservulsel.blogspot.com/2005/10/show-links-to-embedded-media-user.html">original post</a>) user script for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>.</p>
<ul>
<li>Improved positioning using the <a href="http://browservulsel.blogspot.com/2006/01/positioning-elements-inserted-by-user.html">positioning method</a> I used in my <a href="http://browservulsel.blogspot.com/2006/01/select-element-filter-user-script-no.html">select element filter user script</a>.</li>
<li><code>embed</code> tags nested in an <code>object</code> tag now overwrite the <code>object</code> tag.</li>
<li>You can now exclude embedded media by mime type. This method is more reliable than excluding extensions.</li>
<li>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.</li>
</ul>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Embed" rel="tag">Embed</a></li>
<li><a href="http://www.technorati.com/tag/Object" rel="tag">Object</a></li>
<li><a href="http://www.technorati.com/tag/Video" rel="tag">Video</a></li>
<li><a href="http://www.technorati.com/tag/Media" rel="tag">Media</a></li>
<li><a href="http://www.technorati.com/tag/Flash" rel="tag">Flash</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1139154836700431752006-02-05T16:54:00.000+01:002007-04-30T18:47:15.616+02:00No more custom comments form for me<p>Since I was unable to get the <a href="http://browservulsel.blogspot.com/2005/09/custom-blogger-comments-form-4-spam.html">spam protection</a> working in all browsers I had the <a href="http://browservulsel.blogspot.com/2005/06/custom-blogger-comments-form-3.html">normal custom comments form</a> on my blog. The last few weeks I've been getting more and more spam posts. So I've decided to remove the custom comments form and to replace it with the Blogger popup version.</p>
<p>An other down side to the custom form was that you wouldn't get feedback when you used HTML tags that aren't allowed by Blogger. So no hard feelings. It's a change for the better from a usability point of view as well.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Blogger" rel="tag">Blogger</a></li>
<li><a href="http://www.technorati.com/tag/Comments" rel="tag">Comments</a></li>
<li><a href="http://www.technorati.com/tag/Hack" rel="tag">Hack</a></li>
<li><a href="http://www.technorati.com/tag/Spam" rel="tag">Spam</a></li>
</ul>
</div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-12129687.post-1138049319833594412006-01-23T21:48:00.000+01:002007-04-30T18:47:11.521+02:00Blogger Markdown support user script improved<p>I've updated the <a href="http://userscripts.org/scripts/source/2531.user.js">Blogger Markdown support</a> user script (<a href="http://browservulsel.blogspot.com/2006/01/blogger-markdown-support-user-script.html">original post</a>) for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>.</p>
<p>Improvements:</p>
<ul>
<li><strong>Preview</strong> now shows Markdown converted to HTML.</li>
<li>Added a <strong>link to the <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a></strong> page (open's in a new tab).</li>
</ul>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Blogger" rel="tag">Blogger</a></li>
<li><a href="http://www.technorati.com/tag/Markdown" rel="tag">Markdown</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
</ul>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-12129687.post-1137961277752267622006-01-22T21:22:00.000+01:002007-04-30T18:47:07.294+02:00Positioning elements inserted by a user script<p>I needed to insert an anchor element before an other element in my <a href="http://browservulsel.blogspot.com/2006/01/select-element-filter-user-script-no.html">Select element filter</a> user script because I wanted the anchor to fit in the page's existing tab order. Also, I didn't want the anchor to push the other element to the right, so it needed to be positioned absolutely. You might know that you need to position absolute positioned element relative to the root elements or the first non-static positioned parent node. Here's the javascript code I used to determine the anchor's position:</p>
<pre>var posY = 0;
var posX = 0;
var currOffsetParent = elementToInsertBefore;
do {
if (
document.defaultView.getComputedStyle(currOffsetParent, null)
.getPropertyValue('position') == 'static'
) {
posY += currOffsetParent.offsetTop;
posX += currOffsetParent.offsetLeft;
}
else break;
} while (currOffsetParent = currOffsetParent.offsetParent);</pre>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/CSS" rel="tag">CSS</a></li>
<li><a href="http://www.technorati.com/tag/Style" rel="tag">Style</a></li>
<li><a href="http://www.technorati.com/tag/Javascript" rel="tag">Javascript</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1137953864104897132006-01-22T19:31:00.000+01:002007-04-30T18:46:57.219+02:00Select element filter user script: no longer experimental<p>Finally, the <a href="http://userscripts.org/scripts/source/1878.user.js">Filter large form selects</a> user script for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> is no longer experimental. I decided to fix the two biggest problems of this script: poor positioning and poor usability.</p>
<p><img src="http://members.lycos.nl/jepsar/filterselects.png" alt="Screenshot of the select element filter user script" height="167" width="320" /></p>
<p>Here's a detailed improvements list:</p>
<ul>
<li>Improved, I think even perfect, <strong>positioning</strong>.</li>
<li>The <strong>select element is no longer sized, moved or modified</strong>. An separate <code>select</code> element is inserted to display the filter results and the magnifier is positions absolutely.</li>
<li>It <strong>no longer breaks <code>select</code>s with <code>optgroup</code>s</strong> because of the separate results <code>select</code>.</li>
<li><strong>Esc key</strong> now closes the filter.</li>
<li>You can <strong>select a result using the mouse</strong> now.</li>
<li>You <strong>no longer need to tab twice</strong> to focus the next form field.</li>
<li>The <strong><code>select</code>'s <code>onchange</code> function will be executed</strong> when the select was changed by the filter (this was broken since Greasemonkey 0.6.4).</li>
</ul>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/HTML" rel="tag">HTML</a></li>
<li><a href="http://www.technorati.com/tag/Form" rel="tag">Form</a></li>
<li><a href="http://www.technorati.com/tag/Select" rel="tag">Select</a></li>
<li><a href="http://www.technorati.com/tag/Javascript " rel="tag">Javascript </a></li>
</ul>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-12129687.post-1137790634918261992006-01-21T22:18:00.000+01:002007-04-30T18:46:52.405+02:00Quick and clean blogging using Markdown<p>I like to write posts in 'Edit HTML' mode because I want to have clean, semantic HTML on my blog. I'm happy that I can use <a href="http://daringfireball.net/projects/markdown/">Markdown</a> now to write my posts and convert them to HTML using my <a href="http://userscripts.org/scripts/source/2531.user.js">user script</a> (based on <a href="http://rephrase.net/box/js-markdown/">js-markdown</a>) because this is much faster then writing HTML.</p>
<p>My <a href="http://browservulsel.blogspot.com/2006/01/blogger-markdown-support-user-script.html">post</a> announcing the user script had little info on Markdown. I'm not going to copy the complete <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a> here, but I will put a short example in this post to give you an indication of how Markdown can help you writing HTML.</p>
<p>Markdown example:</p>
<pre># Clean & quick HTML writing
This is a [Markdown](http://daringfireball.net/projects/markdown/) example.
It is intended to be as *easy-to-read* and *easy-to-write* as is feasible.
* List item 1 **strong**
* List item 2 `code`
> Blockquoted text</pre>
<p>Resulting HTML:</p>
<pre><h1>Clean &amp; quick HTML writing</h1>
<p>This is a <a href="http://daringfireball.net/projects/markdown/">Markdown</a> example.
It is intended to be as <em>easy-to-read</em> and <em>easy-to-write</em> as is feasible.</p>
<ul>
<li>List item 1 <strong>strong</strong></li>
<li>List item 2 <code>code</code></li>
</ul>
<blockquote>
<p>Blockquoted text</p>
</blockquote></pre>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Blogger" rel="tag">Blogger</a></li>
<li><a href="http://www.technorati.com/tag/Markdown" rel="tag">Markdown</a></li>
<li><a href="http://www.technorati.com/tag/HTML" rel="tag">HTML</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1137702793603648172006-01-19T21:33:00.000+01:002007-04-30T18:46:34.787+02:00Omroep.nl direct video link VPRO, ASF and Lama's<p>This one is for the Dutch readers:</p>
<div lang="nl">
<p>Het <a href="http://userscripts.org/scripts/source/1997.user.js">Omroep.nl video's direct linken</a> user script (<a href="http://browservulsel.blogspot.com/2005/10/omroepnl-direct-video-link-user-script.html">oorspronkelijke post</a>) voor <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> is verbeterd:</p>
<ul>
<li>Er wordt niet meer aangenomen dat een video <code>bb.iets.rm</code> heet. Door deze aanname konden nieuwe video's van de VPRO niet bekeken worden.</li>
<li>Als er een directe link naar een video (rm of asf) gemaakt kan worden wordt dit (nu beter) gedaan. Dit is handig op bijvoorbeeld <a href="http://www.tvopjepc.nl/">tv op je pc</a>.</li>
<li>Als er via de uitzendinggemist-mediaplayer (de popup) geen breedband rm-video gevonden wordt (Avro.. grr) dan wordt de asf-versie gepakt.</li>
<li>Op de site van <a href="http://www.delamas.nl/">de Lama's</a> wordt de functie die een popup verzaakt als je een aflevering wilt kijken overschreven door een functie die de video direct toont.</li>
</ul>
</div>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/omroep" rel="tag">omroep</a></li>
<li><a href="http://www.technorati.com/tag/uitzendinggemist" rel="tag">uitzendinggemist</a></li>
<li><a href="http://www.technorati.com/tag/uitzending gemist" rel="tag">uitzending gemist</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Popup" rel="tag">Popup</a></li>
<li><a href="http://www.technorati.com/tag/Embed" rel="tag">Embed</a></li>
<li><a href="http://www.technorati.com/tag/Video" rel="tag">Video</a></li>
<li><a href="http://www.technorati.com/tag/Real" rel="tag">Real</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1136843232643166042006-01-09T22:50:00.000+01:002007-04-30T18:46:28.431+02:00Jasper's Google Reader subscribe user script<p>I was using <a href="http://userscripts.org/scripts/source/2103.user.js">Johan's Google Reader Subscribe user script</a> (see the <a href="http://ecmanaut.blogspot.com/2005/11/subscribe-to-feed-user-scripts.html">post on his blog</a>) for some time now. I just loved it. The only downside was that it draw a lot of attention and it slowed scrolling down on my laptop. If you've got the same problem you might like <a href="http://userscripts.org/scripts/source/2571.user.js">Jasper's Google Reader subscribe user script</a> for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a>. It was designed to use as little screen size as possible. It only adds a feed icon in the top right corner. When you mouse over the feed icon the subscribe links are shown.</p>
<p>I could copy Johan's code but I chose to rewrote the code to experiment with <code>XPath</code> queries. Man, they are powerful!</p>
<h4>0.2</h4>
<p>Implemented improvement <a href="http://browservulsel.blogspot.com/2006/01/jaspers-google-reader-subscribe-user.html#c114491474980105559">suggested by Chris Wetherell</a>.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Google Reader" rel="tag">Google Reader</a></li>
<li><a href="http://www.technorati.com/tag/Google" rel="tag">Google</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Feed" rel="tag">Feed</a></li>
<li><a href="http://www.technorati.com/tag/RSS" rel="tag">RSS</a></li>
<li><a href="http://www.technorati.com/tag/Atom" rel="tag">Atom</a></li>
<li><a href="http://www.technorati.com/tag/RDF" rel="tag">RDF</a></li>
</ul>
</div>Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-12129687.post-1136751214771764022006-01-08T21:14:00.000+01:002007-04-30T18:46:22.217+02:00Userscripts.org myaccount improvements user script<p>After writing a post on <a href="http://browservulsel.blogspot.com/2006/01/userscriptsorg-improvement-suggestions.html">userscripts.org improvement suggestions</a>, I decided that I would write a <a href="http://userscripts.org/scripts/source/2561.user.js">userscripts.org myaccount improvements user script</a> for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> to improve some things on the myaccount page:</p>
<ul>
<li>Scripts are sorted alphabetically</li>
<li>Rating and number views are displayed</li>
<li>Last comment is displayed</li>
</ul>
<p><img src="http://members.lycos.nl/jepsar/userscriptorg.gif" width="320" height="240" alt="Screendump userscripts.org myaccount improvements" /></p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Userscripts.org" rel="tag">Userscripts.org</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
</ul>
</div>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-12129687.post-1136665975429673822006-01-07T21:32:00.000+01:002007-04-30T18:46:17.093+02:00Google open all can now open HTML versions<p>Thanks to Esquifit's feedback, the <a href="http://userscripts.org/scripts/source/1748.user.js">Google open all</a> user script (<a href="/2005/06/google-open-all-user-script.html">original post</a>) for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> can now open HTML versions of PDF files, Word documents etcetera.</p>
<p><img src="http://members.lycos.nl/jepsar/openall.gif" width="320" height="240" alt="Screendump Google open all" /></p>
<p>It is also no longer based on the first <code>div</code> on the result page which made it interfere with others scripts.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Google" rel="tag">Google</a></li>
<li><a href="http://www.technorati.com/tag/Tabs" rel="tag">Tabs</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-12129687.post-1136648959496204402006-01-07T16:50:00.000+01:002007-04-30T18:46:13.903+02:00Custom Blogger backlinks speed up<p>Two moths ago I published a post on how to <a href="http://browservulsel.blogspot.com/2005/10/blogger-backlinks-custom-way.html">custom format your Blogger backlinks</a>. The only downside on this script is that your <code>MainOrArchivePage</code> will appear slow because after each item a small Javascript needs to be loaded from blogger.com. Today I wrote a speed up for this. I now only insert a placeholder <code>span</code> and do the rest of the needed scripting at the bottom of the page.</p>
<p>Here is the script to place on the <code>MainOrArchivePage</code> (after the link to the comments for example):</p>
<pre><script type="text/javascript">
//<![CDATA[
document.write('&middot; <a href="<$BlogItemPermalinkUrl$>#links">Links: <span id="BLc<$BlogItemNumber$>">?</span></a>');
if (! BL_BacklinkCount) var BL_BacklinkCount = new Array();
BL_BacklinkCount['<$BlogItemNumber$>'] = document.getElementById('BLc<$BlogItemNumber$>');
//]]>
</script></pre>
<p>Here is the script to put at the bottom of your page (after the <code>Blogger</code> close tag):</p>
<pre><MainOrArchivePage>
<script type="text/javascript">
//<![CDATA[
for (var item in BL_BacklinkCount) {
document.write('<script type="text/javascript" src="http://www.blogger.com/dyn-js/backlink_count.js?blogID=<$BlogID$>&postID='+ item +'"></scr'+'ipt>');
}
//]]>
</script>
</MainOrArchivePage></pre>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Blogger" rel="tag">Blogger</a></li>
<li><a href="http://www.technorati.com/tag/Backlinks" rel="tag">Backlinks</a></li>
<li><a href="http://www.technorati.com/tag/Javascript" rel="tag">Javascript</a></li>
</ul>
</div>Unknownnoreply@blogger.com9tag:blogger.com,1999:blog-12129687.post-1136583548607750362006-01-06T22:39:00.000+01:002007-04-30T18:46:08.782+02:00Userscripts.org improvement suggestions<p><a href="http://userscripts.org/">Userscript.org</a> is a great initiative, it really is. <a href="http://tr.emendo.us/">Jesse and Britt</a> are doing a great job responding to feedback e-mails, adding feature and even helping me out by resetting my password in the days you were unable to do it your self. However, there are a few things that I would like to see improved or added.</p>
<ul>
<li>Most important, in my opinion, is an option to be able to <strong>receive an e-mail when someone adds a comment</strong> to a script you have written. I visit userscript.org every now and then having to go by all my script to find out if there are new comments.</li>
<li>When I did a comment check run tonight I found out that my <a href="http://userscripts.org/scripts/show/1432">Blogger tag adder</a> script had gotten a negative rating. It would be nice if you could (be forced to) <strong>leave a motivation with the rating</strong>. My scripts may not be perfect, or you might not like them, but I would like to know why. Also the <strong>number of raters</strong> would be interesting.</li>
<li>I would be nice to have a (filtered) <strong>RSS feed on new user scripts</strong>.</li>
<li>A <strong>search box every page</strong> would be handy. This can be Greasemonkeyed - in fact, it <a href="http://userscripts.org/scripts/show/1833">has been done</a>.</li>
</ul>
<p>I hope these ideas will be implemented in the coming version of userscripts.org.</p>
<p><strong>Update 2006-01-07</strong>: How could I forget this one:</p>
<ul>
<li><strong>Users scripts on your accounts page</strong> should be <strong>sorted alphabetically</strong>.</li>
</ul>
<p><strong>Update 2006-01-08</strong>: I <a href="http://browservulsel.blogspot.com/2006/01/userscriptsorg-myaccount-improvements.html">wrote a user script</a> to improve some things on the myaccount page.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Userscripts.org" rel="tag">Userscripts.org</a></li>
<li><a href="http://www.technorati.com/tag/Usability" rel="tag">Usability</a></li>
</ul>
</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-12129687.post-1136495330472817812006-01-05T22:06:00.000+01:002007-04-30T18:45:32.871+02:00Markdown textareas user script<p>What the heck. After writing a <a href="http://userscripts.org/scripts/source/2531.user.js">Blogger Markdown support</a> user script for <a href="http://greasemonkey.mozdev.org/">Greasemonkey</a> I could as well write a <a href="http://userscripts.org/scripts/source/2533.user.js">Markdown <code>textarea</code>s</a> user script. It is also based on <a href="http://rephrase.net/box/js-markdown/">js-markdown</a> and it enables you to convert <a href="http://daringfireball.net/projects/markdown/">Markdown</a> formatted text in <code>textarea</code>s to HTML in one single click.</p>
<div class="tags">
Tags:
<ul>
<li><a href="http://www.technorati.com/tag/Markdown" rel="tag">Markdown</a></li>
<li><a href="http://www.technorati.com/tag/User script" rel="tag">User script</a></li>
<li><a href="http://www.technorati.com/tag/Greasemonkey" rel="tag">Greasemonkey</a></li>
<li><a href="http://www.technorati.com/tag/Textarea" rel="tag">Textarea</a></li>
</ul>
</div>Unknownnoreply@blogger.com0