Microsoft Project Server type buttons

I like the Microsoft Project Server buttons that have the slide up “help” on them and so I thought I’d write up a post on how to add them to your HTML client.  I would also like to thank my friend Fernando Guerra for assisting me with the JavaScript modifications.

NOTE: This is only useful on DESKTOP applications, mobile apps don’t really have a “hover” like a mouse, but you can try hovering over it with your finger and see if it works?  😉

Quick Steps:

  1. obtain an icon for your button and load it into your project
  2. create a button in your html client screen
  3. modify the postrender() method with CSS to your style liking
  4. add JavaScript file reference to default.htm
  5. add JavaScript file to project

1. Creating an icon

I “borrowed” an editing icon from the internet for the button.  I typically use paint.NET to edit my images, so I just captured  the green from the MSProject Server buttons,

msprojbuttons

then created my 50×50 icon in paint.net (changed the colors and size) and then added it to my solution.

edit

2. Create a button on the HTML client screen (I called mine ShowBingButton and changed the display to “SHOW BING”):

createbutton

3. Modify the button properties in the postrender() method:

buttonpost

Add the following CSS to the postrender() method to style the button:

buttonpostcode 

myapp.BrowseVideos.ShowBingButton_postRender = function (element, contentItem) {
    // Write code here.
    $(“a”, element).css({“height”: “25px”}); // sets the hyperlink height
    $(element).children().css({  // sets properties of the button
        “padding-top”: “100px”,  // pads the top of the button to ‘push’ the text to the bottom
        “background”: “#317529”, // sets the green background
        “color”: “white”,        // sets the white text color
        “background-image”: “url(‘content/images/edit.png’)”,  //  sets the image to be used
        “background-repeat”: “no-repeat”,  // sets the background to only show once
        “background-position”:”center”  // positions the background image to center
    });
    $(element).attr(“title”, “This is the title of the button which (when clicked) will take you to BING.com”);  // sets the text that will slide up
    $(element).dropCaptions();  // calls the dropcaptions JavaScript method
    $(“.caption”).css({  // sets the properties of the caption that slides up
        “color”:”white”,  // white font
        “background”: “#333”,  // dark gray background
        “height”: “100px”,  // height of the caption
    });
};
JAVASCRIPT:
I modified the CatchMyFame’s  jquery.dropcaptions.js here to the following (then saved it as jquery.mydropcaptions.js:
/*
* jQuery Drop Captions plugin
* @version 2.0.0
* @date June 4, 2013
* @category jQuery plugin
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
* @license CC Attribution-Share Alike 3.0 – http://creativecommons.org/licenses/by-sa/3.0/
*/
(function($){
    $.fn.extend({
        dropCaptions: function(options){
            var defaults = {
                showSpeed : 300,
                hideSpeed: 300,
                showOpacity : .7,
                hideOpacity : 0,
                showEasing: ‘swing’,
                hideEasing: ‘swing’,
                showDelay: 0,
                hideDelay: 0
            };
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o=options;
                var obj = $(this);
                //var objwidth = $(obj).width();
                var caption = $(obj).attr(‘title’); // Get the text of the caption from the image’s title attribute
                $(obj).wrap(‘<div></div>’).before(‘<div>’+caption+'</div>’).attr(‘title’,”); // Create a wrapping div, caption div, and remove the title from the image
                $(obj).parents(‘div.captainer’).width(150).css(‘float’, $(obj).css(‘float’));
                //$(obj).parents(‘div.captainer’).width($(obj).width() + parseInt($(obj).css(‘paddingLeft’), 10) + parseInt($(obj).css(‘paddingRight’), 10) + parseInt($(obj).css(‘borderLeftWidth’), 10) + parseInt($(obj).css(‘borderRightWidth’)), 10).css(‘float’, $(obj).css(‘float’)); // Copy the image’s width (+ border) and float to the wrapper div
                //$(obj).parents(‘div.captainer’).width(objwidth); // Copy the image’s width
                $(‘.captainer’).css({ ‘position’: ‘relative’}); // Set the wrapper div’s position
                $(‘.caption’).css({ ‘position’: ‘absolute’, ‘z-index’: ‘1’, ‘bottom’: ‘0’, ‘opacity’: o.hideOpacity, ‘color’: ‘white’, ‘left’: ’10px’,’font-size’:’12px’ }); // set the caption div’s position
                $(obj).parents(‘div.captainer’).css({‘margin’:$(obj).css(‘margin-top’)+’ ‘+$(obj).css(‘margin-right’)+’ ‘+$(obj).css(‘margin-bottom’)+’ ‘+$(obj).css(‘margin-left’)});   // Move the margin from the image to the wrapper div
                $(obj).css({‘position’:’relative’,’margin’:0});
                var moveAmount = parseInt($(obj).prev(‘div.caption’).height()+35, 10) + parseInt($(obj).prev(‘div.caption’).css(‘paddingTop’), 10) + parseInt($(obj).prev(‘div.caption’).css(‘paddingBottom’), 10);
                $(obj).on(‘mouseenter touchstart’, function (e) {
                    e.preventDefault();
                    setTimeout(function(){$(obj).prev(‘div.caption’).stop(true,false).animate({marginBottom:’+’+moveAmount +’px’,opacity:o.showOpacity},o.showSpeed,o.showEasing)},o.showDelay);
                }).on(‘mouseleave touchend’, function(){
                    setTimeout(function(){$(obj).prev(‘div.caption’).stop(true,false).animate({marginBottom:’0px’,opacity:o.hideOpacity},o.hideSpeed,o.hideEasing)},o.hideDelay);
                });
            });
        }
       });
})(jQuery);
4. Add the jquery.mydropcaptions.js file to the default.htm file
editdefault
5. Add the jquery.mydropcaptions.js file to the project:
addjstoproj
Run the project (F5)
demo1
when you hover over the “SHOW BING” text, you should see this:
demo2
You can tweak the colors, etc. to get the effect you like.
Congratulations!  🙂
Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Microsoft Project Server type buttons

  1. bache sur mesure – Borney.fr – fabricant de banderole – fabrication en france
    Achat drapeaux, fabricant de drapeaux français banderolles publicitaires
    I simply could not depart your site before suggesting that I
    actually loved the usual info a person provide for your visitors?
    Is gonna be back steadily to check up on new posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s