26
Create Simple SlideShow Using Jquery and CSS Tricks
What We are going to do ?
before we are going further , let’s take a look the demo example of our task.
In Present Web World, Image slide-shows, Image galleries are much useful part added by web developers and designers for archiving good looking features to their websites. Today we are going to build simple Image slide-show Using old but gold web technology CSS, Ugly HTML and amazing Jquery Library.
Step by Step explanation of what we are going to do
-
Create slider outer block.
HTML
<div id=”slider”></div>
CSS
div#slider{
width:500px;
height:300px;
margin: auto;
}
applying above css to our block, it will be covert with 500px width and 300px height.
2.Create slider mask.
Suppose our Slider show consists of 5 images with 500px width and 300px height. Then our slider mask should be 5 times of width when comparing with outer block. Our slider mask then should be put inside the outer block.
HTML
<div id=’slider’> <!-- outer slider --> <div id=’slider-mask’> </div> <!-- slider mask div -- > </div>
Now what happened is, our outer block will be take image slider mask width ( 500 x 5 ==2500px). But we have to keep original width for the outer block.
Here comes into play CSS to achieve our purpose.
If we can hide this overflow width we can succeed. Yes we can do that. Lets modify our CSS for the outer block.
CSS
div#slider{
Width:500px;
Height:300px;
<strong>Overflow :hidden;</strong>
}
Using overflow property and related hidden value, We have done this. overflow :hidden will hide both overflowed width and height from its original width and height.
Now our slider mask block will stay with its original height and width inside outer block.but we only can see its one five from its original width.
CSS
div#slider-mask{
width: 500%; /* set width as five time of outer block */
height: 100%; /*set same size of the outer block */
}
3. Create slider Item blocks.
Now we can create 5 blocks for our 5 images inside the slider mask. As mentioned earlier our images will be the same dimensions of the outer slider. Then we can create same slider item block with the same dimensions of a image.
Lets do that.
HTML
Since Originally div element are block level elements and they assort them top to bottom themselves. But what we need to do here is float them as left to right. Lets continue our works.
CSS
div.slider-item{
width: 20%; /*set same outer block width.since our slider item block is inside the mask we need to get one five times from slider mask width */
height: 100% /*same slider mask width. This is the same width of outer block */
position:relative ;
<strong>float:left; /*this will float our slider images left to right. */</strong>
}
Lets look at slider item CSS again. You can see that we have added relative value to position css property. This property will be helpful to animate our slide-show in latter Jquery part.
4.adding images to each slider item.
Now we can put our 5 images inside slider items.
HTML
<div id="slider"> <!-- outer slider --> <div id="slider-mask"> <div class="slider-item"> <img src="./images/slider-image1.png" alt="" /> </div> <div class="slider-item"> <img src="./images/slider-image2.png" alt="" /> </div> <div class="slider-item"> <img src="./images/slider-image3.png" alt=""/> </div> <div class="slider-item"> <img src="./images/slider-image4.png" alt="" /> </div> <div class="slider-item"> <img src="./images/slider-image5.png" alt=""/> </div> </div> <!--slider mask div -- > </div>
5.Asking Jquery help
Before animating our slider we need to load jquery library and put them inside our header tags.
<head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head>
Here’s the code to link to Google’s jQuery repository. It grabs the latest jQuery version.
We are now creating JavaScript function for animating our slider.>
<script type="text/javascript">// <![CDATA[
var n=0;
function slideShow(){
id=n%5+1;
leftPos=(1-parseInt(id))*500+"px";
$("div.slider-item").animate({ left:leftPos},1500);
n=n+1;
s=setTimeout("slideShow()",3000);
}
// ]]></script>
Explaining above funciton line by line.
- var n =0; We set 0 as the initial value to the JavaScript variable called n.
- id=n%5+1; Get the reminder value by solving n divided by 5 and assign reminder value to the js variable called id. Here 5 is no of images of our slide-show. Initially this will be 1 since n=0 .
- leftPos=(1-id)*500+”px”; This equation initially will set to the (1-1)*500 = 0 and adding string “px” to the computed value. Final value is assigned to js variable called leftPos. Here 400 is the image width/outer block width of our slider.Initially leftPos value will be 0px.
- $(“div.slider-item”).animate({ left:leftPos},1500); This is how we are animating our slider. We wrap slider elements with class slider –element and push all of them to 500px left side direction from their original position within one and half seconds. we are doing it by changing left css property of slider item. We couldn’t apply left property unless we set their position as relative, absolute or fixed. But we have done it in our one of previous steps. Got it…
Initially left property is set to 0px. Therefore slider items will be pushed to left from their initial positions.
- n=n+1; Incrementing the n variable from 1.
- s=setTimeout(“slideShow()”,3000); This will be the nicest part in our function. SetTimeOut function is the predefined js function and it can be used to called another js function once for the specified time period as a continuous loop unless we advice it to stop looping.Here we called our same function in every 3 second. For the second time our function called by the setTimeout function variable n will set as 1.If n==1Then id will be assign as 2 and leftPos will be -400px and slider item will position -500 px to left from their original position. Now 1st slider item disappear and 2nd slider item will be comes to the stage.
if n==2 Then id will be assign as 3 and leftPos will be -1000px and slider item will position -1000 px to left from their original position. Now 1st ,2nd slider items will disappear and 3rd slider item will be comes to the stage.
If n==3 Then id will be assign as 4 and leftPos will be -1500px and slider item will position -1500 px to left from their original position. Now 1st ,2nd and 3rd slider items will disappear and 4th slider item will be comes to the stage.
If n==4 Then id will be assign as 5 and leftPos will be -2000px and slider item will position -2000px to left from their original position. Now 1st ,2nd and 3rd and 4th slider items will disappear and 5th slider item will be comes to the stage.
if n==5Then id will be assign as 1 and leftPos will be 0px and slider items will position 0px again and get their original position again. This will again show the 1stslider in the stage and others are hidden by the outer slider.You can see that this will be continuously happened since id value only change 1-5 with respect to the n.
5.Final Step.
We have almost done everything. Only one step away. Yet our slider show will not run as we expected 
. Our function will not automatically run as our code executed inside web browser. For automatically execute our slider function we need to call our function inside the jquery document.ready function.
<script type='text/javascript'> <pre><strong>$(document).ready(function() { slideShow });</strong></pre> var n=0; function slideShow(){ id=n%5+1; leftPos=(1-parseInt(id))*500+"px"; $("div.slider-item").animate({ left:leftPos},1500); n=n+1; s=setTimeout("slideShow()",3000); } </script>okay...now you are done....
download source code from here
10
Run Magento Indexer From Command Line
In some situation when you want to re-index Magento catalog you will get an error message or reindex process will be broken or processing..This problem is appearing when you have a lot of products in database and limited server resource. You can try to reindex from command line or shell.
Step 01: loginto your server using ssh.
Step 02: goto your magento installed folder
cd /your-magento-path
Step 03: type below command to index all
php shell/indexer.php --reindexall
some extra options
* To check the status
php shell/indexer.php --status
* To get information
php shell/indexer.php info
* To see other available options
php -f shell/indexer.php help
That’s all for now… 
11
Create Simple Captcha For your Web Site
Brief Description of the Word Captcha
Obviously, CAPTCHA is an acronym. The question is what does it stand for? The answer is fairly simple, as is CAPTCHA’s purpose. A CAPTCHA, or Completely Automated Public Turing-test to tell Computers and Humans Apart, is used to keep bots and other automated programs from signing up for offers, collecting or signing up for email addresses, violating privacy, trying to crack passwords, or sending out spam to unsuspecting email recipients. A CAPTCHA works by issuing a challenge to the person or entity attempting to gain access.
A CAPTCHA challenge is usually a simple visual test or puzzle that a sighted human can complete without much difficulty, but that an automated program cannot understand. The test usually consists of letters, numbers or other images that overlap or intersect. The images are distorted in some way or shown against an intricate background to keep them from being easily read by another computer.
Basic Requirements for Creating Captcha Using PHP
GD library
GD is an open source code library for the dynamic creation of images by programmers. You must need to have this Library for creating your captcha image dynamically. You can check your server support GD library functions by checking PHP information.
<?php phpinfo() ; ?>
Step By Step for implementing our Captcha
- Create a php file for generating our Captcha image. ( I created the file called captcha.php) and add the Session Start Function on top of the file.
<?php session_start(); ?> - Add the Below Function for generating Random alphanumeric string of a specific length.//generate a random alphanumeric string of a specific length
function gen_random_string($length) {
$characters = “0123456789ABCDEFGHIJKLMNOPQRSTUVWZYZ”.
“abcdefghijklmnopqrstuvwxyz”;
$real_string_length = strlen($characters) – 1;
for($p=0;$p<$length;$p++)
{ $string .= $characters[mt_rand(0, $real_string_length)]; }
return $string;
}
- add to session array so other scripts can access it for the comparison.
$_SESSION['image_text']= gen_random_string(8); // 8 random characters chose as our captcha text. - Setup the captcha image with a background image.
$NewImage =imagecreatefrompng(“captcha_background.png”);“imagecreatefrompng” is a GD Library function for creating a dynamic .PNG images. Visit http://php.net/manual/en/function.imagecreatefrompng.php to find more info. - Now we can insert our random texts on our png image created.$text_array = str_split($_SESSION['image_text']);
$cntr = 0;
foreach($text_array as $letter){
//generate a random color for each letter
$r = rand(0,200);
$g = rand(0,200);
$b = rand(0,200);
$textcolor = imagecolorallocate($NewImage, $r, $g, $b);
//random horizontal spacing
$spacing = 2*(rand(5,10)+($cntr*10));
//add the character to the image
imagestring($NewImage, 100, $spacing, rand(0,10), $letter, $textcolor);
$cntr++;
}
in above code “imagecolorallocate” is a GD Library function which sets the color values for our each text. Please Visit http://www.php.net/manual/en/function.imagecolorallocate.php for more info.
the function “imagestring” is another GD Library function. This helps to draw a text horizontally on our png image. To Find more info please visit http://www.php.net/manual/en/function.imagestring.php
- Now we can Genarate our image as follows.//output the headers than the image as a PNG
header(‘Content-type: image/png’);
header(‘Cache-Control: max-age=0′);
header(‘Expires: ‘.gmdate(‘r’,time()-3600*24*365));
header(‘Pragma:’);
ImagePNG($NewImage);
imagedestroy($NewImage);
Calling our Captcha image
Now we can call our captcha image simply as follows in another php file. (I created the file called index.php)
<img id=’captcha’ name=’captcha’ src=”captcha.php”>
Demo
Please visit http://demos.mclanka.com/captcha/ to see the demo.
Download Source Code
You can download the source code by visiting http://demos.mclanka.com/captcha/captcha.zip
What is Next
In this tutorial. I was trying to explain how to create our own captcha for our website. As a next step, I ll explain how to apply our captcha for practical examples like form validation etc.
5
Retrieving data from the database table
For Retrieving data from the database, we first need to open a connection and select the relevant database where our data table exists. Here our database will be “test”;
mysql_connect(“localhost”, “username”, “password”) or die(mysql_error());
mysql_select_db(“test”) or die(mysql_error());
The next step is to send an SQL query – in this case a Select statement – to the database.
Now try to get all records from MySQL. The SQL statement for this is:
SELECT * FROM users;
Using above MySQL statement we can get all records from the user table.
We need to send this command to the server and store the response. We can do this by using the mysql_query() function in this way:
$result = mysql_query(“SELECT * FROM users”);
If you try to print it with echo then you will get an output something like this:
Resource id #3
This is not what we want. To display the selected data correctly you need to do a bit more. There are more functions in PHP which you can use to retrieve data from a MySQL database result set. These are the followings:
- mysql_fetch_assoc() – Fetch a result row as an associative array
- mysql_fetch_row() – Fetch a result row as an enumerated array
- mysql_fetch_array() – Fetch a result row as an associative array, a numeric array, or both
All of them convert one record of the result to an array and later you can use this array as you want. To get the array you need to call one of the above mentioned functions. In this case I use the associative version.
$row = mysql_fetch_assoc($result);
echo (“ID: “.$row['id'].”,
Name:”.$row['name'].”,
City:”.$row['city'].”,
Age:”.$row['age'].”<br/>”);
However the function returns only with one record. To list all of the records we need to create a loop. The fetch functions returns with an array if there is a record in the result set and returns false if no more records are available. So creating a while loop is very simple as here:
$result = mysql_query(“SELECT * FROM users”);
while ($row = mysql_fetch_assoc($result)){
echo (“ID: “.$row['id'].”,
Name:”.$row['name'] .”,
City:”.$row['city'].”,
Age:”.$row['age'].”<br/>”);
}
16
CSS Box Model
Most HTML elements (ex-div,a etc..) can be valued as boxes. In CSS, the label “box model” is used for the design and layout of the website. The CSS box model is basically a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model enable us to insert a border around elements and space elements relative to other elements.
CSS box model illustration
Explanation of the different parts
- To set the width and height of an element correctly in all browsers, you need to know how the box model works.
Width and Height of an Element
| Important: When we specify the width and height properties of an element with CSS, we are just attributing the width and height of the content area. To know the full size of the element, we must also add the padding, border and margin. |
The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let’s do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
2
Text shadow in CSS
In our CSS file, add the following to the element we wish to target:
text-shadow: -1px 1px #FEE3A9
- The first value moves our text shadow horizontally on the x axis.
- Negative figures move it to the left of the text, positive figures to the right.
- The second value moves our text shadow vertically on the y axis.
- Negative figures move it above the original text and positive figures move the shadow below.
- The 6 digit code (hex value) sets the color.
27
Whats Really Important In SEO Nowadays
In the world of internet marketing people nowadays have a big list of things to do to impress Google and other search engines to gain authority in search engine optimization (SEO).Here we focus our selves on getting some tips on related backlinks.So where your site ranks for a given keyword is still largely depends on the backlinks that you get.Regardless of the quality of the web site (Believe me, I have seen some crappy looking web sites that ranks for number one for a competitive key phrases) having good PR backlings is essential if you want to rank higher in serps (Search engine result pages).There are several ways to get backlinks to your web site. You can comment on related blogs or forums where you get the chance to put in your site page link. But nowadays more and more site owners are putting the dreaded nofollow attribute to their blog/forum comments.So this process is getting harder by the day.
However you can still do article marketing and write professional articles to these blog where they accept them.You can put a backlink or maybe 2,3 in the body of these articles. Those are much valuable links than comments. Also there are article directories which accept guest articles or you can be a member and send them regular articles.Re-writing your articles is a great way to get more links.There are article distribution services which can distribute your unique copies of the base article all over the internet.A great way to get some quality backlinks.But the downside is creating a great article with great re-written value is very time consuming. If you do not re-write enough Google will only count one or two backlinks and consider others as duplicates.
Proper way to get grate backlinks is by getting them from authority sites for a certain niche. Authority sites are sites that google has marked being the subject matter experts on the web.So if you can somehow get a backlink from these sites you should be really happy with your self.For example if you have a blog about astronomy and you get a link from nasa.gov web site then you have one of the best possible backlinks to your site.
Authority is determined from several factors such as page rank (page rank is generated via backlinks), domain age, traffic, loading time, number of content pages etc.You have to go an extra mile to get links from these sites.Maybe be by paying them or writing a polite letter asking for any opportunity to write a guest article etc. 90% of the time the answer is no. But when you do hit the jackpot you can cover up for all the time you spent on trying it.
For getting your web site optimized and receive more traffic/sales please visit our web site and drop us a message. One of our skilled staff members will contact you with more details.
22
Importance of !important keyword in CSS
Whenever you use CSS (Cascading Style Sheets), defined styles are applied in the same order as they are read by your browser.
If a style is present at the top of a stylesheet and is changed afterwards in the document, the new property will be applied.
Let’s see that in details.
h3 {
color: #0000ff;
}
This line will set your
header tag to blue. However, if further down in your stylesheet you redefine the
tag:
h3 {
color: #ff0000;
}
h3 {
color: #ff0000;
}
The color of your
heading will now be red.
The !important rule in CSS is used whenever your want to prevent some property to be redefined.
h3 {
color: #0000ff !important;
}
This way, even if you redefine the
tag again in your stylesheet, the
tag will stay blue. However, this does not work Properly with IE(Internet Explora).
Example Code>>
(x)HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Importance of !important keyword in CSS</title></head>
<body>
<h3> Testing keyword </h3>
</body>
</html>
Example Code>>
(x)HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Importance of !important keyword in CSS</title></head> <body> <h3> Testing keyword </h3> </body> </html>
CSS file :
h3 {
color: #0000ff !important;
}
h3 {
color: #00ff00;
}
Now Remove the !important and refresh the page. You’ll notice the text turns to green.
22
Rounded corners Effects with Cross-Browsing Alternatives
Currently there are multiple variations for creating a HTML elements with rounded corners.
The simplest of these is the method that uses CSS3.
Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50
pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet
Explorer (even IE8) does not support this property.
*Using following CSS, We can achive our goal.
OUR STYLE
border-radius for modern browsers
This is the way that works in all modern browsers (except IE8) like FireFox, Safari,
Chrome and Opera since 10.50 pre-alpha:
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
border-radius for Internet Explore
Download the border-radius.htc file, put it somewhere on your site, and then use this CSS
code:
.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}
And replace http://yoursite.com/ on your absolute path, where you have placed the
border-radius.htc file.
border-radius for All Browsers
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
behavior: url(http://yoursite.com/border-radius.htc); /* IE */
}
HTML CODE
<div class=”rounded-corners” style=”width:200px;height:20px;background:#00f;text-align:center;”>Rounded Corner div</div>
22
Using robost.txt file for Better Search Engine Optimization
What is robots.txt?
When a search engine crawler comes to your site, it will look for a special file on your site. That file is called robots.txt and it tells the search engine spider, which Web pages of your site should be indexed and which Web pages should be ignored. This is an integral part of search engine optimization (SEO).
The robots.txt file is a simple text file (no HTML), that must be placed in your root directory, for example:
http://www.yourwebsite.com/robots.txt
How to create robots.txt file?
A robots.txt is just a simple text file that can be easily created using any text editor such as Notepad and save it exactly as robots.txt.
Here is the basic syntax of a robots.txt file
User-agent: *
Disallow: [files or folders that are excluded]
User-agent: * The asterisk (*) or wildcard means that all the instructions within the robot.txt file are applicable to all search engine spiders (Google, Yahoo, MSN and others) whereas
Disallow: when leave blank basically tell those spiders to crawl and index the entire site which is of course not the most prudent thing to do with respect to SEO.
Using robots.txt file with exaples.
| To ignore the whole site for all spiders.User-agent: *
Disallow: /
|
To ignore a specific directory for all spiders.User-agent: *
Disallow: /cgi-bin/ Disallow: /tmp/ |
| To allow specific spiders onlyUser-agent: Googlebot [google spider]
Disallow: User-agent: * Disallow: /
|
To prevent specific spidersUser-agent: MSNbot [MSN spider]
Disallow: /
|
Get Premium Tutorials Free
Recent Posts
Archives
- May 2012 (2)
- April 2012 (3)
- March 2012 (6)
- February 2012 (5)
- January 2012 (4)
- December 2011 (8)
- November 2011 (9)
- October 2011 (6)
- September 2011 (3)
- August 2011 (2)
- July 2011 (3)
- June 2011 (45)
- May 2011 (3)