Kazoto

Security in PHP 2.0

Izikeo — Thu, 13 Dec 2012 23:23:54 +0000

Hey guys!
Back at you today with another post. First one in a while. I would like to retouch on the encryption topic, originally posted here. In the previous tutorial, we learned the difference between SHA1, and MD5. We also learned how to code a quick encryption function that allows you to encode and decode a string, and we briefly learned how to quickly use two encryption methods together to create a better encryption.

Today, we will learn how to create a more in depth encryption method, so lets get to it.

The whole idea behind encryption, is to keep important information away from people who might use it for bad doings. I am going to start by showing you the fully coded encryption method.

 $maxlength)
		$length = $maxlength;

	// Set up count to stop loop at desired length..
	$i = 0;

	while($i < $length){

		// Pick a random character.
		$char = substr($possible, mt_rand(0, $maxlength-1), 1);

		// Have we already used this character before?
		if(!strstr($salt, $char)){

			// If not, add to the end of salt and increase count.
			$salt .= $char;
			$i++;

		}

	}

	// Finally return salt!
	return $salt;

}

echo kazoto_encrypt('this_is_my_cool_string', _generate_salt());
// be47d58dfe9a69c16a2e5f30df7f4ce5f27d75aa

First off, lets talk about salts. Salts are basically to sum it up, a random string that you use to add to the end of another string, to make it a little more secure when you encrypt it. Here we have a function (_generate_salt()) that generates a salt for us. You could just use the same salt for all encryption, but for educational purposes I am going to teach you some salt generation.

Generating Salts, and what to do with them.

Now our function takes only 1 parameter. Length. Length can only go up to 60, and should be a number. Length defines how many characters the generated salt should be. The default is a 8 character string. Heres a step by step of how this function works.

Step 1:

We set the variable salt to null so we dont get any missing variable errors.

Step 2:

We define all possible characters. Here we leave out vowels (a e i o u) to avoid our function from generating offensive words. We also leave out characters that might look alike. Such as lowercase L and 1, and 5 and S.

Step 3 & 4:

We pull the number of characters that is in the possible characters string. You can simply just count how many characters there are, but i like things to be a little more automated and dynamic. Once we have the maximum allowed length, we need to check that length (our only parameter) isn’t larger than maximum allowed characters. We use a shorthand if statement, and if it is larger, we set to maximum length.

Step 5:

We need to keep count of how many times we’ve looped below, so we set I to 0.

Step 6 & 7:

Now we start our loop. While i is less than length, we still loop. Inside the loop our first step is to pull a random character. We use some basic logic to do so.

Step 7 & 8:

Now that we have our random character, lets check and make sure that we haven’t used that character yet, and if we haven’t, add it to the end salt string and increment I. If it has been used we skip and continue to loop. Once our loop is complete, we will return salt, and we have successfully generated a salt.

What would you do with the salt you ask? Well from here you would use it later in our encrypt function, but the problem is, if you wanted to check a string against an encrypted string, you cant just encrypt the string and check it against the encrypted string. You would need the salt to encrypt with the string for the two strings to match. You can’t generate a new salt when checking the unencrypted string against the encrypted string because the salt would be different, therefore making the string different. You would generally store the salt in a database of some sort, with some sort of indication of where the salt was used. Say if you were creating a user for a user system. You would generate a salt for each user, but store their salt in a column with their user information. That way you can later use the salt to check, say their password.

Encrypting data with a salt.

// Function to encrypt a string
function kazoto_encrypt($string = '', $salt = null){

 	// Check if string is empty.
	if(empty($string))
		return false; 

	for($i = 0; $i < 5; $i++){
		$string = strrev(sha1(md5($string . $salt)));
	}

	return $string;
}

Now that we have generated our salt. We can encrypt our string. In the old tutorial, I taught you how to base64_encode a string, using strrev (string reverse). Well we will follow a similar routine to encrypt this string.

We have an encrypt function named “kazoto_encyrpt”. It takes two parameters. The first parameter is the string to encrypt. The second is the salt that it will use to encrypt the string. Heres the steps in our kazoto_encyrpt() function.

Step 1:

We need to check that our string is not empty. If it is return false.

Step 2 & 3:

If the string is not empty, we need to encrypt the string. We will encrypt it 5 times, using a for loop. Each time we loop, we encrypt the string with the salt at the end using md5, then we will encrypt that using sha1, then we will reverse that string. Each time, we will be adding the salt to the end of the string, and encrypting it backwards. Making it virtually decodeable. Once it is all encrypted, we return the string to be used by who ever is calling the function.

The verdict

