SI Works blogs by tag 'Javascript' (4)

How about selecting an element, changing its properties, inner HTML or attributes, then from he same snip updating another element that is up or down from it by navigating through to DOM effectively.

$('element').up(0).down("a").writeAttribute("title", "new title");

Which will translate the following in plain english:

Navigate to the element with the name if "element".then move up to the parent of that element.then more to the next a tag within that parent element.then change the title attribute of that element.

Neat huh?

update:I forgot to mention, using the $$ and A$ functions, for instance.

$$('.classname')

simply will grab all the elements in the DOM document that has a class "classname"BUT, then what to do with it.

$A($$('.classname'))

this, however will now group them into an array, at which time we can then perform an action on each of then using the each command.

$A($$('.classname')).each(function(e){
// dom something 
})

Ps...The framework is MUCH more effective and efficient, which allows us to build even MORE robust applications for our clients.

I came across this really nifty little script on Elliot Swan's website while looking for something to help me with a task I have, the task is to copy an element and everything inside the element. this works great, I've made my own small tweaks in order to make sure it 100% suits the application I'm using it for, other than that, nice one.

var Move =	{
copy	:   function(e, target)	{
var eId      = $(e);
var copyE    = eId.cloneNode(true);
var cLength  = copyE.childNodes.length -1;
copyE.id     = e+'-copy';
for(var i = 0; cLength >= i;  i++)	{
if(copyE.childNodes[i].id) {
var cNode   = copyE.childNodes[i];
var firstId = cNode.id;
cNode.id    = firstId+'-copy'; }
}
$(target).appendChild(copyE);
},
element:  function(e, target, type)	{
var eId =  $(e);
if(type == 'move') {
$(target).appendChild(eId);
}
else if(type == 'copy')	{
this.copy(e, target);
}
}
}

Take a look at the entry for this and find more instructions.

We've recently decided to start rapid development for javascript using prototype, and extended it with script.aculo.us now there are many other JS frameworks that are out there, a few are those such as jquery, Yahoo! YUI, Dojo toolkit, to name but a small few of them, but I've found that prototype is the most uber.

I've been playing around with pretty much all of them over the past 6 months or so and have found it the robustest *new word

We're moving more and more towards web2.0 applications style of coding (we have been for some time, as web2.0's getting old now :p) and have found this very useful.

For example, creating a dragable element using the above. nice.simple()
 

/**
* Use Event.observe to load the above function to the browser once all the code has downloaded
* Note we'll set up a drag event
*/
Event.observe ( window , 'load',
// Set up a drag event using scripto to drag the login box
new Draggable( 'login_box', { handle: 'login_handler'} );
});

Event.observe sets up a load event on the window, and new Draggable creates the drag even, neat init?

Been working on a clients website, where the aim is to create a nice little pop-up window with an ajax calendar, which we've created ourselves, instead of getting from the web, so what I had to do is write the function to create it, then ... write one to find where we click the little mouse, so that it appear in the correct place.

function getMousePosition ( event )
{
var mouse = [0,0];
if ( typeof event == "undefined" ) {
var event = window.event;
}
if ( event.pageX || event.pageY ) {
mouse[0] = event.pageX;
mouse[1] = event.pageY;
}
else if ( event.clientX || event.clientY ) {
mouse[0] = event.clientX;
mouse[1] = event.clientY;
}
return mouse;
}

Now what this does is finds the mouse, then when I create an absolutely positioned DIV I use this to give it the co-ords. NOW... in Firefox, this weeks, but as usual in IE there is an issue, it takes into consideration the scroll bar, and at what position the scroll bar is at, which is fair enough. so I had to go and write a function to find the scroll position and add that to the mouse position for frikken IE

function getScrollingPosition( ) {
//array for X and Y scroll position
var position = [0, 0];
//if the window.pageYOffset property is supported
if( typeof window.pageYOffset != 'undefined' ) {
//store position values
position = [
window.pageXOffset,
window.pageYOffset
];
}
//if the documentElement.scrollTop property is supported
//and the value is greater than zero
if(typeof document.documentElement.scrollTop != 'undefined' && 
document.documentElement.scrollTop > 0) {
//store position values
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
//if the body.scrollTop property is supported
else if(typeof document.body.scrollTop != 'undefined') {
//store position values
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
//return the array
return position;
}

And to combine them it was something like this.

var scrollPosition = getScrollingPosition();
var mousePosition = getMousePosition();

var positionX = mousePosition[0]+scrollPosition[0];
var positionY = mousePosition[1]+scrollPosition[1];

That's about it, it all seems to work now, I can't give you an example at the moment, but I'll try give you one at a later stage.