Techbray » How To’s http://www.techbray.com Tech, Tips N Tricks and Web 2.0 Wed, 18 Jan 2012 06:08:57 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to create a google+ page http://www.techbray.com/2011/11/how-to-create-a-google-page/ http://www.techbray.com/2011/11/how-to-create-a-google-page/#comments Tue, 08 Nov 2011 15:49:30 +0000 Jaan http://www.techbray.com/?p=512

Google has finally launched Google Plus pages for brands and publishers as promised. When Google+ first launched, it had asked brands and publishers not to create pages for their own sites, promising that there would be an official solution coming shortly.
It’s the google+ version of facebook fan page with more features.

Google+ pages are not available to everyone as of initial launch. If you’re profile is selected, you can create google+ pages here.
https://plus.google.com/pages/create

Checkout this link if you are lucky & fill in the details to get your page.
https://plus.google.com/pages/create.

I have added a google+ page for pepsi below:
Pepsi

Google+ page for iKreations

]]> http://www.techbray.com/2011/11/how-to-create-a-google-page/feed/ 2 How to implement “do a barrel roll” using css3 like google http://www.techbray.com/2011/11/how-to-implement-do-a-barrel-roll-using-css3-like-google/ http://www.techbray.com/2011/11/how-to-implement-do-a-barrel-roll-using-css3-like-google/#comments Fri, 04 Nov 2011 16:24:35 +0000 Jaan http://www.techbray.com/?p=488

Again, Google entertained it’s users with a “dο a barrel roll” gimmick which spins the entire search page for this search query. It was a trending topic in twitter.
It was done using the css3 transitions & transforms, while showcasing the power of CSS3, a presentation feature of modern browsers.

I tried to figure out the implementation part of it by googling out which didn’t return me the actual implementation(which works).So I did a small reverse engineering to figure that out.

This purely works on the CSS3 transitions property whose specifications are still in the draft form. So all properties associated with them should be prefixed with “-moz-” for use in Gecko (Mozilla Firefox browser). For compatibility with WebKit, you should also use the “-webkit-” prefix, and for Opera compatibility, use the “-o-” prefix.
You would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

Add this styles for body tag which performs the spin (alternately you can use the class as well) compatible with latest of the browsers.

body{
-moz-animation-name: roll;
-moz-animation-duration: 4s; //spin 360 deg in 4 sec
-moz-animation-iteration-count: 1; //spin only once
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}

The CSS function rule “roll” is defined to rotate 360 deg.
@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }

The basic version of code which can be used/tested.

<html>
<head>
<style>

@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes roll { 100% { -o-transform: rotate(360deg); } }
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }

body{
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}

</style>

</head>
<body >

<p>Go ahead & do a barrel roll on your site</p>
<p>Go ahead & do a barrel roll on your site</p>
<p>Share it, if you like it</p>
<p>Share it, if you like it</p>
<p>Thank you </p>
<p>Thank you </p>

</body>
</html>

Since this feature is still in development in some browsers, this may not work in older browsers.
The same effect can be achieved by entering “Z or R twice” into the search bar.

If you wanna know how i did to this site(If you have not seen it while page the loaded, just refresh the page):

Added a below javascript to add a css class “barrel-roll” to the body with the above properties after 3 secs to allow page load.

if(location.href.match(‘do-a-barrel-roll’)){ //check if URL has barrel roll text
setTimeout(“document.getElementsByTagName(‘body’)[0].className=’barrel-roll’;”,3000);
}

]]> http://www.techbray.com/2011/11/how-to-implement-do-a-barrel-roll-using-css3-like-google/feed/ 7 How to copy settings from Mozilla firefox from one machine to other. http://www.techbray.com/2011/10/how-to-copy-settings-from-mozilla-firefox-from-one-machine-to-other/ http://www.techbray.com/2011/10/how-to-copy-settings-from-mozilla-firefox-from-one-machine-to-other/#comments Fri, 28 Oct 2011 16:49:36 +0000 Jaan http://www.techbray.com/?p=452 If you are a web developer you would have encountered this very often when you shift your machines or change you machines.
Users can copy the bookmarks, proxy settings, pages, history, add on’s, extension’s and many more features with the below steps.