When it comes down to it, there are hundreds of ways to encrypt a string. It all comes down to what you feel the safest with, along with how important the data you are encrypting is. If you have something such as a credit card stored in a database, you would most likely need an encryption method that allows you to decode an encoded string. If you have something such as passwords, maybe use something with sha1 or md5. The final decision is up to you.

This article is exclusive, use Cleeng to view it in full.

Exclusive content

Already have a Cleeng account?

Kazoto encryption PHP OOP class. Contains 5 methods to help you encrypt your data! Only 79 cents! (USD)

Customer rating:

$0.79

Crossover 11.2 Brings Microsoft Software To Linux

Izikeo — Sun, 21 Oct 2012 01:07:22 +0000

Many web designers swear by the efficient alternative OS Linux, but most of the best software is for the Microsoft platform. That’s why the release of the new edition of CrossOver is such an exciting development. Bringing good software to Linux will make a huge difference in the system’s usability.

With a new operating system comes new techniques to help take advantage of the internet. Making the best of the host you find through many comparison sites like Thetop10bestwebhosting.com can be tough. Make sure to use all of a web site’s resources to find the best web-hosting service possible for your needs.

A Bunch Of Bug Fixes

A problem with many previous versions of CrossOver has been its bugginess, which stands to reason when you’re dealing with cross-platform issues. 11.2 fixes a vast majority of the bugs users have been dealing with, making it much easier to just get on with what you’re doing and not have to keep stopping to find online-help forums.

Unified Functionality

Previous versions have featured “office,” “games,” and “pro” editions. CrossOver now finally has a single, unified edition so that you don’t need to worry about whether the version you’re buying is the version you need. This approach to releasing cutting-edge software is becoming more and more common as developers like Codeweaver attempt to create a more streamlined and user-friendly experience.

Future Compatibility

For Mac users, 11.2 actually supports OS X platforms that haven’t even been released yet. OS X 10.8, Mountain Lion, hasn’t been released yet, but CrossOver 11.2 will feature full support for the platform all the same. This means that you’re not going to have to worry about upgrading and updating your software, patching CrossOver or using a previous version of OS X. You can simply plug and play, so to speak, and use CrossOver 11.2 on whatever platform you happen to be using.

A Wide Range of Improvements

A lot of specific, small fixes have been made along with the big ones. We have greater compatibility and a host of basic bug fixes. However, there are a lot of smaller fixes. For example, there is a fix for a Powerpoint 2010 crash that many users were experiencing; a fix for a microphone issue and improved graphic driver detection. There is an important fix for a major issue involving the program automatically uninstalling various software packages that has been fixed. No software is perfect, but CrossOver is getting closer with every new release.

When you develop for a platform besides Windows, you learn to accept that a good majority of users are on a different platform than you are. There’s a point of pride to that, and Mac and Linux users will be the first to flaunt the superiority of their chosen platforms. But that doesn’t do you much good in terms of compatibility and accessibility. You’re still cut-off from a lot of software and have a problem getting your own apps in the hands of other users. CrossOver is making it easier for what you need regardless of your operating system.

How You Can Help Drive Down IT Costs

Izikeo — Wed, 03 Oct 2012 23:41:08 +0000

Every company has an IT department and the IT guy who is your hero and arch enemy all at the same time. You need him most when your computer freezes or when you can’t figure out how to get connected to that conference call, and because you rely on the IT person and his department to connect your entire network, replace equipment when it’s faulty and to plug in your computer when you insist that it’s broken, it’s important to hire the right candidates and to have an IT department that runs smoothly and can serve your business’ needs.

While there is an expected savings from careful hiring strategies, bulk ordering of mobile services and comparison shopping, the amount you save on these action items can vary between companies. One concept that remains constant in its priority for every company is the need to train employees in a time and cost efficient manner. Businesses are constantly looking for new ways to cut costs, including reducing the expense of information technology, or IT. While IT is a vital part of the functioning modern business, the training of this department and it’s attrition level does not need to result in high expenses for its company. With a management and training solution tool, like Cornerstone learning management system and methods suggested below, It is possible to reduce the expense of an IT department. Here’s how.

Hire Staff Carefully

Hiring a new IT manager or IT employees can require planning. According to Todd Wasserman on Mashable.com, the cost of hiring an employee who is not motivated to work can quickly hurt your company financially.

The interview process should not stop with a single interview, particularly when looking at professionals in technological fields. Look for factors on the resume that suggest a general disinclination to work, such as a poor grade point average in school or jumping from one job to another.

Beyond looking for red flags, an interview should also pay attention to the behavior of potential employees. Look for a high level of enthusiasm for the position and questions that suggest the individual is motivated to put forth extra effort if necessary.

Avoid Bring Your Own Device Strategies

