I’m using a jQuery plugin called “Isotope” to nicely output a mixture of news articles and advertising banners to a page.
I came across a small issue when using advertising banner’s in Flash format. For some reason, Flash content displayed randomly and mouse-clicks were not registered. This issue only seemed to only occur in Firefox. I couldn’t replicate this issue on other browsers.
Thankfully, only one additional line of code needed to be added when when initially setting the Isotope plugin options:
$('#wall').isotope({
itemSelector: '.box',
animationEngine: 'css,
layoutMode: 'masonry',
transformsEnabled: false //Disable transformations
});
The following example helped me further in resolving my issue: http://isotope.metafizzy.co/tests/flash.html
To be able to retrieve values from a ASP.NET CheckBoxList control or a group of HTML checkboxes, use the following jQuery:
$(document).ready(function () {
var checkboxValues = [];
$('#<%=MyCheckBoxList.ClientID %> input[type=checkbox]').click(function () {
$('input[type=checkbox]:checked').each(function () {
checkboxValues.push(this.value);
});
});
var values = checkboxValues.toString(); //Output Format: 1,2,3
});
If you do use this code snippet on a CheckBoxList, take a look that this article on how to create a custom CheckBoxList control with a value attribute.
Whenever I work with strings whilst programming in .NET, somewhere along the lines I always find myself using the awesome “string.format”. I think all of you will admit its the most useful and easiest way to build up your strings.
The only downside to using the “string.format” method is that it lures you into a false sense of security and you find yourself lost without it when it comes to working with strings in other languages. This happened to me when I had to build up a long string in JavaScript. It was long and tedious…or maybe I am just lazy.
Luckily, there have been a few developers who extended the string object in JavaScript to include “string.format”. Amazing! Its goes along the lines of adding this to your own JavaScript code:
String.format = String.prototype.format = function() {
var i=0;
var string = (typeof(this) == “function” && !(i++)) ? arguments[0] : this;
for (; i < arguments.length; i++)
string = string.replace(/\{\d+?\}/, arguments[i]);
return string;
}
Here are some other useful links I have found on how to implement “string.format” into your JavaScript code:
In SharePoint 2003, you will notice when you change the name of a site, the change is not reflected in the intranet URL. Modifying the site name within “Site Settings” will only change the title that is displayed when you visit the site.
You have two options to change the site name you see in the URL:
- Delete and recreate your site.
- Backup your current site and restore content elsewhere on the intranet.
You really wouldn’t want to consider the first option if your SharePoint site currently stores high volume of information. The best option would be to carry out a backup and restore using SharePoint’s “stsadm” command prompt. The time it takes to run the backup and restore process will entirely depend on the size of your site.
So here’s the scenario. We have an intranet that currently contains a site called “InsuranceClaims”. However, this site needs to add additional data relating to employee health schemes. The site name in the web address needs to be renamed to “InsuranceAndHealthClaims”. In order to make this change, the following needs to be carried out:
- Backup the “InsuranceClaims” site using the stsadm backup command. The site has been backed up to a file called insurancebackup.bak.
stsadm.exe -o backup -url http://intranet.computing-studio.com/sites/insuranceclaims -filename C:\insurancebackup.bak
- Create a new site called “InsuranceAndHealthClaims” from the SharePoint intranet.
- Restore the contents of the backup to the new site using the stsadm restore command.
stsadm.exe -o restore -url http://intranet.computing-studio.com/sites/insuranceandhealthclaims -filename C:\insurancebackup.bak
Providing all goes well when you run the backup and restore stsadm commands, you should get a “Operation completed successfully” message.
Over the last few months I have had the ability to mess around with a bit of jQuery. Even though I don’t have the complete understanding on how it works, I can see the benefits of writing my code in jQuery compared to bashing out lots of lines of JavaScript to do the same thing.
One the cool features I have used is calling one of my .NET methods using the “$.ajax” jQuery command. In my example (below), I have created two aspx pages. The code-behind of my first page (jQueryMethodTest.aspx) will only contain a public static method called “WhatIsYourName”, which returns a string value.
[WebMethod]
public static string WhatIsYourName(string name)
{
if (!String.IsNullOrEmpty(name))
{
return String.Concat("Hello ", name, "!");
}
else
{
return String.Empty;
}
}
Remember, the jQueryMethodTest.aspx page only needs to contain our method nothing else! Additional methods can be added. Just don’t add any web controls.
The second page (jQueryAjax.aspx), will contain our jQuery code and some HTML to output our result from calling the “WhatIsYourName” method.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="javascript/jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmitName").click(function(event) {
$.ajax({
type: "POST",
url: "jQueryMethodTest.aspx/WhatIsYourName",
data: "{'name': '" + $('#name').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(message) {
ShowPopup(message);
},
error: NameFailed
});
});
});
function ShowPopup(result) {
if (result.d != "") {
$("#Message").html(result.d);
}
else {
$("#Message").html("I didn't get your name.");
}
}
function NameFailed(result) {
$("#Message").html(result.status + ' ' + result.statusText);
}
</script>
<body>
<form id="form1" runat="server">
<div>
<input id="name" name="name" type="text" />
<br />
<input id="btnSubmitName" name="btnSubmitName" type="button" value="Submit" />
<br /><br />
<span id="Message" style="color:Red;"></span>
</div>
</form>
</body>
</html>
If all goes well, you should get the following result:
The “$.ajax” jQuery command requires the following parameters in order to work:
- url – links to where our .NET method is placed.
- data – retrieves the value from some control in our page to pass to our method. Remember, the name of the parameter must be named the same as the parameter from our .NET method.
- dataType – the response type.
- contentType – the request content type.
- success – the JavaScript function that gets fired on postback.
- error – the Javascript function that gets fired if there is a failure. This is an optional parameter.
I guess jQuery’s motto really is true: “write less, do more”.
I needed a flash movie to displayed at 100% in my web page. I thought this will be a simple job. Just set the height and width attributes within my object tag to “100%”. This method worked fine for Internet Explorer but failed in Firefox. Firefox seemed to ignore my size settings that contained a percentage. After a lot of time wasting, I confirmed that Firefox does not like its height and width attributes measured in percentages and only likes measurements in pixels.
In order to fix this problem I needed to do the following:
- Write some JavaScript just for Firefox so that it will get the users screen resolution in pixels and add this into my object tag that contained my Flash movie.
<script type="text/javascript" language="javascript">
if (window.innerWidth)
{
// Get screen width and height minus scroll bars
var width = window.innerWidth - 24;
var height = window.innerHeight - 24;
//Find Flash movie
var FlashMovie = document.getElementById('FlashMovie');
//Only assign width and height if browswer is not Internet Explorer
if (navigator.appName.indexOf('Internet Explorer') == -1)
{
FlashMovie.height = height;
FlashMovie.width = width;
}
}
</script>
- Keep the height=”100%” width=”100%” object attributes. This will be needed for Internet Explorer.
<object id="FlashMovie" type="application/x-shockwave-flash" height="100%" width="100%" data="myflash.swf">
<param name="movie" value="myflash.swf" />
<param name="wmode" value="transparent" />
<p>
No flash message
</p>
</object>
If anyone has any better idea on how to solve this problem. Please comment. Thanks!