CSSJockey.com » Tips & Tricks http://www.cssjockey.com Unique & Practical Web Presence Sat, 06 Mar 2010 16:04:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 An easy way to create light-box with jQuery & CSS http://www.cssjockey.com/tips-tricks/an-easy-way-to-create-light-box-with-jquery-css http://www.cssjockey.com/tips-tricks/an-easy-way-to-create-light-box-with-jquery-css#comments Fri, 23 Oct 2009 18:30:52 +0000 CSSJockey http://www.cssjockey.com/?p=768 how-to-create-light-box-with-css-jquery

Simple light-box effect with jQuery and CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Live Demo

Let’s start coding :)

xHTML Code

Place this code within <body></body> tags where ever you like.

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->

<div id="lightbox"> </div><!-- /lightbox -->

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

* /Lightbox background */
#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:1001;
}

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

<script type="text/javascript" src="PATH_TO/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("a#show-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 })
</script>

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

]]> http://www.cssjockey.com/tips-tricks/an-easy-way-to-create-light-box-with-jquery-css/feed 25 How to read minified CSS with ease? http://www.cssjockey.com/tips-tricks/uncompress-minified-css http://www.cssjockey.com/tips-tricks/uncompress-minified-css#comments Mon, 12 Oct 2009 14:07:54 +0000 Abhinav Sood http://www.cssjockey.com/?p=766 Today we have a quick tip for those who feel depressed and cry when they see the holy grail of CSS in one single line in their website / theme stylesheets.

Recently I started hearing from a lot of people complaining about their theme developers using minified CSS in their themes for maximizing performance without any consideration for their ease of use / customization. People keep asking me if there are tools that convert minified CSS back to normal human-readable form and recently someone even asked me to do a job – normalize some minified stylesheets (of course I didn’t do it and rob him off!)

Whether or not developers should minify CSS when giving out themes / websites has been a subject of debate for a long time but why developers choose to minify some parts of their stylesheets has often been overlooked. Performance issues for larger projects, minifying the reset styles (you don’t have to change them anyway!) and non-developer license are just some of the reasons!

Anyway, coming back to the subject of this post – How can you read minified CSS with ease?
(No, we are not going to install any 3rd party software!)

Simply validate the CSS (only the minified part if you have other files attached as well) in question using the W3C’s CSS Validation service!

The output of the validation check is:

  1. whether or not, your CSS validates to standards set by W3C.
  2. Normal, Properly Formatted and Easily Readable version of your minified / compressed CSS

You need to keep the formatted and decompressed CSS? Just copy it from the validation output and replace your version. Voila!

]]> http://www.cssjockey.com/tips-tricks/uncompress-minified-css/feed 4 Google Insights: See What the World is Searching For http://www.cssjockey.com/seo/google-insights-see-what-the-world-is-searching-for http://www.cssjockey.com/seo/google-insights-see-what-the-world-is-searching-for#comments Sat, 25 Apr 2009 12:50:55 +0000 CSSJockey http://www.cssjockey.com/?p=697 It’s a competitive world out there. To beat the heat, you need to know much more and most up to date info about the market numbers, than your rivals. And in such situation, if you’re not making use of the excellent tools available online, you ought to be left out way behind the world. It’s an era of online marketing. I’m sure you won’t quote me wrong if I say, “To be a great businessman in today’s time, all you need to know is, how to use which tool where? That’s it! Isn’t that so easy!!

I know the competition still remains tough, but this tool makes it a lot easy to handle. I’m talking about the Google Insights. A great tool to give you an insight knowledge about who is looking for what; where; how much and when. Its like having your market researchers spread across the world on the click on a button! Well that’s Google!! Simplifying things and making your life easy.

With this tool you can know all about a specific keyword, or a set of keywords by graphing the information based on web, images, news or products. You can also get the data within specified time frame and categories. That’s not all! It gives you the requested information for the related keywords also.

Well that’s a brief about this exciting tool. I’m sure you’ve already started trying your hands on it. But hang on! Allow me to highlight just a few more features of this tool.

  • Get the data with region, time range and category filters.
  • Analyze search keyword favored across regions, categories, and time frames.
  • Get related news headlines.
  • Get results in clear graph and map presentation.
  • Export and download data in .CSV format.

Rest, I’ll leave them for you to find out!! Just make sure you share the findings with me too.. :-D

Click here to know more about this tool and Stay tuned for more..

]]> http://www.cssjockey.com/seo/google-insights-see-what-the-world-is-searching-for/feed 19 CSS Tips – Get Consistent Results in All Browsers http://www.cssjockey.com/tips-tricks/css-get-consistent-results-in-browsers http://www.cssjockey.com/tips-tricks/css-get-consistent-results-in-browsers#comments Thu, 23 Apr 2009 20:50:47 +0000 CSSJockey http://www.cssjockey.com/?p=696 Web standards are prevailing guidelines used on the World Wide Web to ensure web sites and information is accessible to all in the most efficient manner. Most Web browsers have different default settings for the base margins and padding...]]> Web standards are prevailing guidelines used on the World Wide Web to ensure web sites and information is accessible to all in the most efficient manner. Most Web browsers have different default settings for the base margin and padding.

