Introduction: Setting Up and Editing a Windows 8-like Home Page for a Web Browser (Outdated)

(EDIT 3/10/2012: This tutorial is outdated, visit http://eight.kx.cz/index.htm for the updated files and tutorial)


Now, I saw this on lifehacker (http://lifehac.kr/mJY5GF ) the other day, and figured I should put up a more detailed tutorial for it. This is a simple web page that stays on your computer that gives your home page a look like the windows 8 interface (http://youtu.be/p92QfWOw88I  if you haven't seen it) or like the Windows phone 7 "Tiles".

Prerequests:
     -A OS with a Browser that can load locally-stored html pages as a home page (I will be using Ubuntu 11.04 with Chromium)
     -Ether Firefox, Chrome(ium), Internet Explorer, or Opera.
For editing:
     -The GIMP or like photo editing program
     -A text editor, notepad will work

The page and all of the code is credited to flatmo1 from deviant art (http://flatmo1.deviantart.com/ ) so check him out, he has some awesome skins on his page.

This is the one that I made, and I'm still editing it:
http://bit.ly/mSywUo

Step 1: Selecting the Right Package

Alright, now you need to select the right file for the webpage.

People using other browsers like FIREFOX , or INTERNET EXPLORER need this file:
http://www.deviantart.com/download/212847573/eight___firefox_start_page_by_flatmo1-d3iq28l.zip

for people using CHROME(IUM) , OPERA , or SAFARI, the link to the original webkit version was taken down by multiupload. you can try the FF and IE version above, or use mine (warning: pre-edited with all my favorites, but you can still follow this tutorial, it should work): http://dl.dropbox.com/u/11783628/Win8internetpage.zip
now extract the file to a safe location, for me it was under ~/Applications/Win8internetwebpage

Step 2: Setting Up the Browser

Time to play with preferences. Open up your browser and bring up your settings. Go to your home page/tab(s) settings and add the physical location of the index.htm to your URL slot. For example, I would enter ~/Applications/Win8internetpage/index.htm when a Windows user would use C://Your/File/Location/index.htm

NOTE: CHROME(IUM) USERS MIGHT HAVE TO ADD file:/// IN FRONT OF C:/ TO GET IT TO WORK!

YOUR DONE. VICTORY IS YOURS
http://youtu.be/3suGfhnT2Sg

Now onto editing the Tiles... yay....

Step 3: Customizing the Page (overview)

Customizing this page is easy... within a limit....
One limit is that you CANNOT add/subtract/resize tiles from this page without editing a lot of the code, which isn't recommended if you don't know what your doing.

There is four things you can easily edit on this page:
     -The location on the page (use the reference image on the location step)
     -The logo of the Tile (the images located in the thumbs folder)
     -The URL associated with said logo
     -The Gradient behind said logo (in the lib folder)
Use the file reference image attached to this step to help you locate these files. Also, familiarize yourself with the source.js file. Use the second image as a guide.

Step 4: Changing a Logo

Alright, so to change a logo, we need to do the following things:
1) Find and download the image you want to replace it with. I used this (http://bit.ly/jtFZKA ) to replace the cnn tile and this (http://bit.ly/iRBvAs ) to replace the bbc.co.uk tile.
2) I then opened them up in The GIMP and removed the backround (make it transparent) and then upped the contrast and brightness up to the max.
2b) Make sure you leave a small gap (about 20px for width) between the logo and the canvas edge
3) Save them as PNG, to the thumbs folder, and make sure transparency is enabled.

NOTE: Remember the name that you saved it as, and make it simple.

Step 5: Editing the Source.js File

To put the files together, you first need to select a slot.
1) Locate the right destination slot on the script ( Use the slot # Reference Guide, 2nd image)
2) Enter in the correct information under the slot's array (discussed below)

Now enter you title, in the first line of the array, and in half quotes.
For the next line, enter the URL that you want it to point to, in half quotes. IE: the lifehacker one should point to http://www.lifehacker.com
Lastly, enter in the name of the logo image file saved in the thumbs folder, also in half quotes.

