CSS Globe | Web Standards Magazine

CSSG Collection: Free Comment Styles

Tue, 29 Sep 2009 02:31:00 PDT

This is the second CSSG collection I have created for you here on CSS Globe. After FREE form styles here are some free blog comments styles.

As some of you may know I run a small-time template shop called Templatica. In my effort to give that site more visibility (I am being honest here) I decided to move the CSSG collections over to Templatica. Basically all you have to do to get these (and future) free styles is hop over to Templatica and click the download link. I have also written an article about proper comments section markup so your trip to Templatica might be worth its while.

3 Easy and Fast CSS Techniques for Faux Image Cropping

Mon, 07 Sep 2009 04:04:00 PDT

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can't do that yet) we are merely hiding the "extra" and displaying only a part of the image we want. That's why I call it Faux Image Cropping.
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Please note that I am using these techniques on content images (IMG element), not background images.

Technique 1 - Using Negative Margins

Take a look at the demo

With this technique image needs to be placed into parent element, in my case a paragraph. Parent paragraph must be a floating element (or set to a certain width). This technique will not work on full width (block) elements.
We then set negative margins for all 4 sides: top, right, bottom and left. Negative margins define the how far will image be pulled in each direction leaving only part of the image inside the parent. When we set parent's overflow property to hidden we hide the area if the image that is outside the parent - and achieve our goal. You should really play around with the values to get the proper feel of how it works.

So the HTML will look like this:

<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>

and the CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img{
	margin:-20px -15px -40px -55px;
	}

Technique 2 - Using Absolute Positioning

Take a look at the demo

If you don't feel good about using negative margins I suggest using this technique. It involves parent (paragraph) that has a specific width and height. Paragraphs's position property is set to relative. Width and height define the size of the area being displayed. Image placed inside the paragraph has it's position property set to absolute. We can then position it with top and left property and by doing that define which part of the image we'd like to display.

HTML is identical as in previous technique:

<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>

and the CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	position:relative; /* this is important too */
	border:1px solid #ccc;
	width:150px;
	height:90px;
	}
.crop img{
	position:absolute;
	top:-20px;
	left:-55px;
	}

Technique 3 - Using Clip Property

Take a look at the demo

This technique should be the easiest as clip property defines the portion of the element that should be visible. This sounds like a perfect solution but there's one catch: the clipped element must be positioned absolutely. To keep the element in the flow we'll have to add additional element, calculate the size of the visible area of the image, add that size to parent, float the parent... A lot of work, don't you think?
Oh, there's one more catch: the clipped element's size is not reduced to cropped portion, it keeps the original size (width the clipped out area being hidden). We have to use absolute positioning to move the visible area to the top left corner of the parent.

However the clip property shouldn't be left unmentioned here so here goes the code...

HTML is somewhat changed here:

<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

here's the CSS:

.crop{
	float:left;
	position:relative;
	width:150px;
	height:90px;
	border:1px solid #ccc;
	margin:.5em 10px .5em 0;
	}
.crop p{
	margin:0;
	position:absolute;
	top:-20px;
	left:-55px;
	clip:rect(20px 205px 110px 55px);
	}

Conclusion

If you carefully look at the examples one by one you will notice that they all look exactly the same. This once again proves that there are many ways to achieve the same things with CSS. If you ask me, for this particular effect, I would use technique number 1. - negative margins. It is the easiest and fastest of them all plus, when editing, you don't have to change parent values: just change the negative margins and the parent element will adjust.
Hope you liked the article, don't forget to bookmark! :)

Simple Way to Random Display or Rotate Content Using JavaScript and CSS

Mon, 31 Aug 2009 05:03:00 PDT

In a project I did recently there was a need for randomly displayed content in form of one of those "Did you know" tips. There were 8 to 10 paragraphs of text and client wanted to display just one randomly chosen. Since that was the static site I decided to go with front end solution. I am aware that there are many more elegant back-end solutions but read on and you'll see that there are advantages to this as well.

Download the script files

Take a look at the randomly displayed content demo

Take a look at randomly rotating content demo

Let's Get Started

So first the markup. I placed all of the "did you know" tips into one unordered list:

<ul id="tips">
	<li>... if you want to become a better coder you need to eat your vegetables?</li>
	<li>... it takes more time to code a web page then to make a pizza?</li>
	<li>... you should validate your code?</li>
	<li>... jQuery is your friend? For real!</li>
	<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>

The idea is to HIDE all of the tips and then display randomly chosen one using JavaScript.

So to style and hide the tips we use the following CSS code:

#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
	}
#tips{
	width:250px;
	font-size:16px;
	line-height:120%;
	}
#tips li{
	padding:20px;
	background:#e1e1e1;
	display:none; /* hide the items at first only */
	}

The downside to this solution is that initially all of the tips are hidden, so users with disabled JavaScript and enabled CSS will not be able to see them at all while users with disabled JS/CSS (as well as search engines) will see all of them.

