NealGrosskopf.com - Geek Speak

Always Show Scrollbars In Firefox Using CSS

Neal Grosskopf — Mon, 30 Apr 2008 20:06:46 CST

I remember the first time I used Firefox I was extremely annoyed by the fact that the browser does not always show the scrollbars (like Internet Explorer does). The problem with this is when a page's height is not greater than the available screen height and a users clicks a link to a page that is taller than the available screen height it shifts the entire content area over to accommodate for the scrollbars (which probably take up 15 pixels or so). This is most likely the standards compliant way to display a page and IE has been doing it wrong all along, regardless it is annoying seeing the web page jump back and forth in Firefox.

The Solution:

Fortunately there is a solution using CSS:


html { overflow-y: scroll; }

The Opposite

If the meaning of your life depends on not conforming to Microsoft (you're out there) you can also make IE behave like Firefox:


html { overflow-y: auto; }

Whatever method you prefer I would recommend placing this in your baseline stylesheet before starting a new web site or project. Your users will thank you.

Sources:

Controlling browser scrollbars

View Comments [1]

Common JavaScript Functions

Neal Grosskopf — Sun, 29 Apr 2008 18:58:14 CST

Javascript libraries seem to be all the vogue now days. Unfortunately many of them are becoming bloated with features and are growing larger than 50KB. Some developers may only use 10% of the libraries features too. One of the more common features is the dollar sign function i.e. $('element'). Of course I am a bit biased since I am a hardcore CSS person (thanks Jason) so I shy away from JavaScript as much as possible. Over time I have found that JS is necessary and many times the only solution to some problems.

One thing you'll notice with JavaScript programming is the methods and property calls can get quite lengthy. There is a solution to this and that is to create your own custom functions with shorter function names.

Short Named JavaScript Functions:


function gd(e) { return document.getElementById(e); }
function gs(e) { return document.getElementById(e).style; }
function gv(e) { return document.getElementById(e).value; }
function dw(i) { return document.write(i); }

Each of these is simply a shorter way of calling the built in JavaScript functions. By using these you can reduce the file size of of you JavaScript and also increase the legibility. Probably the only con to these functions is there will be a performance decrease since the code will have to do an extra call each time it's used.

If you can think of any other down and dirty JS functions feel free to leave a comment and fill me in.

Sources:

All credit goes to Chris Retlich

View Comments [4]

Reverse Array in ASP

Neal Grosskopf — Sun, 15 Apr 2008 19:21:37 CST

A problem I've ran into numerous times when programming in ASP is that there is no easy way to reverse arrays. With my limited knowledge of other programming languages I believe ASP is the minority of web languages that can't reverse or sort arrays with built in functions. I had also searched high and low on the web for a home brewed function to do this but never had any luck.

Then the other day I ran across this nugget of an article.

Reversing Arrays in ASP:

Here we define our array. In most cases this is done from a database. articlesRev = array( _ "array item 0", _ "array item 1", _ "array item 2", _ "array item 3" _ )
Next we loop through our original array and reverse it. Dim articles() ubnd = UBound(articlesRev) Redim articles(ubnd) for i = 0 to ubnd articles(ubnd - i) = articlesRev(i) next
Finally we write out our array, which is reversed now. for i=0 to ubound(articles) response.Write(articles(i)&" ") next

Putting It all together:


articlesRev = array( _
"array item 0", _
"array item 1", _
"array item 2", _
"array item 3" _
)

Dim articles()
ubnd = UBound(articlesRev)
Redim articles(ubnd)
for i = 0 to ubnd
 articles(ubnd - i) = articlesRev(i)
next

for i=0 to ubound(articles)
 response.Write(articles(i)&"
")
next

Sources:

http://www.cruto.com/blog/?p=4

View Comments [4]

Embedding Flash Without Click To Activate Using Valid HTML

Neal Grosskopf — Sat, 7 Apr 2008 18:24:0 CST

I am currently working on a website for a client and one of their requests was that their home page have some animation featuring some of their promotions. Now I know the first thing you are saying is "please, God, say it aint so, not FLASH!" Yes I know flash is evil, I absolutely hate it but in this instance it is the best tool for the job.

I won't tell you how annoying the software is to make a flash movie but I will tell you how annoying it is to simply embed a flash file in your web page using valid HTML.

Here is the jist of what I needed to accomplish:

Valid HTML
A movie that doesn't repeat
A movie with a clickable link/region
A movie with a transparent background
Avoid annoying "Click to activate this control" in Internet Explorer

I was able to do these things but never a combination of all of them. I first tried using a javascript library called SWF Object since that is something I've seen on our work websites. SWF Object worked fine although it failed miserably with the transparent background. I tried pretty much everything I could think of to get that to work even using examples from the documentation but to no avail it sucks.

On a side note, people are seriously over-using these javscript libraries. Within a few years every legitimate web developer will have forgotten getElementById() and will assume that javascript can naturally select individual elements by class name with no problem. I think libraries are the cheap way out, not to mention how many KB they take up. Check out one of my work websites. It has over 12 javascript files, clocking in at over 240KB. Gez.

After that I tried simply hardcoding the html into the webpage. This worked fine in IE but Firefox and the likes required the noncompliant EMBED tag to make it work. Even worse was I was now faced with the annoying Click to activate this control problem in Internet Explorer.

After various modifications to my code I ended up just taking the invalid EMBED tag wrapped with an OBJECT tag and through it in an external javascript file using multiple document.writes

Everything worked now, except the code technically wasn't valid HTML even though the W3C validator said so. Then today I read this article on Alistapart and specifically this comment. After that it all made sense to me. After hours of toiling I had found the solution and everybody was wrong!

This code not only validates but it works. The only drawback here is we still have the annoying click to activate this control problem in Internet Explorer. The trick here was to remove the ClassID attribute since that stopped it from working in Firefox and adding the DATA attribute.

Embeding Flash Without Click To Active And Using Valid HTML

Simply place this script in an external .JS file and call it using the bottom function. Viola, no more click to activate, transparent background, doesn't repeat, and work fine in all browsers without the stupid EMBED tag and without annoying conditional comments for IE.

G00gle B0mb Attempts

View Comments [2]

Using Media Targeting With CSS With @Media

Neal Grosskopf — Wed, 25 Mar 2008 21:15:25 CST

Recently I've been crafting my stylesheets a bit different than I had in the past. I discovered that using a stylesheet link with the media type of all (see below) you can embed other media types within your "all" stylesheet. Note many people are unsure of what to name their stylesheets and I choose to name it after the media type it is targeting or whether it is targeting Internet Explorer (ie6.css & ie7.css etc)

The advantages of doing this over the old fashioned way of creating seperate link references for each of the media types is that you can cut down on requests to your web server. If you have a highly visited website this can make a difference. After you have created your all.css file. The next step is to simply create all the typical things you would for the CSS screen media type. Then below that, place this code. You can replace the .class reference with your own personal CSS. For testing the handheld media type download the Opera web browser since it comes with handheld rendering built into it.

Targeting Specific Media Types With CSS:


@media print {

	.class
	{
	}

}

@media handheld {

	.class
	{
	}

}

@media aural {

	.class
	{
	}

}

Notes:

This works on all modern browsers including IE 6 so feel free to integrate it into your site.

View Comments [2]

Checking Plurals With ASP - A Simple Check Plural Function

Neal Grosskopf — Sat, 21 Mar 2008 14:34:46 CST

I notice that a lot of database driven websites make easy mistakes by not checking for plural words. An example might be "2 vote" or "1 votes". Here is an example of a function using ASP to check for plurals.


function CheckPlural(input)
	if input <> 1 then
		CheckPlural = "s"
	else
		CheckPlural = ""
	end if
end function

This function can be called like so:


25 Vote<%=CheckPlural(25)%>

View Comments [2]

Get File Size And Type Using ASP

Neal Grosskopf — Mon, 16 Mar 2008 19:02:31 CST

Often times it is nice to add some text after a link on your website to let your users know whether the link goes to a PDF and how large that PDF file is. I've found that manually doing this works but after awhile when that PDF file get updated, the file size next to it is incorrect. It is even possible that the link is no longer a PDF but somebody forgot update the text.

An easy solution to these problems is to create a function within ASP that spits out the file type and the file size after the link to let your users know using asp how large a file is and what the file type is.

How To Get File Size and Type Using ASP


function GetFileSizeType(WhatFile)

	set fs=Server.CreateObject("Scripting.FileSystemObject")
	file = Server.MapPath(WhatFile) 
	set f = fs.GetFile(file)
	intSizeK = Int((f.Size/1024) + .5)
	if intSizeK = 0 then intSizeK = 1
	
	GetFileSizeType = "("&UCase(fs.GetExtensionName(file))&", "&intSizeK&"K)"
	
	set f=nothing
	set fs=nothing

end function

To call this function simply do this:


GetFileSizeType("/files/pdfs/myfile.pdf")

View Comments [4]

Change Text Selection Color Using CSS

Neal Grosskopf — Mon, 9 Mar 2008 18:32:41 CST

With the advent of CSS3 there are many new ways to style web pages. One of the new features in CSS3 is the ability to change the highlighting color on web pages using CSS. It seems that many websites ignore this simple to implement feature. By default the color will be inherited by your operating system colors. On Windows Vista the hex. color is #3399ff.

Here's How To Change The Text Selection Color:


::selection { background: red; color: white; }
::-moz-selection { background: red; color: white; }

Notes:

This is currently supported by Firefox and Safari. I would suspect that Opera also supports it. Unfortunately Internet Explorer does not support it, but with IE8 coming out soon supporting CSS better, it may work in there as well.

Sources

Comparison of layout engines (CSS)

View Comments [0]

Advanced Link Styling With CSS - Style External & PDF Links

Neal Grosskopf — Wed, 4 Mar 2008 18:19:50 CST

A problem many web designers run into is as their site grows beyond the 50 page mark, it becomes very difficult to introduce new site wide styles. As most of us know it is best to spend as much time planning your site as it is designing and developing it. A step that many designers miss during the planning stage is the styling of specific links.

The Forgotten Links:

External links
PDF links
Email links (mailto)
Anchored links
Popup links (target="_blank"
etc.

By adding specific styles to these types of links you can add a second layer of usability to your website. When a user sees a PDF icon next to a link they will automatically know that what they are about to click is a PDF. The same can be said for external website links and email links. Many novice CSS designers will solve this problem using classes, i.e My Link. While this would work early on in site development many of us in the real world inherited a really poorly developed site and need to use other methods to style links site wide.

Styling External Links With CSS:

By using CSS3 selectors we can select all tags that begin with "http" giving them a background image and padding right to accommodate that image:


a[href^="http"] {
padding-right: 15px;
background: url(external-image.png) no-repeat center right;
}

Styling Email Links With CSS:

The same can be done with email links. Here we style all tags that begin with "mailto:" and apply our email background image.


a[href^="mailto:"] {
padding-right: 15px;
background: url(email.png) no-repeat center right;
}

Styling PDF Links With CSS:

Finally PDF links can be styled by styling all tags that end with ".pdf" and apply a pdf icon to them.


a[href$=".pdf"] {
padding-right: 15px;
background: url(pdf.png) no-repeat center right;
}

Putting it all together:


a[href^="http"] {
padding-right: 15px;
background: url(external-image.png) no-repeat center right;
}

a[href^="mailto:"] {
padding-right: 15px;
background: url(email.png) no-repeat center right;
}

a[href$=".pdf"] {
padding-right: 15px;
background: url(pdf.png) no-repeat center right;
}

Notes:

This will not work in IE6 but because IE6 does not support the CSS3 selectors. It will show the links as normal without the background image and without the padding. This works out perfectly as users with more modern browsers such as IE7 and Firefox will reap the rewards of your ingenious CSS coding.

Sources:

View Comments [2]

CSS Diagnostics - Find Deprecated Elements Using CSS

Neal Grosskopf — Wed, 18 Feb 2008 21:51:35 CST

UPDATED: April 25th

I've been getting so many hits on this article that I decided to update it. I have added a few more elements and attributes and changed the colors around. The most severe code is colored red while less severe is colored yellow. There is also a medium severarity that is colored orange. Also remember that elements have solid borders while attributes have dotted boreders. Also check out my Test Suite showing examples of CSS Diagnostics in action.

The other day I was reading Eric Meyer's blog and stumbled across his version of what he likes to call CSS diagnostics. So what is CSS diagnostics? It's a method to highlight those ugly spots in your code, you know . Yeah under the hood, somewhere on your website garbage like that exists, yet it's always so hard to hunt down and fix. Never fear CSS diagnostics is here!

CSS Diagnostics allows users to find deprecated elements using CSS and also find find deprecated attributes using CSS. Sorry to have to repeat myself so much here, I'm trying to rank high in SEO with some of these terms since this is still very much uncharted territory.

So how do you use CSS Diagnostics? It's easy! It requires a pretty good knowledge of CSS 2 & CSS 3 selectors and a good knowledge of deprecated HTML elements and attributes.

Follow these steps:

Highlight Deprecated Elements
applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */ { border: 5px solid red !important; }
Highlight Deprecated Attributes
br[clear], hr[noshade], *[color], *[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap], body[alink], body[link], body[text], body[vlink], body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], ol[compact], ul[compact], *[start], img[hspace], img[vspace] *[align], *[valign], *[height], *[width], ul[type], ol[type], li[type], basefont[size], font[size], hr[size] { border: 5px dotted red !important; }
Highlight Proposed Deprecated Elements
input[type="button"], input[type="reset"], input[type="submit"], tt, embed, big, small { border: 5px solid orange !important; }
Highlight Proposed Deprecated Attributes
a[target], table[cellpadding], table[cellspacing], map[name], img[name], object[name], form[name], iframe[name], a[name], table[border], img[border], object[border], input[border], object[classid], object[codebase], embed[quality], embed[pluginspage] { border: 5px dotted orange !important; }
Highlight Specific Empty Elements:
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding: 20px; border: 5px solid yellow !important; }
Highlight Specific Empty Attributes
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] { border: 5px dotted yellow !important; }

