Cmotion2

[exiquio]

My company recently had a client that required similar functionality
to the CMotion 2 image gallery hosted at this URL:
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm. This
kind of stuff seems to be done in flash a lot and this was the only
example of this functionality I could find after a few hours of
search. I am really grateful to the author for this contribution. I
did find the code a bit difficult to read and hard to integrate into
our project so I rewrote the functionality with MooTools and I am
posting it just in case someone is ever searching for such. I don't
think the code is perfect but it works. Imagine small blocks of
profile images and names with anchors in place of the O'reilly books.
I hope this helps somebody in the future. Feel free to tell me what
sucks about it. I am eager to learn most of the time.


Code:

window.addEvent('domready', function(){
var SomeNameSpace = function(){
var REST_AREA_HEIGHT = 7;
var MAX_SPEED = 10;
var TOP_PROTECTION = -6;
var scroll_speed = 0;
var move_state = '';
var actual_height = '';
var motion_container = $('motion_container');
var motion_container_height =
motion_container.getStyle('height').toInt();
var team_side_bar = $('team_side_bar');
var actual_height = team_side_bar.offsetHeight;
/* Private methods */
function getPositionOffset(item, offset_type){
if(offset_type == 'left'){
var total_offset = item.offsetLeft;
}else{
var total_offset = item.offsetTop;
}
var parent_element = item.offsetParent;
while(parent_element != null){
if(total_offset == 'left'){
total_offset += parent_element.offsetLeft;
}else{
total_offset += parent_element.offsetTop;
}
parent_element = parent_element.offsetParent;
}
return total_offset;
}
var main_obj_offset = getPositionOffset(motion_container, 'top');
return{
endOfGalleryAlert: function(target_id){
/* Shows context appropriate message when user scrolls over
profile limits */
var target =$(target_id);
target.setOpacity(1);
(function(){
target.setOpacity(0);
}).delay(1500);
},
scrollUp: function(){
move_state = 'up';
if(team_side_bar.getStyle('top').toInt() >
(motion_container_height - actual_height)){
team_side_bar.setStyle('top',
(team_side_bar.getStyle('top').toInt() - scroll_speed) + 'px');
}else{
SomeNameSpace.endOfGalleryAlert('scroll_alert_bottom');
}
uptime = setTimeout(SomeNameSpace.scrollUp, 10);
},
scrollDown: function(){
move_state = 'down';
if(team_side_bar.getStyle('top').toInt() < TOP_PROTECTION){
team_side_bar.setStyle('top',
(team_side_bar.getStyle('top').toInt() + scroll_speed) + 'px');
}else{
SomeNameSpace.endOfGalleryAlert('scroll_alert_top');
}
downtime = setTimeout(SomeNameSpace.scrollDown, 10);
},
handleMotion: function(event){
var page_x = window.getScrollLeft();
var page_y = window.getScrollTop();
var event = new Event(event);
var cursor_y = event.client.y;
cursor_y -= main_obj_offset - page_y;
var top_bound = (motion_container_height / 2 ) - REST_AREA_HEIGHT;
var bottom_bound = (motion_container_height / 2) +
REST_AREA_HEIGHT;
if(cursor_y > bottom_bound){
scroll_speed = (cursor_y - bottom_bound) /
((motion_container_height - REST_AREA_HEIGHT) / 2) * MAX_SPEED;
if(window.downtime){
clearTimeout(window.downtime);
}
if(move_state != 'up'){
SomeNameSpace.scrollUp();
}
}else if(cursor_y < top_bound){
scroll_speed = (top_bound - cursor_y) / ((motion_container_height
- REST_AREA_HEIGHT) / 2) * MAX_SPEED;
if(window.uptime){
clearTimeout(window.uptime);
}
if(move_state != 'down'){
SomeNameSpace.scrollDown();
}
}else{
scroll_speed = 0;
}
},
killMotion: function(event){
if(window.downtime){
clearTimeout(downtime);
}
if(window.uptime){
clearTimeout(uptime);
}
move_state = ''
},
init: function(){
motion_container.addEvent('mousemove', function(event){
SomeNameSpace.handleMotion(event);
});
motion_container.addEvent('mouseleave', function(event){
SomeNameSpace.killMotion(event);
});
motion_container.addEvent('mousedown', function(event){
SomeNameSpace.killMotion(event);
});
}
}
}();
// Call init()
SomeNameSpace.init();
});

 

[exiquio]

I should really stop posting here as each mistakes shows my ignorance,
but maybe that is a good thing. Anyway, here is the correct code. My
original crap was missing the stuff that put the rest area dead
center.
/*********/
$(document).ready(function(){
// Create a global namespace API
var NS = function(){
return{
init: function(){
// Select a stat menu
var store_locator = $('#locator_img');
var locator_image =$(store_locator.children()[0]);
store_locator.hover(
function(){
locator_image.addClass('hidden');
},
function(){
locator_image.removeClass('hidden');
}
);
var select_state = $('#select_state');
var state_submenu = $('#state_submenu');
select_state.click(function(){
state_submenu.toggle();
});
select_state.hover(
function(){},
function(){
state_submenu.hide();
}
);
/* Nav Menu */
var navigation_menu = $('#navigation_menu');
var menu_tab_blocks = $('.menu_tab_blocks');
var sub_menu_tab_blocks = $('.sub_menu_tab_block');
navigation_menu.children().each(function(){
var this_li = $(this);
var menu_tab_image_a = $($(this_li.children()[0]).children()[0]);
this_li.hover(
function(){
menu_tab_image_a.addClass('hidden');
if(this_li.children()[1] && this_li.children()[1].tagName ===
'UL'){
var this_ul = $(this_li.children()[1]);
this_ul.show('fast');
}
sub_menu_tab_blocks.each(function(){
var this_block = $(this);
var target = $($(this_block.children()[0]).children()[0]);
this_block.hover(
function(){
target.addClass('hidden');
menu_tab_image_a.removeClass('hidden');
},
function(){
target.removeClass('hidden');
}
);
});
},
function(){
menu_tab_image_a.removeClass('hidden');
if(this_li.children()[1] && this_li.children()[1].tagName ===
'UL'){
var this_ul = $(this_li.children()[1]);
this_ul.hide('fast');
}
}
);
});
}
}
}();
// Call init()
NS.init();
});

/*********/

 

[Joost Diepenmaat]

I should really stop posting here as each mistakes shows my ignorance,
but maybe that is a good thing. Anyway, here is the correct code. My
original crap was missing the stuff that put the rest area dead
center.

[ a shitload of stuff snipped ]

Is there a question in there somewhere? It looks like the previous posts
in this thread have already expired on my news server, or possibly your
news reader doesn't do replies/threading correctly. In any case, please
make it easier to understand what you're asking.

See also: http://catb.org/~esr/faqs/smart-questions.html

Especially: http://catb.org/~esr/faqs/smart-questions.html#volume