Requirement
Intranet site branding requires that the v4.master masterpage be customised with a dynamically expanding banner that changes its resolution depending on the resolution of the user’s browser.
Solution
We created a simple javascript that is copied just below the
<script type="text/javascript">
var _fV4UI = true;
</script>
section of the master page. Note that this uses ASP literals so that the masterpage can be deployed to any site collection. ASP literals can be quite problematic when editing using SharePoint designer as the editor adds unnecessary mark up to the code, e.g. __designer:preview and __designer:values. It is recommended to insert this code using a text editor, or copy it to a .js file and call it from the masterpage. If you choose this option, you will need to copy the images/files to the _layouts folder of the webserver and update the file paths in the script.
Before you run this script you will need to copy the following files to the Site Collection \ Style Library
- jquery library should be copied to Site Collection/Style Library/jquery library/
- Banner images should be copied to Site Collection/Style Library/images and must match the image names: banner_bg1280.jpg, banner_bg1440.jpg, banner_bg1680.jpg and banner_bg1920.jpg.
<script type="text/javascript" id="s1"></script>
<script type="text/javascript">
var siteColl = '<asp:Literal ID="siteColl" runat="server" Text="<%$SPUrl:~sitecollection/Style Library/jquery library/jquery-1.4.4.min.js%>"></asp:Literal>';
if (typeof (s1) != 'undefined') {
s1.src = siteColl;
}
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof (jQuery) == 'undefined') {
if (!jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function () {
$(document).ready(function () {
function adjustCSS() {
$('.s4-titletable').hide();
var pageWidth = $(window).width();
if (pageWidth < 1277) {
$('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1280.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
}
else if (pageWidth > 1400 && pageWidth < 1671) {
$('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1440.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
}
else if (pageWidth > 1600 && pageWidth < 1901) {
$('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1680.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
}
else if (pageWidth > 1901) {
$('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1920.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
}
else {
$('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1280.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
}
} $(function () {
$(".menu-item").hover(function () {
$(this).stop().attr('title', '');
},
function () {
$(this).stop().attr();
});
});
adjustCSS();
$(window).resize(function () { adjustCSS() });
});
});
}
}
initJQuery();
</script>
