This article does a great job at showing you a simple example of how to use local browser web storage in conjunction with ASP.NET web methods to save and retrieve the data from a server side database. Even if you aren’t interested in using this functionality in an application you have now, it’s worth reading to know what HTML5 brings to the table as far as storing your data down at the client.
Yay!! Microsoft has released a Web Standards Update for Visual Studio 2010 that adds full support for HTML5, CSS3 and new Javascript features like Geolocation and local storage. Scott Hanselman has a good write-up on this update in this blog post. There you can see some more detail about what exactly it brings to the VS.NET IDE, etc. Or, if you want to skip all that and go right to the download, you can get it here. At this point in time the HTML5 standard is still evolving. Taking that into consideration, Microsoft plans to provide additional updates every quarter or so to keep up with new features, changes to the draft, etc.
By the way, if you still aren’t familiar with all of the cool things that HTML5 brings to the table you should definitely check out this free online book, Dive Into HTML5, by Mark Pilgrim.
I have been doing some work lately with jQuery, WCF, HTML5 and ASP.NET and it’s been actually pretty fun challenging and fun. I’ve gotten to tinker with quite a few new technologies that I hadn’t used before and really got to sink my teeth into jQuery and some of the cool new features that HTML5 has to offer (like local storage and offline capabilities).
When starting out with my recent project I had to pull from various resources to learn what these tools were capable of and how I could fit them all together. And while it doesn’t get into the HTML5 aspects of my project this article on creating a simple task list with ASP.NET, WCF and jQuery would have been very helpful to me in the beginning.
While the article is only Part 1 in a series, I think it will get you going in the right direction and will show you some of the power that you have on the client with the new jQuery data templates. I must say that with the introduction of these templates you can truly offload a large amount of your logic down to the client which will provide for a much better (and faster) user experience.
Anyway, check out the article. It’s short, to the point and offers the source code as a download too!
Visual Studio 2008 is not without its faults. They did however add some nice features in the 2008 release such as JavaScript debugging. This feature is great when you need it, but can drastically slow down your debugging experience if you don’t need it or use quite a few “script heavy” controls like Telerik Radcontrols.
So after dealing with this for a while and taking enough productivity hits I decided to find a way to disable the Script Documents folder that shows up when running in debug mode.
It didn’t take long to stumble across this blog post where the blogger made a VisualStudio add-in to make turning this on and off as needed easy via a toolbar button. After reading the post and downloading the utility I was debugging without the old lag that I had before caused by all of the JavaScript documents that were loaded.
If you’ve run into this and feel this would be helpful, I can say that it seems to be working fine for me. I was a little worried too considering I run Windows 7 but it seems to still work well without any permissions issues.
If you’ve used a computer before you’ve undoubtedly scrolled through and agreed to some sort of agreement. Most likely it was some sort of software license agreement that you didn’t read about some website you were signing up on or an application that you were installing.
Maybe, if you’ve installed enough software or been on enough websites you’ve come across an instance where they actually forced you to scroll all the way down to the bottom of the text before you were able to click “I Agree” or whatever acknowledgment they wanted you to use.
Well I was recently faced with creating this exact situation in a web application and ended up using jQuery to accomplish this in my ASP.NET application. For my particular situation I ended up putting my content inside a scrollable div. This can easily be done by using a textbox if you wanted without much effort.
Basically, here’s what you’ll need.
Here’s our DIV:
<div style="width: 400px; height: 400px; overflow: auto; id="Terms"> <p>Lots of text to read.</p> <p>Lots more text to read</p> </div>
Here’s our button:
<asp:Button ID="ContinueButton" runat="server" Text="Continue" />
Here’s our JavaScript:
<head runat="server"> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Initially disable the button $("#ContinueButton").attr("disabled", "disabled"); // Map the function below to the scroll event of our Terms DIV $("#Terms").scroll(function() { if ($("#Terms").AtEnd()) { // Enable the button once we reach the end of the DIV $("#ContinueButton").removeAttr("disabled"); } }); }); $.fn.AtEnd = function() { return this[0].scrollTop + this.height() >= this[0].scrollHeight; } </script> </head>
And that’s it. This code is light weight and works in IE, Firefox, Chrome and Safari. Have any feedback or suggestions on how to make it better? Let me know.
A while back I had a need to dynamically re-size an iFrame’s height and found a solution using a jQuery plug-in called autoHeight. What I later found was that this solution provided poor results with Internet explorer when my iFrame’s contents were fairly large and frequently changing (i.e. via navigation inside the iFrame).
It took quite a bit of tinkering but I was able to come up with a solution that works (and works well) in IE, Firefox, Safari and Chrome. It still uses jQuery but doesn’t depend on a plug-in. Here’s the code in case you’re looking for the same thing:
First, the iFrame…
<iframe src="Page1.htm" id="MyFrame" frameborder="0" marginheight="0" marginwidth="0" width="800px" height="100px" scrolling="no"></iframe>
Next, the JavaScript to resize it…
<script type="text/javascript"> function sizeFrame() { jQuery("#MyFrame", top.document).css({ height: 0 }); var heightDiv = jQuery("#MyFrame", top.document).contents().find('body').attr('scrollHeight'); jQuery("#MyFrame", top.document).css({ height: heightDiv }); } jQuery(function() { sizeFrame(); jQuery("#MyFrame").load(sizeFrame); }); </script>
This line is needed to initially initialize the height so that it works in Safari and Chrome. Without this line the window will never shrink to fit smaller content, it will just retain the last biggest height.
jQuery("#MyFrame", top.document).css({ height: 0 });
You are currently browsing the archives for the JavaScript category.
© 2012 Don Kitchen · Proudly powered by WordPress & Green Park 2 by Cordobo.
Valid XHTML 1.0 Transitional | Valid CSS 3
