trickeries! » javascript

Google chrome: a first impressions review.

Posted by: atom, 2008 09.03

I like it a lot.

Keeping it non-technical, because someone else will rant about that stuff in more detail than I am willing to or can.

Stuff I am liking:

Very fast
It is very roomy feeling, not much “chrome” as it were.
I don’t have to relearn shortcuts, they are almost all FFish
I can open JavaScript bookmarklets in new tabs (this was not the case for FF as of version 3)
Searching is awesome, with a bit of setup, its very few keystrokes, like: “w jelly” to search wikipedia for jelly
View source pops up in a tab
The animations are cute and informative without being annoying
the launch page is handy (although Opera has had this for some time)
Built in “appability” (make one tab appear as an application window, for something like google docs)
Built in tab restore (I constantly close a tab and then realize I want it back)
Built in and fairly complete dom inspector, console, and JS debugger
The process manager is awesome. Even when stuff gets out of hand, you can assumably fix it without losing your whole session
The find dialogue is great, however it will take a moment or two to adjust to top-right vs bottom-left

Lets get critical*:

The inspector, while nice, doesn’t allow me to change stuff on the fly like firebug does
There appear to be some JS animation / transparent png issues
I can’t do much in the way of scrolling
I don’t think the form elements displayed are as attractive as Firefox’s (on Vista)
As far as I have seen, there does not appear to be a way for me to view and interact with ajax requests

At least for now, it will be my default browser, however I will still be using Firefox for development purposes. I want chrome to succeed, and to do this it will need to be embraced by and passionately work with the open source crowd. So far they appear to be off to a cracking good start. I will follow up with more later when I have used it extensively.

* please note that I am not an experienced webkit-based browser user.

♥ trackback

Tags: browser, chrome, firefox, google, javascript, review 5 responses »

nocash Says:
September 3rd, 2008 at 12:20 am

I’ve more-or-less come to the same conclusion: Chrome for standard browsing, FF for development. That’s what I’m going to try for, anyway. Chrome’s lack of addons may push be back to FF in the short-term, but I’m coming up with alternatives to the ones that I’m most used to.
williac Says:
September 3rd, 2008 at 12:53 am

I think I’m in love already.

No major hitches so far. The learning curve is practically nonexistent. It even has spellcheck.
savageaphid Says:
September 3rd, 2008 at 9:06 am

I had a good time with Chrome. It was quick and clean. I expect this app to move to the top handful of applications running on a regular basis pretty quickly.
Timothy Hatcher Says:
September 4th, 2008 at 12:17 am

If you like Chrome’s stripped down Web Inspector, you will love the original, full featured version in the WebKit nightlies. (Including double clicking to edit CSS/DOM.) Cheers!
atom Says:
September 4th, 2008 at 1:41 am

@Timothy

What I love is Firebug. Let me know when you have it topped.

ok to use:

bonus!

If you want to post code, you can use:

Where [language] is a valid geshi language type, and where [code] is your code.

rAccordion – a MooTools 1.2 recursive accordion

Posted by: atom, 2008 08.04

So I have managed to create a recursive mootools accordion, which is something I have wanted to get done for a long time.

The secret ingredient to get this made up was some CSS3 selectors and a bit of recursion.

You basically just pass in a class for the toggles, a class for the elements, and a parent container to reference.

The usage ends up fairly simple:

new rAccordion('container', 'toggle', 'element');

In the example, container is the id of the parent that the classes are in, toggle is the class that each toggle has, and element is the class that each element has. A fourth argument can be passed, which is the options argument for the mootools Accordion class.

There are some kinks thatstill need working out. There are inherit problems with just jamming accordions inside of each other. The way mootools creates the accordion requires quite a bit of inline styles, which include defined heights. These heights become problematic when accordions inside accordions need to expand or contract, but their parent element has a defined height and overflow which will not allow the newly expanded portion to be seen.

I do have something of a solution in place, but it feels a little hacky, but I am not sure it will get any better unless I rewrite the accordion.

If anyone has any ideas on how to address this issue, please drop me a comment.

example

download w/the example

Here is the class:

