Resize Window

22 views
Skip to first unread message

Alex Hough

unread,
Jan 13, 2010, 4:56:49 AM1/13/10
to TiddlyWiki
I liked Moris Grey's sidebar TW a lot. You can drag bits of text to
you tw rather than cutting and pasting. But I use firefox's delicious
plugin in the sidebar, and a tw in the sidebar never quite worked for
me. With the recent arrival of t960 and t960black [1] and the
conversation about golden section grids I thought that I would
experiment with browser windows of more than one size. I have a also
been inspired by Eastgate Systems Hypertext Garden [2]

To this end, I just wrote my first plugin(!!!) which can be added to
tiddlers to resize the window.

Usage
<<resizeWindow w h>>
where w= width and h=height

<<resizeWindow 600 400>>

config.macros.resizeWindow = {};
config.macros.resizeWindow.handler = function
(place,macroName,params,wikifier,paramString,tiddler) {

var w = params[0];
var h = params[1];

window.resizeTo(w,h);
}

Potential additional features
=====================

It would be nice to
*open other TWs from a 600x400 in the top right hand corner and for
them to position themselves on the screen in cool golden sectionish
positions.
*position the window on the screen
*use in conjunction with themes. for example, if window width is less
than 600, hide Mainmenu

[1] http://t960black.tiddlyspot.com/
[2] http://www.eastgate.com/garden/Unexpected_Delight.html

PMario

unread,
Jan 14, 2010, 6:53:11 AM1/14/10
to TiddlyWiki
Hi Alex,
Congratulation for your first macro.

Here is some FireFox food for your additional features:
IE doesn't digest it :(

config.macros.resizeWindow = {};
config.macros.resizeWindow.handler = function
(place,macroName,params,wikifier,paramString,tiddler) {

var w = params[0];
var h = params[1];

window.resizeTo(w,h);

window.onresize= config.macros.resizeWindow.onResize;

};
config.macros.resizeWindow.onResize = function () {
var sb = document.getElementById( 'sidebar');
var mm = document.getElementById( 'mainMenu');
var da = document.getElementById( 'displayArea');

if (window.innerWidth < 600) {
sb.style.display ='none';
mm.style.display ='none';
da.style.margin = '1em 1em 0em 1em';
}
else {
sb.style.display= 'block';
mm.style.display= 'block';
da.style.margin = '1em 15.7em 0em 14em';
}
};

I use w3schools.com a lot and found the description of the DOM
functions here:

http://www.w3schools.com/jsref/default.asp
http://www.w3schools.com/jsref/dom_obj_style.asp

=====
As I found out, using:
http://tiddlywiki.org/wiki/Dev:Best_Practices
http://tiddlywiki.org/wiki/Dev:Plugin_Specifications

makes live easier :)

//# ensure that the plugin is only installed once
if(!version.extensions.SamplePlugin) {
version.extensions.SamplePlugin = { installed: true };

if(!config.extensions) { config.extensions = {}; } //# obsolete from
v2.4.2

//!!!!!!!!!!!!!!!!!!!!!!!!
//!!!! your code here !!!!
//!!!!!!!!!!!!!!!!!!!!!!!!

} //# end of "install only once"

where SamplePlugin should be replaced!

AND
http://www.tiddlytools.com/insideTW/ is a ___great___ source if you
want to see, how the core does handle things.

regards Mario

Alex Hough

unread,
Jan 15, 2010, 10:29:54 AM1/15/10
to TiddlyWiki
Thanks Mario

You have added the window.onresize [1] event handler to the first part
of my macro (config.macros.resizeWindow) ;

window.onresize= config.macros.resizeWindow.onResize;

This was the only bit that i was uncertain of but searching for
onresize and discovering about the DOM from your links really helped.

Surfing arround the topic of browser size and movement has been quite
interesting. There appears to have been a lot of interest in re-sizing
and moving windows in the early days of javascript, especially by for
annoying commercial popups. Because of this popups have got a bad
name, but if you are using a TW locally, I think they could be good
and there could be interesting applications. For example an index TW,
indexing other TWs. But I was also reminded of Jimpunk's browser art
[2] of which i was a big fan.

If the TW was resized to 'Indexsize' (full height, narrow, aligned to
top left)
then
the story would close and
an index tiddler opened (this could be auto generated to include all
the TWs in a file containing multiple TW)

IndexSize would then be positioned like a MainMenu.

The whole screen could be layed out with TWs reflecting a PageTemple.

It could be kind of screenTemplate. TWs would behave in a particuar
way depending on their position on the screen.

I was thinking about FND's comment on TiddlyWeb group in a reply to a
question asked by Tobias about the benefits of managing
tiddlyweb in a purely local environment as compared to individual
tiddlywikis?

FND wrote:

Your question has made me realize that I'd greatly benefit from using
TiddlyWeb here, as that would allow me to:
* explore all my tiddlers in their entirety (in contrast to the
current
manner, which is rather disjointed and thus limiting)
* combine any collection of tiddlers in flexible views (e.g. "show me
all plugins I use", "bring up everything related to Linux")
* view content in any number of representations (e.g. using a
different
TiddlyWiki theme, or just a static text representation)
* retain a revision history for individual tiddlers
* avoid duplication (and thus complexity, e.g. WRT themes and plugins)
* create independent snapshots that are identical to the current
TiddlyWiki documents (e.g. for no-dependency backups)
* do magic things I can't even think of yet

Having a number of browsers open looking at an writing to the same
store, and the view being dependant on position of browser: is this a
good idea i wonder?


Alex
[1] https://developer.mozilla.org/En/DOM/Window.onresize
[2] http://jimpunk.com/ - warning: this jimpunk site is ok, but
another sends out browser windows everywhere that are very difficult
to close as they are moving about very quickly.

> http://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/dom_obj_style.asp
>
> =====
> As I found out, using:http://tiddlywiki.org/wiki/Dev:Best_Practiceshttp://tiddlywiki.org/wiki/Dev:Plugin_Specifications


>
> makes live easier :)
>
>    //# ensure that the plugin is only installed once
> if(!version.extensions.SamplePlugin) {
> version.extensions.SamplePlugin = { installed: true };
>
> if(!config.extensions) { config.extensions = {}; } //# obsolete from
> v2.4.2
>
> //!!!!!!!!!!!!!!!!!!!!!!!!
> //!!!! your code here !!!!
> //!!!!!!!!!!!!!!!!!!!!!!!!
>
> } //# end of "install only once"
>
> where SamplePlugin should be replaced!
>

> ANDhttp://www.tiddlytools.com/insideTW/is a ___great___ source if you

Reply all
Reply to author
Forward
0 new messages