Prettify Hyperlinks using CSS3 Attribute Selectors

Today i’m came across blog bloggermint the CSS3 attribute which provide more flexible. Im going to show you few examples.

CSS3 Beginning Substring Attribute Value Selectors

e[att^='value'] { declarations here.... }

This selector matches the elements which have an attribute containing a value that startswith the specific value.

CSS3 Any Substring Attribute Value Selectors

e[att*='value'] { declarations here.... }

This selector matches the elements which have an attribute containing at least one occurrence of string “value” as substring.

CSS3 Ending Substring Attribute Value Selectors

e[att$='value'] { declarations here.... }

This selector matches the elements which have an attribute containing a value that ends with the specific value.

Note :

  • stands for elements such as p, a, img, div and more.
  • att stands for attributes like class, id, title, rel, cite, href, alt and more.
  • value stands for attribute values
Example for Value Selector
This is a sample<a href=”http://www.saisat.wordpress.com”>Satheesh Kumar Rajendiran</a>
This is a sample <a href=”mailto:satrece@gmail.com”>SaiSatheesh</a>
Values for the attribute are http://, mailto: We can use this for designing in css3
a[href^='http'] {
background: url(images/link.png) no-repeat left;
padding-left:20px;
}
a[href^='mailto'] {
background: url(images/email.png) no-repeat left;
padding-left:20px;
}
Output
Example for Ending Substring Attribute Value Selector
Since the ending value for the attribute href are .pdf and .png. we can use Ending Substring Attribute Value Selector to link.
a[href$='.pdf'] {
background: url(images/pdf.png) no-repeat left;
padding-left:30px;
}
a[href$='.png'] {
background: url(images/png.png) no-repeat left;
padding-left:30px;
}

Output

Any Substring Attribute Value Selector

This is a sample <a href=”http://www.bloggermint.com/word.doc?somewordhere”>Word Document</a>.
This is a sample <a href=”http://www.bloggermint.com/script.js?somewordhere”>Javascript</a&gt;.

a[href*='.doc'] {
background: url(images/file_doc.png) no-repeat left;
padding-left:25px;
}
a[href*='.rar'] {
background: url(images/file_rar.png) no-repeat left;
padding-left:25px;
}

Output

Shortcode for WordPress

Today, i have gone through a blog very helpful and useful for me in wordpress development for shortcode. So i thought of sharing the information to all of you guys.

I don’t know how many of you know or used short codes in WordPress. I personally feel, short codes is one of the great features that enables to perform functions withing the post. Normally we cannot execute a function on WordPress, but with short codes you can achieve that. The short codes are quite handy for template designer to let their users to execute certain actions just by using the codes. OK, so lets have a detailed look on it

What are Shortcodes basically?

Shortcodes are the easiest way to execute certain actions. It doesn’t have any rocket science, just a couple of codes can get you started with the shortcodes. So here we go

To start the explanation, let me talk about a inserting a portfolio in your WordPress blog post. Short codes normally look like this

[portfolio]

WordPress shortcode API allows you to add attributes, suppose if you want to display a particular portfolio on the post, you can use id's to categorize it. So the short code will look like this

[portfolio id="35"]

Id is not the only supported attributes, you can create your own attributes by using array