Putting it all together:

Place this code at the end of your stylesheet:


/* Deprecated Elements */
applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */
{ border: 5px solid red !important; }

/* Deprecated Attributes */
br[clear], hr[noshade], *[color],
*[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap],
body[alink], body[link], body[text], body[vlink],
body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], 
ol[compact], ul[compact], *[start],
img[hspace], img[vspace]
*[align], *[valign],
*[height], *[width],
ul[type], ol[type], li[type],
basefont[size], font[size], hr[size]
{ border: 5px dotted red !important; }

/* Proposed Deprecated Elements */
input[type="button"], input[type="reset"], input[type="submit"],
tt, embed,
big, small
{ border: 5px solid orange !important; }

/* Proposed Deprecated Attributes */
a[target], table[cellpadding], table[cellspacing],
map[name], img[name], object[name], form[name], iframe[name], a[name],
table[border], img[border], object[border], input[border],
object[classid], object[codebase], embed[quality], embed[pluginspage]
{ border: 5px dotted orange !important; }

/* Empty Elements */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty 
{ padding: 20px; border: 5px solid yellow !important; }

/* Empty Attributes */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] 
{ border: 5px dotted yellow !important; }

Download The Full Stylesheet

Notes:

It's a good idea to create consistency with your rules. I chose to highlight all attributes in a solid border while highlighting all elements in a dotted border. Also choose different colors for different meanings.

It should also be pointed out that you should use the most standards complient web browser when checking for results. Currently I found that Firefox 2 seems to work best as it comes with many other addons that can work side by side with the custom CSS.

I enjoyed reading Eric's ideas on it but felt I could expand it a bit more. Certainly other's can expand on my version as well. Feel free to contact me if you see something I'm missing.

Sources

View Comments [5]

How To Use target="_blank" Correctly In XHTML & HTML Strict

Neal Grosskopf — Sat, 28 Jan 2008 19:56:1 CST

Occasionally web developers like their links to pop-up in a new window. Often times this is because they are linking to a non-web file type or are linking to an external web site.

The easiest way to accomplish this is to place the target="_blank" attribute on an anchor. Unfortunately if you validate your code with the W3C you will find that it is not valid to use that practice. Do not fear, there is a solution!

The workaround err, solution, is to place an onclick on the anchor tag. The code below will open a new window, get the value in the href attribute and cancel the action the href attribute would take.


Link

View Comments [3]

How To Serve XHTML to Internet Explorer 6 And 7 as XML Using Content Negotiation

Neal Grosskopf — Tue, 24 Jan 2008 21:02:24 CST

It seems that XHTML is all the craze now days. Unfortunately very few developers and designers are using it correctly and taking full advantage of it. So why is this?

