Count Down Timer


Karthick M

<!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>Day Counter</title>
<style type=”text/css”>
body {
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
}
.title {
display:block;
text-align:center;
padding:10px;
background:#CCCCCC;
width:500px;
margin:10px auto;
}
.number-box {
width:182px;
height:150px;
font-size:80px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
line-height:150px;
background:#0066CC;
border-radius:12px;
}
</style>
http://”jquery-1.7.2.min.js”
<script>

View original post 291 more words

JavaScript Content Typewriter


Karthick M

<!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>Untitled Document</title>
<style type=”text/css”>
body {
background:#333333;
font-family:Arial, Helvetica, sans-serif;
}
.text-container {
width:400px;
padding:10px;
font-size:12px;

View original post 138 more words

An Introduction To The CSS3 Multiple Column Layout Module


Joliet Junior College-Web Design Certificate


Tutorial Details

Topic: CSS3 Column Layout

Difficulty: Beginner

DownloadSOURCE FILES

DemoVIEW IT ONLINE

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I’m going to be taking a look at some of its properties and demonstrate them through a series of examples.

 

Introduction

Anyone who has tried to create multiple columns in the past using CSS will already know that this type of layout has been achievable for a long time. However, this has often resulted in the use of hacky techniques and floats. More often that not this has been quite time consuming and definitely not the easiest of layouts to create. The truth is creating multiple columns using CSS has been an extremely awkward process up until now. The multi column layout module offers more flexibility and control over previous CSS methods.

The new…

View original post 1,949 more words

Display List of Post other than which is open from one category


<div>
<?php
if ( is_single() )
{
$cats = wp_get_post_categories($post->ID);
if ($cats)
{
$first_cat = $cats[0];
$args=array(
'cat' => $first_cat, //cat__not_in wouldn't work
'post__not_in' => array($post->ID),
'showposts'=>5,
'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() )
{
echo '<h3 class="widget-title" style="height:40px;">Related Posts</h3>';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div style="height:85px; font-size:14px; color:#555555; font-weight:bold; line-height:22px;">
<?php if(catch_that_image() == '/images/default.jpg'): ?>
<img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/uploads/2013/05/default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" align="left" hspace="5" width="105" />
<div style="padding-left:115px;">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" style=" text-decoration:none; color:#333;">
<?php the_title(); ?>
</a>
</div>
<?php else : ?>
<img src="<?php echo catch_that_image();?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" align="left" hspace="5" width="105" />
<div style="padding-left:115px;">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" style=" text-decoration:none; color:#333;">
<?php the_title(); ?>
</a>
</div>
<?php endif; ?>
</div>
<?php endwhile;
}
}
wp_reset_query(); // Restore global post data stomped by the_post().
}
?>
</div>

In this code above I have used catch_that_image() function. This function is used to display the image which is present in the post to the listing page. For the function click here.

function to display image of the post


I have created a simple function to display the image which is present in the post to the listing page of the posts.

function catch_that_image()
{
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img))
{
//Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}