function portfolio( $atts ) {
        extract( shortcode_atts( array(
                'value' => 'something',
                'count' => 'something else',
        ), $atts ) );

So the above code says [portfolio] shortcode supports two attributes – value and count

Let me show you an example

A simple shortcode would look like this. For demonstration I am using an output “Test Message” for a short code test

Note: All the shortcodes should be placed in functions.php

function testfn() {
    return 'Test, Message';
}

Now we need to create a shortcode to return this value. WordPress has a damn simple technique to create a shortcode. Here “test” is the shortcode and “testfn” is the function that has to be called when you use “test”

add_shortcode ('test', 'testfn');

Finally add the below code in your post to out the message “Test Message”

[test]

Now let me show you a useful example of using shortcodes

Bloggers would want to display Adsense ads withing their post, but as I said earlier WordPress doesn’t support executing codes withing the post. So obviously most of the Bloggers rely on a plugin to achieve that.

Here is a little demonstration of how shortcode can be used to embed Adsense ads anywhere in the post, like the way you wanted it to be. [Tip via WPRecipes]

Go to functions.php and place this code

function displayad() {
    return ‘<div id=”adsense”><script type=”text/javascript”><!–
        google_ad_client = “pub-XXXXXXXXXXXXXX”;
        google_ad_slot = “4668915978”;
        google_ad_width = 468;
        google_ad_height = 60;
        //–>
</script>

<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”&gt;
</script></div>’;
}

add_shortcode(‘adsense’, ‘displayad’);

The adsense ad is wrapped in a div adsense to easily style up to look attractive within posts and replace your Pub ID and the dimension

Now go to edit post and insert the below code within the post to display ads with post

[adsense]

For further in Shortcode

Instant Font Resizer using Jquery

Nowadays, In all website and blogs has the font re-sizer. So many developer/designers struggling to get this. Writing so many CSS and Javascript. Here i’m going to give few simpler and instant font re-sizer. For further info: jFontsize.

Step 1. Download the Js file

Upload the js file to the server. Add the script before </head> in your index.html

<script src=”http://www.jfontsize.com/files/jquery.jfontsize-1.0.js&#8221; type=”text/javascript”/>

Step 2. Customize CSS

Add below class in your stylesheet

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;
}

.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;
}

.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;
}

Step 3.  Assigning Font resize Function

<a id=”jfontsize-minus” class=”jfontsize-button” href=”#”>A-</a>
<a id=”jfontsize-default” class=”jfontsize-button” href=”#”>A</a>
<a id=”jfontsize-plus” class=”jfontsize-button” href=”#”>A+</a>
<p class=”PUT-THE-CLASS-NAME”>
Place your content here
</p>
<script type=”text/javascript” language=”javascript”>
                        $(‘.PUT-THE-CLASS-NAME’).jfontsize({
                            btnMinusClasseId: ‘#jfontsize-minus’,
                            btnDefaultClasseId: ‘#jfontsize-default’,
                            btnPlusClasseId: ‘#jfontsize-plus’
                        });
</script>

Just replace the “PUT-THE-CLASS-NAME” as your class where you need the font resizer to work on.

For the live demo and you can download full source code

YouTube Video as Website Background – Jquery Tubular

Jquery Tubular plugin was created by Sean McCambridge, a front-end developer from Chicago, USA. This awesome plugin  you can set a YouTube video as your website/ blog’s background. Just call it on yourtag with a YouTube video ID.

To add youtube video as background in your site or blog,

1. Add the JS File of the Tubular plugin into your page and download the JS file from the link upload in the server.

2. Now call the JS in your header

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

<script type="text/javascript" charset="utf-8">
      $().ready(function() {
                $('body').tubular('someYTid','wrapper'); // where someYTid is the YouTube ID and wrapper is your containing DIV.
        });
</script>

Replace the word someYTid in the code with ID of desired Youtube video which you can get from its URL like shown in the image below.

For more information, visit http://www.seanmccambridge.com/tubular/.

Text Area Counter Using Javascript

I have created the text area counter character counter using  javascript. I’m sharing the script to you guys.

Script:

<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else 
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<textarea cols="32 " rows="10" name="message" id="message" class="inputbox required" onkeydown="textCounter(this.form.message,this.form.remLen,500);" onkeyup="textCounter(this.form.message,this.form.remLen,500);" ></textarea><br /><input type="text" class="wordlimit" value="500" readonly="readonly" name=remLen size="5" maxlength="5">

Guys try and comment on this.

QR Code in PHP

Technology keeps on growing. Nowadays in web everyone needs the QR code.

Brief on QR Code:

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional code) first designed for the automotive industry. More recently, the system has become popular outside of the industry due to its fast readability and comparatively large storage capacity. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be made up of any kind of data (e.g., binary, alphanumeric, or Kanji symbols)

Eg: You convey message/Address/Phone etc., through QR code

