Element Position:relative inside Container with scroll – IE 7 bug
Today I found an annoying bug with Internet Explorer 7, I had some elements with position:relative inside a big container which has overflow set to auto, something like:
<div style="overflow: auto; height: 150px; width: 200px;"> <h1 style="position: relative;">Title 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h1 style="position: relative;">Title 2</h1> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
Well, of course in the above example does not make much sense to set those headers relative, but in the real situation I needed to have some relative elements.
If you try this code, it will work perfectly on: Safary, Chrome, Firefox, IE8, but not on IE7.
On internet explorer 7 the div’s content will scroll, but the headers will remain stuck in the same position.
The solution is pretty easy though, adding a position:relative also to the containing div would do the trick, this way:
<div style="overflow: auto; height: 150px; width: 200px; position: relative;"> <h1 style="position: relative;">Title 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h1 style="position: relative;">Title 2</h1> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
iFrame loading white background
When a webpage is loading an iframe, it displays a white background until when the iframe’s page is loaded.
If the website containing the iframe has a black background (well, any color except white…), it badly sucks, since you will see a white box for a couple of seconds.
I’ve found an easy and fast solution to avoid this, with the code below, the iframe white background will disappear! It does not work on any browser, but it’s still pretty good though.
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="http://www.it-things.com" ></iframe>
Tested on:
Firefox – OK
Chrome – NOT WORKING
Safari – NOT WORKING
Internet Explorer 8 – OK
Internet Explorer 8 on Internet Explorer 7 mode – OK
Internet Explorer 9 – OK – Thanks to Frank Gijsen (http://www.scs-horst.nl/) for testing
If you test it out on other browsers, please let me know if it works or not.
Javascript DateDiff – Get the difference between 2 dates
The function below returns the difference in millisecond between the two given dates.
To get the difference in days just use a little bit of math:
var differenceInDays = DateDiff(date1, date2)/1000/60/60/24
function DateDiff(date1,date2) {
return date1.getTime() - date2.getTime();
}
Pure CSS Rounded Corners – without images
The code below gives rounded corners to many HTML elements, it does not need any image, or javascript or some special trick, just simple css style.
It works perfectly on Firefox, Safari and Chrome.
It does not work on Internet Explorer, but IE users do not deserve some beautiful rounded corners.
Actually I’ve used it on various elements like to obtain rounded DIV and rounded INPUT elements, it works like a charm.
.rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
CSS – Vertical align middle – Text in Input Field
To vertically align on the middle a text inside a TextBox Input Field, you need to define the line-height equal to the height of the textbox.
Code:
<input style="width: 200px; height: 40px; line-height: 40px;" type="text" value="Vertically centered text" />
Result:
jQuery – execute javascript on windows resize
The code below will execute javascript stuff when the browser windows is resized.
$(window).resize(function () {
//put your stuff here
});
jQuery – set focus and Ajax – IE Bug
jQuery has a function called .focus(), which lets you dynamically set the focus to any element.
This function works very well, except for a bug with internet explorer, if you want to use .focus() on a content loaded dynamically via javascript (ajax), the setFocus will not work properly.
To make it work as it should you need to include a timeout, in this way the .focus() function will be called a little bit after the content has been loaded via ajax.
Below the code example that will set the focus on an element with a timeout of 10 ms.
setTimeout(function () {
jQuery("#elementToFocusOn").focus();
}, 10);
IIS 7 – Set default page on web.config
With IIS 7 you can easily chose the default page (home page) for your website (index.html, default.aspx, index.htm, anyName.asp).
You can also set different default pages, ordered by priority, the server will display the first available.
That’s quite easy, you just need to put the following code under the
<system.webServer> <defaultDocument> <files> <clear /> <add value="default.html" /> <add value="default.asp" /> <add value="default.aspx" /> <add value="index.htm" /> <add value="index.html" /> <add value="iisstart.htm" /> <add value="index.php" /> </files> </defaultDocument> </system.webServer>
ASP.NET – force file download
If you try to open some files on a browser (images, pdf, html pages, etc..) those are automatically opened, but sometimes you may need to force the browser to directly download those files instead.
How can you force the browser to download an image instead of opening it?
With the code below is quite simple, it will force the browser to download any kind of file.
Basically the code needs two variables, fileName and fileFullPath, you should be really careful to not send those variables via any kind of parameter (GET/POST), but you should get those information from inside the code.
Because if you let someone specify those variables with some parameters, he may be able to download ANY file on the website, also the .vb files, containing all you code and eventually any password inside.
So I suggest to send with GET/POST the ID of the file you want to download, but keep the Path and FileName inside a database, where you have a list of downloadable files, so you can make sure that the user will be able to download only those files.
Once you completed the code below to obtain the fileName and Path from a database or any other secure source, you just need to save it somewhere, let’s suppose you save this file on the main root and name it download.aspx.
To force the download you will just need to open that file on the browser, like a normal link:
<a href="download.aspx?idFile=10">Download File nr 10</a>
<%@ Page Language="VB" %>
<%
Dim fileName As String = "img01.jpg"
Dim fileFullPath As String = "/downloads/images/" & fileName
Response.Clear()
Response.AddHeader("content-disposition", "attachment;filename=" & fileName)
Response.WriteFile(Server.MapPath(fileFullPath))
Response.[End]()
%>
Below the C# version, provided by Myke Black
protected void Page_Load(object sender, EventArgs e) {
string fileName = Request.QueryString["filename"].ToString();
string filePath = Request.QueryString["path"].ToString();
if (fileName != “”){
Response.Clear();
Response.AddHeader(“content-disposition”, “attachment;filename=” + fileName) ;
Response.WriteFile(Server.MapPath(filePath + fileName))
Response.End();
}
}
Javascript / jQuery – get full page height
The function below can be used to get the full height of the page, works with all the major browsers.
Requirements: jQuery library
function getFullHeight() {
return Math.max(
jQuery(document).height(),
jQuery(window).height(),
document.documentElement.clientHeight
);
};
jQuery – wait for images to load
Sometimes, when building an HTML template which requires some javascript to adjust the layout correctly, you need to execute the code only when the images are loaded.
If you do not wait for the images to be loaded, the width or height of the page obtained via javascript may be incorrect, with some jQuery godness it is pretty easy to execute your code only when your images are loaded, just take a look at the code below, it looks pretty easy.
$(window).load(
function () {
//put your code here
//it will be executed only after the images are loaded
}
);
ASP.NET – field validator, display:none instead of visibility:hidden
Normally ASP.NET validators like the RequiredFieldValidator have the attribute visibility set to hidden when the control to validate is valid, and become visible when invalid.
This can become really annoying, since it will keep an empty space, to avoid this the solution is to change visibility:hidden with display:none, to do so you should add the parameter Display=”Dynamic” to your validator, as shown on the example below.
<asp:RequiredFieldValidator ID="vMyField" runat="server" ControlToValidate="MyField" Display="Dynamic"> ERROR MESSAGE </asp:RequiredFieldValidator>
Javascript – Verify Date validity
The code below verifies if an object is a valid Date object, containing a valid date.
function verifyDate(dateToValidate) {
if (Object.prototype.toString.call(dateToValidate) === "[object Date]") {
if (isNaN(dateToValidate.getTime())) { // d.valueOf() could also work
return false
}
else {
return true
}
}
else {
return false
}
}
Classic ASP – 301 redirect
Use the code below on any .asp page to obtain a 301 redirect.
<%@ Language=VBScript %> <% Response.Status="301 Moved Permanently" Response.AddHeader "Location", "/new-page.asp" %>