1. Click on the windows button & enter %AppData% as below (In win xp click “Run”).

2.Copy the entire “mozilla” folder from old machine to any USB drive.
3.In the new machine again follow step 1 & paste the Copied “mozilla” folder.
4. Voila!!!! you get all your data back from old machine to the new one like bookmarks, proxy settings, pages, history, add-on’s, extension’s

]]> http://www.techbray.com/2011/10/how-to-copy-settings-from-mozilla-firefox-from-one-machine-to-other/feed/ 2 How to go back to the previous Facebook user interface http://www.techbray.com/2011/09/how-to-go-back-to-the-previous-facebook-user-interface/ http://www.techbray.com/2011/09/how-to-go-back-to-the-previous-facebook-user-interface/#comments Wed, 21 Sep 2011 18:41:21 +0000 Jaan http://www.techbray.com/?p=434

If you are not happy with the changes Facebook  has done with regards to the News Feed there’s an easy way to revert back to the old Facebook user interface.

Simply go to your Account Settings and change your language to anything except “English (US)”.

As an alternate you can select the ‘English (UK)’ if you only speak English and it will change back to the previous layout/ user interface.

Once Facebook rolls out the new UI across all territories / languages , this fix may not work. So this is merely a temporary ‘fix’ if you are hating the new interface.

]]> http://www.techbray.com/2011/09/how-to-go-back-to-the-previous-facebook-user-interface/feed/ 2 Text with moving backgrounds using jQuery http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/ http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/#comments Mon, 11 Jan 2010 17:04:42 +0000 Jaan http://www.techbray.com/?p=355 >]]> I have come across a wonderful article on Gayadesign on how to create a moving backgrounds for text using jquery like flash.

textjquery

Read more on gayadesign >>

]]> http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/feed/ 0 A Colorful Clock With CSS & jQuery http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/ http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/#comments Thu, 31 Dec 2009 05:34:46 +0000 Jaan http://www.techbray.com/?p=336 >]]> A wonderful clock design explained on tutorialzine site using css & jquery.

clock

Read more >>

]]> http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/feed/ 4 How to highlight the important keywords in text using jQuery. http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/ http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/#comments Mon, 28 Dec 2009 17:03:34 +0000 Jaan http://www.techbray.com/?p=348 >]]> A solution to highlight identified keywords (using named entity recognition) inside the chunk of user generated text had been posted on 5thirtyone .Look at the below pictures which demonstrates the actual working.
img1
With format selected, highlights the particular meaningful text.
img2

Read more on 5thirtyone >>

]]> http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/feed/ 2 Click and Increase the Size of an Image using jQuery http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/ http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/#comments Mon, 28 Dec 2009 16:26:24 +0000 Jaan http://www.techbray.com/?p=331 The article on dotnetcurry demonstrates how to click and view a larger image when the thumbnail is clicked on.imageincrease

Read more on dotnetcurrey.com

]]> http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/feed/ 0 How to disable the right click using jQuery http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/ http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/#comments Sat, 26 Dec 2009 18:17:24 +0000 Jaan http://www.techbray.com/?p=343 Some of us might want to disable the mouse right click .Below simple code snippet can be used to d the job easily using jQuery.

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

]]> http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/feed/ 0 How to prevent form submission when enter key is pressed using jquery. http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/ http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/#comments Sat, 26 Dec 2009 09:02:39 +0000 Jaan http://www.techbray.com/?p=353 As a web developer, most of the times you would have to do some functionality / operation before form gets submitted.By default form gets submitted on click of enter key when the input field is focussed.Below code snipppet can be used to avoid default form submision.

$(document).ready(function() {
$(“form”).bind(“keypress”, function(e) {
if (e.keyCode == 13) {
searchFunc($(“#searchInput”).attr(‘value’)); //perform some operation
return false;
}
});
});

]]> http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/feed/ 0