A BYOD strategy seems like it should cut the expense of providing mobile devices and support to employees, but it can actually cost more in the long term. According to Ryan Faas on CultofMac.com, a BYOD strategy can lead to added costs because the special rates and deals offered to companies are not available for individuals. As a result, employees are likely to ask for shared expense due to using the device at work.

Instead of using a BYOD strategy, employers should look for better deals on services and phone costs. Spending time comparing different service providers and looking at the bulk deals the mobile device company is willing to provide will help cut the expense to the lowest possible rate without concerns about security, shared expense or similar problems that might arise.

Compare Costs For Support Services

The cost of IT support and services for different employees can add up quickly. Support services are still part of the technology expense that a business is likely to face and one it can choose to spend more or less on. Taking time to organize information and shop around can help reduce the amount you will have to budget on this expense.

According to professionals on LinkedIn.com, a wide range of factors are involved in the cost of technological support. Organizing the information about necessary support services and then contacting companies offering IT support in the local area about price will help improve the possibility of getting reduced costs.

Use A Learning Management System

Taking time to learn and train employees with an appropriate management system can help reduce the cost of support by reducing the necessity for further services. An option like a management system solution can provide the basic keys employees need to solve problems without getting high cost consultants or professionals involved.

Learning to use the system personally and then training all employees on the appropriate technological aspects related to their particular job duties will help reduce expenses. When professionals are contacted less often, the workplace becomes more efficient and it can cost less to maintain and use computer systems.

Cutting expenses as a business is not always an easy task or the straight-forward answer. A company needs to set specific goals and organize information to get the best possible deals and to take their company and its IT department forward onto the next level, always improving and striving to reach the next performance goal.

Authored By:

Javier Rahaim
Javier went to a small journalism school where he was able to identify his strengths as a technology writer. He also plays soccer in his free time

6 ways email marketing is still your most powerful digital marketing tool

Izikeo — Mon, 17 Sep 2012 20:49:59 +0000

Social media tools and photo-sharing sites may be all the marketing buzz right now, but for your business, you need a communications tool that works. That's why email marketing is still the most powerful tool for businesses. It's personal, adaptable, trackable and mobile.

Email marketing shows no signs of slowing. In fact, according to a recent article in DM News, email's marketing's growth is even more pronounced in some particular industries. A recent Experian CheetahMail study showed that travel company marketers increased their email marketing activity 41% in 2012's second quarter, compared to the same time frame in 2011. This is largely a result of the recession easing, and people looking to travel email campaigns to spur them into buying activity.

While travel marketing emails had the largest volume growth, wrote DM News, other vertical segments like consumer products and services (19 % increase), and media and entertainment (16.9% increase) showed prominent growth in email marketing in 2012's Q2.

Innovations in email marketing software are also contributing to the continued success of this potent medium for securing business. Overall, email marketing makes for good business. And that's good for your bottom line. As such, here are six ways that prove email is still the best tool to use in any marketing campaign by companies big and small.

Overall Cost

Email continues to be the most cost-effective method of spreading the word about your company and/or brand. Most companies set up an email marketing campaign based on costs for staff hours, design fees and the cost for your email service itself. In any cases, you can send email campaigns for under $100 to as many as 10,000 users. Email works because it's profitable, and it's profitable because it works.

Customers Are Already Primed

Email is a transactional medium. People receive marketing offers in their inbox every day from various sources. As such, our tolerance for email offers is high, and in fact, studies have shown that the high number of emails helps to 'prime' us to purchase offers. You can in fact “train” customers to learn about your business’ value each and every day, while simultaneously expect offers. Through this process, customers will not only already expect offers from your business but may, after a while, want them.

Email Is An Attention Getter

Most modern office email systems show when new emails are received. When a new email comes in, it gets our attention, and provokes us to interact with the message. This has great benefits. Imagine if someone rang your home bell to tell you that a marketing offer was in your mailbox. You'd likely grumble and tell him to go away. But with email, it's different. And it works.

The key to getting customers to open your email is by getting into their daily reading list. So give customers emails that are worth reading. Customers will start looking forward to receiving your intelligent and relevant emails.

Business-Oriented

Of all the mediums available to market to customers, email is seen as the most business-oriented and professionally mature. Customers already view email as a way to communicate for matters more important than status updates and Facebook links.

A Personal Medium

It is true that many “conversations” are conducted on social media sites and in other mediums, but email remains the most personal. This especially true for older customers who accept messages most closely related to a traditional letter. Business professionals will turn to creative email offers before any other medium, opening up Outlook, Gmail, or any other email system they use before social media.

Billions of Users

