9 replies [Last post]
ajcourtney
ajcourtney's picture
Offline
newbie
Last seen: 9 years 41 weeks ago
Timezone: GMT-6
Joined: 2010-12-10
Posts: 1
Points: 2

Greetings, I've spent the last 15 years developing for the financial services sector using a proprietary portfolio management software platform. I'm one in about 100 people in the country who can code in it. However, I am a rank amateur when it comes to php & css. Over the past month, I've tried to teach myself the basics while bringing up a new site for a new venture.

Basically, I'd like to know what Sony used to create this horizontal nav bar because I want to use the same thing:

http://pro.sony.com/bbsc/video/videon.do

I want to do at my site what Sony did with "Channels" and "Collections" esp. how it pushes the inner page content down when the secondary nav bar expands into the page. And, equally as important, how Channels & Collections expand the secondary nav bars instead of link to their respective pages (which there probably aren't any).

Any ideas or recommended places to start?

Tags:
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

jQuery misuse

Look in <script type="text/javascript" src="/bbsccms/app/vc/pdk/community/js/jquery-1.2.3.pack.js"></script> for a function that applies an onclick event handler to the list items. The called function should either change a class token, or revalue a style property. It will also call a timing function to make it all seem smooth.

This is an example of a coder who doesn't really grok the purpose of a library. WTF reason is there for 400+kB of jQuery library when I doubt they're using more than a hundred lines of code?

Please note that menu items with drop-downs are unavailable if js is disabled. That's a no-no.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

There's a lot of js in that

There's a lot of js in that page and most of the inline scripts don't appear to be using jQuery, but it is being used to load by AJAX all of the info that pops up over videos when you hover over them and is probably used for the big feature slider too, so I would say that's quite a bit of key functionality on the page, which seems to me perfectly legitimate to use a library like jQuery for.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

But half a megabyte? Gimme a

But half a megabyte? Gimme a break.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Where's the half a megabyte

Where's the half a megabyte come from?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Here?

	Documents (1 file)	49 KB
	http://pro.sony.com/bbsc/video/videon.do	49 KB
	Images (17 files)	222 KB
	http://pro.sony.com/bbsccms/videopromos/300x371/promo_videonsubmissions_300x371.jpg	57 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/push2_141x79.jpg	14 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_paragon_141x79.jpg	12 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_product_intro_141x79.jpg	12 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/one_august_day_141x79.jpg	12 KB
	http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonnxcam35mm_286x147.jpg	12 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hxrnx5u_wedding_clips_141x79.jpg	12 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/dwx_digital_wireless_mic_systems_141x79.jpg	12 KB
	http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonswitchersmpe200_286x147.jpg	11 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_chuck_fishbein_review_141x79.jpg	11 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/mpe200_camera_stitching2_141x79.jpg	11 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hugo_4k_roadmap_hdworld2010_141x79.jpg	11 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/workflow_xdcamex_fcp_2010_141x79.jpg	10 KB
	http://pro.sony.com/bbsccms/videopromos/286x147/tout_videon_franciskenny1_286x147.jpg	10 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/nxcam_bkpro_teaser_141x79.jpg	8 KB
	http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_trailer_141x79.jpg	8 KB
	http://pro.sony.com/bbsccms/app/vc/images/blank.gif	49 bytes
	Objects (0 files)	
	Scripts (21 files)	419 KB
	http://pro.sony.com/bbsccms/app/vc/js/jquery.qtip-1.0.0-rc3.js	84 KB
	http://pro.sony.com/bbsccms/app/vc/js/jquery-1.3.2.min.js	56 KB
	http://pro.sony.com/bbsccms/app/js/s_code.js	44 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/js/util.js	37 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/comments.js	32 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/jquery-1.2.3.pack.js	29 KB
	http://pro.sony.com/bbsccms/app/vc/js/SonyPlayerAPI.js	22 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityManager.js	22 KB
	http://pro.sony.com/bbsccms/app/vc/js/common.js	22 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/rating.js	13 KB
	http://pro.sony.com/bbsccms/app/vc/js/dynamicDataLoad.js	13 KB
	http://pro.sony.com/bbsccms/app/vc/js/vcutils.js	12 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/js/swfobject.js	9 KB
	http://pro.sony.com/bbsccms/app/vc/js/jScrollPane-1.2.3.min.js	6 KB
	http://pro.sony.com/bbsccms/app/vc/js/jquery.rating.js	4 KB
	http://pro.sony.com/bbsccms/app/vc/js/jquery.truncate-2.3.js	4 KB
	http://pro.sony.com/bbsccms/app/vc/js/formValidation.js	4 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityWidgetManager.js	3 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/js/serviceConfig.js	2 KB
	http://pro.sony.com/bbsccms/app/vc/js/jquery.fitToWidth.js	2 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/js/sonyAddComment.js	803 bytes
	Style Sheets (4 files)	38 KB
	http://pro.sony.com/bbsccms/app/vc/css/style.css	23 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/css/communityManager.css	9 KB
	http://pro.sony.com/bbsccms/app/vc/pdk/community/css/colors_sony.css	5 KB
	http://pro.sony.com/bbsccms/app/vc/css/maxCharacters.css	707 bytes
	Total	728 KB
OK, so I exaggerated a little. It's still 419kB worth of js scripts. Can I say "gimme a break," now? Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You said 400+kb of jQuery

You said 400+kb of jQuery library; the library isn't 400kb, it's only 56kb and I thought you were arguing against including it because it wasn't actually being used for much on the page, e.g. it was only there for a dropdown. If you meant jquery misuse in terms of there being too much js altogether, then I agree with you, but if you meant it in terms of including jquery was unnecessary for the amount of functionality it was being used for, then I disagree.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

T, I count 177kB of files

T, I count 177kB of files with jQuery in their names. Granted, I'm projecting the overall misuse of js onto jQuery, and I don't know what each of those files does, but that's way too much js, period. The purpose of a library is provide for reuse of code. When parts of the library are not used at all, they should be removed, else they're just cruft.

I wasn't able to find any user benefit that would justify all the code, AJAX or no. That the site does not work without js is proof enough of misuse. Without js you can't navigate the site, and there's no good reason for the breakage except misuse. Likewise, the Flash is broken without js; again there's no excuse.

The Beemer is a nice car, but when it's being used to run down nuns in the crosswalk, you have to say something. The site in question has every appearance of a nun-hunting Beemer.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

gary.turner wrote: Documents

gary.turner wrote:

	Documents (1 file)	49 KB
	<a href="http://pro.sony.com/bbsc/video/videon.do" rel="nofollow">http://pro.sony.com/bbsc/video/videon.do</a>	49 KB
	Images (17 files)	222 KB
	<a href="http://pro.sony.com/bbsccms/videopromos/300x371/promo_videonsubmissions_300x371.jpg" rel="nofollow">http://pro.sony.com/bbsccms/videopromos/300x371/promo_videonsubmissions_300x371.jpg</a>	57 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/push2_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/push2_141x79.jpg</a>	14 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_paragon_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_paragon_141x79.jpg</a>	12 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_product_intro_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_product_intro_141x79.jpg</a>	12 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/one_august_day_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/one_august_day_141x79.jpg</a>	12 KB
	<a href="http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonnxcam35mm_286x147.jpg" rel="nofollow">http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonnxcam35mm_286x147.jpg</a>	12 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hxrnx5u_wedding_clips_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hxrnx5u_wedding_clips_141x79.jpg</a>	12 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/dwx_digital_wireless_mic_systems_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/dwx_digital_wireless_mic_systems_141x79.jpg</a>	12 KB
	<a href="http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonswitchersmpe200_286x147.jpg" rel="nofollow">http://pro.sony.com/bbsccms/videopromos/286x147/tout_videonswitchersmpe200_286x147.jpg</a>	11 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_chuck_fishbein_review_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/pmw500_chuck_fishbein_review_141x79.jpg</a>	11 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/mpe200_camera_stitching2_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/mpe200_camera_stitching2_141x79.jpg</a>	11 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hugo_4k_roadmap_hdworld2010_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/hugo_4k_roadmap_hdworld2010_141x79.jpg</a>	11 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/workflow_xdcamex_fcp_2010_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/workflow_xdcamex_fcp_2010_141x79.jpg</a>	10 KB
	<a href="http://pro.sony.com/bbsccms/videopromos/286x147/tout_videon_franciskenny1_286x147.jpg" rel="nofollow">http://pro.sony.com/bbsccms/videopromos/286x147/tout_videon_franciskenny1_286x147.jpg</a>	10 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/nxcam_bkpro_teaser_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/nxcam_bkpro_teaser_141x79.jpg</a>	8 KB
	<a href="http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_trailer_141x79.jpg" rel="nofollow">http://pro.sony.com.edgesuite.net/tp/thumbnails/Sony_Electronics_Production_-_BBSC/digital_cinema_trailer_141x79.jpg</a>	8 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/images/blank.gif" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/images/blank.gif</a>	49 bytes
	Objects (0 files)	
	<span style="color:red">Scripts (21 files)	419 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jquery.qtip-1.0.0-rc3.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jquery.qtip-1.0.0-rc3.js</a>	84 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jquery-1.3.2.min.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jquery-1.3.2.min.js</a>	56 KB
	<a href="http://pro.sony.com/bbsccms/app/js/s_code.js" rel="nofollow">http://pro.sony.com/bbsccms/app/js/s_code.js</a>	44 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/js/util.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/js/util.js</a>	37 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/comments.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/comments.js</a>	32 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/jquery-1.2.3.pack.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/jquery-1.2.3.pack.js</a>	29 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/SonyPlayerAPI.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/SonyPlayerAPI.js</a>	22 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityManager.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityManager.js</a>	22 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/common.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/common.js</a>	22 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/rating.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/rating.js</a>	13 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/dynamicDataLoad.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/dynamicDataLoad.js</a>	13 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/vcutils.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/vcutils.js</a>	12 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/js/swfobject.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/js/swfobject.js</a>	9 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jScrollPane-1.2.3.min.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jScrollPane-1.2.3.min.js</a>	6 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jquery.rating.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jquery.rating.js</a>	4 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jquery.truncate-2.3.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jquery.truncate-2.3.js</a>	4 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/formValidation.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/formValidation.js</a>	4 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityWidgetManager.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/communityWidgetManager.js</a>	3 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/js/serviceConfig.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/js/serviceConfig.js</a>	2 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/js/jquery.fitToWidth.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/js/jquery.fitToWidth.js</a>	2 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/js/sonyAddComment.js" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/js/sonyAddComment.js</a>	803 bytes</span>
	Style Sheets (4 files)	38 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/css/style.css" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/css/style.css</a>	23 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/css/communityManager.css" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/css/communityManager.css</a>	9 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/pdk/community/css/colors_sony.css" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/pdk/community/css/colors_sony.css</a>	5 KB
	<a href="http://pro.sony.com/bbsccms/app/vc/css/maxCharacters.css" rel="nofollow">http://pro.sony.com/bbsccms/app/vc/css/maxCharacters.css</a>	707 bytes
	Total	728 KB
OK, so I exaggerated a little. It's still 419kB worth of js scripts. Can I say "gimme a break," now? Wink

cheers,

gary

Ooh, what do you use to get that report? Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Web developer see information

Web developer see information - view document size.

Handy, no?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.