Hi All, this is my second jQuery plugin I have written, and again want to contribute to the world. Feel free to use in any fashion you like, but please leave my name, link to blog, and email in the source code.
This plugin is called "imgResizer" and it is for pre-loading and scaling images.
You can configure it with the following options:
height : integer (defaults to 300)
width : integer (defaults to 300)
loadingImage : string (defaults to "images/loading.gif")
failImage: string (defaults to "images/fail.png")
autoCenterImage: string (defaults to "true")
**note the autoCenterImage uses relative & absolute position. If it is set to true, the image will always sit within a box with the height and width as specified. If it is set to false, the image will just be scaled to the dimensions and pre-loaded.
***you will need to create or find a loading image and fail image, and place them in your images folder.
(function($){
$.fn.imgResize = function(options)
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 24th 2011
//set defaults
var defaults = {
height: "300",
width: "300",
loadingImage: "images/loading.gif",
failImage: "images/fail.png",
autoCenterImage: "true"
};
var options = $.extend(defaults, options);
//If there are one or more elements, return them
return this.each(function() {
$(this).wrap('<div class="loader" style="height: ' + options.height + '; width: ' + options.width +'; overflow: hidden; position: relative; background-image: url(' + options.loadingImage + '); background-position: center; background-repeat: no-repeat; "/>');
$(this).css({'display':'none'});
//load the image
$(this).load(function(){
$(this).css({'display':'none'});
$(this).css({'background-image' : 'url(' + options.loadingImage + ')', 'background-position' : 'center', 'background-repeat' : 'no-repeat'});
},function(){
//load complete, begin scaling
var maxWidth = options.width; // Max width for the image
var maxHeight = options.height; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
if(height == maxHeight)
{
$(this).css("top", "0px");
}
if(options.autoCenterImage == "true")
{
$(this).css('position', 'absolute');
//center left
if( width <= options.width){
var lef= ( (options.width- parseInt(width) ) / 2 ) + 'px';
$(this).css('left', lef);
}else{
$(this).css('left', '0px');
}
//center top
if( height < options.height) {
var top = ( (options.height - parseInt(height) ) / 2 ) + 'px';
$(this).css('top', top );
}
if(height == options.height){
$(this).css('top', '0px' );
}
}else{ //No Auto-Centering
var w, h;
h = $(this).height() + 'px';
w = $(this).width() + 'px';
$(this).parent().css('height' , h );//, $(this).width() + 'px' });
$(this).parent().css('width' , w );
}
//Fade image in
$(this).fadeIn(5000, function() {
$(this).css({'display':'block'});
$(this).parent().css({'background-image' : 'url(none)'});
});//end fadeIn function
});// end load function
$(this).error(function() {
$(this).attr('src' , options.failImage);
$(this).load(function(){ $(this).css({'display':'none'}); },function(){
//fade image in
$(this).fadeIn(5000, function() {
$(this).css({'display':'block'});
$(this).css({'background-image' : 'url(none)'});
});//end fadeIn
});//end load
});//end error
});// endeach function
};//end function resize
})(jQuery);//end function deceleration
Saturday, May 28, 2011
Simple Slider jQuery component
Hi All, I am sure if you're a web developer, you have used jQuery, or a jQuery plugin. I sure know I have, but now, I want to contribute one.
I have written a jQuery plugin which I call the "Sliderizer".
To use it, simply create an un-ordered list like such:
<ul class="someList">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
then select it, and call the Sliderizer like so:
$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });
You can configure it with the following options:
height : integer (defaults to 300)
width : integer (defaults to 300)
speed : integer (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string (default to horizontal) -This can be horizontal or vertical
Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!
(function($){
$.fn.sliderize = function(options)
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011
//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}
if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();
if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}
if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();
if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}
if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide
//set defaults
var defaults = {
height: "300",
width: "300",
speed: "1000",
direction: "horizontal"
};
var options = $.extend(defaults, options);
//If there are one or more elements, return them
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";
if ($(this).attr('id')) {
thisId = $(this).attr('id') + '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}
$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');
$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});
$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');
});
$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide
$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');
$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');
$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up", options.width, options.speed );
}
});
$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down", options.width, options.speed );
}
});
$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start
});// endeach function
};//end function sliderize
})(jQuery);//end function decleration
I have written a jQuery plugin which I call the "Sliderizer".
To use it, simply create an un-ordered list like such:
<ul class="someList">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
then select it, and call the Sliderizer like so:
$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });
You can configure it with the following options:
height : integer (defaults to 300)
width : integer (defaults to 300)
speed : integer (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string (default to horizontal) -This can be horizontal or vertical
Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!
(function($){
$.fn.sliderize = function(options)
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011
//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}
if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();
if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}
if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();
if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}
if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide
//set defaults
var defaults = {
height: "300",
width: "300",
speed: "1000",
direction: "horizontal"
};
var options = $.extend(defaults, options);
//If there are one or more elements, return them
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";
if ($(this).attr('id')) {
thisId = $(this).attr('id') + '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}
$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');
$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});
$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');
});
$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide
$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');
$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');
$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up", options.width, options.speed );
}
});
$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left", options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down", options.width, options.speed );
}
});
$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start
});// endeach function
};//end function sliderize
})(jQuery);//end function decleration
Thursday, May 26, 2011
Mac Vs PC - An informed Choice - Yet another Rant
Before you get all charged up for an epic show down followed by a 'fanboy' flame war, let me tell you, this post will not be that. In fact, when it comes to Mac (OSX ) or PC (Windows) I use both and have for quite some time. The reason I am posting this 'rant' is because I am often asked what I use and which I prefer, or which the person asking should purchase. The only 'right' choice is an informed one, so here goes.
First things first, the title of this post is wrong. MAC vs PC is all wrong, even though you know exactly what I am talking about. A 'MAC' is a 'PC' also known as a personal computer. It is simply the same thing as any other pc, except it is made by Apple. Since Apple's adoption of Intel parts, this is more true than ever. The distinction you are referring to is the operating system being used. OSX vs Windows. Now the reason why there is even a distinction is because OSX will not run on non-Apple hardware, at least not without hacking it or using some sneaking tools. Windows however will run on pretty much anything, including Macs.
Now that that is out of the way, lets begin our comparison. The first thing you need to assess, is, what are your needs. Do you need to use OSX? If you need to run Apple software, which will only run on OSX, you may as well give up reading now and go with the Mac. Unless you want to make yourself a Hackintosh (which will take some work but is do-able) that is.
If you are only using the computer for standard programs eg: web browsing, simple word processing and image tools lets continue. For this option you could use Window, OSX or any flavor of Linux.
Budget. Lets face it, money talks. If you're looking to compare any Mac, to any pc, you will find there is a large price discrepancy. Apple products cost much more then their equivalent specked non apple counter part. You can get almost any pc with the same or better specs at often half the price of the Apple. Does this mean something? Yes. Although the immediate assumption is that Apple is a rip off, there is some sense in the "You get what you pay for category". When it comes to purchasing a new computer, company's such as Acer or Gateway will attract a lot of customers with their rock bottom prices, however, by achieving these rock bottom prices, they typically are produced with flakier components which will fail much sooner than the more expensive ones, or not perform as reliably as they should. Keeping this in mind though, if a rock bottom computer is $400 and lasts you a year, you can buy between 3-4 new computers for the price of one Mac, and with that in mind also, this means you could buy a new computer each year, continually upgrading to the newer features. I personally would still go for a mid range Dell/Toshiba/Lenovo(IBM) computer. They're not rock-bottom prices, but they perform very well. Score one for PC.
Upgrade-ability - Between Mac an PCs, upgrading in almost all instances is much easier then upgrading or changing components on a Mac. Macs are built so they are not easy to tamper with. This is good as it keeps people from modifying their components and inadvertently breaking the machine, however it also means typically if you want to upgrade your Mac, you're almost stuck buying a new one. PCs on the other hand (while it be laptop or desktop) are very easy to swap parts on, and an upgrade can be cheap. Score one for PC.
Reliability - This is a tough one to rank as in all of my years (using both) I have never had an issue with either system which I couldn't resolve easily, but both have crashed on more than one occaision. Having said that, realistically Windows is susceptible to more virus's and more prone to problems, but why is this? The reason is simple. Numbers. Windows has a much larger user base than any other OS, and because of this, it is the target for more attacks. If you're going to write a virus to try to steal information, you're going to write it to target the most amount of people, and thus, Windows. The other reason is, Windows simply runs a lot more programs than OSX, and is used by many corporations. Also If you have kids, or worked on a computer used by kids, you will often find they have installed something they shouldn't have and that is the source of the problem. Apple applications are fewer in number, and the majority of their widely used programs have written Windows based counter parts which are written by reputable authors. So for now, Score one for MAC, however I don't know how this will change in the future as Apple's popularity and number increases. There are viruses for Mac, they're simply less common.
Usability - This is another tough one to rank, as both have their pros and cons and a number of similarities. For example:
Expose = Windows flip (windows key + tab)
Command tab = Alt tab (same application Switcher)
Stacks = Same as Start menu
Dock = Quick launch bar (or install a dock tool like RK Launcher )
Finder = Windows Search (admittedly both suck and its best to use alternatives like Quick Silver / Google Desktop)
Safari = Internet Explorer (admittedly both suck and its best to use alternatives like Firefox / Chrome)
But when it comes to core usage, I do have to admit I prefer Windows. Things you take for granted in Windows (like copying and pasting a file) is not so easy in OSX. Additionally Programs such as Skype, MSN Messenger, etc work much better in Windows. I have also fallen in love with the Aero Snap and program thumbnails feature (which can be given to Mac by using either Clinch or HyperDock ).
Since this comes down to software choice, and Windows can be run on a Mac, Score 1 for both.
Form Factor - This is tie. Mac has some beautiful looking hardware, but there are many PC manufactures who create just as nice equipment. It comes down to preference. Score 1 for both.
The Verdict - MAC : 3 | PC: 5
Again this is trying to be an unbiased comparison, but PC / Non-Apple hardware wins this round.
First things first, the title of this post is wrong. MAC vs PC is all wrong, even though you know exactly what I am talking about. A 'MAC' is a 'PC' also known as a personal computer. It is simply the same thing as any other pc, except it is made by Apple. Since Apple's adoption of Intel parts, this is more true than ever. The distinction you are referring to is the operating system being used. OSX vs Windows. Now the reason why there is even a distinction is because OSX will not run on non-Apple hardware, at least not without hacking it or using some sneaking tools. Windows however will run on pretty much anything, including Macs.
Now that that is out of the way, lets begin our comparison. The first thing you need to assess, is, what are your needs. Do you need to use OSX? If you need to run Apple software, which will only run on OSX, you may as well give up reading now and go with the Mac. Unless you want to make yourself a Hackintosh (which will take some work but is do-able) that is.
If you are only using the computer for standard programs eg: web browsing, simple word processing and image tools lets continue. For this option you could use Window, OSX or any flavor of Linux.
Budget. Lets face it, money talks. If you're looking to compare any Mac, to any pc, you will find there is a large price discrepancy. Apple products cost much more then their equivalent specked non apple counter part. You can get almost any pc with the same or better specs at often half the price of the Apple. Does this mean something? Yes. Although the immediate assumption is that Apple is a rip off, there is some sense in the "You get what you pay for category". When it comes to purchasing a new computer, company's such as Acer or Gateway will attract a lot of customers with their rock bottom prices, however, by achieving these rock bottom prices, they typically are produced with flakier components which will fail much sooner than the more expensive ones, or not perform as reliably as they should. Keeping this in mind though, if a rock bottom computer is $400 and lasts you a year, you can buy between 3-4 new computers for the price of one Mac, and with that in mind also, this means you could buy a new computer each year, continually upgrading to the newer features. I personally would still go for a mid range Dell/Toshiba/Lenovo(IBM) computer. They're not rock-bottom prices, but they perform very well. Score one for PC.
Upgrade-ability - Between Mac an PCs, upgrading in almost all instances is much easier then upgrading or changing components on a Mac. Macs are built so they are not easy to tamper with. This is good as it keeps people from modifying their components and inadvertently breaking the machine, however it also means typically if you want to upgrade your Mac, you're almost stuck buying a new one. PCs on the other hand (while it be laptop or desktop) are very easy to swap parts on, and an upgrade can be cheap. Score one for PC.
Reliability - This is a tough one to rank as in all of my years (using both) I have never had an issue with either system which I couldn't resolve easily, but both have crashed on more than one occaision. Having said that, realistically Windows is susceptible to more virus's and more prone to problems, but why is this? The reason is simple. Numbers. Windows has a much larger user base than any other OS, and because of this, it is the target for more attacks. If you're going to write a virus to try to steal information, you're going to write it to target the most amount of people, and thus, Windows. The other reason is, Windows simply runs a lot more programs than OSX, and is used by many corporations. Also If you have kids, or worked on a computer used by kids, you will often find they have installed something they shouldn't have and that is the source of the problem. Apple applications are fewer in number, and the majority of their widely used programs have written Windows based counter parts which are written by reputable authors. So for now, Score one for MAC, however I don't know how this will change in the future as Apple's popularity and number increases. There are viruses for Mac, they're simply less common.
Usability - This is another tough one to rank, as both have their pros and cons and a number of similarities. For example:
Expose = Windows flip (windows key + tab)
Command tab = Alt tab (same application Switcher)
Stacks = Same as Start menu
Dock = Quick launch bar (or install a dock tool like RK Launcher )
Finder = Windows Search (admittedly both suck and its best to use alternatives like Quick Silver / Google Desktop)
Safari = Internet Explorer (admittedly both suck and its best to use alternatives like Firefox / Chrome)
But when it comes to core usage, I do have to admit I prefer Windows. Things you take for granted in Windows (like copying and pasting a file) is not so easy in OSX. Additionally Programs such as Skype, MSN Messenger, etc work much better in Windows. I have also fallen in love with the Aero Snap and program thumbnails feature (which can be given to Mac by using either Clinch or HyperDock ).
Since this comes down to software choice, and Windows can be run on a Mac, Score 1 for both.
Form Factor - This is tie. Mac has some beautiful looking hardware, but there are many PC manufactures who create just as nice equipment. It comes down to preference. Score 1 for both.
The Verdict - MAC : 3 | PC: 5
Again this is trying to be an unbiased comparison, but PC / Non-Apple hardware wins this round.
Rant - A Web 'presence', advertising, Facebook, Twitter, etc
If you know me personally, you are well aware of my disdain for Facebook and Twitter, yet my devotion to Google and all of its wonderful products and services. The majority of people who do not like Facebook or other social media outlets is due to "information sharing" or privacy issues. While I am not saying identity theft is not a concern, to these people I do think you should look at yourself in the mirror and realize... You're really not that important, and really, I doubt anyone outside of your social circle really cares about you in the least, unless of course you're someone famous.
While, I can see the value in using social media like Facebook and Twitter, to gain followers and really, free promotion/advertising, I still can't say I like it. I am likely coming off hypocritical seeing as how I have an account for each, but I rarely use either. It does frustrate me though, that now every single client I have seems to 'need' a Facebook page and 'Twitter' yet never want to update or set it up themselves. Worse is clients who think there is no point to having a webpage, and think they only need a Twitter or Facebook page. I for one, have never and will never go to a stores Facebook page before searching for their webpage. That said, if the company is of sufficient size (eg not a mom & pop shop) and doesn't have a webpage, I'll probably give up the search before looking for them on Facebook.
Now back to the original contention that the reason why people typically don't like these services is because of lack of privacy/selling of information. Most people feel strongly opposed to this, however, I think it is great!
Sit there, and scratch your head for a moment, but allow me to explain my reasoning. In life, by now, I am sure you have realized, nothing is free. Or most things at least have a price associated with them. With a lot of online resources, there is no price, because the cost is paid for by advertising. Now as much as advertising kind of sucks, at least you're getting what you want for free, so its a win-lose scenario.
Now that sounds ok, but, it gets better. Since these services typically know enough about you, they can and typically do, only show you with 'targetted' advertising, or things which are relevant to you. If I am going to look at an ad, I wont mind as much if it is at least something relevant to me, so its really not all that bad.
Final thoughts, although this wasn't covered, I don't like Facebook/Twitter, is because it never shows the 'real' person, it more shows who that person wants to be portrayed as. Typically I find I often loose respect for people after seeing their Facebook page. Some, not all, but enough for me to not like it. My Facebook wall has more or less become a glorified RSS feed with links to articles I have read of interest.
Lastly, if you read the middle section of the post, and still hate ads, do yourself a favor, and get Firefox/Chrome and install adblock plus as an extension. Or use Spybot Search and Destroy to block ads.
Cheers,
Brendon
While, I can see the value in using social media like Facebook and Twitter, to gain followers and really, free promotion/advertising, I still can't say I like it. I am likely coming off hypocritical seeing as how I have an account for each, but I rarely use either. It does frustrate me though, that now every single client I have seems to 'need' a Facebook page and 'Twitter' yet never want to update or set it up themselves. Worse is clients who think there is no point to having a webpage, and think they only need a Twitter or Facebook page. I for one, have never and will never go to a stores Facebook page before searching for their webpage. That said, if the company is of sufficient size (eg not a mom & pop shop) and doesn't have a webpage, I'll probably give up the search before looking for them on Facebook.
Now back to the original contention that the reason why people typically don't like these services is because of lack of privacy/selling of information. Most people feel strongly opposed to this, however, I think it is great!
Sit there, and scratch your head for a moment, but allow me to explain my reasoning. In life, by now, I am sure you have realized, nothing is free. Or most things at least have a price associated with them. With a lot of online resources, there is no price, because the cost is paid for by advertising. Now as much as advertising kind of sucks, at least you're getting what you want for free, so its a win-lose scenario.
Now that sounds ok, but, it gets better. Since these services typically know enough about you, they can and typically do, only show you with 'targetted' advertising, or things which are relevant to you. If I am going to look at an ad, I wont mind as much if it is at least something relevant to me, so its really not all that bad.
Final thoughts, although this wasn't covered, I don't like Facebook/Twitter, is because it never shows the 'real' person, it more shows who that person wants to be portrayed as. Typically I find I often loose respect for people after seeing their Facebook page. Some, not all, but enough for me to not like it. My Facebook wall has more or less become a glorified RSS feed with links to articles I have read of interest.
Lastly, if you read the middle section of the post, and still hate ads, do yourself a favor, and get Firefox/Chrome and install adblock plus as an extension. Or use Spybot Search and Destroy to block ads.
Cheers,
Brendon
Design Hints - Sticky footer
If you're a constant web surfer, there are things you have likely come to either expect or like to see. One particular attribute I like and develop most sites to use, is a 'sticky footer'. A sticky footer is simply when the footer is at the bottom of the page (as usual),but even if there isn't a lot of content, it sits at the bottom of the page. I think this looks much better then having the footer of the website show up half way up the page if there isn't enough content.
There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.
<html>
<head>
<title>Page with a sticky footer</title>
<!-- Include StyleSheet / Scripts -->
</head>
<body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}
#header, #footer, #pageContent{
width: 1024px;
margin: 0 auto; /*who doesn't like a center aligned page?*/
}
#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>
<div id="pageContent">
<p>Your page content.</p>
<div id="spacer"><!--Make sure this is within the PageContent --></div>
</div>
<div id="footer">
<p>Your footer Content</p>
</div>
</body>
</html>
Method 1 (preferred)
Method 2
Hope this is useful!
There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.
<html>
<head>
<title>Page with a sticky footer</title>
<!-- Include StyleSheet / Scripts -->
</head>
<body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}
#header, #footer, #pageContent{
width: 1024px;
margin: 0 auto; /*who doesn't like a center aligned page?*/
}
#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>
<div id="pageContent">
<p>Your page content.</p>
<div id="spacer"><!--Make sure this is within the PageContent --></div>
</div>
<div id="footer">
<p>Your footer Content</p>
</div>
</body>
</html>
Method 1 (preferred)
Method 2
Hope this is useful!
Cross Browser Compatibility, A rant, Some tips, Some thoughts.
If you're reading this posting, and you're using IE6. Please just stop. Do yourself, and every web developer a favor. Download a new browser, whether it be the most up to date Internet Explorer, Firefox or Chrome, just do it.
Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.
This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.
If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.
Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.
Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
p{
color: #000000; /*Black Color Text All Browsers*/
_color: #ff0000; /*Red Color Text in IE6*/
*color: #00ff00; /*Green Color Text in IE7 and below */
color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
}
</style>
/*IE = 8:*/ property: value\9;
/*IE = 7: */ *property: value;
/*IE6:*/ _property: value;
Alternatively, you can use if conditionals such as:
<!--[if IE]> CssCode for Internet Explorer <![endif]-->
<!--[if lte IE 6]> Code for IE6 and below <![endif]-->
<!--[if lte IE 7]> Code for IE7 and below <![endif]-->
<!--[if lte IE 8]> Code for IE8 and below <![endif]-->
Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.
The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:
Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.
Since that is out of the way, lets discuss this. If you're a web developer, I am sure you have developed pages where you are given a design, you implement it, it looks great, everyone is happy, and then the 'Client's client' is un happy because your .png graphics are not working and the page looks a skew. Why? They're on IE6.
This has happened on more then one occasion where I work, and even if you know ahead of time, working cross browser, and with out-dated browsers can be a pain in but. However, I do have some tips and tricks for you which may make your life a little easier.
If the website is already built, and there are only a few things wrong, ex: pngs are not transparent, and the odd div is out of place, there are two quick and easy solutions.
Solution 1. Using a png fix. There are many png fixes available, and they can be a real life saver. They typically require you to have jQuery included, but if you're a web developer and dont know about jQuery perhaps you shouldn't be one.
Solution 2. CSS Hacks. Although I try not to endorse CSS Hacks, they can be a real life saver for saving time. Essentially, they allow you to target specific elements' attributes depending on the browser.
For example:
<style>
p{
color: #000000; /*Black Color Text All Browsers*/
_color: #ff0000; /*Red Color Text in IE6*/
*color: #00ff00; /*Green Color Text in IE7 and below */
color:#0000ff\9; /*Blue Color Text in IE8 and blow*/
}
</style>
/*IE = 8:*/ property: value\9;
/*IE = 7: */ *property: value;
/*IE6:*/ _property: value;
Alternatively, you can use if conditionals such as:
<!--[if IE]> CssCode for Internet Explorer <![endif]-->
<!--[if lte IE 6]> Code for IE6 and below <![endif]-->
<!--[if lte IE 7]> Code for IE7 and below <![endif]-->
<!--[if lte IE 8]> Code for IE8 and below <![endif]-->
Within the 'Code' Section you can include Stylesheets or use plain css. I personally prefer the first method as I find it less messy.
A more comprehensive guide can be found here, here or here.The Best Method, however is to be using the right tools, to help find the problems and see what is going on. I strongly recommend any web developer worth their salt to use:
Firebug (can be used in most browsers, however it is certainly best used in Firefox)
IE Tester - Handy application to view your pages in various versions of IE. Of course there is no substitute for the real thing, but this will certainly help.
Wednesday, May 25, 2011
Welcome to my blog
Hello there, and welcome to my blog.
This is my first entry of my first blog. I typically dont have much to say about myself, as I am not the most interesting of people, however in this blog, I will try to post either humorous, relevant, or things of interest, to myself and the general public.
I am a computer oriented type of person, so the majority of my posts will revolve around that subject. I have a website, however it is currently under construction, and I only work on it in my limited free time. It can be viewed here: bren1818.kicks-ass.net when my server is online that is until I decide to actually pay for hosting and host it properly.
I can also be followed/ tweeted to on twitter. My username is @bren1818 I think...
Anyways, thanks for stopping by my blog and reading through. Hope you find something interesting/useful.
Cheers, Bren1818
This is my first entry of my first blog. I typically dont have much to say about myself, as I am not the most interesting of people, however in this blog, I will try to post either humorous, relevant, or things of interest, to myself and the general public.
I am a computer oriented type of person, so the majority of my posts will revolve around that subject. I have a website, however it is currently under construction, and I only work on it in my limited free time. It can be viewed here: bren1818.kicks-ass.net when my server is online that is until I decide to actually pay for hosting and host it properly.
I can also be followed/ tweeted to on twitter. My username is @bren1818 I think...
Anyways, thanks for stopping by my blog and reading through. Hope you find something interesting/useful.
Cheers, Bren1818
Subscribe to:
Posts (Atom)