Email has over 3 billion users, roughly three times the user accounts of Twitter and Facebook combined. In fact, most of the bandwidth used on the Internet is directly related to email – not even Web searching.

In the end, any business can see that email is still as powerful as it ever was. With the right approach, you can reach thousands of customers through a personal medium that will never go away.

Written by Joshua Gold
Joshua Gold: A Freelance writer, who is addicted to the latest tech gadgets and anything in the automotive field. Always in the mood for good food and an ice cold beer.

Sorry guys!

Izikeo — Thu, 26 Jul 2012 00:53:56 +0000

Hey guys,
Its Izikeo. I would like to personally apologize to you for all the maintenance downtime. Everything is is in order now, and going to stay this way for a while.

As you can tell, with the changes, there will be new additions to the Kazoto site.

First off we would like to welcome our new Author Qix, as he will be writing all kinds of techy stuff for you guys to read.

You can see our new design. It is designed and developed by Elegant Themes so thanks to those guys for an awesome theme. It offers us a lot of functionality we’ve been looking for. With the new design will come premium content, which brings me to my next point.

I developed Kazoto with you guys in mind. I want to give everyone else in the world, some of my hard earned knowledge, and share some of my work as well. I did this with “free” in mind, but some things just cant be free. I mean everyone has to make their keep one way or another right? Well with all this new stuff, comes premium content. Here’s what you can expect:

Premium Tutorials (Where all tutorials will always be free, there were be premium sections to some tutorials)
Premium jQuery & WordPress Plugins
Premium WordPress & HTML / CSS Templates

Ofcourse we will continue to give you free stuff, infact we plan to have free versions of everything we make premium. So keep your eyes open, new stuff is coming your way!

Thats about it.
Thanks for reading guys,
Izikeo

Ten programs that you shouldnt go without.

Izikeo — Wed, 25 Jul 2012 00:29:03 +0000

Hey guys Izikeo here,
Ever wanted to be a web developer, but you could never find the right tools? Me too, been there, done that. Well over time, my collection of tools has increased, and now I would like to share with you, the top ten programs I use everyday, for web development.

First on my list, is probably the oldest program I have in my collection. Photoshop. Its probably the biggest most well known name in image editing. Nothing, and in my opinion I mean nothing, compares to it. Back when I was getting started, adobe was over 800$, and you had to have it, no questions asked. You cant do PSD to HTML without it, and lets face it, it makes designing templates that much easier. Adobe now offers monthly subscription plans that gives you Photoshop Extended, which is 50$ USD a month. Cant get much better.

Here’s some of the features:

Great Image resizing and cropping functionality

Most advanced layering system

Easy to use graphic tools

Great color pickers

PHP Eclipse is probably the best php program I have ever used. I have tried a few, such as Kamodo Editor, Notepad++, and Adobe Dreamweaver. However PHP Eclipse takes the trophy here. It offers good syntax highlighting, good code completion, and easy to understand file structuring.

Heres the features I use:

Project style File structuring

Supports just about every programming language you throw at it

Great syntax highlighting, and you can customize all the colors to your liking.

Code completion, and detects linked files for custom functions

Tabbed content, so you can many open files at once

Supported by all operating systems.

Has code outlines that show parent and child code

This is by far the best screen capture tool I have come across. I always wanted macs function to capture just a part of the screen, but windows doesn’t come default with a program that does this. The default screen capture for windows, captures the whole screen. This to me was annoying because most of the time I only wanted a part of the screen, or maybe just the color code for something, and didn’t need the whole screen. This program fixes this problem. It gives you all kinds of options in screen capture. My favorite, and most used is regional select.

Here’s some of the features:

Multiple screen capture options, such as: Region, Polygon, Full Single Window, Scrolling (for the long web pages you need a screenshot of), Full screen (Similar to windows full screen but better)

You can draw lines, arrows, circles, ovals, etc over the screenshot.

Can set short cut keys for each screen capture option.

Runs in background, can start up with windows to always be active

Requires little to no processing power.

A good developer needs to stay motivated. Coding in silence, I’ve found is very hard to do. I recommend listening to music. Pandora is probably the best radio service I have ever seen. You can choose personalized radios, and create your own station. However some people don’t like radios, so I recommend Spotify. Spotify lets you create play list that with premium can be accessed any where at any time.

Heres some features I like about Pandora:

Random music is sometimes a good thing.

Customize-able stations.

Very cheap for premium only $36 USD a year.

Accessible with your mobile device with internet connection.

With premium version you can choose different layouts

Heres some features I like about Spotify:

Build as many play lists as you’d like

With premium you can take your music anywhere on or offline.

Can pick what song you listen to when ever you want.

Very big music library.

Available on mobile.

