Posts Tagged ‘JavaScript’

Posted by 6bytes at 30, June, 2011

Category: Facebook

Tags: , ,

Putting one like button on a page is very simple and comes down to pasting the code from Facebook like button generator found here.
It gets a bit more complicated when we need to add more than one button on a page along with a dynamically generated content. Best example I can think of is a search results page where every search result has it’s own like button.

Enough talk lets get down to the business

Prepare

Put this somewhere in your page. Official Facebook documentation changes it’s recommendation from time to time, so let’s say just put it before </body> tag.

<div id="fb-root"></div>

Insert your Like buttons code

<fb:like href="http://example.com" send="false" layout="button_count" show_faces="false"></fb:like>

Initialize Like buttons

In your JavaScript code after inserting all the fb:like tags you need to initialize all those buttons. You can do that by running below code

	window.fbAsyncInit = function() {
		FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
	};
	(function() {
		var e = document.createElement('script');
		e.async = true;
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());

Remember to change ‘your app id’ to your actual app id.

Posted by 6bytes at 22, March, 2011

Category: Portfolio

Tags: , , , ,

TK Maxx website rebranding

After

Before

 

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
View site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were just fine but in IE6 and 7 the logo was hidden behind the image.

 

TK Maxx website rebranding, logo bug

Logo behind image

TK Maxx website rebranding, logo fixed

Logo above image

 

The trick was simple yet not obvious. <div> containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

#logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

#logo { z-index: 1000 !important; }

Posted by 6bytes at 23, February, 2011

Category: Portfolio

Tags: , , , , ,

Just launched. TK Maxx and Red Nose Day campaign applications.

Facebook quiz

Fun quiz to find out your perfect Red Nose Day t-shirt.
View site

Website application

Upload you photo with Flash uploader, resize it and pan it around with JavaScript then save your results with PHP.
View site

Posted by 6bytes at 30, September, 2010

Category: JavaScript

Tags: ,

In my last project I needed a function in JavaScript that will execute itself as soon as it’s ready. My first idea was something like that:

// declare function
function myFunction() {
	alert('Hello world!');
}
// run it when DOM is ready with help of jQuery
$(document).ready(function() {
	myFunction();
});

but in the back of my mind I knew there is a better way. A little bit of googling resulted in something unbelievably simple like this:

(function() {
	alert('Hello world!');
})();

If you need you can pass arguments as you’d normally do:

(function( arg ) {
	alert('Hello world! '+arg);
})(9999);

Quick and simple 🙂

Posted by 6bytes at 30, August, 2010

Category: JavaScript

Tags: , , , , , ,

Recently I’ve been working on a project with HTML5 <video> tag event handling and I needed to check if an element exists in the array. Quick googling resulted in neat native JavaScript method Array.indexOf. It returns the first index at which a given element can be found in the array, or -1 if it is not present. It all worked just fine in Firefox, Chrome and such.
Why wasn’t I surprised when my script behaved a bit weird in Internet Explorer. After many hours of “fun” with IE JavaScript debugger, I found that none of IE’s support the Array.indexOf method.

Thanks to this post I was able to quickly fix it by adding below code to my script.

if(!Array.indexOf){
	Array.prototype.indexOf = function(obj){
		for(var i=0; i<this.length; i++){
			if(this[i]===obj){
				return i;
			}
		}
		return -1;
	}
}

and the world was beautiful again.

 

Posted by 6bytes at 19, April, 2008

Category: JavaScript

Tags:

Over the years I used a lot of JavaScript functions to open PopUp windows. Some time ago I wrote this simple function and I use it everywhere where I need to open a new window.
Add the following to your JavaScript file or embed it in the tag somewhere on your website:

function popUp(strURL, strName, strType, strTop, strLeft, strWidth, strHeight) {
var strOptions = "";
if (strType == "console") strOptions = "resizable, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
if (strType == "fixed") strOptions = "status, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
if (strType == "elastic") strOptions = "toolbar, menubar, scrollbars, resizable, location, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
var newWin = window.open(strURL, strName, strOptions);
newWin.focus();
}

and to run it simply write:

your link

You need to create file.php file first. You can easily pass variables to this file like that:

your link

Enjoy!