Permalink
Browse files

Hook up mobile styling.

  • Loading branch information...
1 parent e497120 commit d210e66da1f3dba6b72d433e6706902c94f9ee65 @mrsweaters mrsweaters committed Aug 21, 2012
Showing with 273 additions and 10 deletions.
  1. +1 −1 README.markdown
  2. +50 −7 jquery.joyride-2.0.js
  3. +222 −2 modernizr.mq.js
View
@@ -3,7 +3,7 @@ Welcome to Joyride
Joyride is an easy to configure jQuery site tour wizard.
-Homepage: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
+Installation Guide: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
Joyride is MIT-licensed and absolutely free to use.
View
@@ -15,7 +15,7 @@
'tipLocation' : 'bottom', // 'top' or 'bottom' in relation to parent
'nubPosition' : 'auto', // override on a per tooltip bases
'scrollSpeed' : 300, // Page scrolling speed in milliseconds
- 'timer' : 5000, // 0 = no timer , all other numbers = timer in milliseconds
+ 'timer' : 0, // 0 = no timer , all other numbers = timer in milliseconds
'startTimerOnClick' : true, // true or false - true requires clicking the first button start the timer
'nextButton' : true, // true or false to control whether a next button is used
'tipAnimation' : 'fade', // 'pop' or 'fade' in each tip
@@ -174,8 +174,11 @@
// scroll and position tooltip
methods.scroll_to();
- // TODO: split into .pos_phone() and .pos_default()
- methods.position(tipSettings);
+ if (methods.is_phone()) {
+ methods.pos_phone(tipSettings);
+ } else {
+ methods.pos_default(tipSettings);
+ }
if (settings.tipAnimation === "pop") {
@@ -226,6 +229,15 @@
},
+ // detect phones with mediaqueries if supported.
+ is_phone : function () {
+ if (Modernizr) {
+ return Modernizr.mq('only screen and (max-width: 768px)');
+ } else {
+ return ($(window).width() < 769) ? true : false;
+ }
+ },
+
hide : function () {
// add animate out support here
settings.$current_tip.hide();
@@ -275,14 +287,17 @@
},
// TODO: add a destroy method
- //
+ destroy : function () {
+ // remove events
+ // remove tooltips
+ },
/* .position()
does all of the positioning heavy lifting;
mobile and desktop, may want to break them
out into their own methods to provide clarity
*/
- position : function (tipSettings) {
+ pos_default : function (tipSettings) {
var half_fold = Math.ceil($(window).height() / 2),
tip_position = settings.$next_tip.offset(),
$nub = $('.joyride-nub', settings.$next_tip),
@@ -294,7 +309,6 @@
if (settings.$target.selector !== 'body') {
- // TODO: add mobile positioning
// TODO: Refine left and right positioning
if (methods.bottom(tipSettings)) {
@@ -342,7 +356,7 @@
settings.attempts++;
- methods.position(tipSettings);
+ methods.pos_default(tipSettings);
}
@@ -364,6 +378,35 @@
},
+ pos_phone : function (tipSettings) {
+ var tip_height = settings.$next_tip.outerHeight(),
+ tip_offset = settings.$next_tip.offset(),
+ target_height = settings.$target.outerHeight(),
+ $nub = $('.joyride-nub', settings.$next_tip),
+ nub_height = Math.ceil($nub.outerHeight() / 2);
+
+
+ console.log(target_height);
+
+ $nub.removeClass('bottom')
+ .removeClass('top')
+ .removeClass('right')
+ .removeClass('left');
+
+ if (methods.top(tipSettings)) {
+
+ settings.$next_tip.offset({top: settings.$target.offset().top - tip_height - (nub_height*2) + target_height});
+ $nub.addClass('bottom');
+
+ } else {
+
+ // Default is bottom alignment.
+ settings.$next_tip.offset({top: settings.$target.offset().top + target_height + nub_height});
+ $nub.addClass('top');
+
+ }
+ },
+
bottom : function (tipSettings) {
return (tipSettings.tipLocation === "bottom");
},
View
@@ -1,4 +1,224 @@
-/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
+/* Modernizr 2.6.1 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-mq-teststyles
*/
-;window.Modernizr=function(a,b,c){function v(a){i.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r=function(a,c,d,e){var h,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),k.appendChild(j);return h=["&#173;","<style>",a,"</style>"].join(""),k.id=g,(l?k:m).innerHTML+=h,m.appendChild(k),l||(m.style.background="",f.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},s=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return r("@media "+b+" { #"+g+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var A in l)u(l,A)&&(q=A.toLowerCase(),e[q]=l[A](),o.push((e[q]?"":"no-")+q));return v(""),h=j=null,e._version=d,e.mq=s,e.testStyles=r,e}(this,this.document);
+;
+
+
+
+window.Modernizr = (function( window, document, undefined ) {
+
+ var version = '2.6.1',
+
+ Modernizr = {},
+
+
+ docElement = document.documentElement,
+
+ mod = 'modernizr',
+ modElem = document.createElement(mod),
+ mStyle = modElem.style,
+
+ inputElem ,
+
+
+ toString = {}.toString, tests = {},
+ inputs = {},
+ attrs = {},
+
+ classes = [],
+
+ slice = classes.slice,
+
+ featureName,
+
+
+ injectElementWithStyles = function( rule, callback, nodes, testnames ) {
+
+ var style, ret, node,
+ div = document.createElement('div'),
+ body = document.body,
+ fakeBody = body ? body : document.createElement('body');
+
+ if ( parseInt(nodes, 10) ) {
+ while ( nodes-- ) {
+ node = document.createElement('div');
+ node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
+ div.appendChild(node);
+ }
+ }
+
+ style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
+ div.id = mod;
+ (body ? div : fakeBody).innerHTML += style;
+ fakeBody.appendChild(div);
+ if ( !body ) {
+ fakeBody.style.background = "";
+ docElement.appendChild(fakeBody);
+ }
+
+ ret = callback(div, rule);
+ !body ? fakeBody.parentNode.removeChild(fakeBody) : div.parentNode.removeChild(div);
+
+ return !!ret;
+
+ },
+
+ testMediaQuery = function( mq ) {
+
+ var matchMedia = window.matchMedia || window.msMatchMedia;
+ if ( matchMedia ) {
+ return matchMedia(mq).matches;
+ }
+
+ var bool;
+
+ injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
+ bool = (window.getComputedStyle ?
+ getComputedStyle(node, null) :
+ node.currentStyle)['position'] == 'absolute';
+ });
+
+ return bool;
+
+ },
+ _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;
+
+ if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
+ hasOwnProp = function (object, property) {
+ return _hasOwnProperty.call(object, property);
+ };
+ }
+ else {
+ hasOwnProp = function (object, property) {
+ return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
+ };
+ }
+
+
+ if (!Function.prototype.bind) {
+ Function.prototype.bind = function bind(that) {
+
+ var target = this;
+
+ if (typeof target != "function") {
+ throw new TypeError();
+ }
+
+ var args = slice.call(arguments, 1),
+ bound = function () {
+
+ if (this instanceof bound) {
+
+ var F = function(){};
+ F.prototype = target.prototype;
+ var self = new F();
+
+ var result = target.apply(
+ self,
+ args.concat(slice.call(arguments))
+ );
+ if (Object(result) === result) {
+ return result;
+ }
+ return self;
+
+ } else {
+
+ return target.apply(
+ that,
+ args.concat(slice.call(arguments))
+ );
+
+ }
+
+ };
+
+ return bound;
+ };
+ }
+
+ function setCss( str ) {
+ mStyle.cssText = str;
+ }
+
+ function setCssAll( str1, str2 ) {
+ return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
+ }
+
+ function is( obj, type ) {
+ return typeof obj === type;
+ }
+
+ function contains( str, substr ) {
+ return !!~('' + str).indexOf(substr);
+ }
+
+
+ function testDOMProps( props, obj, elem ) {
+ for ( var i in props ) {
+ var item = obj[props[i]];
+ if ( item !== undefined) {
+
+ if (elem === false) return props[i];
+
+ if (is(item, 'function')){
+ return item.bind(elem || obj);
+ }
+
+ return item;
+ }
+ }
+ return false;
+ }
+ for ( var feature in tests ) {
+ if ( hasOwnProp(tests, feature) ) {
+ featureName = feature.toLowerCase();
+ Modernizr[featureName] = tests[feature]();
+
+ classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
+ }
+ }
+
+
+
+ Modernizr.addTest = function ( feature, test ) {
+ if ( typeof feature == 'object' ) {
+ for ( var key in feature ) {
+ if ( hasOwnProp( feature, key ) ) {
+ Modernizr.addTest( key, feature[ key ] );
+ }
+ }
+ } else {
+
+ feature = feature.toLowerCase();
+
+ if ( Modernizr[feature] !== undefined ) {
+ return Modernizr;
+ }
+
+ test = typeof test == 'function' ? test() : test;
+
+ if (enableClasses) {
+ docElement.className += ' ' + (test ? '' : 'no-') + feature;
+ }
+ Modernizr[feature] = test;
+
+ }
+
+ return Modernizr;
+ };
+
+
+ setCss('');
+ modElem = inputElem = null;
+
+
+ Modernizr._version = version;
+
+
+ Modernizr.mq = testMediaQuery;
+ Modernizr.testStyles = injectElementWithStyles;
+ return Modernizr;
+
+})(this, this.document);
+;

0 comments on commit d210e66

Please sign in to comment.