Google has probably been my savior. I have learned 4 programming languages purely from Google searching. Every time I get into a bind, these guys bail me out. If you know how to use this search engine, you can be pretty powerful.

You should know most of the features Google search has.

WinSCP is (in my opinion) by far the best windows FTP and SFTP program. It is very light weight, without sacrificing functionality. It’s very easy to use, and beginner friendly. Its set up is very straight forward.

Here’s some of the features I noticed:

Complete control over your upload and downloads.

Light weight, wont bog down your computer.

Offers great functionality such as drag and drop file transfer, and savable sessions.

Transmit is the Mac version of WinSCP. It is the best FTP program for the Mac. It offers many of the same features as WinSCP as well. However it is not a free program, but well worth buying.

Some of its features include:

Drag and Drop File Transfer

Multi-Connection File Transfers

Bandwidth Limiting

Dual Pane Toggling

And more!

Again, Google to the rescue. Google has been my choice for all document writing. Resume, all the way to spreadsheets, Google drive covers it all. It comes in real handy when your boss or client wants to keep track of work progress, as you can share the document with anyone who has a gmail account.

Heres some features I use:

Awesome (not featured filled but enough to do the job) document writing.

Amazing spreadsheets that give you total control.

Drawing tool for graphs and what not.

Presentation tool

Last, but definitely not least, is Dropbox. Dropbox is good for many things, mainly for keeping track of your files between multiple devices. However what I use it for most is to back up my client’s files, so they always have them. You can create folders and share them with anyone that has Dropbox. Its really an awesome storage utility.

Heres its key features:

Awesome storage utility for backing up files

Downloads and uploads are lightning fast.

Runs in the background, no computer lag.

Files are accessible anywhere through the dropbox website.

These are just some of the programs that help me in my everyday programming life. Im sure they will help you along your journey as well.

Till next time,
Izikeo

Helpin’ Out a Friend

Izikeo — Tue, 03 Jul 2012 19:31:06 +0000

Hey guys,
Izikeo here with a quick post. Today I bring you a little bit of a different post. I know many of you are learning developers, or maybe potential clients looking for a “do it yourself” option. Well I bring you a quick solution.

MDS (Miller Design Studio), is a web development firm that can help you do what ever you may need to do. I know many of you are starting a business, and may need a little help here and there. These guys can help you get started.

Heres a little word from them:

Put Miller Design Studios (MDS) on your side, and it’s easier than you may think! MDS is a IT consulting firm specializing in Small businesses and non-profits. We have 10 years experience with the technology, marketing, and regulations small business NEED.

IT is an acronym for Information Technology, which is, by Webster’s definition, “the technology involving the development, maintenance, and use of computer systems, software, and networks for the processing and distribution of data.” MDS started 2002 as a graphic design firm, and expanded to web development and general technology consulting. Every client is provided a customized solution to their needs, and budget – NO cookie cutter projects. This is because no two small businesses, budget, or owner are the same.

MDS provides FREE estimates to every potential client in a two step process. First they sit down with the business owner and/or manager and look over their current work-flows and processes, as well as getting input on the wants and needs of the management. Based on this information your dedicated consultant assembles a multi-tiered solution package for your needs. This ensures that the project not only fits your individual company, but also your budget.

Large corporations have full IT departments, as well as larger budgets. This can make it difficult for small businesses to compete. MDS provides that extra BANG for your buck, that puts you back in the game. Let MDS customize a solution for you today! They can be contacted at their website: http://mdshostingservices.net/ , on FaceBook: http://facebook.com/TNMDS , or you can call them directly at (931) 546-9637.

Cant hurt to give them a try! Check them out Here

Thanks,
Izikeo

mySQL Sorting 101

Izikeo — Tue, 19 Jun 2012 23:01:49 +0000

Hey guys!
Izikeo here with a little tutorial on how to sort your mysql results by one or more rows. Many of you already know how to do this, but those of you that don’t, this tutorial is for you.

First lets make our test mysql database.

Database TEST:

+----------+---------+------------+
| letter   | number  | date       |
+----------+---------+------------+
| B        | 2       | 1991-03-10 |
+----------+---------+------------+
| C        | 1       | 1990-06-13 |
+----------+---------+------------+
| A        | 3       | 1992-06-13 |
+----------+---------+------------+

This how simple it is. Just add a syntax to the end of you string similar to a WHERE statement. This is what it looks like:

SELECT * FROM TEST ORDER BY date;

+----------+---------+------------+
| letter   | number  | date       |
+----------+---------+------------+
| C        | 1       | 1990-06-13 |
+----------+---------+------------+
| B        | 2       | 1991-03-10 |
+----------+---------+------------+
| A        | 3       | 1992-06-13 |
+----------+---------+------------+