So, for example, this:
bookmarks[7] = new Array(
            'BBC News'
            'http://www.bbc.co.uk'
            'bbcnews.png'

would change to this:
bookmarks[7] = new Array(
            'This Week In Tech'
            'http://www.twit.tv'
            'twit.png'

YOUR DONE! Just refresh the page and your changes will show.
http://www.myfacewhen.com/341/

On to changing gradients

Step 6: Editing the Gradients

Changing the gradient is easy, just make sure they are the right size

1) Following the sizes on the reference image below, resize it to the appropriate size, if you don't, it'll tile the image if its too small.
2) rename your gradient to the proper slot number
3) copy it to the lib folder

do a quick refresh and your done!

Step 7: Adding Extra Features

There is two things you can modify to make it slightly better.
-You can make it so the clickable section takes up the whole tile
      1) open up ./lib/style.css
      2) Scroll to the end and add this:
a {
display: block;
width: 100%;
height: 100%;
}

     3) Save and refresh the page.

-You can also add a blur around the edges when the mouse hovers over it
     1) open ./lib/style.css
     2) At the bottom, add this:
a {
box-shadow: none;
display: block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
box-shadow: inset 0 0 18px #260930;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
}

     3) Again, save and refresh

Step 8: Hosting the Page.

After your done, you can host your page online. You can do this through the traditional way of buying a host, etc. Since that can get expensive for a simplistic little page like this one, we can pull off the same thing with Dropbox (http://www.dropbox.com ), which if you don't have, you're missing out.
So after getting dropbox installed and set up, open up your DB folder. Copy/Move/Link your webpage folder to your public folder. Now go to dropbox.com and login. Navigate to your page's folder and copy the public URL of the index.htm file. This is it, you can use this URL to view your page.

TIP: It's good to shorten this link using bit.ly or tinyurl.com

Comments

author
Tebangs (author)2016-01-28

If someone need windows 8 key can go site www.vinhugo.com to got. My key got here and after i used is works properly.

author
alexseugling (author)2012-10-18

I forgot to say, but my system has 3 pages Can you change this file and make tile 3, 5 and 7 on first page and 3, 5 and 7 on second page please

author
alexseugling (author)2012-10-18
Crash sorry for my imperfect english and I dont understand anything about codes I just know some little html I just understood I have to change something inside script.js inside lib folder

Can you change this file and make tile 3, 5 and 7 open in new tab window for me plese I beg you.

bellow is my script.js and tell me if I need to change anything inside source.js ok!

Thanx alot :)


/*
(c) 2011 Lubomir Krupa, CC BY-ND 3.0
*/

$(document).ready(function(){
var num = numberOfScreens;

for(var i=1;i<=num;i++){
$('#name'+i).html(blockName[i]);
}


if(hoverEffect){
for(i=1;i<=num;i++){
$('').appendTo('head');
};
};

if(searchEngine=='google'){
search='http://www.google.com/search';
}
else if(searchEngine=='bing'){
search='http://www.bing.com/search';
}
else if(searchEngine=='yahoo'){
search='http://search.yahoo.com/bin/search';
}
else{
search='http://www.google.com/search';
searchEngine='google';
};

$('form').attr('action',search);
$('input:text').css('background','#fff url(lib/'+searchEngine+'-back.png) center right no-repeat');

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor((windowWidth - 975)/2);
var left2 = left1 - 1045;
var left3 = left1 - 2090;
var wrapperTop = Math.floor((windowHeight - 480)/2)-80;

$('#place').css({'left':left1,'top':wrapperTop});
var wrapperPos = 1;
$('#wrapper1 input:text').focus();
var animDone = true;

function anim1to2(){
$('#wrapper1 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2,
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button2to1').show();
if(num>2){
$('#button2to3').show();
$('#button3to2').hide();
};
};

function anim2to1(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left1
},1000,'circEaseOut',function() {
$('#wrapper1 input:text').focus();
animDone = true;
wrapperPos = 1;
});
$('#button1to2').show();
$('#button2to1').hide();
if(num>2){
$('#button2to3').hide();
$('#button3to2').hide();
};
};

function anim2to3(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left3
},1000,'circEaseOut',function() {
$('#wrapper3 input:text').focus();
animDone = true;
wrapperPos = 3;
});
$('#button1to2').hide();
$('#button3to2').show();
$('#button2to1').hide();
$('#button2to3').hide();
};

