Categories
Facebook Tips

How will a page show up on Facebook Share.

Umair Jabbar facebook share

Facebook share is widely used these days to share web pages people like, on their profile. The sharing mechanism is quite simple, fetches the related image and excerpt from the url being shared to ensure that the person seeing the post gets an idea of what the shared page is about. A webdesigner has control over how the webpage will look when shared on facebook. How to control what image and text shows up when your page is shared is explained here.

This post is focused on how to test exactly what your page will look like, even the minor details. Facebook has a very simple tool for this called URL Linter.

Just paste the URL of the page to be tested and facebook will fetch the title, description/excerpt, image, the link shown with the post, and any other meta properties on the page. This is extremely helpful for any page which is expected to be shared alot on fb, so that it can be tested before making it public. Another advantage of using this url linter is that once you make changes to your page and try the linter it will go for the latest version and not show the cached copy while normal facebook share will show a cached copy for a url that has been shared previously.

I hope this post gives you an edge while using Facebook share.

Found this post helpful? Want to return the favor? Use the button below :)




Categories
Code Javascript

Javascript Objects and Javascript Arrays

I came across some interesting facts regarding Javascript Objects and Javascript Arrays which I will be discussing below.

Most of us are familiar with Javascript objects and arrays. Technically Javascript Arrays are also Javascript objects, even the typeof Javascript Array will also give its type as object and not array

typeof is a simple JS operator which returns typeof the element passed.

But there are some tiny , interesting and somewhat buggy aspects of Javascript arrays.

  • If in a Javascript Array, you set index 100 to have any value then the length of this array will be returned as 101. JS will fill the rest 100 keys (0 – 99) with null values
    Try this :

    var test_array = Array();
test_array.length;    //returns 0 this time
test_array[100] = 'I am hundred';
test_array.length;    //returns 101 now
  • Javascript Arrays cannot ideally be treated as Associative Arrays. You can set and access associative keys but when you do so Javascript arrays work 100% as JS objects and the length of the array wont increase no matter ho many associative keys and respective values you keep on adding. 
    var test_array = Array();
test_array.length;    //returns 0 this time
test_array['key1'] = 'I am key 1';
test_array['key2'] = 'I am key 2';
test_array.length;    //again 0
  • The fact above also concludes that JS objects dont have any length property, so we cannot determine whether an object is empty or not with the length property.
Categories
Facebook

Yet another issue on Facebook

The site with more than 500 Million Users, is tough to get away with bugs. They obviously cannot regenerate each and every flow after integration of their new features.

Anyways this is the one that I just came across while posting a link on a friend’s wall and tagging him in that post too. Seems pretty simple but I bet you wont be able to do this, atleast at the time of writing this post. It gives up a popup error stating Something went wrong. We’re working on getting it fixed as soon as we can.

I tried the same on some other people’s walls too but the result was this same bug,

I hope FB has an auto ticketer to ticket such bugs so that they come to notice, if not than Facebook you might find this post someday :).

Categories
Code CSS Javascript

How to Create Simple Modal Dialogue using JQuery

Here is a simple jQuery based Cross-Browser modal dialogue.

Demo

Below you can find a simple script, which works with jQuery to show a decent cross browser modal dialogue, The dialogue can have any html that you want. The css here should be used to produce desired results.

JavaScript Source:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});

});

CSS:

a{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

The Demo for this popup can be seen here

Categories
Tips

How to clear your DNS Cache in Windows

Windows usually caches the DNS records for faster resolution of web pages, at some point one needs to refresh that cache, this is how you do it,

Open the Command Line Interface of Windows, (Run -> type cmd)

and run the following command

ipconfig /flushdns
Categories
CSS How to Tips

CSS Clearfix Best Cross browser solution

Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.

Bad Solution : 

<div style="clear:both"></div>

Perfect Cross Browser Solution:

add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-div of-course.

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
	overflow: visible;
}