Using PHP we can develop the QR code.

<?php
function generateQRwithGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0') {
    echo '<img src="http://chart.apis.google.com/chart?chs='.$widhtHeight.
'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.'|'.$margin.
'&chl='.$chl.'" alt="QR code" widhtHeight="'.$widhtHeight.
'" widhtHeight="'.$widhtHeight.'"/>';
}
if(isset($_POST['Go'])){
$urlToEncode = $_POST['urlToEncode'];
generateQRwithGoogle($urlToEncode);
}
?>
<form method="post" action="" name="ff1" id="ff1">
<input type="hidden" name="process" id="process" value="1">
QR encode: <input type="text" name="urlToEncode" id="urlToEncode" style="width:220px;"><input type="submit" name="Go" value="Go">
</form>

Slider Control

In my recent project, client asked for the slider control for the no.. of users field as slider control. I have done that. So i thought of sharing that you guys.

Create folder “img” and save these two.

 (sldr2h_bg.gif)  and  (sldr2h_sl.gif)

Create Js file as “slider.js

function slider (a_init, a_tpl) {

	this.f_setValue  = f_sliderSetValue;
	this.f_getPos    = f_sliderGetPos;

	// register in the global collection	
	if (!window.A_SLIDERS)
		window.A_SLIDERS = [];
	this.n_id = window.A_SLIDERS.length;
	window.A_SLIDERS[this.n_id] = this;

	// save config parameters in the slider object
	var s_key;
	if (a_tpl)
		for (s_key in a_tpl)
			this[s_key] = a_tpl[s_key];
	for (s_key in a_init)
		this[s_key] = a_init[s_key];

	this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue);
	if (this.n_value == null)
		this.n_value = this.n_minValue;

	// generate the control's HTML
	document.write(
		'<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +
		'<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'
	);
	this.e_base   = get_element('sl' + this.n_id + 'base');
	this.e_slider = get_element('sl' + this.n_id + 'slider');

	// safely hook document/window events
	if (!window.f_savedMouseMove && document.onmousemove != f_sliderMouseMove) {
		window.f_savedMouseMove = document.onmousemove;
		document.onmousemove = f_sliderMouseMove;
	}
	if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp) {
		window.f_savedMouseUp = document.onmouseup;
		document.onmouseup = f_sliderMouseUp;
	}
	// preset to the value in the input box if available
	var e_input = this.s_form == null
		? get_element(this.s_name)
		: document.forms[this.s_form]
			? document.forms[this.s_form].elements[this.s_name]
			: null;
	this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1);
	this.e_slider.style.visibility = 'visible';
}

function f_sliderSetValue (n_value, b_noInputCheck) {
	if (n_value == null)
		n_value = this.n_value == null ? this.n_minValue : this.n_value;
	if (isNaN(n_value))
		return false;
	// round to closest multiple if step is specified
	if (this.n_step)
		n_value = Math.round((n_value - this.n_minValue) / this.n_step) * this.n_step + this.n_minValue;
	// smooth out the result
	if (n_value % 1)
		n_value = Math.round(n_value * 1e5) / 1e5;

	if (n_value < this.n_minValue)
		n_value = this.n_minValue;
	if (n_value > this.n_maxValue)
		n_value = this.n_maxValue;

	this.n_value = n_value;

	// move the slider
	if (this.b_vertical)
		this.e_slider.style.top  = (this.n_pathTop + this.n_pathLength - Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
	else
		this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';

	// save new value
	var e_input;
	if (this.s_form == null) {
		e_input = get_element(this.s_name);
		if (!e_input)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with ID='" + this.s_name + "'.");
	}
	else {
		var e_form = document.forms[this.s_form];
		if (!e_form)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the form with NAME='" + this.s_form + "'.");
		e_input = e_form.elements[this.s_name];
		if (!e_input)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with NAME='" + this.s_name + "'.");
	}
	e_input.value = n_value;
}

// get absolute position of the element in the document
function f_sliderGetPos (b_vertical, b_base) {
	var n_pos = 0,
		s_coord = (b_vertical ? 'Top' : 'Left');
	var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;

	while (o_elem) {
		n_pos += o_elem["offset" + s_coord];
		o_elem = o_elem.offsetParent;
	}
	o_elem = o_elem2;

	var n_offset;
	while (o_elem.tagName != "BODY") {
		n_offset = o_elem["scroll" + s_coord];
		if (n_offset)
			n_pos -= o_elem["scroll" + s_coord];
		o_elem = o_elem.parentNode;
	}
	return n_pos;
}

function f_sliderMouseDown (n_id) {
	window.n_activeSliderId = n_id;
	return false;
}

function f_sliderMouseUp (e_event, b_watching) {
	if (window.n_activeSliderId != null) {
		var o_slider = window.A_SLIDERS[window.n_activeSliderId];
		o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical
			? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop)
			: (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);
		if (b_watching)	return;
		window.n_activeSliderId = null;
	}
	if (window.f_savedMouseUp)
		return window.f_savedMouseUp(e_event);
}

