Management of scrolls in different areas of your page it’s as easy to attach a listener to the component where the scrolls are shown in order to change the positioning properties of the simulated scrollable attached area when the scrollbars are used. A couple of things to keep in mind are that the javascript-scrolled area should have the same dimensions that the main one in order to handle the same amount of displacement with the scrolls, and depending on the need of explicitly showing the secondary scrollbar or not CSS display property should be set properly.
A very basic example would be just moving this examples here, a couple of simple HTML boxes:
with its asociatted CSS properties:
#scrolled-block {
overflow:auto;
}
#javascript-scrolled-block {
overflow:hidden;
}
.content-box {
background-color: #EEEEEE;
margin:20px;
padding:10px;
width: 200px;
height: 200px;
float:left;
}
This produces the displayed result. Our purpose is to add an action listener to onScroll first component in order to get the second box moved when we scroll the first one:
Scrollable box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
Self-scrolled box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
listenToScroll();
function listenToScroll() {
scroll.block_ = document.getElementById(‘scrolled-block’);
scroll.jsblock_ = document.getElementById(‘javascript-scrolled-block’);
onScroll = function() {
scroll.jsblock_.scrollTop = scroll.block_.scrollTop;
};
scroll.block_.onscroll = onScroll;
}
listenToScroll();
function listenToScroll() {
scroll.block_ = document.getElementById('scrolled-block');
scroll.jsblock_ = document.getElementById('javascript-scrolled-block');
onScroll = function() {
scroll.jsblock_.scrollTop = scroll.block_.scrollTop;
};
scroll.block_.onscroll = onScroll;
}
This strategy works fine for simultaneous synchronization but we have checked a different behavior for listeners attached to scrollbars in the different browser engines. In WebKIT based browsers with its Javascript engines (as Squirrelfish in Epiphany or v8 in Chrome), all listeners are processed when the browser implementation fiscally scrolls the component, so the movement is perfectly synchronized. For Gecko plus Tracemonkey, the effect that can be perceived is that scroll in the first component is slightly delayed. To avoid this, it’s necessary to scroll both components using Javascript, and creating a third element just with the scrollbar. The result can be checked evolving the previous example.
Self-scrolled box 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
Aliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci.
Self-scrolled box 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
Aliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci.
listenToSimulatedScroll();
function listenToSimulatedScroll() {
scroll.simulatedblock_ = document.getElementById(‘simulated-scrolled-block’);
scroll.jsblock1_ = document.getElementById(‘javascript-scrolled-block-1′);
scroll.jsblock2_ = document.getElementById(‘javascript-scrolled-block-2′);
onScroll = function() {
scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop;
scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop;
};
scroll.simulatedblock_.onscroll = onScroll;
}
listenToSimulatedScroll();
function listenToSimulatedScroll() {
scroll.simulatedblock_ = document.getElementById('simulated-scrolled-block');
scroll.jsblock1_ = document.getElementById('javascript-scrolled-block-1');
scroll.jsblock2_ = document.getElementById('javascript-scrolled-block-2');
onScroll = function() {
scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop;
scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop;
};
scroll.simulatedblock_.onscroll = onScroll;
}
It would be necessary to remove the paddings, and that’s it.
#javascript-scrolled-block-1, #javascript-scrolled-block-2 {
overflow:hidden;
}
#simulated-scrolled-block {
overflow:auto;
background-color: #EEEEEE;
padding-left:0;
width: 5px;
}
.inner-simulated-block {
height:300px;
}
.content-box {
background-color: #EEEEEE;
overflow:auto;
padding-left:0;
width: 5px;
margin:20px;
padding:10px;
height: 200px;
float:left;
}
Things get really complicated when it’s necessary to scroll intersected areas inside a complex layout with the need to stick scrollable components over the main area, in a desktop application style approach, let’s say for instance a Gantt application layout. In this scenario we have to combine this technique with CSS positioning of related elements, manage its resizing and binding different methods to each dimension scrolling, but the main idea is the same one.
After some doubts about if we were going to be able to register, we finally could sign up for JSConf.eu 2009, so two people from Igalia are going be in Berlin the 7th and 8th of November.
Javascript is one of the transversal technologies in Igalia and this is the reason why there will be people in the conferences that has been working both on Desktop Mobile and Web Application Development groups.
Some of us already have quite a lot of experience with Server-Side communications with JS, and we are willing to go deeper in its usage to more advanced RIA oriented features within the scope of our ZK scheduling application.
We hope to get a lot of interesting ideas and boost our knowledge in the different frameworks that are going to be explored, have an insight in future opportunities, and of course, know people and have fun!
PD. Then we take Berlin!
After a lot of months of plenty of work, some vacations and important changes in my personal life, I’m trying to get this blog updated.
To start with the most significant change, I became a father the past year 
It’s just an amazing experience every day.
Resuming what I did at work during this time, basically:
- Coordination and development of Typo3 applications …
- Some consultancy project and collaboration in certification process …
- Teaching in Igalia 2009 edition of free software master …
- … and mainly being part in the development team of a RIA oriented scheduling application, more news about to come. Stay tunned.
We have been considering several architectural alternatives for a future project we are going to start. The idea is to develop a production management system, which has a scheduling part, to which is going to have a web interface. The debate is: plugin-oriented (free alternatives, of course) vs javascript.
We are not sure about the richness we will need to handle, and how easy would be to integrate it with
I have installed packages to run my own mono server, and develop some quick tests for moonlight http://www.go-mono.com/moonlight/
The tests were done with 1.0 and 2.0 versions for 32 bits. First worked fine, but some environments already demanded the latest version that shoud be downloaded from the repository
svn co svn://anonsvn.mono-project.com/source/trunk/moon
Although some simple C# components worked fine, and it would be interesting in the future as an alternative to Flash, its level of maturity, and the doubts on how we could connect the graphical components with a non-mono application, led us to discard Moonlight for the current project.
Besides, the possible use of direct Canvas elements in HTML 5, made us go to Javascript alternatives that seem to have other clear advantages.
So we are testing now Yahoo Library YUI (BSD Licensed) that is looking really good for our purpose of drawing and moving boxes over our ZK Direct RIA architecture.
I have being testing the creation and configuration of an specific account for OpenID in one of the profiles supported by sourceforge.net authentication list:
- AOL http://openid.aol.com/screenname
- Livejournal http://username.livejournal.com/
- Blogger http://blogname.blogspot.com/
- Yahoo https://me.yahoo.com/username
Having already some of this profiles ready to use, i decided to set up my identity via Google, as far as I am already using some of thir products quite often.
So at this point you can either log in Sourceforge with your personal account or register a new user based on a OpenID provider.
Suposing the second one, the registration sends a message to Blogger to ask for confirmation of the confidence on authentication with Sourceforge. Regarding registration forms, they may share information based on specific formats, I will try to take a look into this one day.
So once accepted, you can link your sourceforge.org id with the OpenID url provided, in order to use that url (in this case ltilve.blogspot.com) to log in, never mind the user_id you could register.
I guess that this algorithm is based on something similar to SSO behavior, prepared to filter ‘man-in-the-middle‘ vulnerabilities, but I will review this to have more information
- http://openid.net/what/
- http://alexandria.wiki.sourceforge.net/OpenID
In the afternoon, we went to Technopolis Smarthouse where Juha Ala-Mursula from Bussiness Oulu, and Martti Elsilä explained us the City of Oulu Ecosystem and the services provided by Technopolis to set up in Finland.
