Skip to content

Instantly share code, notes, and snippets.

@bebraw
Created Sep 15, 2010
Embed
What would you like to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Sidebar</title>
<script type="text/javascript" src="http://rightjs.org/hotlink/right-2.0.0.js"></script>
<script type="text/javascript">
var Generator = new Class({
_cur: 0,
initialize: function(items) {
this._items = items;
},
next: function() {
var ret = this._items[this._cur];
this._cur = this._cur + 1 == this._items.length? 0: this._cur + 1;
return ret;
}
});
var sidebar_offset = new Generator(['-100px', '0px']);
"#sidebar-handle".on('click', function() {
new Fx.Morph('sidebar-content').start({left: sidebar_offset.next()});
});
</script>
</head>
<body>
<div id="sidebar" style="width:120px;height:0px;background-color:blue">
<div id="sidebar-content" style="width:100px;height:200px;position:absolute;left:0px;top:0px;background-color:green">boz<div>
<div id="sidebar-handle" style="width:20px;height:200px;position:absolute;left:100px;top:0px;background-color:red">baz</div>
</div>
</body>
</html>
@MadRabbit

This comment has been minimized.

Copy link

@MadRabbit MadRabbit commented Sep 15, 2010

$('content').morph({left: ($('content').getStyle('left').toInt() < 0 ? 0 : -100) + 'px'});

@bebraw

This comment has been minimized.

Copy link
Owner Author

@bebraw bebraw commented Sep 16, 2010

Thanks! That makes sense.

I guess another nice solution would be to use a generator. Interestingly JS 1.7 provides support for them (https://developer.mozilla.org/en/New_in_JavaScript_1.7).

@bebraw

This comment has been minimized.

Copy link
Owner Author

@bebraw bebraw commented Sep 20, 2010

I settled for a generator based implementation. Btw the code works great in Chrome now. :)

@MadRabbit

This comment has been minimized.

Copy link

@MadRabbit MadRabbit commented Sep 20, 2010

Excellent! I see you're having fun 8)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment