Category Archives: Web Design

JavaScript – Block email domain

Do you have forms on your website for people to submit sales information? Do you get personal email addresses when you’re looking for business email addresses? Blocking the personal email addresses can be very advantageous to your sales process and can provide a much needed filter on the leads coming in.

Here’s a nice JavaScript function that validates the domain of an email address against a list of predefined blacklisted domains. You add more domains simply add another item to domarray.   For instance you could have:

domarray[3] = “microsoft.”;

Additionally you can validate the domains as specific as possible:

domarray[3] = “gmail.jp”;
domarray[4] = “gmail.co.uk”;
domarray[5] = “gmail.kr”;

The Whole Script

function chckDomain(em) {
var emat = em.substring(0,em.lastIndexOf(‘@’)+1);
var emdom = em.substring(emat.length,em.length+1);
var emdom = emdom.toLowerCase();
var domarray = Array();
domarray[0] = “gmail.”;
domarray[1] = “hotmail.”;
domarray[2] = “yahoo.”;
for (i=0; i < domarray.length ; i++) {
if (emdom.indexOf(domarray[i]) != -1) {
return false;
}
}
return true;
}

Enjoy

Damien
@DamienH

Jquery Number Ticker

I work at MindTouch and earlier today I started looking around the web for an animated jQuery number ticker to display the real-time page views with ajax. After searching for a while I wasn’t able to find anything so I thought I might try to build one.

With jQuery it wasn’t too challenging and I was able to develop the ticker in no time at all. The script is flexible and adjusts to the number of digits in the number. It also adds commas to properly format the number. You can see how the ticker looks here displaying the number 786554 – Jquery Number Ticker - by Damien Howley.

counter_ticker_bg

The jQuery code creates and removes the digits as needed and of the css is responsible for positioning the digits. The ticker is animated with jQuery which adds a nice touch. I got the number comma formatting from mrededkj.com. You’ll also need the following image that I created.

Markup

 

</div>

CSS

<style>
.counter-wrap {
height:18px;
overflow:hidden;
}
.counter-number {
height:198px;
width:12px;
position:relative;
background-image:url(IMAGE URL HERE);
float:left;
}
</style>

Jquery Code


$(".counter-number").each( function(i) {
$(this).attr('id','num'+i);
});
function loadinput() {
var newval = $("#numgo").val();
loadticker(newval);
}
function loadticker(ticnum) {
var fticnum = add_commas(ticnum);
var numheight=18;
addticker(fticnum);
if (ticnum && ticnum != 0) {

var s = String(fticnum);

for (i=s.length;i>=0; i–)
{
var onum=s.charAt(i);
$(“#num”+i).attr(‘value’,onum);
}

$(“.counter-number”).each( function() {
var nval=$(this).attr(“value”);
if (!isNaN(nval)) {
var nheight = Number(nval)*numheight*-1;
$(this).animate({ top: nheight+’px’}, 1500 );
}
if (nval==’,’){
$(this).animate({ top: ‘-180px’}, 1500 );
}
});
}
}
function addticker(newnum) {
var digitcnt = $(“.counter-number”).size();
var nnum = String(newnum).length;
var digitdiff = Number(nnum – Number(digitcnt));
if (digitdiff

‘);
}
}
function add_commas(nStr) {
nStr += ”;
x = nStr.split(‘.’);
x1 = x[0];
x2 = x.length > 1 ? ‘.’ + x[1] : ”;
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, ‘$1’ + ‘,’ + ‘$2’);
}
return x1 + x2;
}

Call the function

<a href="#" onclick="loadticker(786554)">load ticker - 786554</a>
<a href="#" onclick="loadticker(1767697234789837)">load ticker - 1767697234789837</a>
<a href="#" onclick="loadticker(1988989)">load ticker - 1988989</a>

I hope you enjoy this code, feel free to post any improvements as this was simply a prototype.

Thanks

Damien
@DamienH

IE6 Hack – replacing clear:both;

I’ve been excessively frustrated with IE6 for a long time now and despite my growing anger I’m still forced to work with this terrible software day in and day out.  Yesterday I was working for about 6 hours on IE6 fixes and I came across a quite handy hack.

Scenario:
You have a <div> wrapped around 3 elements that are all floated left like so:

<div id=”wrapper” style=”margin-bottom:15px;”>
<div style=”float:left;” id=”A”>A</div>
<div style=”float:left;” id=”B”>B</div>
<div style=”float:left;” id=”C”>C</div>
</div>

Given the above scenario in any browser the wrapper div (#wrapper) would not assume any height.  In more recent browsers the fix for this scenario would involve a choice of two approaches:

  1. Adding an element after #C that has style=”clear:both;”
  2. Adding style=”overflow:hidden;” to #wrapper

Although the first approach is 100% reliable I hate the additional markup.  I find that when I add <div style=”clear:both;”></div> in one place it ends up all over my site.  So I always use the second approach, <div id=”wrapper” style=”overflow:hidden”>.  It allows for clean markup which doesn’t clutter your editing experience and it shifts the responsibility of the visual layout to the CSS.

Well to not surprise the user of overflow:hidden; doesn’t have this affect in IE6 and it doesn’t work with overflow-x:hidden; or overflow-y:hidden;.  You can’t set a min height (at least not a reliable one) and height:auto; will also always display a heightless #wrapper.

Solution:
The solution, set the height (in IE6 only) to 100% and set the overflow to hidden like so.

<!–[if IE 6]>
div#wrapper {
height:100%;
overflow:hidden;
}
<![endif]–>

Thanks for reading

Damien
@DamienH

My IE6 revolt

I am a graphic designer, specifically focused on web design so my day to day job includes a combination of HTML, CSS, JavaScript and occasionally some php. I have been doing this sort of work now for almost a decade and while I am very thankful for my skills and abilities I can’t help but gripe about some of the hurdles that I have constantly had to battle, in particular IE6.

Back in the day I never could have imagined a better browser. I built all of my websites using <table >and <img> tags and life was pretty good. IE6 was my go to browser and why wouldn’t it be with 80%+ of the browser market it just made sense. As time went on and things began to improve the shift to CSS based design was very logical and with that came a whole new approach to designing websites. At first I didn’t really like the new shift but I adapted and as I learned about CSS and the standards that governed it’s implementation I quickly started to hate IE6. Every time I built a website I had to add an extra 100 lines of CSS to make sure that the padding, height and just plain obscurities of IE6 were fixed. Such an effort has been a constant in my life for the last 4 years and despite the fact that IE7 and IE8 are now available the selfish bastards at Microsoft still will not force users to update their browsers. As a result I have developed countless hundreds of fixes and work-arounds for a poorly developed product.  In an effort to fight back I’ve decided to change the way users view my blog. Granted I only have an all-time total of about 200 IE6 views I wanted to give a message to any future viewers who dare use that terrible excuse for a browser. Today I added a quick IE6 hack as follows:

* html body #top,* html body #wpcombar,* html body #bg {
display:none;
}

* html body {
background-color:#fff!important;
background-position:top center;
background-repeat:no-repeat;
background-image:url('http://farm4.static.flickr.com/3544/3313074004_21a8227120.jpg?v=0');
}

The CSS presented above hides all of the elements of my blog and sets the background of the body to the following image.

All in all I am quite happy with my decision and the message that I am giving to IE6 users.  If you feel the same way please feel free to use my image which is located at http://flickr.com/photos/damienhowley/3313074004/.

Thanks and have a great day,

Damien Howley
@DamienH

iStockPhoto – ripping off customers by raising prices!

I’ve been a loyal customer to iStockphoto now for about 2 years and today after logging in to purchase an image I realized that I was now paying over $15 per image.  Just about two years ago they promoted $1 images which were very sufficient for the level of web design I was doing.  Over the course of the last 12 months they have altered their buiness in a few different ways.

  1. Reduced the sizes of the images – 1 credit now gets you a ~200 pixel image
  2. Increased the cost of their credits – It used to be $1 for 1 credit now they have altered their pricing to starts at 10 credits for $14 ($1.40/credit)
  3. Increased the cost of the images – Vector images used to be 3 credits, now they are 15.  ExtraLarge images were 5 credits, now they are 15.

As a response to their price increase I wrote them a kind letter to cover my opinion on the matter:

Dear iStockPhoto,

This will be the last time I spend any money with your company.  I don’t have a large budget but you have made sure that my budget continues to afford me less and less each month.  I have been a loyal customer for over 2 years and I watched your prices rise on two fronts.  Not only are you giving fewer credits per dollar you are increasing the cost of the images.  It might not hurt you but my $100/month is going elsewhere.  Thanks to your attempt to screw your customers I feel this will be a recurring reaction.

Best of luck,
Damien Howley