Python, Firefox programming and Irish Whiskey.

Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Friday, September 16, 2011

Get the week of the year in javascript

For those looking for that particular function and already using jqueryui: You already have it in datepicker widget. Just call $.datepicker.iso8601Week(date_object).

The code is simple (taken from jqueryui, so either MIT or GPL license):


I just have to warn you against the attempt to extend the built-in Date type with a new method, as some suggest. You will find enough explanations around on why it is a bad idea.

Sunday, March 7, 2010

localized html in a chrome extension

Google Chrome implements a function to get a localized version of a string. Using it to update HTML can be rather tedious if we use the most naive approach I can think of:

Let's do something smarter: We shall mark all tags that contain translatable strings with a class, then we will select all tags of that class, simply take their innerText as the message id, get the message and replace innerText. Done.

Done.

Wednesday, February 24, 2010

highlight things in a firefox extension

If you did some highlighting in a web application you would have to manipulate DOM to insert tags that would change background color (or style in general) of the area being highlighted. It is not only slow but also rather complicated and limited. Firefox offers a stronger tool, which is used for example for highlighting searched strings. Here we will look into some details.

We will start with document.createRange. This is not firefox specific yet. This is a pure DOM and should be pretty cross-browser. (I haven't tried it in MSIE8 but according to quirksmode's Introduction to Range it does not work in MSIE6/7. Honestly, I haven't tried in anything else than FF3+). Anyway, we have got quite a set of functions for manipulating ranges, and honestly they are not too easy to work with. Try this in your Firebug:

For description of functions see DOM/range @ developer.mozilla.org. So, we have got a range or more and we would like to highlight them. Here, Firefox comes to our help. We need to obtain a selection controller for the window, add the ranges to desired type of selection and tell the controller to highlight them. There are a few things to remember:

  • The selection controller can contain something. We should clear it first.
  • There are a few types of selection, like SELECTION_FIND and SELECTION_NORMAL.
  • You must do all the stuff shown below for all frames in your document separately. This will not be shown here but you can look at SEO Profesional Toolbar source code, file seopsidebar.js
  • Remember that some windows do not contain DOM. In that case this method will fail

Just for those curious: In SEO Profesional Toolbar we offer a list of something (links, found texts) in a sidebar and hightlight all these entities using SELECTION_FIND and when one of them is clicked in the sidebar, we will highlight it using SELECTION_NORMAL and scroll to it with controller.scrollSelectionIntoView(Ci.nsISelectionController.SELECTION_NORMAL, Ci.nsISelectionController.SELECTION_ANCHOR_REGION, false)

The best thing at the end: I have put some examples into my testbed firefox extension, so fire-up your browser, install testbed, look at the source code (overlay.js), sit back and enjoy! Do not forget to uninstall or disabled testbed when you are done.

Monday, January 18, 2010

The most annoying thing about javascript

First some background:

Would you believe that the beast above is a valid javascript construct? Those two commas are translated into , undefined , , so the a.length==6 and a[1]==undefined. I would really like to see an example of a code where this construct is helpful. But that's not something we cannot live with. Here comes the winner: The most annoying thing about javascript:

Here we have hit into one of those browser incompatibilities. Firefox, Google Chrome and Opera 9.63 say, quite logically, that len(a)==1. MSIE 7 on the other hand things the array is 2 elements long. I suspect MSIE is closer to ECMA script then others because being struct by the fact that a variation of this example worked in Firefox but didn't work in MSIE I read relevant part of EMCA script standard.

Why is it annoying? In Python I happily jumped at the possibility to generate lists with a comma at the end. How natural, no special handling of the last element. In languages that do not support this I at least get a syntax error. Not in javascript. If I want my code to run in MSIE too (and this stupid comma should be no reason not to) I have to remember this little thing and write more complex code. The worst thing is I cannot even bitch about stupid MSIE, because I believe MSIE has got it right according to standard. Illogical, stupid, but correct.

What is your candidate for the most annoying thing about javascript?

Sunday, December 13, 2009

flot and flotr

I promised a few words about flot. I thought a lot about it and instead of writing how good and easy to use it is, I will just point you to it. I must also mention flotr, which is a similar library, but uses prototype instead of jquery. Now the links:

2 small notes: I like flotr better. It's output seems to me to be a bit more polished. But I picked flot for seoprofesional toolbar, because flotr didn't like interrupted series (a line from 1 to 3, then nothing from 3 to 4, and then a line from 4 to 5 again). On the other hand, flotr does support value labels, for which I had to write my own plugin.

Sunday, November 15, 2009

word count II

In the course of time I found out that the approach I described in here is not ideal. Namely, getting the words from scripts didn't work when there were more scripts in the page. It looks like returns the string value of the first script only. So what we have to do is to take each script one by one and process them separately:

Originally at wordpress, 2009-11-08.

word count

How do you count words in a html document? In javascript? When you have got the HTML's DOM, javascript and whole Firefox at your disposal? Of course, there is a bruteforce method of going through all DOM nodes, but that's rather silly. I found this: (source)
Nice, but it has got 2 problems. It doesn't split words well, e.g. if you have something like word1,word2,word3, it is considered to be a single word. So let us not split by spaces but by something more complex: Unfortunately this is still not enough for it will include words from between the script tags. What now? Let's simply substract the scripts and we are done. Now, the trouble is, this lot can also contain spaces now. But it does not bother me much as I need to go through all words one by one and I can remove unsuitables then.

Originally at wordpress, 2009-10-06.