function f_sliderMouseMove (e_event) {

	if (!e_event && window.event) e_event = window.event;

	// save mouse coordinates
	if (e_event) {
		window.n_mouseX = e_event.clientX + f_scrollLeft();
		window.n_mouseY = e_event.clientY + f_scrollTop();
	}

	// check if in drag mode
	if (window.n_activeSliderId != null) {
		var o_slider = window.A_SLIDERS[window.n_activeSliderId];

		var n_pxOffset;
		if (o_slider.b_vertical) {
			var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - 3;
			// limit the slider movement
			if (n_sliderTop < o_slider.n_pathTop)
				n_sliderTop = o_slider.n_pathTop;
			var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;
			if (n_sliderTop > n_pxMax)
				n_sliderTop = n_pxMax;
			o_slider.e_slider.style.top = n_sliderTop + 'px';
			n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop;
		}
		else {
			var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - 3;
			// limit the slider movement
			if (n_sliderLeft < o_slider.n_pathLeft)
				n_sliderLeft = o_slider.n_pathLeft;
			var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;
			if (n_sliderLeft > n_pxMax)
				n_sliderLeft = n_pxMax;
			o_slider.e_slider.style.left = n_sliderLeft + 'px';
			n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;
		}
		if (o_slider.b_watch)
			 f_sliderMouseUp(e_event, 1);

		return false;
	}

	if (window.f_savedMouseMove)
		return window.f_savedMouseMove(e_event);
}

// get the scroller positions of the page
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function f_sliderError (n_id, s_message) {
	alert("Slider #" + n_id + " Error:\n" + s_message);
	window.n_activeSliderId = null;
}

get_element = document.all ?
	function (s_id) { return document.all[s_id] } :
	function (s_id) { return document.getElementById(s_id) };

Create HTML page add the following code

<form action="multiple_slider_designs_demo.html" method="get" name="demoForm">
<table cellpadding="2" border="0">
<tr><td colspan="7">
No.. of Users
<input name="users" id="users3h" type="Text" size="3" onChange="A_SLIDERS[2].f_setValue(this.value)">
</td></tr>
<tr><td colspan="7">
<script language="JavaScript">
	var A_TPL3h = {
		'b_vertical' : false,
		'b_watch': true,
		'n_controlWidth': 120,
		'n_controlHeight': 16,
		'n_sliderWidth': 19,
		'n_sliderHeight': 16,
		'n_pathLeft' : 1,
		'n_pathTop' : 0,
		'n_pathLength' : 98,
		's_imgControl': 'img/sldr2h_bg.gif',
		's_imgSlider': 'img/sldr2h_sl.gif',
		'n_zIndex': 1
	}
	var A_INIT3h = {
		's_form' : 0,
		's_name': 'users3h',
		'n_minValue' : 0,
		'n_maxValue' : 100,
		'n_value' : 50,
		'n_step' : 1
	}

	new slider(A_INIT3h, A_TPL3h);
</script>
</td></tr>
</table>
<input name="Submit" type="Submit" value="Submit">

</form>

Output

Slider control Using PHP, slider Control using javascript