Posts Tagged ‘javascript’

Custom share menus are easy to make by putting together some simple jQuery click handling and pre-written Facebook and Twitter share bookmarklets. I recently needed to build my own “social sharing” menu (like addThis) on a jQuery-enabled site. Here is the code:

HTML:

Email to friend
Share on Twitter
Share on Facebook

JAVASCRIPT:

$('.social li.twitter a').click(function(event) {
 (function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());
 event.preventDefault();
});

$('.social li.facebook a').click(function(event) {
 var d=document,f='https://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1297114121&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0);
 event.preventDefault();
});

Of course, there are simpler solutions to this, but this is pretty handy and reusable. You can easily swap out the elements for something more semantic if you are crazy over that sort of thing. Hope it helps someone!

Rumored to have gotten their idea while at a bar, Dustin Moskovitz (Facebook co-founder and former CTO) and former-Googler/Facebooker Justin Rosenstein have undertaken a revolutionary project aiming to eliminate 90% of repetitive code facing most web developers today.

Modern web developers often feel like they repeat a lot of code. When we come up with a unique idea, usually that amounts to being only around 10% of our code, the rest is needlessly complicated and tedious. Enter Lunascript – “an in-house programming language for writing rich web applications in about 10% of the time and code you can today.”

At Asana, we’re building a Collaborative Information Manager that we believe will make it radically easier for groups of people to get work done. Writing a complex web application, we experienced pain all too familiar to authors of “Web 2.0″ software (and interactive software in general): there were all kinds of extremely difficult programming tasks that we were doing over and over again for every feature we wanted to write.

I am definitely going to try this out. The language seems very straightforward and could be very helpful in speeding up the development phase.
Read More

Well, sort of. Tobias Schnieder has developed Gordon, a Flash runtime written entirely in JavaScript and HTML5. This means Flash movies will work in any modern browser (including iPhone Safari), and there is no need for the Flash plug-in to be installed! It only requires a small snippet of code to be placed on a page.

At this point, most Flash movies are probably still too CPU-intensive for iPhone. That is the only reason why iPhone doesn’t already support Flash in the first place. Despite that, Gordon is a nice resource to have absent anything else. There are no docs for Gordon at this point, but Gordon is getting widespread Internet attention and seems to be getting rapidly updated with new demos.

Read More

The Yahoo! User Interface Library (YUI) has a bunch of very nifty little methods to make complex tasks easier. One that immediately stood out to me was isAncestor, as I can attest first-hand to the cross-browser troubles when trying to detect ancestry in the DOM. Although a very basic concept, most drop-down code often becomes bloated or restrictive. I’m not advocating the use of JavaScript drop-downs over a CSS method, but there are some added benefits of using JS to achieve this effect:

1. Clean markup, no need for conditional comments
2. The ability to animate show and hide events
3. Added styling opportunities, won’t break so long as the nested list structure remains in tact

Below is a simple example of how to use YUI’s isAncestor to create flyout menus with HTML and CSS.

(function() {
	function mouseover(e) {
		var menu = this.getElementsByTagName('ul')[0];
		YAHOO.util.Dom.setStyle(menu, 'display', 'block');
	};

	function mouseout(e) {
		if (!YAHOO.util.Dom.isAncestor(this, e.relatedTarget) || e.relatedTarget == document.getElementsByTagName('html')[0]) {
			var menu = this.getElementsByTagName('ul')[0];
			YAHOO.util.Dom.setStyle(menu, 'display', 'none');
		}
	};
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseover', mouseover);
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseout', mouseout);
})();

See Example »

If you need something more complex, see the YUI MenuCreator page.

I hope I’m not the only one who consistently experiences this annoying behavior when browsing specific web sites. I have been able to reproduce the issue both at home and at work, so I doubt I’m the only one.

Update
Kev (below) has identified that this is caused by a conflict with firefox. Sounds logical. Switching to version 1.2.0b4 or disabling firefox reportedly fixes the problem.

The Issue:
When browsing a site with one of Doubleclick‘s ads on it, sometimes the ad will take over the whole page (likely due to malformed HTML in the iframe or some type of javascript error), effectively rendering the page useless. The back button doesn’t work because it just keeps taking over the page when you press ‘Back’. I usually end up just closing the tab and forgetting about it. That being said, I imagine other annoyed users are doing the same. This behavior is occurring across multiple very large sites (list below). It makes me wonder if these publishers are aware of potential dollars they are wasting by compromising the user experience in such a big way.

Over the past month, I have taken screenshots of this issue across various sites. It could be a conflict with a FireFox plugin (although I only use Web Developer Plugin and Firebug), but that’s unlikely. This issue seems to be caused by firebug. This issue has been recorded in firefox 2 and 3. By looking at the status bar text which reads something like ‘Transferring data from m0.2mdn.net’ or ‘Read m1.2mdn.net’, and by a quick glance at the source of each of these broken pages, I can quickly conclude that the problem lies somewhere within Doubleclick’s ad code.

yelp, YouTube, Gizmodo, and LinkedIn have all been captured with this problem.

I also wonder if Doubleclick is aware of this issue. They deal with very large advertisers and I can’t imagine something like this going unnoticed for too long.

Has anyone else seen this bug while browsing popular web sites?

At work I frequently encounter designs that utilize a mouseover show/mouseout hide menu that usually consists of a trigger (often an A tag, or LI element) and a menu (often a DIV, or a UL). Due to the browser inconsistencies between event handling and mouseout/mouseover DOM detection, it can be cumbersome to create a menu that is quick to implement (thus cost effective) and most importantly, stable. It also has support for a delay threshold, and the ability to animate show and hide events.

(more…)

Recently at Ajaxian there was a post describing Custom Events and how they could be used to better structure an event-driven application by ‘subscribing’ or ‘binding’ certain actions to an event. At Pint we use YUI as our main library, so I’ve ported the author’s example into a version that uses YUI.

Here is the code:

YAHOO.util.Event.onDOMReady(function() {
    document.body.event1 = new YAHOO.util.CustomEvent();
    YAHOO.util.Event.on('colorchange', 'change', function(e) {
        if (this.checked) document.body.event1.subscribe(changeColor);
        else document.body.event1.unsubscribe(changeColor);
    });
    YAHOO.util.Event.on('contentchange', 'change', function(e) {
        if (this.checked) document.body.event1.subscribe(changeContent);
        else document.body.event1.unsubscribe(changeContent);
        }
    });
    YAHOO.util.Event.on(document.getElementById('leftchoices').childNodes, 'click', function(e) {
        document.body.event1.fire(e);
    });
});

See example »