If you noticed, that ordered the SQL results by date ascending from oldest date value, to newest. Note that it doesn’t sort the results by when the entry was made, it is sorted by the value of each field. Here’s another example:

SELECT * FROM TEST ORDER BY number DESC;

+----------+---------+------------+
| letter   | number  | date       |
+----------+---------+------------+
| A        | 3       | 1992-06-13 |
+----------+---------+------------+
| B        | 2       | 1991-03-10 |
+----------+---------+------------+
| C        | 1       | 1990-06-13 |
+----------+---------+------------+

Here we tell it to sort the number column descending. This means newest to oldest for dates, highest to lowest for numbers, or A to Z for words. Note that if you have a numbers column that contains numbers like ours, but the field type is text, varchar, or any other text field type, it still sorts highest to lowest. Integers and Textual Numbers are read the same in this case. 0 – 9, is the same has “0″ – “9″. Remember the default order type (without added ASC or DESC) is Ascending, oldest to newest, lowest to highest, or Z to A. Heres how we force Ascending manually:

SELECT * FROM TEST ORDER BY number ASC;

+----------+---------+------------+
| letter   | number  | date       |
+----------+---------+------------+
| C        | 1       | 1990-06-13 |
+----------+---------+------------+
| B        | 2       | 1991-03-10 |
+----------+---------+------------+
| A        | 3       | 1992-06-13 |
+----------+---------+------------+

As you see here, it orders the table by oldest to newest for dates, lowest to highest for numbers, and Z to A for alphabetical characters. 0 – 9 in integer is still the same as “0″ – “9″ in alphanumerical characters.

My test database isn’t set up for the next example, so I will add one more column called random. If you need to sort by multiple tables you can do so like this:

SELECT * FROM TEST ORDER BY number, letter DESC;

+----------+---------+------------+----------+
| letter   | number  | date       | random   |
+----------+---------+------------+----------+
| A        | 3       | 1992-06-13 | L87      |
+----------+---------+------------+----------+
| B        | 2       | 1991-03-10 | S23      |
+----------+---------+------------+----------+
| C        | 1       | 1990-06-13 | A12      |
+----------+---------+------------+----------+

This will sort by the first column, then the second column, and so on for as many columns as you have separated by commas. Note that it did not sort the new column random.

That’s pretty much it! Simple as that!

Thanks for reading,
Izikeo

Sorry again guys!

Izikeo — Fri, 08 Jun 2012 00:53:26 +0000

Sorry guys!
My hosting company has had a lot of problems with DDoS attacks. I have officially switched servers (still with the same company) and gotten a new dedicated IP address.

Sorry again for the downtime!
Izikeo

How to code a flexible jQuery featured content slider

Izikeo — Wed, 06 Jun 2012 04:24:42 +0000

Fixed the comments on the arrow button code preview. Sorry about that guys.

Hey guys!
Comin’ at you with a new jQuery tutorial. This time I’m going to show you how to make a featured content slider, made in jQuery. Its really simple once you get the idea of it. You basically just want to hide the content of the slider, and slide it to the front when you’re ready to display it.

Preview, or Download source files!

Things you might need:

Basic understanding of jQuery.
Understanding of HTML and CSS
A file that has jQuery frameworks in it. You can also link to jQuery.com
About 1 hour of spare time.

Features:

Nice lightweight slider. Doesn’t lag.
Supports just about any kind of slide if you do the CSS right.
You coded it, how much better can it get?

Ok off we go. Lets start with putting our base HTML.



    Kazoto's Featured Content Slider

This is our base HTML. You should already know how to do that part. I also added in a style for the body, that removes all default margin. I also use the a img to remove any borders from linked images in Internet Explorer. If you want to add any other css resets thats fine, or even do it in an external stylesheet.

Now lets get the base html for the slider.

Im using a DIV called wrapper here to position the whole slider. You can achieve the same feat by styling slider, but I like to have a DIV designated to defining the start and end of the slider. You dont need to use the div classed wrapper. Im also using images for my slides. You can use pretty much anything really.

Slides go inside “slider-container” DIV. We use two linked images outside of this DIV for our arrows. One classed left-arrow, and the other classed right-arrow. These will give our viewer the ability to control the slides and choose which slide they want to see.

So the theory is, that we have a DIV that wraps the whole slider contents classed slider, which will be (in my case) 500 pixels in width. This will be where the current slide displays, and will hide the other slides. Then we have slide container. This will hold all the slides, and be moved left or right depending on which slide we are on / moving to. Then we have two arrows, that will overlay the slides, and allow the viewer to go left to right on slides. So lets get to it.

