Adobe Edge Inspect is a pretty cool looking tool to help you quickly view content on multiple devices.
Category Archives: HTML
Aligning TABLE inside TDs
I inherited a web app that has a structure like this:
table
tr
td
td
td
table
The last table in that list was supposed to be right align, but no modifications to it’s TD parent will change that. You can’t use align=”right” or text-align:right.
You need to use align=”right” on the TABLE that you want to be right aligned, not on its TD parent.
I know this is a bad idea as CSS is much better for aligning elements instead of nesting tables, but in this case I’m not going to rewrite the whole app layout for 1 thing.
Visual Studio type fly out windows in HTML
I’ve been working on a project where I wanted to have a flyout window on the left just like how Visual Studio does their menus.
Maybe “slide out” is more accurate.
I used jQuery, which I am trying to use more in my projects, for the effects.
Anyway, I ended up making it a bit harder than it needed to be by having the tab itself slide out, as well as allow for multiple tabs.
At this point I’m happy enough to move on with a successful proof of concept, but I think if I were doing this from scratch again I wouldn’t bother having the tab slide out as well. I’d just show the sliding out window.
But, this should be a good starting point.
visualstudioflyoutmenus.htm (17.7 KB)
Update: And of course it completely fails in FF.
I made some changes, removed some things, tweaked others… looks ok in FF now.
Displaying Chart Data With CSS
Here is a great article about some of the techniques for displaying chart data using CSS.
Examples: http://apples-to-oranges.com/goodies/css-for-bar-graphs/
10 ways to build websites faster
This is a great article on 10 ways to build websites faster.
They include the obvious ones like using a menu generator, but they also include some cool things like a site from Adobe for selecting color schemes.
Highslide
We have been working with a pretty cool little javascript toolkit called Highslide.
It gives you some nice lightbox type effects but I like it more because of some of the options to load in iframes and stuff.
Someone wrote some asp.net wrappers as well to make it easier to add to your pages:
Javascript bookmark to aid with page layout
A coworker sent me this link. You just bookmark it, and then click the bookmark when you want to examine the layout of your page elements.
javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');
And it will add a little floating window in the upper left corner to show you everything you mouse over:
Using a STYLE block on a page with a Master Page
I have been asked this a few times, so I decided to write up a little article on it.
The problem is that when you are using master pages in asp.net, the <HEAD> is usually inside the master page template. So if you are on a page that needs a 1 off change or addition to the style of the rest of the site, you are unable to create a <STYLE> element in your content page.
Well, you CAN create one, but then VS.Net won’t show you the designer for your page b/c it keeps asking you to clean up the HTML problems on your page.
The solution I have used is to create a 2nd content place holder in the master page head. But, I might as well not duplicate effort here, as Rick Strahl has already written the article I am about to write (and apparently, even someone else beat him to the punch).
http://www.west-wind.com/WebLog/posts/5706.aspx
This works very well for this type of situation.
WebAii Website Automated Testing Framework
I am always on the lookout for better and easier ways to automate testing of my applications. Mostly, this stems from my teams not being too keen on implementing testing, so the easier I can make it, the easier it will be to convince others to write tests.
So Phil Haack has suggested a free framework called WebAii, and after taking a quick look, it looks promising.
It supports some nice features like mouse/keyboard actions for Ajax testing, and dom actions (find an element and click it, or whatever). It also supports unit testing your javascript functions by having your test call the functions. It also integrates with Nunit. Nice!
Hopefully I can find some free time (HAHAHHAAH) when I can test this out more in a project.
Finding the cause for slow loading webpages
Yahoo has released a tool called YSlow that helps developers identify why a specific website is loading slow.
Take a look at this screen cap (click to enlarge):