To display one of them randomly we will use small jQuery script. Of course you will have to download jQuery put it somewhere on your server and link to it by placing this code inside the head tag of your document (link to your jQuery.js file).

<script type="text/javascript" src="js/jquery.js"></script>

Below that add the following script:

<script type="text/javascript">

this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});

</script>

Short one isn't it. Take a look at the demo (refresh the page couple of times) to see how it works.

Taking it One Step Further

If this simple functionality doesn't satisfy you, here's more. With modifying the above code a bit we can get fade in/out tips that rotate randomly. Of course the code doesn't allow same tip to display twice in a row.
Note that you are able to modify length of the pause between random rotations.

<script type="text/javascript">

this.randomtip = function(){

	var pause = 3000; // define the pause for each tip (in milliseconds) 
	var length = $("#tips li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#tips li").hide();	
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
	};
	
	show(); setInterval(show,pause);
	
};

$(document).ready(function(){	
	randomtip();
});

</script>

Take a look at this demo to see it in action.

Thanks for reading this! If you liked the script please remember to bookmark it, share it and subscribe to rss feed using the links below :) Cheers!

Wordpress: Find Page's Top Level Parent ID

Fri, 07 Aug 2009 07:07:00 PDT

Here's a short WordPress code that I wanted to share with you. I came across a little problem of displaying 2nd and 3d level of navigation in a sidebar no matter what page am I on. After googling for solution, I put together a pieces of a puzzle and came up with a short code snippet.

I created a new page in my theme that I'll be using from now on for displaying side navigation from 2nd level downwards. I named it subnav.php and it's included in my sidebar.php

<?php include("subnav.php"); ?>

Here's the code from my subnav.php:

<?php

if ($post->post_parent)	{
	$ancestors=get_post_ancestors($post->ID);
	$root=count($ancestors)-1;
	$parent = $ancestors[$root];
} else {
	$parent = $post->ID;
}

$children = wp_list_pages("title_li=&child_of=". $parent ."&echo=0");

if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } ?>

This code checks if the page we're on (current page) has a parent. If so, that means that we are at least 2 levels deep in the navigation. In that case function get_post_ancestors is called. It returns an array of all the ancestors' IDs up to the top level (root).
To get the ID of the top level ancestor we need to fetch the last item in that array.
On the other hand, if the page we're on doesn't have a parent it means we are currently on a top level page so we can use the current page ID.

Once we get the ID of the top level parent we can use it in wp_list_pages function to get its children.

Short'n'sweet, hope it helps somebody. :) I'll be using it that's for sure!

Easy Slider 1.7 - Numeric Navigation jQuery Slider

Tue, 04 Aug 2009 08:25:00 PDT

I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don't have the time to answer all of your emails. I wish I do.

What I am presenting you today is an easySlider update with 2 new features. When going through your feedback I noticed 2 feature suggestions appearing very often:

numeric navigation (as an alternative to next/previous buttons)
continuous scroll instead of jumping to the first (or last) slide

So, that's what I implemented in this new version. Now you have the option to choose between classic previous/next navigation or to use a numeric "pagination" style navigation.

Also, your suggestion about continuous scroll made most sense, it is kind of annoying when you have many slides and have to wait for all of them to scroll back to the first one. I had to include it in this version.

Download easySlider 1.7

I suggest that you read about previous versions in order to understand better how it works:

easySlider version 1.0

easySlider version 1.5

Options

So, let's go through all of the options. For your convenience I have written the options from previous version of this plugin, so you can have it all in one place. Here they are with their default values:

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',	
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',	
lastText: 		'Last',
lastShow:		false,				
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false, 
numeric: 		false,
numericId: 		'controls'

prevId

Id attribute for "previous" button. Default value is "prevBtn".

prevText

Inner text for "previous" button. Default value is "Previous".

nextId

Id attribute for "next" button. Default value is "nextBtn".

nextText

Inner text for "next" button. Default value is "Next".

orientation

Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'.

speed

Animation speed in milliseconds, default value is 800.

controlsShow

By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.

controlsBefore and controlsAfter

In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.

controlsFade

By default set to true. If set to false it will disable button hiding when slider reaches the end.

firstShow and lastShow

These parameters hide (or show) "go to first" and "go to last" buttons.

auto

This option enables automatic sliding. If you set it to true the sliding will automatically start and continue to perform untill user clicks one of the buttons.

pause

This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding.

continuous

If set to true clicking the next button when the slider reached the end will simply continue showing all of the slides again with continuous motion. Combining this option with auto (both set to true) you'll get endless animation.

numeric (NEW!)

If you set this option to true you will get numeric navigation instead of next/prev buttons. Plugin will create an ordered list just after the slider div. Ordered list will have the exact number of elements as the slider. Clicking on each of the number will make the animation jump to a certain slide.

numericId (NEW!)

This option defines id attribute for the ordered list. You should use this id to select and style the list with CSS.

Demos

I have 3 new demos here:

Continuous slide

Numeric navigation

Multiple slides

Here you go. If you have any more suggestions, please send them to me and I will consider of implementing them in the next plugin version!