function anim3to2(){
$('#wrapper3 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button3to2').hide();
$('#button2to1').show();
$('#button2to3').show();
};

if(num>1){
$('#button1to2').click(function(){
anim1to2();
});

$('#button2to1').click(function(){
anim2to1();
});

if(num>2){
$('#button2to3').click(function(){
anim2to3();
});

$('#button3to2').click(function(){
anim3to2();
});
};
};

$(document).bind('keydown',function(event){
if(event.keyCode == '39' || event.keyCode == '37'){
event.preventDefault();
}
if(event.which=='39' && animDone){

if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
if(event.which=='37' && animDone){

if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
};
});

$(document).mousewheel(function(event, delta) {
if (delta > 0 && animDone){
if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
}
else if (delta < 0 && animDone){
if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
event.preventDefault();
});

var j=0;
for (j=0; j <= (num-1); j++) {
for(i=0;i<=11;i++){
var title = bookmark[j][i]['title'];
var url = bookmark[j][i]['url'];
var thumb = bookmark[j][i]['thumb'];
if(thumb==''){
$('#thumb'+(j+1)+'-'+(i+1)).html('
'+title+'
');
}
else{
$('#thumb'+(j+1)+'-'+(i+1)).html('');
}
};
};

$('#search-engine1').click(function() {
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff');
});

$('#google1').click(function() {
$('#wrapper1 form').attr('action','http://www.google.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#bing1').click(function() {
$('#wrapper1 form').attr('action','http://www.bing.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#yahoo1').click(function() {
$('#wrapper1 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#wikipedia1').click(function() {
$('#wrapper1 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper1 input:first').attr('name','search');
$('').appendTo('#wrapper1 form');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper1 input:text').focus();
});

if(num>1){
$('#search-engine2').click(function() {
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff');
});

$('#google2').click(function() {
$('#wrapper2 form').attr('action','http://www.google.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#bing2').click(function() {
$('#wrapper2 form').attr('action','http://www.bing.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#yahoo2').click(function() {
$('#wrapper2 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#wikipedia2').click(function() {
$('#wrapper2 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper2 input:first').attr('name','search');
$('').appendTo('#wrapper2 form');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper2 input:text').focus();
});
};

if(num>2){
$('#search-engine3').click(function() {
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff');
});

$('#google3').click(function() {
$('#wrapper3 form').attr('action','http://www.google.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#bing3').click(function() {
$('#wrapper3 form').attr('action','http://www.bing.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#yahoo3').click(function() {
$('#wrapper3 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#wikipedia3').click(function() {
$('#wrapper3 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('input:first').attr('name','search');
$('').appendTo('#wrapper3 form');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper3 input:text').focus();
});
};

if(num<3){
$('#name3').detach();
$('#wrapper3').detach();
$('#button2to3').detach();
$('#button3to2').detach();
};

if(num<2){
$('#name2').detach();
$('#wrapper2').detach();
$('#button1to2').detach();
$('#button2to1').detach();
};

});

author
alexseugling (author)2012-10-17

The script works fine but how to make some tiles open in new windows like target="_blank" not all of them just some tiles. Please help me guys.

author
crash770 (author)alexseugling2012-10-17

You have to add some more logic to the script.

Open script.js (in the lib folder)
Add this to the for loop after the var statements:
if(i==0) {
   $('#thumb'+(i+1)).html('<a href="'+url+'" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="thumbs/'+thumb+'" /></a>');
   }
  else {
  $('#thumb'+(i+1)).html('<a href="'+url+'"><img src="thumbs/'+thumb+'" /></a>');
  }

(Now, I don't know if you're like me, and don't know JS, but I'll try to explain what happens, as I'm just applying python skills to it.)

to make a link open in the new window, get the bookmark # (in the [] of the source.js, and put it in the test condition of the if loop (line 6, "if (i==0) {", replace the "0" with the bookmark #.

to add more than one, copy and paste the if statement (lines 6-8) between the first if and the else.

add "else " before the if you just pasted.


So your script.js will look something like this:

$(document).ready(function(){
for(i=0; i<bookmarks.length; i++) {
  var title = bookmarks[i][0];
  var url = bookmarks[i][1];
  var thumb = bookmarks[i][2];
  if(i==0) {
   $('#thumb'+(i+1)).html('<a href="'+url+'" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="thumbs/'+thumb+'" /></a>');
   }
  else if(i==3) {
   $('#thumb'+(i+1)).html('<a href="'+url+'" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"><img src="thumbs/'+thumb+'" /></a>');
   }
  else {
  $('#thumb'+(i+1)).html('<a href="'+url+'"><img src="thumbs/'+thumb+'" /></a>');
  }
}

});

author
alexseugling (author)crash7702012-10-18
Crash sorry for my imperfect english and I dont understand anything about codes I just know some little html I just understood I have to change something inside script.js inside lib folder

Can you change this file and make tile 3, 5 and 7 open in new tab window for me plese I beg you.

bellow is my script.js and tell me if I need to change anything inside source.js ok!

Thanx alot :)


/*
(c) 2011 Lubomir Krupa, CC BY-ND 3.0
*/

$(document).ready(function(){
var num = numberOfScreens;

for(var i=1;i<=num;i++){
$('#name'+i).html(blockName[i]);
}


if(hoverEffect){
for(i=1;i<=num;i++){
$('').appendTo('head');
};
};

if(searchEngine=='google'){
search='http://www.google.com/search';
}
else if(searchEngine=='bing'){
search='http://www.bing.com/search';
}
else if(searchEngine=='yahoo'){
search='http://search.yahoo.com/bin/search';
}
else{
search='http://www.google.com/search';
searchEngine='google';
};

$('form').attr('action',search);
$('input:text').css('background','#fff url(lib/'+searchEngine+'-back.png) center right no-repeat');

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor((windowWidth - 975)/2);
var left2 = left1 - 1045;
var left3 = left1 - 2090;
var wrapperTop = Math.floor((windowHeight - 480)/2)-80;

$('#place').css({'left':left1,'top':wrapperTop});
var wrapperPos = 1;
$('#wrapper1 input:text').focus();
var animDone = true;

function anim1to2(){
$('#wrapper1 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2,
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button2to1').show();
if(num>2){
$('#button2to3').show();
$('#button3to2').hide();
};
};

function anim2to1(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left1
},1000,'circEaseOut',function() {
$('#wrapper1 input:text').focus();
animDone = true;
wrapperPos = 1;
});
$('#button1to2').show();
$('#button2to1').hide();
if(num>2){
$('#button2to3').hide();
$('#button3to2').hide();
};
};

function anim2to3(){
$('#wrapper2 input:text').focusout();
animDone = false;
$('#place').animate({
left: left3
},1000,'circEaseOut',function() {
$('#wrapper3 input:text').focus();
animDone = true;
wrapperPos = 3;
});
$('#button1to2').hide();
$('#button3to2').show();
$('#button2to1').hide();
$('#button2to3').hide();
};

function anim3to2(){
$('#wrapper3 input:text').focusout();
animDone = false;
$('#place').animate({
left: left2
},1000,'circEaseOut',function() {
$('#wrapper2 input:text').focus();
animDone = true;
wrapperPos = 2;
});
$('#button1to2').hide();
$('#button3to2').hide();
$('#button2to1').show();
$('#button2to3').show();
};

if(num>1){
$('#button1to2').click(function(){
anim1to2();
});

$('#button2to1').click(function(){
anim2to1();
});

if(num>2){
$('#button2to3').click(function(){
anim2to3();
});

$('#button3to2').click(function(){
anim3to2();
});
};
};

$(document).bind('keydown',function(event){
if(event.keyCode == '39' || event.keyCode == '37'){
event.preventDefault();
}
if(event.which=='39' && animDone){

if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
if(event.which=='37' && animDone){

if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
};
});

$(document).mousewheel(function(event, delta) {
if (delta > 0 && animDone){
if(wrapperPos==3){
anim3to2();
};
if(wrapperPos==2){
anim2to1();
};
}
else if (delta < 0 && animDone){
if(wrapperPos==1 && num>1){
anim1to2();
};
if(wrapperPos==2 && num>2){
anim2to3();
};
};
event.preventDefault();
});

var j=0;
for (j=0; j <= (num-1); j++) {
for(i=0;i<=11;i++){
var title = bookmark[j][i]['title'];
var url = bookmark[j][i]['url'];
var thumb = bookmark[j][i]['thumb'];
if(thumb==''){
$('#thumb'+(j+1)+'-'+(i+1)).html('
'+title+'
');
}
else{
$('#thumb'+(j+1)+'-'+(i+1)).html('');
}
};
};

$('#search-engine1').click(function() {
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff');
});

$('#google1').click(function() {
$('#wrapper1 form').attr('action','http://www.google.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#bing1').click(function() {
$('#wrapper1 form').attr('action','http://www.bing.com/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#yahoo1').click(function() {
$('#wrapper1 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper1 input:hidden').detach();
$('#wrapper1 input:first').attr('name','q');
$('#wrapper1 input:text').focus();
});

$('#wikipedia1').click(function() {
$('#wrapper1 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper1 input:first').attr('name','search');
$('').appendTo('#wrapper1 form');
$('#engines1').fadeToggle('fast','circEaseOut');
$('#wrapper1 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper1 input:text').focus();
});

if(num>1){
$('#search-engine2').click(function() {
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff');
});

$('#google2').click(function() {
$('#wrapper2 form').attr('action','http://www.google.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#bing2').click(function() {
$('#wrapper2 form').attr('action','http://www.bing.com/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#yahoo2').click(function() {
$('#wrapper2 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper2 input:hidden').detach();
$('#wrapper2 input:first').attr('name','q');
$('#wrapper2 input:text').focus();
});

$('#wikipedia2').click(function() {
$('#wrapper2 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('#wrapper2 input:first').attr('name','search');
$('').appendTo('#wrapper2 form');
$('#engines2').fadeToggle('fast','circEaseOut');
$('#wrapper2 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper2 input:text').focus();
});
};

if(num>2){
$('#search-engine3').click(function() {
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff');
});

$('#google3').click(function() {
$('#wrapper3 form').attr('action','http://www.google.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/google-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#bing3').click(function() {
$('#wrapper3 form').attr('action','http://www.bing.com/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/bing-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#yahoo3').click(function() {
$('#wrapper3 form').attr('action','http://search.yahoo.com/bin/search');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/yahoo-back.png) center right no-repeat');
$('#wrapper3 input:hidden').detach();
$('#wrapper3 input:first').attr('name','q');
$('#wrapper3 input:text').focus();
});

$('#wikipedia3').click(function() {
$('#wrapper3 form').attr('action','http://www.wikipedia.org/search-redirect.php');
$('input:first').attr('name','search');
$('').appendTo('#wrapper3 form');
$('#engines3').fadeToggle('fast','circEaseOut');
$('#wrapper3 input:text').css('background','#fff url(lib/wikipedia-back.png) center right no-repeat');
$('#wrapper3 input:text').focus();
});
};

if(num<3){
$('#name3').detach();
$('#wrapper3').detach();
$('#button2to3').detach();
$('#button3to2').detach();
};

if(num<2){
$('#name2').detach();
$('#wrapper2').detach();
$('#button1to2').detach();
$('#button2to1').detach();
};

});

author
Tree Hugger (author)2012-03-10

The link to the download for Chrome, Safari, and Opera won't open for me. I have tried it in Internet Explorer and Chrome. I did this with Internet Explorer 9 and it worked really well! I like it :)

author
crash770 (author)Tree Hugger2012-03-10

I'll take a look at it tonight

author
Tree Hugger (author)crash7702012-03-10

I never could get that link to work but the link that was supposed to be for firefox and internet explorer worked for chrome

author
crash770 (author)Tree Hugger2012-03-10

It looks like the Multiupload was taken down during the megaupload crap.

Give me a second and I will update the page, as there is a new version of the source anyways

author
crash770 (author)crash7702012-03-10

Updated.

author
crash770 (author)2011-06-15

Thanks for reminding me of that... I'll add it to the steps!

author
tomuky2k (author)2011-06-15

This is a very good page, I'm going to put mine my public dropbox folder and then I won't have a problem running it locally and I can use the same address from any computer on the web. :-) Thanks for the instructable

About This Instructable

4,199views

6favorites

License:

More by crash770:Quick and Dirty Disk CaseSetting up and editing a Windows 8-like home page for a web browser (Outdated)Two Simple Windows pranks
Add instructable to: