46

Solving Common Client Requets with jQuery

Embed Size (px)

DESCRIPTION

As the go-to "web guy" at a small web design agency I've had to employ some techniques to keep it easier for me to maintain lots of sites. One of those is using jQuery on all sites so I can always count on that to help solve client requests, if needed. This covers five requests and how I attempted to handle it.

Citation preview

Page 1: Solving Common Client Requets with jQuery
Page 2: Solving Common Client Requets with jQuery
Page 3: Solving Common Client Requets with jQuery

Hey Chris,

Can we change the text “Add a coupon:” to “Enter voucher code:”

Also, can the box to enter that code be shown by default?

- Fake Client

Page 4: Solving Common Client Requets with jQuery
Page 5: Solving Common Client Requets with jQuery
Page 6: Solving Common Client Requets with jQuery
Page 7: Solving Common Client Requets with jQuery
Page 8: Solving Common Client Requets with jQuery
Page 9: Solving Common Client Requets with jQuery

Change Text

Display

Page 10: Solving Common Client Requets with jQuery
Page 11: Solving Common Client Requets with jQuery

• Find out a year later...FoxyCart totally does allow you to

change language

• Don’t have markup control / Can use jQuery

• Fairly rare... Third party services, Huge applications - Separation between

designers and developers

Page 12: Solving Common Client Requets with jQuery
Page 13: Solving Common Client Requets with jQuery

Hey Chris,

Can we add this text right below the dropdown for the shipping choice?

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Thanks!

- Fake Client

Page 14: Solving Common Client Requets with jQuery

Before

Page 15: Solving Common Client Requets with jQuery

Friday at 4:52pm

Page 16: Solving Common Client Requets with jQuery

Monday at 9:08am

Page 17: Solving Common Client Requets with jQuery

Monday at 1:20pm

Page 18: Solving Common Client Requets with jQuery

Monday at 1:20pm

Page 19: Solving Common Client Requets with jQuery
Page 20: Solving Common Client Requets with jQuery
Page 21: Solving Common Client Requets with jQuery

• jQuery: Pop-up box, .load() content

• What are they really asking for?

• What do the users need?

• Enough content to warrant a special page?

Page 22: Solving Common Client Requets with jQuery
Page 23: Solving Common Client Requets with jQuery

• What are they really asking for?

• Enough content to warrant a special page?

• What do the users need?

• jQuery: Pop-up box, .load() content

• Traditional Ways: Frames, Separate Windows, Flash

• The browser window can’t reload

• Low content site = simulate Flash

• High content site = AJAX load pages

Hey Chris,

We would like to show our latest “tweet” from Twitter on our website. Can you do this!?- Fake Client

Page 24: Solving Common Client Requets with jQuery
Page 25: Solving Common Client Requets with jQuery
Page 26: Solving Common Client Requets with jQuery
Page 27: Solving Common Client Requets with jQuery
Page 28: Solving Common Client Requets with jQuery
Page 29: Solving Common Client Requets with jQuery

• “Tweetify” (or @Anywhere)

• Top priority: it doesn’t affect the normal page load time.

(You don’t want to rely on the Twitter API for your site to load)

• Only append (entire area)to page upon success

• Only showing non-replies

Page 30: Solving Common Client Requets with jQuery
Page 31: Solving Common Client Requets with jQuery

Hey Chris,

One of the things we want for our new site is a music player. The music should continue playing when they click to go to other pages.- Fake Client

Page 32: Solving Common Client Requets with jQuery

• Small site = content on one page, animateLarge site = AJAX load other pages

• Music will stop on a page load,there is no way around it.

• Solution: do not reload the page

• Bad solutions: Frames, Flash, Pop-up Windows

Page 33: Solving Common Client Requets with jQuery
Page 34: Solving Common Client Requets with jQuery
Page 35: Solving Common Client Requets with jQuery

Reset Stuff

Truncated Shows

Quick Plugin,reduced repeated code

Hash tag links

Page 36: Solving Common Client Requets with jQuery
Page 37: Solving Common Client Requets with jQuery
Page 38: Solving Common Client Requets with jQuery

Internal Links

Fade out old

Load and fadein new

Hash tags

Page 39: Solving Common Client Requets with jQuery
Page 40: Solving Common Client Requets with jQuery

Hey Chris,

Can we put the category navigation from the store part of the site on the homepage of the site?- Fake Client

Page 41: Solving Common Client Requets with jQuery
Page 42: Solving Common Client Requets with jQuery

$(function() {

$("#dropdown-bar").load("/store #dropdown-bar");

$("#blog-promo span").load("/blog .post:first h2");

});

Page 43: Solving Common Client Requets with jQuery

• AJAX .load() just parts

• The best way would probably beserver side

• Store is a different CMS than home =(

Page 44: Solving Common Client Requets with jQuery

BONUSWe need a new

form on our website,can you help?

Page 45: Solving Common Client Requets with jQuery
Page 46: Solving Common Client Requets with jQuery

Thanks!