Deviation Actions

k3ttc4r's avatar

startpage.rwrt upd8 2011.04.18

This is not an update!

It's a complete rewrite.

I've been talking about doing a rewrite forever now, and after I noticed this got featured on lifehacker, I finally got to work on this last night. I've borrowed a good bit of *Gocom's Estacado start page (thanks for using my favorite OSS license, btw.), to ensure some decent increases in userfriendliness (to be honest - I just don't feel like answering any more "how do I add more links?" qestions). No need to know HTML or read some of the various comments that used to be in the file to change links! Yayer!

Yeah, so the entire JS code switched from Mootools to jQuery (imo. the superior framework), and it's a lot cleaner and more organized than before (wasn't hard - it was a mess before).

I've removed the download link from here, because - let's face it - dA isn't meant for software distribution, and I don't feel like I have to go through the hassle of trying to make it cooperate.

Short feature list:

  • *new*Unlimited link blocks

  • *new*Unlimited links per block

  • Google search

  • *new*No HTML skills needed to add links

  • jQuery dropdown animations on hover

If you want the new version, get it on github:



  • Fix stylesheet for cross-browser good looks



  • Fix searchbar focus, added setting.


  • Added Google Image search


  • Added config file

  • Added search engines

    • Yahoo

    • Wikipedia



    • flickr

    • deviantART

  • Added setting to enable/disable opening links in new window/tab

Image details
Image size
1268x752px 15.09 KB
© 2008 - 2021 k3ttc4r
Join the community to add your comment. Already a deviant? Log In
Any way to make this work on IE11?   Half the sites i need to link to don't work correctly in Chrome/Firefox (Corp Intranet stuff)  I get no blocks at all, just search boxes with no text in them when I pull the start page up in IE11.  I love this btw, have been using it for a long time.. just started using it for work.  
I was able to figure our most everything I wanted but I got stuck on two things first even though focusSearch=true the omnibar is focused instead. This probably has nothing to do with the html  file but probably something to do with chrome or New Tab Redirect. Second the Chrome:// addresses do not work. I thought maybe I messed something up but I tried your original file and they still don't work. so I am not sure what is up with that. any ideas on these things?
k3ttc4r's avatar
focusSearch is a bit buggy, it really depends on the browser. It does work in Firefox.

As for the chrome:// link, I guess something changed in Chrome. I will take a look at it.
excellent work.
Okay, so I am lost on editing the index.html file.... How can I create my own Headers and also how do I add my own links under each Header. Everytime I try to make changes using the format shown withing the index.html page itself, My links and headers are not coming out how I want them to. It is almost as if there is another setting somewhere (maybe in a css file?) that tells this page that Header one will have two links, header two will have one link, etc etc.

I want to be able to put how ever many links I want under the first header, and then put how ever many links I want under the second header, etc. Using this is provinf to be a pain in my side! Any help would be appreciated!!

-- Paratrooper Joe --
I am having trouble making my own Headers with Sub headers for links. My First Header and sub headers (with two links) works just fine. My next header shows up but the Sub header should contain 3 links but it only shows 1 and it attached the next link to the subheader name. Here is the section of code pertaining to the links...:

****BEGIN CODE****

<html xmlns="[link]" xml:lang="en" lang="en">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/style.css" type="text/css" />

type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="settings.js"></script>

type="text/javascript" src="js/script.js"></script>

<title>Joes Start Page</title>


College Links
[link] || My_Edison
[link] ||

Student Services

[link] || USAA[link] || Chase[link] || Money Network Card

[link] || NG

New Block
[link] || Lol, Wut?

[link] ||
[link] ||


***END CODE****
Okay so the above code is all kings of messed up....I am going to try and repost it to see if it will show up correctly...:

Actually, I am not sure how to post the code on this site properly...any ideas?
I know you comment is like a year old but did you put http:// before each link? maybe try posting the code again and give a screenshot of the page as well.
Orca239's avatar
Hey-o. I love this!

Is there any way to keep links visible instead of the animation-like hiding? It keeps bouncing when I try to navigate to it, and I'm using it to get to links quickly at work.

Orca239's avatar
Scratch that--I figured it out. x_x It was much simpler than I thought it would be.

Thanks again! This is wonderful!
How can I disable the check for //?

If you don't use // in your URL, it;s not a link, but I would like to user callto: and mailto: url's.
I would also like to add callto: and mailto: URL's

The script checks for // and if not, It's not a URL.

How can I disable that?
k3ttc4r's avatar
I guess I can make it run several tests, maybe even configurable through the config file. I'll get back to you once it's done, if you're still interested.
How do you add a picture background? It's in style.css, but I don't know how to do it
background: url(/folder/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

This is for style.css
k3ttc4r's avatar
Change background to use a picture...
ale82to's avatar
why the hell on mac i cannot edit index.html using text edit ??? if edit the index with text edit i loose formatting.............
k3ttc4r's avatar
Prolly because you're using a word processor to edit a plain text file. Use a proper text editor instead.
invisiblestivo's avatar
This is drop-my-pants awesome. I just have one request. I want to point some of the sub-menu links to internal chrome pages (i.e. chrome://bookmarks/#recent) but there's some trouble with the way your js interprets the url. I can half-way trick it by adding http:// before the internal string but it still drops the following colon (chrome://). Could you change the way your js interprets the urls to be more universal? Maybe a special none url character (*) in the syntax before each new url.

Either way I'm definitely using this hence forth. Thanks!
k3ttc4r's avatar
(Hopefully) fixed in ea61ff0. It should now identify everything containing "://" as a URL and create a link.

It creates a "chrome://" link just fine in Firefox, too lazy to install Chromium for testing purposes right now.
Works great. Use new revision on desktop, web book and Android tablet.
Have made some layout changes and added a background picture.
Only problem is I want to add date and clock. Have java clock code that does the job but can not add it to index.html because javascript does not know when to stop reading in headings and urls. Any code I add between body tags is read as a header.
Have looked at your code but need to study jquery to figure out how to exit read at some point so 1 line of code can be added in the body to display the date and clock. Any suggestions?
Thank you for the startpage, great work.
k3ttc4r's avatar
No need to touch the index.html, you can add a clock completely in JS/jQuery: [link]
Had it working yesterday. Just needed to read your code better/closer. Our code is similar, difference is caused by my choice of layout. Thank you for the files and effort. Think about trying jDigiClock for a little animation.
Thank you, great work.
aykayyy47's avatar
how do i make this work on google chrome?
Join the community to add your comment. Already a deviant? Log In