Tag Archives: Hacks

Quick Codes: A new series of post on Complimedia (JS + CSS)

Aside

4

In this new series of post on the Complimedia Blog, I will be finding the best scripts, snippets, tricks, and hacks in the world of web design and posting them for you. You can find the complete series on this page as well.

Today I will be sharing a small javascript that can manipulate css of the containing elements and a super simple fix for web forms.

Lets start with the javascript shall we?

This is a handy little snippet of javascript. I found this script on IE6 No More, a website that is promoting dropping support for IE6 with a small script that can be added to any website. I will improve upon their script in a later tutorial but for now I wanted to share the easy snippet of JS they use to hide the warning.

This tiny onclick event will hide whatever the parent element is(or grandparent, etc…). This has a great many uses but I will leave that up to you to figure out. Lets see the code.

<div>
<a href="#" onclick='javascript:this.parentNode.style.display="none"; return false;' title="Hide this box">Hide Div</a>
</div>

Breaking this down, it is a simple link with an On Click javascript event that will change the parent element’s CSS to display:none which will hide it. Its also worth noting in the above example the only thing that would happen is the Hide Div link would disappear. You can adjust which element to change by adding .parentNode. after the first one so it would be two levels above.

I created a quick demo page with some more uses of this code.

The next bit of CSS is very basic and I use it all the time.

What it does is hides the browser default field focus. You know when you click a text field and a blue outline pops up to show you what your filling out. Well this usually breaks my design so I add this and all is fixed!

textarea, input { outline: 0; }

Before And After

You can see this example at http://lickmytwitter.com

Twitter Weekly Updates for 2009-05-29

Aside

Reply

Apple Safari 4 Beta Review – Hacks, Tips, Mods & More

Aside

6

First off, this was an awesome upgrade from firefox on my mac. Safari 4 public beta is about as revolutionary as when apple first introduced Safari in 2003. As you can see from the official website’s feature page their are over 150+ new features! Most of them are performance or usability tweaks so I’ll only talk about the coolest ones.

One of the coolest is the new top pages feature. It is a lot like Opera & Chrome’s first page. It finds your most visited sites and displays them when you open a new tab. You can “stick” them as well or block pages you don’t want displayed. This is great for people like me who are opening the same pages up over an over again.

My other favorite thing is the coverflow for history and bookmarking. It allows you to visually see the pages so you can find what your looking for out of your history. It makes looking for that page you were on an hour ago a breeze. No more looking through line after line of description tags!

The address bar has been transformed into being more helpful than ever with different categories sectioned off, you can see recent pages you’ve visited, bookmarks, google search all by typing a few letters.

They also started to use a sensible text zoom much like how Firefox does it, increasing the whole page not just the text! This is key to keeping website layouts from breaking and is going to be accepted really well by web designers!

Safari upgraded to the newest version of webkit which supports CSS3 and HTML 5, which are going to be the new standards in my opinion. It passed the ACID2 & ACID3 test with no errors, wow! It has built in RSS, amazing bookmark functionality, auto-fill, developer features.

Safari 4 has a built in developers toolbar you can enable from the preferences. For firebug users like me it has an alternative called Web Inspector. Also their is an option to disable cache on certain pages which will be nice when I am working on a live website.

Now for the fun stuff, these are some command line hacks you can do to Safari 4 Beta to make it more your style. These are all done using the Terminal (Applications -> Utilities -> Terminal) in OSX, not sure if this is even possible on a PC.

To put tabs on back on the bottom:

defaults write com.apple.Safari DebugSafari4TabBarIsOnTop -bool NO

To make links open in a new tab instead of a new window:

defaults write com.apple.Safari TargetedClicksCreateTabs -bool true

To go back to the old toolbar (refresh, blue loading bar, graphite):

defaults write com.apple.Safari DebugSafari4IncludeToolbarRedesign -bool NO

To turn off coverflow in bookmarks & history: (I wouldn’t)

defaults write com.apple.Safari DebugSafari4IncludeFlowViewInBookmarksView -bool NO

To turn off topsites in new windows & tabs: (Again, I wouldn’t)

defaults write com.apple.Safari DebugSafari4IncludeTopSites -bool NO

Turn off the dimming of topsites switch to a website with a current one: (…..)

defaults write com.apple.Safari DebugSafari4TopSitesZoomToPageAnimationDimsSnapshot -bool NO

If you want an easier way to change the settings here it is:

Go to your Applications folder, right-click Safari app and click “Show package content”. Go to Contents -> Resources -> English.lproj and replace MainMenu.nib with the same file from this archive. That will modify your Safari menu to show new options.

Restart Safari and you should see a new menu “Safari > Tweaks”

Safari 4 Hidden menu tweaks

Safari 4 Web Inspector - Firebug alternative

safari-topsites

safari-topsites