var rAccordion = new Class({
 
	initialize: function(container, toggleClass, elementClass, options){
		this.container = container;
		this.tClass = toggleClass;
		this.eClass = elementClass;
		this.options = options;
		this.selector = '#' + this.container + ' > .';
		this.makeAccordion();
	},
 
	makeAccordion: function(){
		new Accordion(
			$$(this.selector+this.tClass),
			$$(this.selector+this.eClass),
			this.options
		).addEvents({
			// The onActive and onComplete events added to the stack here to
			// attempt to address some of the css issues.
			'onActive': function(toggle){
				if(toggle.getParent().getStyle('height') != 0)
					toggle.getParent().setStyle('height', '');
			},
			'onComplete': function(a){
				if ($defined(a)) {
					var height = 0;
					a.getParent().getChildren().each(function(e){
						height = height + e.offsetHeight;
					});
					if(height != a.getParent().offsetHeight && a.getParent().offsetHeight != 0)
						a.getParent().setStyle('height','');
				}
			}
		});
		this.selector += this.eClass + ' > .';
		if($defined($$(this.selector)[0]))
			this.makeAccordion();
	}
 
});

♥ trackback

Tags: accordion, css, javascript, mootools, rAccordion, recursive 22 responses »

Daniel Buchner Says:
August 4th, 2008 at 8:29 am

I think a cure for you overflow ailment with slide/accordion might lie in an ‘extend’ of the class. This is a great way to let Fx.Slide do overflow auto (it is set to hidden automatically too, annoying!), for refrence:

http://we.designandco.de/2008/06/10/mootools-fxslide-flicker-bug/
http://we.designandco.de/2008/06/20/mootools-fxslide-flicker-bug-ii/

I am not sure if internally Accordion is dependent on Slide for its actions, but anyhow, ‘extend’ use could give you the option I believe that you desire without actually rewriting the Accordion class.

This script is well done, I’ll be using it in the next few days, thanks!

- Daniel
atom Says:
August 4th, 2008 at 12:15 pm

@Daniel, the accordion class does not use Fx.Slide, but rather is extending the Fx class directly. I read it over and I think there are some clues to how to fix this, so I will be investigation those further.
@atom Says:
November 13th, 2008 at 7:33 pm

Hi atom, thanks for this great script.
I’m trying to save the active state via cookie, but I don’t get it to work.

Is it possible to make the menu stay open at a certain place when invoked? (ie. if you opened the first nest and clicked an item, when you went to its page, the menu would stay open at that item)

This would really help for knowing where you are on a website if this menu was used on it
atom Says:
November 13th, 2008 at 7:39 pm

My first though is no, mostly because this is intended to work with however many accordions you have.

However, it can probably be done without too much work, so I will probably have a look at it and see what I can do without making this too complicated.
Thorsten Says:
November 20th, 2008 at 5:39 am

Hi there, just a little short question: what would a piece of extra code look like, to use a mouseover event for the accordion instaead of a click??
atom Says:
November 20th, 2008 at 6:14 am

@Thorsten,

It wouldn’t be too difficult really, but you would have to work with the actual Accordion class that this is utilizing.

After creating the accordions, you would need to add a mouseover event to each toggler bound to the accordion’s display function, and remove the click events.
Thorsten Says:
November 24th, 2008 at 10:19 am

@atom,

well, I’m not so good with js but a friend helped me out. Last question: do I have to change your js in order to use plain list elements (ul li)?? I tried that with the same names for the classes but nothing was working. Maybe I’m too stupid. Could you help me out?
Janies Says:
February 14th, 2009 at 3:26 pm

Hi there, I’m learning to work with mootools and This example is exactly what I have tried to achieve for the past 1 week but to no avail! Thanks for sharing this!

There are two problems that I’ve encountered while working with the script.

1. The expanding and collapsing is not consistent. sometimes the whole menu collapse and sometimes it doesn’t.

2. changing the css style of the 2nd class of toggle. For eg.

Toggle 1
> Toggle 2
> element 3
> Toggle 2a

I have tried to play around with the script but i can’t change the style of Toggle 2 or Toggle 2a.

Any idea if question 2 can be fixed?

Thanks!
Janies Says:
February 14th, 2009 at 3:29 pm

Toggle 1
>> Toggle 2
>>>> Element 3
>> Toggle 2.a
>>>> Element 4

After posting the above post, i realised the indent is omited. To prevent confusion, here is what i meant of the toggle 2.
liv Says:
May 18th, 2009 at 8:01 pm

hi atom thanks for the great script.

I am also trying to get the menu to stay open when invoked. has this been developed? I have been trying out some if statements within the raccordion definition (creating a class “current” and then having the display option depend on it) without any luck.
yolanda Says:
May 19th, 2009 at 10:06 am

Hi, I’m also trying to get the menu to stay open. Has anyone had any luck?
Also can’t change the active style of the second level.
Thanks
Justino A. Arciga Jr. Says:
July 15th, 2009 at 11:06 pm

Hi,
I have some problem with the height. When it firts load the page the height of the first accordion did not wrapped exactly with the content it hide it. what is the solution or workaroud can i do with this problem.

Thanks for any help!

jR.
Alex K Says:
September 30th, 2009 at 8:33 am

@atom, thank you very much for this! I am in dire need to get the active state working! Please email me if you have implemented it. Thank you!

NAD* Says:
December 4th, 2009 at 11:59 am

@with script to close all sub-levels

var rAccordion = new Class({
 
	initialize: function(container, toggleClass, elementClass, options){
		this.container = container;
		this.tClass = toggleClass;
		this.eClass = elementClass;
		this.options = options;
		this.selector = '#' + this.container + ' &gt; .';
		this.list_acc = new Array();
		this.acc_index = 0;
		this.h = (window.ie6) ? "100%" : '';
		this.makeAccordion();
 
	},
 
	makeAccordion: function(){
		this.list_acc[this.acc_index] = new Accordion(
			$$(this.selector+this.tClass),
			$$(this.selector+this.eClass),
			this.options 
		)
 
		this.list_acc[this.acc_index].list_acc = this.list_acc;
		this.list_acc[this.acc_index].acc_index = this.acc_index;
		this.list_acc[this.acc_index++].addEvents({
			// The onActive and onComplete events added to the stack here to
			// attempt to address some of the css issues.
			'onActive': function(toggle){
				for(i=this.acc_index+1; i  .';
		if($defined($$(this.selector)[0]))
			this.makeAccordion();
	}
 
});

NAD* Says:
December 4th, 2009 at 12:04 pm

@sorry…

- this.h = (window.ie6) ? “100%” : ”;
+ this.h = (window.ie6) ? “100%” : "";

NAD* Says:
December 4th, 2009 at 12:52 pm

@v1.0.545 – lol

ok… the code are not completed.

the difference are:

/* on initialize and before this.makeAccordion */
this.list_acc = new Array(); /* list of accordion levels */
this.acc_index = 0; /* accordion level index */
this.h = (window.ie6)?"100%":""  /* bug ie6 */
 
 
/* at makeAccordion, put list_acc and acc_index into accordion scope */
this.list_acc[this.acc_index] = new Accordion(...);
this.list_acc[this.acc_index].list_acc = this.list_acc;
this.list_acc[this.acc_index].acc_index = this.acc_index;
this.list_acc[this.acc_index++].addEvent(
   onActive: (...)
   onComplete: function(a){
      (...)
      for(i=this.acc_index+1; i &lt; this.list_acc.length; i++)
         this.list_acc[i].display(-1,true);
   }
});

Good work!

TMG Says:
January 18th, 2010 at 8:26 pm

Very slick looking. Is it possible to have more than one element per toggle? It’s breaking it when I try.
济南二手房 Says:
January 26th, 2010 at 8:55 am

济南二手房（esf.jnol.cn）网来博客参观过了，呵呵，有空多多交流哈。
小区 Says:
February 1st, 2010 at 7:40 am

很不错的博客哦，来过踩踩，欢迎回访~
trolololo Says:
July 1st, 2010 at 4:08 pm

hi here. i am new to this website and i like this website. http://www.filecombat.com , http://www.softwarekorner.com
PH Says:
July 27th, 2010 at 7:09 am

Hi,

Thanks for the script!!!

— How do I set it so that when the page is loaded all of the items are collapsed.

It currently shows the first entry in an expanded view.

Any ideas?
atom Says:
July 27th, 2010 at 5:24 pm
@PH

the fourth argument that rAccordion takes is the options object for instantiating the accordion as normal, so…

something like this will probably work:
```
new rAccordion('container', 'toggle', 'element', { 'show':-1 });
```
give it a shot.

ok to use:

bonus!

If you want to post code, you can use:

Where [language] is a valid geshi language type, and where [code] is your code.

Queuing ajax requests with MooTools 1.2

Posted by: atom, 2008 07.30

UPDATE: This might be sorta useless. Please see this comment.

There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes. The following is a rather simple implement that takes care of this problem:

Request.implement({
    queue: function(sendArg){
        if(!$defined(this.queued))
            this.queued = [];
        this.queued.push(sendArg);
        this.processQueue();
    },
    processQueue: function(){
		if(this.timer)
			$clear(this.timer);
		if (!this.check())
			this.timer = this.processQueue.delay(250, this);
		else {
			if ($defined(this.queued[0])) {
				this.send(this.queued.shift());
				this.processQueue();
			}
			else
				this.fireEvent('onQueueEmpty');
		}
    }
});

This will basically stack requests and send them in the order received. If there is no stack, the request will be sent immediately.

The usage is the same as the normal Request send method, however there is now an onQueueEmpty event to tell when all requests in the queue have been sent.

example

download w/the example

♥ trackback

Tags: ajax, implement, javascript, mootools, request.queue, toy 7 responses »

keif Says:
July 30th, 2008 at 3:47 pm

Very, very useful, I was working on something similar.
atom Says:
July 30th, 2008 at 4:19 pm

@keif: i agree =)

I am pretty surprised that something like this hasn’t made its way into the core yet.
adamnfish Says:
August 6th, 2008 at 2:12 am

The request class in mootools 1.2 already includes chaining!

The check method allows you to queue, cancel or ignore requests while there is already a request running (identical to the Fx classes) depending on the option you provide. (look at the source!)

So to do this, you don’t need to add any code (ie @atom, it is already in the core…)

Simply provide {link: ‘ignore’ | ‘chain’ | ‘cancel’} as required. The default is ignore, so you won’t have seen it and I’ve no doubt it’s not documented yet…
*rolls eyes

Honestly, since the forums were shut this sort of thing seems to be happening a lot.

To implement ‘onChainComplete’ (like you did for the queue), just add an event to onSuccess that checks the length of the chain

ps. I *Adore* your design…
atom Says:
August 6th, 2008 at 3:00 am

@adamnfish you are absolutely correct =)

My implement is indeed useless. It is not in the documentation, but setting ‘link’:'chain’ does work to chain/queue requests.

After testing I think I have either discovered a MooTools bug, or a Firebug bug, or some other manner of oddity. When using ‘link’:'chain’, I am not seeing a response logged in Firebug, however the response does exist, as I can still use it when passing to the onSuccess function.

So, uh, someone look into that or something.
paddo Says:
August 20th, 2008 at 4:01 pm

“When using ‘link’:’chain’, I am not seeing a response logged in Firebug, however the response does exist, as I can still use it when passing to the onSuccess function.”

Same here, firebug doesn’t show the request until it’s already done. And when it’s done, it tells me that it only took 1ms (which can’t be true, I’ve put a sleep(2) in my php). Odd, odd, odd… link: ‘chain’ however works like a charm! I hope they’ll update the docs soon.
atom Says:
December 6th, 2008 at 12:46 am

it looks like someone else thought thinks queueing needs a little help, however his is mroe useful and doesn’t just stack, which you can already apparently do:

http://www.clientcide.com/code-snippets/ajax/new-plugin-requestqueue/
diancitie Says:
February 12th, 2010 at 11:54 am

Great article.Thanks.

ok to use:

bonus!

If you want to post code, you can use:

Where [language] is a valid geshi language type, and where [code] is your code.

Sortable Slideable Saveable – a Mootools 1.2 class

Posted by: atom, 2008 07.28

Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.

It can be seen in action in my sidebar to the right. You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each. Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.

I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know. Also if anyone has any input on how to make it better, let me know.

another example

download w/the example

♥ trackback

Tags: download, javascript, mootools, sortable slideable saveable, toy 13 responses »

keif Says:
July 28th, 2008 at 4:23 am

Your side bar isn’t working for me (OS X, FF3.0.1) but your other example works flawlessly.

Very cool script, and I love that it’s default state works with JS off.
atom Says:
July 28th, 2008 at 4:27 am

hmm, i guess someone is going to have to let me borrow a mac :p
links for 2008-07-30 | iKeif - mootools, jquery, social media and a ton of links Says:
July 30th, 2008 at 12:31 pm

[...] Guide to Earning Six Figures: Changing Your Mind 13 hours agoInformation about going free lance.trickeries! » Blog Archive » Sortable Slideable Saveable – a Mootools 1.2 class 14 hours agoVery cool mootools 1.2 class for slideable sortables that are savable via cookies!The [...]
keif Says:
July 30th, 2008 at 3:48 pm

WEEELLL I could play around with it a bit and see if I can figure it out (or if it’s just FF# acting buggy).
atom Says:
July 30th, 2008 at 6:07 pm

It is a little odd that there is a difference in FF between systems, I would like to assume the engines in use would be exactly the same, however I have already seen stupid differences in the rendering of styles between the two. My assumption is that it is just a goofy issue with CSS.
Tyler Says:
August 4th, 2008 at 3:28 pm

brilliantly executed, as usual.
atom Says:
August 4th, 2008 at 3:35 pm

^ _ ^
electronbender Says:
August 13th, 2008 at 5:47 am

Chief,
Can you add a nested ability to this thing? That would realyyyyy be nice…
Rob C Says:
August 19th, 2008 at 12:50 pm

Hi,

The ’savable’ side of things doesn’t seem to work on your example (the one linked here, and the one downloaded).

I can see the PHP code at the top, but how does one implement the save?

Thanks!
atom Says:
August 21st, 2008 at 1:00 am

@Rob, What I have there in the example is just a quick and dirty example using sessions. In order to have this saved in any meaningful sense you are going to need to write / read the state to and from somewhere.
dakota Says:
September 17th, 2008 at 11:14 am

Could this be modified to support dragging to multiple columns?
dakota Says:
September 17th, 2008 at 1:24 pm

How can I style the drop areas to have a dotted border? by this I mean when dragging one, how can I get the areas I can release it to to have a border… I’ve been trying to have it add a class, but can’t figure out where in the sss code to add it.
Guillem Says:
March 20th, 2009 at 5:10 am

Hi,

I there a way to use your amazing script with multiple list in order to mix them together?
I tried to do this that way:
window.addEvent(‘domready’, function(){
new sss(‘#list, #list2′, ‘.toggle’, ‘.box-content’);
});

But mootools return an error at line 115 in sss.js.
Do you think you can fix that? If you want I can give you some bucks for it (using paypal)

Thanks a lot.

ok to use:

bonus!

If you want to post code, you can use:

Where [language] is a valid geshi language type, and where [code] is your code.

dancing kirby javascript bookmarklet

Posted by: atom, 2008 07.25

I made this because i figured it was just what everyone needed (because everyone is grumpy all the time). It is a simple javascript function you can store in a bookmark that will add a sweet dancing kirby to any page you are on.

(>^ – ^)> fire him up <(^ – ^<)

♥ trackback

Tags: bookmarklet, javascript, kirby, quick, toy no responses »

ok to use:

bonus!

If you want to post code, you can use:

Where [language] is a valid geshi language type, and where [code] is your code.

« older posts

Google chrome: a first impressions review.

I like it a lot.

Stuff I am liking:

Lets get critical*:

Leave a Reply

ok to use:

bonus!

rAccordion – a MooTools 1.2 recursive accordion

example

download w/the example

Here is the class:

Leave a Reply

ok to use:

bonus!

Queuing ajax requests with MooTools 1.2

UPDATE: This might be sorta useless. Please see this comment.

example

download w/the example

Leave a Reply

ok to use:

bonus!

Sortable Slideable Saveable – a Mootools 1.2 class

another example

download w/the example

Leave a Reply

ok to use:

bonus!

dancing kirby javascript bookmarklet

(>^ – ^)> fire him up <(^ – ^<)

Leave a Reply

ok to use:

bonus!

search

projects

MooTools

tags

comments

my friends

more me