XHTML can be served as text or XML. It seems that 90% of sites using XHTML are serving it as XML but are failing to serve it correctly to Internet Explorer as XML. Never fear, there is a solution.

So why bother serving it as XML to Internet Explorer? If you do it will mean that your html code will appear as XML and will have to adhere to XML standards. This means that you can be sure the code you are using is extremely compliant. It will also mean that if your page is not valid, it will not display without error. It's an annoying but great way to keep your code clean

Follow these steps:

Serve your page as application/xml to Internet Explorer and as application/xhtml+xml to every other browser:
If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0 Then Response.ContentType = "application/xhtml+xml" Else Response.ContentType = "application/xml" End If
Use a special .xsl file at the top of your page above your doctype:

Contents of xhtml.xsl file:
Add html element to page:

Putting it all together:


<%
If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0 Then
    Response.ContentType = "application/xhtml+xml"
Else
    Response.ContentType = "application/xml"
End If
Response.Charset = "utf-8"
%>





XHTML

Sources

View Comments [3]

NealGrosskopf.com - Geek Speak

Always Show Scrollbars In Firefox Using CSS

The Solution:

The Opposite

Sources:

Common JavaScript Functions

Short Named JavaScript Functions:

Sources:

Reverse Array in ASP

Reversing Arrays in ASP:

Putting It all together:

Sources:

Embedding Flash Without Click To Activate Using Valid HTML

Here is the jist of what I needed to accomplish:

Embeding Flash Without Click To Active And Using Valid HTML

G00gle B0mb Attempts

Using Media Targeting With CSS With @Media

Targeting Specific Media Types With CSS:

Notes:

Checking Plurals With ASP - A Simple Check Plural Function

Get File Size And Type Using ASP

How To Get File Size and Type Using ASP

Change Text Selection Color Using CSS

Here's How To Change The Text Selection Color:

Notes:

Sources

Advanced Link Styling With CSS - Style External & PDF Links

The Forgotten Links:

Styling External Links With CSS:

Styling Email Links With CSS:

Styling PDF Links With CSS:

Putting it all together:

Notes:

Sources:

CSS Diagnostics - Find Deprecated Elements Using CSS

UPDATED: April 25th

Follow these steps:

Highlight Deprecated Elements

Highlight Deprecated Attributes

Highlight Proposed Deprecated Elements

Highlight Proposed Deprecated Attributes

Highlight Specific Empty Elements:

Highlight Specific Empty Attributes

Putting it all together:

Notes:

Sources

How To Use target="_blank" Correctly In XHTML & HTML Strict

How To Serve XHTML to Internet Explorer 6 And 7 as XML Using Content Negotiation

Follow these steps:

Serve your page as application/xml to Internet Explorer and as application/xhtml+xml to every other browser:

Use a special .xsl file at the top of your page above your doctype:

Contents of xhtml.xsl file:

Add html element to page:

Putting it all together:

Sources