Jump to content

.London Domains - £4
Photo

The Harvard CS50 website - How'd they do it?

javascript homebrew css css help how to

  • Please log in to reply
6 replies to this topic

#1 syeef

syeef
  • Member
  • Newbie
  • 3 posts

Posted 07 January 2014 - 02:38

Hello WDF,

 

Firstly loving this forum, hopefully you'll see soon more of me on other posts. But the community vibe here seems welcoming!

 

So i stumbled upon the Harvard CS50 website - (aside great actual content on there!) and I was wondering how they managed to do the effect with the panes? I'm assuming it's some sort of javascript but I can't figure out what they could have used! Anyone one of any that can produce a similar effect?

 

Link to the website: https://cs50.harvard.edu/

Link to the minifed js: https://cs50.harvard...time=1389052046

Link to a tool to view the above link: http://jsbeautifier.org/

 

Cheers all!


  • 0

#2 Renaissance-Design

Renaissance-Design
  • Overlord
  • Code Poet
  • 1,583 posts

Posted 07 January 2014 - 02:40

Hey syeef, welcome aboard.


  • 0

Chris Cox is a freelance web designer & developer based in Bridgend, South Wales. You should definitely follow @RenaissDesign on Twitter.

Was this post helpful? Buy me a beer.


#3 Eoin

Eoin
  • Member
  • Newbie
  • 27 posts

Posted 07 January 2014 - 11:19

Hi and welcome to the forum!

 

It's a classy looking site, but unless I'm missing something (it has been known) I think you might be over-complicating how the effect is created. The panes are largely straight up HTML + CSS. There are 3 horizontal rows, one above another, with the class of "block-row", which have a height set in CSS to 33%. Inside each "block-row" there are 3 divs of the class "block", which have their widths set to 33%. The pane content is centred horizontally and vertically by putting a single table data cell (<td>) into an HTML table which is set by CSS to take up 100% width+height of the "block" it is in; and then by using the CSS styles of "text-align: center;" and "vertical-align: middle;" to keep the content centered regardless of the size of the block.

 

Javascript plays a supporting role, as it is being used to dynamically re-size some of the elements inside of the "blocks" (panes), but the vast majority of the stuff on the panes don't require any Javascript. Most of the scripts on the page are concerned with the left hand menu bar and the stuff it spaffs out.

 

Eoin


  • 1

#4 syeef

syeef
  • Member
  • Newbie
  • 3 posts

Posted 07 January 2014 - 12:55

Hi and welcome to the forum!

 

It's a classy looking site, but unless I'm missing something (it has been known) I think you might be over-complicating how the effect is created. The panes are largely straight up HTML + CSS. There are 3 horizontal rows, one above another, with the class of "block-row", which have a height set in CSS to 33%. Inside each "block-row" there are 3 divs of the class "block", which have their widths set to 33%. The pane content is centred horizontally and vertically by putting a single table data cell (<td>) into an HTML table which is set by CSS to take up 100% width+height of the "block" it is in; and then by using the CSS styles of "text-align: center;" and "vertical-align: middle;" to keep the content centered regardless of the size of the block.

 

Javascript plays a supporting role, as it is being used to dynamically re-size some of the elements inside of the "blocks" (panes), but the vast majority of the stuff on the panes don't require any Javascript. Most of the scripts on the page are concerned with the left hand menu bar and the stuff it spaffs out.

 

Eoin

 

Hey guys thanks for the replies!

 

I was speaking more about the actual navigation on the side and the stuff that it spits out. Was wondering if anyone new of a similar method to recreate this effect

 

Cheers!


  • 0

#5 TheLonelyPixel

TheLonelyPixel
  • Sweetcheeks
  • Princess Peach
  • 861 posts

Posted 07 January 2014 - 13:52

You could probably recreate this using css3 keyframe animation, try the flip in Y and flip out Y examples on the site below

 

https://daneden.me/animate/


  • 1
The Lonely Pixel - Freelance Web Designer

#6 Jheg

Jheg
  • Overlord
  • Mandard Stember
  • 1,632 posts

Posted 07 January 2014 - 21:03

Welcome to the forum syeef!


  • 0

Learning Ruby http://jheg.github.io/

ToDo App - www.gottodo.co.uk


#7 absurdity69

absurdity69
  • Member
  • Newbie
  • 7 posts

Posted 06 January 2015 - 21:24

You could probably recreate this using css3 keyframe animation, try the flip in Y and flip out Y examples on the site below

 

https://daneden.me/animate/

 

Thank you LonelyPixel, does anyone else know any other suggested approaches?


  • 0





Also tagged with one or more of these keywords: javascript, homebrew css, css, help, how to

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users