This means that if you don’t set a margin and padding on your body and xHTML tags, you could get inconsistent results on the page depending upon which browser your users are using to view the page. A simple way to solve this is to set all the margin and padding on the xHTML and body tags to 0:

html, body {
margin: 0px;
padding: 0px;
}

This will keep your design structure in the same place on all browsers.

Borders

You may be thinking “but no browsers have a border around the body element by default”. This is not strictly true. Internet Explorer has a transparent or invisible border around elements. Unless you set the border to 0, that border will mess up your web-page layouts. So add the following to your body and xhtml styles:

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
Here’s a nice and detailed article on CSS Reset: Resetting Your Styles with CSS Reset Stay tuned for more web-design tips.
]]> http://www.cssjockey.com/tips-tricks/css-get-consistent-results-in-browsers/feed 5 Enable Auto-Complete Search in WordPress Blog! http://www.cssjockey.com/web-design-tutorials/enable-auto-complete-search-in-wordpress-blog http://www.cssjockey.com/web-design-tutorials/enable-auto-complete-search-in-wordpress-blog#comments Mon, 09 Mar 2009 21:41:04 +0000 CSSJockey http://www.cssjockey.com/?p=626 "One sometimes finds what one is not looking for." This quote by Alexander Fleming explains all what I am going to share with you today. I am pretty sure that you are aware of Google Search Suggest and Yahoo Search Assist feature. This feature helps you effortlessly find exactly what you’re looking for and no doubt, it lists a few suggestions to keep the user looking for more and more.]]> “One sometimes finds what one is not looking for”

This quote by Alexander Fleming explains all what I am going to share with you today. I am pretty sure that you are aware of Google Search Suggest and Yahoo Search Assist feature. This feature helps you effortlessly find exactly what you’re looking for. No doubt, it lists a few suggestions to keep the user looking for more and more.

As you type something in the search box, it automatically offers search terms and phrases in real time. How nice will it be to have the same feature on your website or blog. In this post, I am going to explain an easy way to add search suggestion feature on your WordPress blog or website.

Things You’ll Need

jQuery: You can download the lates version from jQuery.com
Autocomplete Plugin: Download this plug-in by Jörn Zaefferer from http://bassistance.de

Now let’s play with some code

Include this code within <head>..</head> tag.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" media="screen" />

Here I am assuming you are using “js” folder to keep all your java scripts and supported files. You may need to update the location of these files based on your folder setup.

Here’s the actual jQuery code to enable this feature on an input box:

<script type="text/javascript">
var data = "Search Terms Separated With Spaces".split(" ");
$("#myInputBox").autocomplete(data);
</script>

Variable “data” hold the terms that you would like the user to see in the search suggestion list and $(“#myInputBox”) is the id of the search input box.

Let’s check out how we can automatically call WordPress tags in our search suggestions, using WordPress wpdb class:

<?php
global $wpdb;
$search_tags = $wpdb->get_results('SELECT name FROM $wpdb->terms');
foreach ($search_tags as $mytag){
echo $mytag->name. ' ';
}
?>

Here I am using WordPress wpdb class to fetch all tags assigned to the posts.

Here’s the complete code to enable this feature on your WordPress blog. Just replace the folder name with actual folder and the jQuery selector $(“#myInputBox”) with the actual id of search input box.

<script type="text/javascript" src="<?PHP bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.css" media="screen" />

<script type="text/javascript">
$(document).ready(function(){
var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
$("#ID_OF_SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Download this file which contains the above mentioned code.

If you face any issues or need help implementing this code on your blog, feel free to post your queries in our forum. Don’t forget to add your inputs in the comments section below.

]]> http://www.cssjockey.com/web-design-tutorials/enable-auto-complete-search-in-wordpress-blog/feed 33 An easy way to create Loading Bar! http://www.cssjockey.com/web-design-tutorials/an-easy-way-to-create-loading-bar http://www.cssjockey.com/web-design-tutorials/an-easy-way-to-create-loading-bar#comments Tue, 03 Mar 2009 21:50:17 +0000 CSSJockey http://www.cssjockey.com/?p=573 “People count up the faults of those who keep them waiting”
Seems like I kept them busy decoding this loading bar :D

How to create a loading bar

How to create a loading bar

Recently, while browsing I landed on a page on StackOverflow.com where people were discussing about how I implemented this loading bar on CSSJockey.com. I could sense a lot of confusion in the discussion so thought I would take the mystery out as I love to share best practices. Here’s how you can create a loading bar in few steps..

Things You’ll Need

  1. A nice loading image: If you are good in creating animated GIF images that’s nice, otherwise you can create a loading image with this cool Ajax Loading Gif Generator.
  2. jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.

jQuery Code within <head>..</head> tags

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
      $("#loading").hide();
})
</script>

HTML Code within <body>..</body>tags

<div id="loading">
Loading content, please wait..
<img src="loading.gif" alt="loading.." />
</div>

Make sure you add this code just below the starting <body> tag so it should be downloaded first.

CSS Code for loading DIV

#loading {
    position:absolute;
    width:300px;
    top:0px;
    left:50%;
    margin-left:-150px;
    text-align:center;
    padding:7px 0 0 0;
    font:bold 11px Arial, Helvetica, sans-serif;
}

