16Aug 2012 by Ruben Canton No Comments

CSS not being loaded in Internet Explorer

Web design
Today I had a weird problem, as Internet Explorer (who else could it be) was not loading my CSS file and the website was not displaying any style at all in that browser. After checking here and there, it seems IE only loads the first 31 CSS files you have and not the rest. Luckyly I was not really trying to load that many style sheets, as by accident a folder with jQuery demos was included in the project App_Themes folder and that loaded many sheets for the different demos. Once the jQuery demos folder was removed the page worked nice. Warning: If you were releasing in a development server you may need to remove all the files manually before releasing again.
Read More
25May 2012 by Ruben Canton No Comments

Adding helping boxes using jQuery ui plugin

Web design, Web programming
Once you have installed jQuery and Jquery UI, we can add some helpBox divs to our html like this: [sourcecode language="html" wraplines="false"] <asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="desc required" ></asp:TextBox> <div class="helpBox">This is a helping box.</div> [/sourcecode] Then set a javascript to position the boxes and show them only on focusing the previous item: [sourcecode language="js" wraplines="false"] function setHelpingBoxes() { $('.helpBox').each(function () { $(this).position({ of: $(this).prev(), my: "left center", at: "right center", offset: "10 0" }); $(this).hide(0); $(this).prev().focus(function () { $(this).next().show(300); }); $(this).prev().focusout(function () { $(this).next().hide(200); }); }); } [/sourcecode] And finally, don't forget to add the styles! [sourcecode language="css" wraplines="false"] .helpBox{width: 150px;padding:5px;position: absolute;display: block;right: 0;background-color: #bcd5e6;text-align: center;} [/sourcecode]
Read More
10May 2012 by Ruben Canton No Comments

Object Oriented Programming with JavaScript

