The CSS3 frustration continues, for e.g: the “last-child” selector, could have been a boon to site designers. The trailing “class=last” that’s added to every last item of a list, the last cell of a row could have been on the way out for once and all.

The “last-child” selector is a easy way of targeting the last element of any dom node collection. This is great for any last item of a list where you dont want that seperator to appear. MS doesn’t seem to realize that just doing half baked work with “first-child” doesn’t cut it.

Jquery is on the third column in the attached thumbnail.

Its also interesting to note that “prototype” finds no results for the CSS selector (“div:nth-child(even)” and “div:nth-child(odd)”).

[tags]jquery, mootools [/tags]

While we struggle to evolve our own identity as specalists and yet retain our group. Getting rid of the “every webiste front-end developer there is same” attitude is a tough cookie to crack.

This post is about promoting communities and domains in large organizations, especially the front-end developers.

Organization

Most organizations have an awkward structure for Front-end developers, they are either called “Software Engineers” ( where lines of code is counted) or graphic designers ( where the actual designers hands over production work or ‘slicing’)..

In such cases informal communities provide a sense of a group beyond your project.

Motivation

Motivating people is tough when they are thinking about work and projects. Getting people together in a room maybe a challenge on its own but getting them excited maybe comparitively easy.

Our ongoing experiement.

Currently we are running a NewsLetter contest to excite people, watch this space as I update what the participation levels have been and eventually how it all worked out.

Hide those selects

There might be the bgIframe’s and other creative solutions to the “select” box bleed issue, but if you still had trouble. I had trouble with bgIframe , try the traditional hide all select boxes trick.

1
2
3
4
5
6