Use your imagination and create something nice & unique.

View Demo | Download Source Code

Your comment, suggestion and feedback is highly appreciated.

There’s more to come to stay tuned…

]]> http://www.cssjockey.com/web-design-tutorials/an-easy-way-to-create-loading-bar/feed 19 Using Social Networks to get more Google Juice http://www.cssjockey.com/seo/search-engine-optimization-using-social-networks-to-get-more-google-juice http://www.cssjockey.com/seo/search-engine-optimization-using-social-networks-to-get-more-google-juice#comments Wed, 28 Jan 2009 14:55:07 +0000 CSSJockey http://www.cssjockey.com/?p=481 Hello readers, I hope you are benefiting from Part 1 and Part 2 of Google Juice: Hard to Get but Tasty to Drink Series. As promised, I am here with the Part 3 of this Google Juice Series in which I am going to share with you a very effective trick to place your website quicker and higher up in Google Search results.

Are you wondering how promoting your pages on Social Networks can get you more Google Juice? Well, let me explain this with an example:

Search Google for the term Floral V/S Grunge, the first result will points you to one of my earlier posts. Now take a closer look at the other search results.

Did you notice something? Observe a bit carefully and be surprised! You’ll see that the Floral VS Grunge post is listed on almost all major services like Flickr, Digg, BlogCatalog, Twitter, Friendfeed, Facebook and many more. And all of them are indexed in Google and on the very first page!

Wow! How does it all work?

This is no big secret! It’s only a technique to some Google Juice from a various social networking websites. All the services that you saw in the search results are those communities-based social networks that I use to keep in touch with my friends, family and lovely readers. All I did after publishing a post was to share the Post Title and the Permalink with all my contacts on different social networks. This way I get a lot of people to visit my posts on the website and the real magic is Google Juice that comes along.  When you search for relevant terms, many of the listed results will point to your post/page either directly or indirectly. You get the point, right!!

But isn’t this spamming?

No. It is absolutely not. I just shared my post with only my contacts that have chosen to receive updates from me. People follow me on twitter because they want to keep a track of whatever I do. Subscribers want me to update them with new posts and pages. If I set my Facebook, Orkut or IM status to a link pointing to my blog posts, I am not spamming anyone’s social profiles or emails!

I am not sending anyone any emails to buy my services or whatsoever. I just created something and I am sharing it. Sharing is caring, not spamming!

So, how do I go about with this?

Start using social networks. Create an account on MyBlogLog (Yahoo), BlogCatalog, Twitter, Friendfeed, Facebook, Twitter, StumbleUpon, Digg, Plurk, Del.icio.us, etc. There are hundreds of them all around the Internet. Find some time to read reviews and do research on which ones will be the most useful for you and how much time you can spare to spend on these. What I feel is that the few moments you can spare to spend on promoting your posts effectively for a little extra Google Juice. Worth it, man!

And, to make your life easier…

Now, I am going to recommend to you, an awesome service that will save you a lot of time and effort. It’s definitely going to make your life a lot easier! Ping.FM is a service that you can use to share your stuff and thoughts on multiple websites with just one click. It is exactly like the website puts it, “Ping.fm is a simple service that makes updating your social networks a snap.”

I know time is precious, and so here you go with Ping.FM, But some more icing on the cake is always nice. So I’d further go on to share this nifty Firefox Add-on – PingFire. PingFire is a Firefox add-on for Ping.FM service. It adds a tiny button in your browser which helps to use this service with great ease and comfort.

To use PingFire, you need to update your username and application key in the add-on options. You will find your application key at http://ping.fm/key/ and you need to be logged in to Ping.fm to access this URI. So go ahead, implement these simple tips and extract some Google Juice out of social networks that you use.

I hope you enjoyed reading this post and learned something new! I’ve more in store for you but I’ll keep them for a later posts. Please feel free to share some of your SEO tips. Drop us a comment using the form below. Your comments and feedback are valuable and much appreciated.

]]> http://www.cssjockey.com/seo/search-engine-optimization-using-social-networks-to-get-more-google-juice/feed 8