Web programming
JavaScript is a powerful and old language that was not thought to work with objects, though, we can make it a bit object oriented implementing our own objects and classes like this: Create a class To make a class we can directly build it a constructor and inside it place all the class properties and methods like this: [sourcecode language="js" wraplines="false"] function CreateMyObject() { //Here all the stuff } [/sourcecode] Adding public and private variables You can make a public variable using the keyword this. [sourcecode language="js" wraplines="false"] function CreateMyObject() { this.publicVar = 'Im public'; var privateVar = 'Im private'; } [/sourcecode] (more…)
Read More
27Apr 2012 by Ruben Canton 1 Comment

Using the UpdateProgress in .Net AJAX

Web programming
When updating a part of page using ajax with UpdatePanels, you may want to show the user that the request is being done so he can wait until it is done and not send more asynchronous requests to the server. Placing the UpdateProgress inside the UpdatePanel If you want to make it clear and easy that the UpdateProgress belongs to an UpdatePanel you can place it inside the UpdatePanel ContentTemplate tag and that will do it. The UpdateProgress content will be shown when a request is made and hidden when finished. [sourcecode language="html" wraplines="false"] <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Button ID="btnAtUpdatePanel2" runat="server" Text="Change" onclick="btnAtUpdatePanel2_Click" /> <asp:Label ID="lbAtUpdatePanel2" runat="server" Text="Initial Text"></asp:Label> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate>Loading...</ProgressTemplate> </asp:UpdateProgress> </ContentTemplate> </asp:UpdatePanel> [/sourcecode] (more…)
Read More
24Apr 2012 by Ruben Canton No Comments

Guide for using .Net UpdatePanels

Web programming
The first thing to do for using an UpdatePanel is to add a ScriptManager to the page. You can only add one and you need at least one, so you can add it to the MasterPage or just to the page using AJAX (notice the ScriptManager will add some extra scripts to your page making it slower). You can also use a ScriptManagerProxy, but that's another story, let's focus on UpdatePanels. Adding a basic UpdatePanel To add a basic UpdatePanel that will refresh without refreshing all the page and speed up your website just add this to your code after having added a ScriptManager: [sourcecode language="html" wraplines="false"] <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="BTNChangeText" runat="server" Text="Change" onclick="BTNChangeText_Click" /> <asp:Label ID="lbText" runat="server" Text="Initial Text"></asp:Label> </ContentTemplate> </asp:UpdatePanel> [/sourcecode] And this other to your…
Read More
13Mar 2012 by Ruben Canton No Comments

CSS: Using a different image in list bullets

Web design
We can use a different image as a bullet for our lists, just using something like this: [sourcecode language="css" wraplines="false"] .myCustomList li { list-style-image:url('imgs/Bullet.jpg');} [/sourcecode] So nice, unfortunately that css property has its limitations and may not fit our purposes if the image is too big or we want to show it in a special way, in that case, its better to go for the background property and make a fake bullet: [sourcecode language="css" wraplines="false"] ul.myCustomList {margin:0;padding:0;} .myCustomList li {list-style:none;background:url('imgs/Bullet.jpg') left 5px no-repeat;padding-left:20px;} [/sourcecode]
Read More
08Mar 2012 by Ruben Canton No Comments

Agile principles

Web programming
Simplicity Years ago when I was a student, I remember how we thought a complex code was done by someone who knew a lot and a way of showing yourself was to write pretty complex code lines no one even you weeks later could understand. Simplicity means even an external programmer to the project should be able to understand what it does in a quick sight, if that happens, you will also be able to do that and that will help you with maintenance. Should I care about external programmers? There is a saying in Programming World that, if you became indispensable in your company, maybe because your codes are impossible to handle, you will never be fired. First of all, you will never be indispensable, it may cost more…
Read More
02Mar 2012 by Ruben Canton No Comments

Images handler with resizing options in C#.Net

Web programming
First have a look at my post for how to make an Images Handler. And from there, let's continue. The idea is that if I request something like these: http://localhost:54086/images/v/?img=500667&w=540 http://localhost:54086/images/v/?img=500667&h=200 http://localhost:54086/images/v/?img=500667&w=540&maxh=90 http://localhost:54086/images/v/?img=500667&w=540&h=200&maxh=90&maxw=100 It will resize my image to the size I set and also, it will check the size limit for heights or widths so the resulting resized image doesn't break our layout. Adding some params to resize the image Lets add the querystring params to the handler: [sourcecode language="csharp" wraplines="false"] public const String PARAM_WIDTH = "w"; public const String PARAM_HEIGHT = "h"; public const String PARAM_MAXWIDTH = "maxw"; public const String PARAM_MAXHEIGHT = "maxh"; [/sourcecode] And a condition method: [sourcecode language="csharp" wraplines="false"] private Boolean NeedsToBeResized(Image img) { // If one of the params comes most probably Ill need…
Read More
28Feb 2012 by Ruben Canton No Comments

Uploading an image to database in C#

Web programming
1. Placing the FileUpload object First, we need to set the FileUpload object, we will use the one .Net gives us: [sourcecode language="html" wraplines="false"] <asp:FileUpload ID="myFile" runat="server" /> [/sourcecode] That was easy :) 2. Getting the file from the FileUpload object 2.1 Checking the uploaded file is an image Before going on, I want to show you this useful function you will need later: [sourcecode language="csharp" wraplines="false"] public Boolean IsImage(HttpPostedFile pf) { Boolean res = false; switch (pf.ContentType) { case "image/gif": case "image/jpeg": case "image/jpg": case "image/bmp": case "image/png": case "image/pjpeg": case "image/x-png": res = true; break; default: res = false; break; } if (!res) { //If the filetype doesnt work i try with the extension: switch (Path.GetExtension(pf.FileName)) { case "gif": case "jpeg": case "jpg": case "bmp": case "png": res…
Read More
24Feb 2012 by Ruben Canton No Comments

Validate forms in client side using jQuery

Web programming, Web security
There is a quick way for validating forms if you are using jQuery. 1. Download the validation plugin You need to download the jQuery Validate plugin. Alternatively you can make a call to the online version from your code. 2. Add the plugin to your website I presume you are yet using the latest jQuery library and you don't need any explanation on how to use it, then, just add another reference to the plugin in your code so you can use it: [sourcecode language="html" wraplines="false"] <script src='Scripts/jquery.-1.7.1.min.js' type='text/javascript'></script> <script src='Scripts/jquery.validate.min.js' type='text/javascript'></script> [/sourcecode] 3. Make a call to validation Now, if you just want to validate a form using default validation you only need to make a call to this function: [sourcecode language="html" wraplines="false"] <script type="text/javascript" language="javascript"> $(document).ready(function () {…
Read More
20Feb 2012 by Ruben Canton No Comments

Building your Authentication system in .Net4.0

Web programming, Web security
By default, .Net applications offer a prebuilt authentication system that you can use to give some privacy to your website in case its a small one. But, in case you pretend to use your existing DB with its existing users table and your existing conditions you may want to build your own authentication system. Most of these can be built using a standard .Net format which Im going to show: Web.config User Class Authentication Cookie Login Page Accesing the User Object from any Page Web.config Let's start talking about the webconfig file, since as its name indicates, its the file were the site configuration resides and then the best place to configure the site authentication. You can of course build your own manual system just setting something at the master…
Read More
17Feb 2012 by Ruben Canton No Comments

How to get a string in MD5 in C#.Net

Web programming, Web security
Here it is: [sourcecode language="csharp" wraplines="false"] public static String getInMD5(String inputString) { byte[] input = Encoding.UTF8.GetBytes(inputString); byte[] output = MD5.Create().ComputeHash(input); StringBuilder sb = new StringBuilder(output.Length); for (int i = 0; i < output.Length; i++) { sb.Append(output[i].ToString("X2")); } return sb.ToString(); } [/sourcecode] You may need this too: [sourcecode language="csharp" wraplines="false"] using System.Text; using System.Security.Cryptography; [/sourcecode]
Read More
16Feb 2012 by Ruben Canton 29 Comments

How to fix error “Changes are not allowed while code is running” in .Net

Web programming
If you have tried to modify your back code in .Net when your application is running and found this annoying message: Forcing you to stop debugging, edit, start debugging again. Then here's a solution: 1. Stop running your app. 2. Go to Tools > Options > Debugging > Edit and Continue 3. Disable "Enable Edit and Continue". If you find that Visual Studio doesn't alert you that files have changed and that confuses you when debugging do this: 1. Go to Tools > Options > Debugging 2. Enable "Require source files to exactly match the original version". Now run your application again and feel free to edit while you run the application, you will have to rebuild it in case you want to check the code though.
Read More
06Feb 2012 by Ruben Canton No Comments

The impressive impress.js

Web design, Web programming
I've just dicovered the library impress.js which is an amazing tool for presentations beating those you get with PowerPoint just using CSS3. It only works in the most up to date browsers but, aren't desktop presentation tools also requiring an specialized software? You need to use Chrome, Safari or Firefox 10 to visualize it but that's far more easy to get and install than other products. You can see a demo here. As soon as you have one of the newest browsers, if not, you can at least read it. Superb :) So sad you cannot use it to impress ALL your visitors yet, but you can at least impress in a conference.
Read More