First lets style our Slider.

Ill go through this step by step. If you already know what this CSS does, skip past all this text. First off we have the css reset that I showed you earlier.

Now because I am using images for my slides, I gave them the styles of display: block, and float: left. Naturally images are side by side, but in some to most browsers images have this margin / padding to the right of the image that I find is impossible to remove. Thus I turned them into blocks, and gave them float left, removing that margin / padding to the right. This will make my images all side by side for later. You really want to do this for all slides. If you’re using A HREF you also need display: block, and float: left. If you are using DIVs, you only need float: left.

Wrapper is just there to center my slider and move it 50 pixels from the top of the browser in my test files. You dont need this unless you are following this tutorial word for word. Notice that I have margin-left and margin-right, both set to auto. This is the long code for margin: 0 auto;. I find this to be better practice, because while margin: 0 auto; works in every browser in windows, it aligns to the right on some browsers in Linux and Mac Os X, and we dont want that.

Slider gets the position: relative, because we have position: absolute elements inside of it. This will make our position absolute elements start at the top left of the slider html div, instead of the top left of the entire browser. It gets width of 500 pixels because thats the width of my slider. Overflow hidden to hide all slides that are not the current slide. Height 200 pixels because once we have all position absolute our slider div will not retain its contents height. My slider images are all 200 pixels high so it gets height: 200px;. Now I gave it 500 pixels width, because in junction with overflow hidden, our unactive slides will be hidden past the 500 pixel mark. Yours can be anything, I just gave mine 500 specifically because my image slides are 500 pixels wide.

Left and right arrows get position absolute. This is so we can position them exactly where we want on the slider. z-index is to make sure that the arrows are always on top. 9999 should do. We need the arrows to be aligned with the slider vertically, so to achieve this we take the middle point of the arrow, then subtract that by half of the hieght of the slider. The equation is like this: (slider_height / 2) – (arrow_height / 2).

Never fear its more complicated than it seems. I have a arrow thats 25 pixels tall. Therefore I take half of that 12.5, and round up to 13. Then I have a slider thats 200 pixels tall, and take half that, 100. Then I subtract 13 from 100. Giving me 87. I rounded down but generally you want to round to the nearest whole number which in this case would be up. Do what looks good to you.

So I give the arrows top: 87px;, which will put them 87 pixels down from the top point of the slider. Remember we gave slider position relative, so instead of starting at the top of the browser, you start at the top of the slider div. Left property is how far from the left we want the arrows to be. The left arrow will naturally be closer to the left than the right arrow. I put the left arrow 15 pixels from the left, and the right arrow the same. To find where the right arrow goes, take the width of your slider, subtract the width of the arrow, and the amount of pixels you want to off of the right. In my case I have a 500 pixel width slider, and a 25 pixel width arrow so I would do: 500 – 25 – 15 = 460. Which it would be 15 pixels from the right, and 460 pixels from the left.

slider-container also gets the position absolute. This is because want to utilize the left css property later on with our jquery. It gets a z-index of 9998 to make sure its always on top. We always want it to be on the top of the slider div (note this does not mean on top of html layers, it means 0 pixels from the top of the slider div). We start at left: 0px (jquery will change this). Give it 200 pixels height for good measure, cant hurt, but you dont absolutely need it. Now heres the tricky part. You need to take the width of your slider (mine is 500 pixels in width), and multiply that by the number of slides you have total. I have three slides, so 3 slides at 500 pixels a slide (3 x 500) is 1500 pixels. So my slider container gets a total width of 1500 pixels. This will allow my slides to be side by side (remember we gave the slides float: left). This is good because we will be sliding this whole DIV left and right, which will make it seem as if the content is sliding across the screen.

That pretty much sums it up for CSS.

Ok now remember our goal. We want to hide the unactive slides (we’ve done that with CSS), and we want to slide the new content into our DIV which we have specified a certain width. (half done) Then we want to give our users control over the slides. (half done)

Our next step is to write the jQuery that will make our slider content slide. Here it is:

Get ready for a wall of text.

Ok here we first make sure we include on document ready for jquery. I have had trouble with jquery not working without it. Next we want to define the variable play. This will contain our interval that makes our slider slide on its own. Next we actually set the interval for play, and set it to every 5 seconds. Note that setInterval takes in the second parameter miliseconds. So if you want 5 seconds you put 5000.

