Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SP Overlay: CSS
myapp.menuHome.buttonResources_postRender = function (element, contentItem) {
$(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ResourcesLarge.png', { height:170, width:170});
};
myapp.menuHome.buttonDesigns_postRender = function (element, contentItem) {
$(element).spOverlay(contentItem, 'Content/Images/TouchIcons/DesignsLarge.png');
};
myapp.menuHome.buttonProjects_postRender = function (element, contentItem) {
$(element).spOverlay(contentItem, 'Content/Images/TouchIcons/ProjectsLarge.png');
};
(function ($) {
$.fn.spOverlay = function (contentItem, imageUrl, options) {
$element = this;
var me = $.extend({
width: 200,
height: 200,
displayName: contentItem.model.displayName,
description: (contentItem.model.description) ? contentItem.model.description : '',
element: this,
imageUrl : imageUrl,
}, options);
me.createSpOverlay = function () {
me.element.find('a').css({
'background-image': 'url(' + me.imageUrl + ')',
'background-repeat': 'no-repeat',
'background-position': 'center',
'width': '' + me.width + 'px',
'height': '' + me.height + 'px'
});
setTimeout(function () {
me.element.find('a').html(
'<div style="width:100%;height:100%;position:relative;" >' +
' <div class="spOverlay" >' +
' <div class="spOverlayBackground"></div>' +
' <div class="spTitle"><p>' + me.displayName + '</p></div>' +
' <div class="spDescription">' + me.description + '</div> ' +
' </div>' +
'</div>');
});
};
me.createSpOverlay();
};
}(jQuery));
/* ========================
Sharepoint-like overlay
========================*/
a.ui-btn:hover .spOverlay
{
height:100%;
}
.spOverlay {
-webkit-transition: height 1s; /* For Safari 3.1 to 6.0 */
transition: height 1s;
position:absolute;
width:100%;
height:50px;
bottom:0px;
overflow:hidden;
}
.spOverlayBackground {
position:absolute;
width:100%;
height:100%;
background-color:rgba( 0,0,0,0.6 );
opacity:0.8;
z-index:0;
}
.spTitle {
position:absolute;
top:0px;
height:50px;
color:#FFF;
z-index:2;
width:100%;
}
.spTitle p {
position:absolute;
bottom:0px;
left:15px;
right:15px;
}
.spDescription {
left:15px;
right:15px;
position:absolute;
color:#FFF;
top:50px;
z-index:2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.