function selectToggle(){ 
$(”select”).each(
function(){ 
$(this).toggle();
} 
}

In our mouseout and mouseover functions just call the “selectToggle()” function.

Wrap them up

Use the “wrap” method to wrap elements with other elements. How about a shadow at runtime, no problem.

1

$(”mydiv”).wrap(”<div class="shadow"><div class=’innershadow’></div></div>”);

Measure Everything

Use the excellent “dimensions ” suite to get dimensions of elements. Now isn’t the following easy.

1
2

var position = {};
 $(”#myElement”).position(position);

Results

1

position = { top: 10, left: 10 }

Anything goes

How about $(”#myelement”) or $(”.myClass”) or $(”.myclass li”) or plain $().

Super of Suckerfish.

How do you take

• Header
  • Sub-menu 1
  • Sub-menu 2

and make it into an suckerfish menu, simple, call the superfish :

How about

$(”#nav”).superfish();

Hope you enjoyed my writeup on Jquery, I have stopped Dojoing a while back and I am warming up to the “J”.

From the makers of Evolution 5 online browser-based role playing game  , comes a new library for Jquery, that reflects any image using Javascript, without the need for manipulating the image on your desktop or on your server.

Reflections is a tiny library (2k), that does the trick using browser filters for opacity.

http://cow.neondragon.net/stuff/reflection/

[tags]jquery, development [/tags]

 The code feels much lighter and easier to manouvre around. Its quiet intuitive as most methods follow a simple pattern.

 The start is usually “$” followed by a “period” and then the method name, depending on what you are doing the “$” sign could be using a selector to identify whom to impact. The nesting is quiet intuitive and you never get confused. The “this” keyword makes a relevant comeback as “$(this)” and the CSS selectors are used remarkably on the DOM. Consider catching every “P” element with a class of “.findme” and doing something with it.


$("P > .findme").each
(
function()
{
// Do Something
}
);


Compare this with Javascript, and compare your ordeal if there are two classes on the same element!

for(i=0;i <= paragraphelements.length)
{
if(paragraphElements[i].className=="findme")
{
// Do Something}
};
};

 Having coded in Javascript for more than 5 years now, I find Jquery’s syntax is enjoyable as well as crisp. Stay tuned for my experience with animation libraries in Jquery, SIFR and much more.

DHTML is back!

 The code below is a left hand tree navigation built in ”Prototype“  without the tree elements . Its unique because…

• It highlights self, the parent it belongs to
• Collapses everybody if the great grandparent is clicked but expands only to the first child if itself is clicked.

Put it on a page and see it in action.

 This was the third JS library I tried after Sarissa and Mochikit, nowadays I am dojoing a lot

The “Apple Human Interface Guidelines” suggest very clearly one commandment, that I particularly like

“A pop-up menu that contains common places a user might save things and Recent Places (the five most recent folders the user opened or saved documents to). Your application specifies the default location, typically one of the predefined folders in the user’s home folder. If the user selects another folder, the dialog should “remember” the user’s selection the next time the dialog appears.”

From the Microsoft User Experience Guidelines ( Now updated for Vista)

Open File (bullet 3)
“For subsequent default folders, use the last folder opened by the user using the program”"

So there you go, the location is remembered fabulously in applications such as “Macromedia Dreamweaver, Editplus” , for every tab opened, the location is remembered when you do a “save as ” or open again. But Homesite developers somehow found this thing un-needed, so they just didn’t implement it. Everytime you open a homesite document on the windows platform and do a “save as” it just seems to forget where I opened/saved the last one, so you go fishing again.

On a sidenote, the windows vista guidelines seem to highlight Microsofts own mistakes historically, one thing that gets a mention is useless reminders like “Dismiss all reminders” in outlook. The new “vista” experience thought seems to be , dont show the users dialogs that have no harm if not responded to instead use balloons. Interesting Microsoft accepting its own mistakes?. The choice of language is amusing as well as to be noted.

 Via Dialog box design Concepts ( Scroll to end) >

Incorrect:
In this example, users don’t need this confirmation because dismissing Outlook reminders as no adverse consequences. This dialog box should never be displayed.

The caveat is only a doctype switch will enable compliance

In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies. To preserve application compatibility we will not make any behavioral changes to “quirks mode” as it has been established since IE6.What about css-3 features more particularly, device oriented, accesibility supporting programmatical language that the new genration promises to be.

While you and I can only debate, its heartening to note that they are looking at the comments of whoever can find them .

On another note, whats most interesting though is that a search for IE 7 ( linked as “find” above) has a certain IE7.com which has a big button for firefox and proudly claims “Neither this site nor Mozilla is connected with Microsoft. Get Firefox.”
Talk of the Netscape Days!

The list includes but is not limited to

• Universal Selectors
• CSS 2.1 compatibility
• CSS formatting techniques

$p=$('leftNavContainer');
$l1=$A(getElementsByClassName($p, "li", "level1")) $l2=getElementsByClassName($p, "li", "level2");
$l3=getElementsByClassName($p, "li", "level3");
var l1tog;
//Level 1 moo=$l1.each ( function doclick(theli)
{
Event.observe(theli,'click', function(item)
{
//alert(Event.element(event).parentElement.childNodes[0].outerHTML);
//$ul=$A(Event.element(event).parentElement.getElementsByTagName("UL"));
$ul=Event.element(event).parentElement.getElementsByTagName("UL")[0];
if($ul) $cul=$A($ul.getElementsByTagName("UL"));
Event.element(event).className="lhnLinkSelected";
$sl=$A(getElementsByClassName($p, "a", "lhnLinkSelected")) //alert($sl.length);
$sl.each( function resetBold(ther)
{
if(ther!=Event.element(event))
{
ther.className="lhnLink";
if($ul)
{
//alert($ul.parentElement.parentElement.parentElement.innerText);
$ul.parentElement.parentElement.parentElement.childNodes[0].className="lhnLinkSelected";
}
//ther.className.replace("lhnLinkSelected","")
}
}
) //alert($cul.length);
if($ul)
{
$cul.each ( function hidelem(theitem)
{
//alert(Event.element(event).parentElement.innertext);
//alert(theitem.childNodes[0].childNodes[0].tagName);
Element.hide(theitem);
}
) Element.toggle($ul);
}
else
{
alert("no action")
}
//alert(event.srcElement.parentElement.getElementsByTagName("UL").length);
}
) //theli.onclick=function exclick()
{
}
}
) /* //Level 2 $l2.each ( function doclick2(theli2)
{
Event.observe (theli2,'click', function exclick2()
{
}
)
}
) */