Now we need to define some variables. Now I am going to assume you have a basic understanding of jQuery so I wont go to in depth with how each variable works. First we need the current position. So lets get the css left property of our slider-container, being thats the div that will be sliding and utilizing the css left property. Note that it will start on 0 and go into the negatives. So say with my slider thats 500 pixels in width, it will be: left: -500px; at slide 2, -1000px at slide 3, and so on. Next we need to set the total slider width. Mine is 500, but yours can be anything. Finally, we need the total width that we can slide to. This is the total width of your slider-container, minus one full slider width. I achieve this by using jquery to get the width of the DIV slider-container, and subtracting the value of the variable we set for slider width. Alternatively you can just put the container width, and subtract your sliders width, as integers. You dont need any fancy code like I have.

Next we check to see if the current position (remember its going to be 0 or negative) is less than or equal two the negative version of the total_width variable we set earlier. We achieve this by saying curr_position <= -total_width. Just adding the – infront of the variable makes it negative. If it is true, then we use .animate, to slide to left: 0px, and set it to slide for 400 miliseconds. If it isnt true, then our second if statement will be activated.

The second if statement pretty much says, if the current position of the slider-container is greater than the negative version of total_width we set earlier, than use .animate to slide one whole slider width to the left. We use an equation to achieve this. We use the variable curr_position, and subtract slider_width from it. This will make .animate slide 500 pixels more to the left. So if my slider is on slide 2 (-500px), it will take that current position and subtract what I have in the variable slider_width which is 500. So 500 – 500 = -1000 which is slide 3, which I only have three slides, so the next interval tick will set off the first if statement and not this one.

There we go! We are on the right track to having a good slider. Now we need to make the arrow buttons work. This is simple. Ill give you the code first then explain how I got there. Here it is:

$('.left-arrow').click(function(e){
 
    // To stop the a href arrow buttons from
    // making the page jump.
    e.preventDefault(); 

    // Pull the current position of the slider (what slide)
    var curr_position = parseInt($('.slider-container').css('left'));
                
    // Slider total width.
    var slider_width = 500;

    // Total width that we want to slide to. Note that we need to subtract
    // one whole slider width because start on 0.
    var total_width = $('.slider-container').width() - slider_width;
		

    // If the current position is greater than or equal to or
    // is less than 0, slide one whole slider width to the right.
    if(curr_position >= -total_width && curr_position < 0){
			
        $('.slider-container').animate({
					
            left: curr_position + slider_width
					
        }, 200);
			
    }
		
    // If curr_position is greater or equal to 0, slide to
    // the value of negative width. To go to our last slide. 
    if(curr_position >= 0){
				
        $('.slider-container').animate({
 					
            left: -total_width
					
        }, 400);
				
    }

});

$('.right-arrow').click(function(e){
 
    // To stop the a href arrow buttons from
    // making the page jump.
    e.preventDefault(); 

    // Pull the current position of the slider (what slide)
    var curr_position = parseInt($('.slider-container').css('left'));
                
    // Slider total width.
    var slider_width = 500;

    // Total width that we want to slide to. Note that we need to subtract
    // one whole slider width because start on 0.
    var total_width = $('.slider-container').width() - slider_width;	

    // If the current position is less than or equal to the negative value
    // of total width, animate to left: 0px in 400 miliseconds.
    if(curr_position <= -total_width){
			
        $('.slider-container').animate({
					
            left: 0
					
        }, 400);
			
    }

    // If curr_position is less than greater than negative total width,
    // then slide one whole slider width to the left.
    if(curr_position > -total_width){
				
        $('.slider-container').animate({
 					
            left: curr_position - slider_width
					
        }, 200);
				
    }

});

Now for the left and right arrow buttons, you’ll notice that we use the .click jquery function as our operator. Also you’ll notice that the functionality is pretty much a copy paste from the play variable’s setInterval. Thats because we are using similar functionality, just forcing the slider to go forward or backward in slides. Notice that our if statements have changed. In the left arrow if statements, we change the first if statement to say if the current position is greater than or equal to, and it is less than 0, move one slide to the right. This time we are adding one full slider width, because we want to go close to 0 which is our first slide. Then our second if statement says if the curr_position is greater than or equal to 0, then slide to the negative total width of the slider container.

On our right arrow, we have identical functionality as the normal slide routine but we are forcing the slide to go forward one.

Note that each .click function has e as the arguement. This allows us to call e.preventDefault() and make it so the link does not make the page jump to the top (because we have # as the href.

And with that you have a fully functional flexible featured content slider. Experiment with it, try it out. Try adding different kinds of slides. You can code slides that use DIVs, and HTML content. The limits are endless.

Stay tuned, as later on I will continue this tutorial, and teach you how to fix the play interval from skipping when someone hits an arrow button. Also I will show you how to take your slider further, and make it automatically detect the number of slides, and possibly some jquery easing for different animation effects.

Thanks for reading guys, its been a long one.
Izikeo

Like this tutorial? Comment below telling me!