2

I recently stumbled upon this microsite from the Obama campaign:

http://www.barackobama.com/anniversary

Among the many cool features of this site is its dynamic header -- when you resize your browser window smaller, the "OBAMA * BIDEN" logo up top automatically floats to left side of the header and its width gets changed to 36px (thereby "hiding" the "OBAMA BIDEN" text).

How did the developers of this page achieve this effect? Is this javascript/jquery driven, or purely a CSS trick?

Ideas?

Matt R
  • 31
  • 2
  • 4

1 Answers1

1

This question covers the window.resize event. You can do whatever you need in its handler.

Another option is to use media queries that allow you to change applied CSS once the browser window dimension changes (this is what the site you refer to does. It combines the style class changes with animations (use Chrome Developer Tools to see which styles get applied to the logo in both big and small browser dimensions)).

Community
  • 1
  • 1
Alexander Pavlov
  • 29,538
  • 4
  • 63
  • 88