Posted by 9bit Studios on November 30, 2012 in
CSS,
jQuery
Today I am going to show you how to create a tab box using jQuery and CSS. This is certainly a common component found in many websites today. What I like about what we are going to build today is that it gives you a very vanilla boilerplate upon which you can expand. You can add all the styling, colors, and sizing you want on top of this but this will give you a nice starting point. We are also going to be using percentage based width for the components so that you can drop it into any responsive project you are working on.
View Demo » Download Files »
So let’s get started…
HTML
We’re going to start with some basic markup for our HTML. Create a new HTML file and with the following markup and include a CSS file in a CSS directory…
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Tab Box Using jQuery and CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
</body>
</html>
You’re also going to want to include jQuery. I like using jQuery hosted on Google Libraries. Google Hosted Libraries has the latest versions and all other versions of jQuery hosted there for you to use. All you have to do is include the link in your markup. Place the following line of code after the stylesheet tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
So your code should now look like the following…
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Tab Box Using jQuery and CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
</body>
</html>
Now we are going to add the markup for our tab boxes. Add the following to the body section of your markup…
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
Which makes our HTML file now look like what is shown below…
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Tab Box Using jQuery and CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
</body>
</html>
That about does it for the markup. Now let’s add some styling…
CSS
Open your style.css file and add the following CSS to it…
div.tabBox {
width:99.9%;
float:left;
overflow: visible;
}
div.tabBox h3 {
padding:20px 0px;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
width:99.9%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 32px;
line-height: 32px;
margin-bottom: -1px;
overflow: hidden;
position: relative;
}
ul.tabs li a {
display: block;
padding: 0 5px;
outline: none;
background:none;
}
.tabContainer {
border-top: none;
overflow: hidden;
clear: both;
float: left;
width:99.9%;
min-height:300px;
margin-bottom:10px;
}
.tabContent {
padding: 20px;
}
.tabContent h3 {
padding:0px;
}
/**** TABS STYLES ****/
div.tabBox h3 {
}
ul.tabs {
border-bottom:1px solid #ccc;
}
ul.tabs li {
}
ul.tabs li a {
background:#eee;
text-decoration: none;
font-size: 11px;
color: #000;
outline: none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
}
ul.tabs li a:hover {
background: #eee;
}
ul.tabs li.active {
border-bottom:1px solid #fff;
}
ul.tabs li.active a, ul.tabs li.active a:hover {
background: #fff;
}
div.tabContainer {
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background:#fff;
}
Seems straightforward enough eh? Notice how I separated the tabs’ styling out. This is optional and you could of course, integrate those styles back in with the other selectors. I often like to separate CSS if it’s a small enough block out like because it gives you the ability to easily separate structure and positioning from look and feel. It makes for easier creation of themes.
jQuery
From here, there’s actually not a lot in the way of JavaScrpt that you need to achieve the effect you want out of our tabs. Just the small block of code before the closing </body> HTML tag in your markup and that should do the trick…
<script type="text/javascript">
$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
</script>
So the entire completed markup should look like the following
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Tab Box Using jQuery and CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Tab Box Using jQuery and CSS</h1>
<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Categories</a></li>
<li><a href="#tab2">Archives</a></li>
<li><a href="#tab3">Tags</a></li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
This would be the categories...
</div>
<div id="tab2" class="tabContent">
This would be the archives...
</div>
<div id="tab3" class="tabContent">
This would be the tags...
</div>
</div>
</div>
<script type="text/javascript">
$(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
</script>
</body>
</html>
And that’s how it’s done! Happy tabbing!
View Demo » Download Files »
This post will show you how to do some simple infinite scrolling for WordPress — or really, with a few small tweaks, any other system for that matter. A lot of times on websites when you have multiple pages of results you will see pagination at the bottom of the page with page 1,2,3 etc. and there will often be first, next, previous and last links in there as well. WordPress does this when blog posts, search results, comments and a number of other sets of results in a WordPress site are broken up into different pages. A lot of WordPress themes will show only the “Previous Posts “and “Next Posts” links by default (referred to as “paging”) but some themes will extend functionality beyond this to full on pagination.
Not all users are super exited about having to click links continuously to go to the next page of results. What infinite scrolling does is get the content found on those pages and append it to the current page so the user never has to click on the pagination links… making for a really nice user experience. You may have seen it on other websites you have visited. This tutorial will show you how to implement it in your own WordPress site.
99% of all WordPress themes’ index.php file has a call to get_header(), get_sidebar() and get_footer() (so I’m kinda assuming yours does as well). In your WordPress theme’s index.php file place the following code right before your call to get_footer();
<div class="xhrStatus"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
var currentPage = 2;
var containerItemSelector = "#main";
var postItemSelector = "article";
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
type: "GET",
url: "<?php echo $_SERVER["REQUEST_URI"] ?>?paged=" + currentPage,
data: "",
success: function(results) {
var item = $(containerItemSelector + " > " postItemSelector, results);
item.each(function() {
$(containerItemSelector).append($(this));
});
currentPage++;
},
error: function(results) {
if(results.status == 404) {
$(".xhrStatus").html('No more posts to show...');
}
else {
$(".xhrStatus").html('Error retriving posts...');
}
}
});
}
});
});
</script>
Now, there are a couple of variables that you’ll probably have to change to get infinite scrolling working properly on your site. These are the “containerItemSelector” and the “postItemSelector” variables. You can find them somewhere near the top of the above block of code. These variables tell the infinite scrolling code which container HTML DOM Element to put the next pages of posts in and giving it a wrapper for each post.
Let’s take a look at a very simple sample index.php file to illustrate what is being talked about here…
<?php get_header(); ?>
<div class="blog">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="postContent">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="postContent">
<h2>Not found</h2>
<p>Sorry, no posts were found</p>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
So in the instance above, the div with the class “blog” is the wrapper element that we will be adding new posts to and each of those items are contained within a div with a class “postContent”. So we’d want to change our variables to the following…
var containerItemSelector = ".blog";
var postItemSelector = ".postContent";
So the entirety of the code of index.php would look like the following…
<?php get_header(); ?>
<div class="blog">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="postContent">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else: ?>
<div class="postContent">
<h2>Not found</h2>
<p>Sorry, no posts were found</p>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<div class="xhrStatus"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
var currentPage = 2;
var containerItemSelector = ".blog";
var postItemSelector = ".postContent";
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$.ajax({
type: "GET",
url: "<?php echo $_SERVER["REQUEST_URI"] ?>?paged=" + currentPage,
data: "",
success: function(results) {
var item = $(containerItemSelector + " > " postItemSelector, results);
item.each(function() {
$(containerItemSelector).append($(this));
});
currentPage++;
},
error: function(results) {
if(results.status == 404) {
$(".xhrStatus").html('No more posts to show...');
}
else {
$(".xhrStatus").html('Error retrieving posts...');
}
}
});
}
});
});
</script>
<?php get_footer(); ?>
What the code above does is execute an AJAX call to do a “GET” on the next page of results when the user has scrolled to the bottom of the page. The URL that we are getting the results from is represented by the “url” property in the $.ajax block of code. The PHP variable of this property will get the current URL and will get ?paged=[value of the currentPage variable] appended to the end of it. The value of the currentPage variable will start at 2 (since we are already on page 1) and will be incremented every time we do a successful GET of results.
This URL is WordPress’ structure for breaking up content into different pages. If you wanted to add infinite scrolling to a site being run on another system you could use a similar technique, but you’d just have to provide the proper URL for how that system divided things up into pagination.
Note too that we have also added an extra <div> with a class of “xhrStatus” right above the start of our <script> block. We are going to use this div to provide messaging if an error occurs in trying to get the next page of results. If we have reached the end of the results and there are no more posts to show, the server will return a 404 error.
If you wanted to, you could change the HTML element where this message gets displayed. You’d simply have to edit the selector value in jQuery where the message gets outputted to the one that you want.
If you wanted to implement infinite scrolling on different pages (e.g. a page template with custom post type results), you could simply add the above code to that page as well and make any necessary modifications.
Happy scrolling!
For the most part I like jQuery UI. The library gives you some common elements of interactivity that you find in modern browsers these days (accordions, drag-n-drop, pop-up-calendars, etc.). That being said, I’m not really a big fan of jQuery UI’s theming that comes out of their theme roller… not so much because it don’t look good, but because if you ever want to do any customization on it, it actually turns out to be a rather cumbersome affair. There are quite a few cascading selectors that you have to change values for to get the exact look and feel you want.
Fortunately there is a way to get the best of both worlds and it’s something I’ve found myself doing a lot more of recently… including jQuery UI in my projects but doing all the styling from scratch. It turns out that there’s not a lot off CSS that you have to write if you’re doing things from the ground up and I’ve found that this is often a much more pleasant experience than trying to undo the CSS that comes with a jQuery UI theme.
In this tutorial we will be doing some custom CSS with the jQuery UI datepicker (which is a calendar popup that appears when you want to select a date on a form), but you could easily apply the same ideas in this tutorial to other jQuery UI components as well.
View Demo » Download Files »
So let’s get started…
HTML
The markup will be fairly straightforward. We’re going to set a simple <input> text field in a form and give it an ID so that jQuery UI will know to show a datepicker popup on the field with this ID (you could also use a class if you wanted to as well)…
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar / Datepicker</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>jQuery UI Calendar / Datepicker</h1>
<input type="text" id="datepicker" />
</body>
</html>
Include jQuery and jQuery UI
The first thing you’re going to want to do after this is include both jQuery and jQuery UI in your project. I personally like using something the following…
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
Where you can choose whatever jQuery UI version you want. It is helpful to look up what the “latest versions” of jQuery and jQuery UI are. Google Hosted Libraries has the latest versions of both jQuery and jQuery UI (and a number of others) that you can easily copy to your clipboard and paste into your markup.
Include a CSS file
We’re also going to want to include a CSS file. Create a folder named “css” and add a style.css file to it. We will add to this later…
<link rel="stylesheet" href="css/style.css">
jQuery
Next you’re going to want to include some jQuery to hook-up our <input> field with jQuery. Place the following block of code right below the <input> field
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({dateFormat : 'yy-mm-dd'});
});
</script>
So your markup should now look like the following…
<!doctype html>
<!--[if lt IE 8]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar / Datepicker</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
<h1>jQuery UI Calendar / Datepicker</h1>
<input type="text" id="datepicker" />
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({dateFormat : 'yy-mm-dd'});
});
</script>
</body>
</html>
What this block of code does is apply the datepicker function that jQuery UI provides to a field with id “datepicker”. You could name this id value whatever you like or you could call it on a class.
If all goes well, if you place your cursor in the <input> text field on the page you should see an unstyled rudimentary jQuery datepicker popup.
But our current popup looks kinda ugly. So now we’re going to want to style it up.
CSS
Here is some CSS that will get us started. Open up your style.css file and add the following in…
.ui-datepicker {
background: #fff; /* Old browsers */
background: #fff -moz-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* FF3.6+ */
background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc)), color-stop(100%,#fff)); /* Chrome,Safari4+ */
background: #fff -webkit-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* Chrome10+,Safari5.1+ */
background: #fff -o-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* Opera11.10+ */
background: #fff -ms-linear-gradient(top, #fcfcfc 0%, #fff 100%); /* IE10+ */
background: #fff linear-gradient(top, #fcfcfc 0%, #fff 100%); /* W3C */
font-size:11px;
padding:10px;
border:1px solid #ccc;
}
.ui-datepicker table {
width:278px;
}
.ui-datepicker table td {
text-align:center;
}
.ui-datepicker a {
cursor:pointer;
text-decoration:none;
}
.ui-datepicker-prev {
}
.ui-datepicker-next {
float:right;
}
.ui-datepicker-title {
text-align: center;
font-weight:bold;
}
This CSS targets the datepicker classes that jQuery UI adds in.
Now if we click into the <input> text field again. We should see our styled jQuery UI calendar. This is, of course, just a very generic start. You could easily continue on and continue to style the datepicker elements to customize them the exact specifications you so desire. This CSS is a lot cleaner and a lot more lightweight and far less bulky than the CSS that comes with the jQuery UI theme roller.
How do I find the classes and IDs of a the jQuery UI datepicker?
Many people might wonder how I found the classes and ID selectors of the jQuery UI component. I did this by using browser developer tools. Nearly all modern browsers come bundled with developer tools of some sort. Currently I’m doing a lot of my development in Chrome. I use Chrome Developer Tools to inspect the elements on the page. I simply right-clicked on the element in the jQuery UI datepicker and selected “Inspect Element.”
This brings up Chrome Developer Tools…
In Chrome Developer Tools you can then see the markup (including the class and ID selectors) that make up jQuery UI datepicker. You can then apply whatever styles you like to your selectors.
The process is similar if you are using Firefox for development. In the past many developers developing in Firefox used the Firebug plugin (which is still a very good plugin), but Firefox now comes bundled with its own developer tools. Internet Explorer has something called F12 Developer Tools which you can also use to accomplish this goal and also has some other nice features including putting your browser into IE8, and IE7 “mode” so you can test and see how your website looks in older versions of IE.
Whatever browser you use to do your development, this is the process that you use to find what is in the markup.
View Demo » Download Files »
Today I am going to show you how to create very simple social sharing links for your WordPress blog. We all know that there are a gazillion different WordPress plugins out there to handle social media, but these may not always give you the exact customization that you want. Maybe you want to have text-only “share” links and the plugin does not support this. Maybe you want to use different icons than the ones the plugin provides. Maybe you want to format/position these icons differently from how the plugin does it by default. If this describes your situation, this post will help you get off to a good start with that.
So below are some basic WordPress ready sharing links for some popular social media websites. Please note that these links will work at the time this post was written. Websites often change their APIs and it is possible that the URLs to share out content on these social sites may have changed since the writing of this post… so be sure to check that all of these examples still work. If any do not, consult the website of the social platform in question and look for any advice on blogs and forums on how to change the link to something that will work with an updated API. And please do let me know if any of these do not work as well. 
I have just kept the format of the links as plain text since it’s the most basic HTML that most people probably understand best. All you have to do is simplly paste the following code into the index.php or single.php or any other .php file of your WordPress theme. From there you can format and style these links however you like.
<a href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php the_title(); ?>&p[url]=<?php the_permalink(); ?>" target="_blank">Facebook</a>
<a href="http://twitter.com/home/?status=<?php the_title(); ?>%20<?php the_permalink(); ?>" target="_blank">Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
<a href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Digg</a>
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a>
<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Delicious</a>
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">Reddit</a>
And that’s all there is to it!
This post will teach you how to change the directory of your WordPress installation. Let’s say that your WordPress installation is stored at http://www.yourwebsite.com/wordpress and you want to change it to http://www.yourwebsite.com/blog. How would you go about doing that?
Changing the directory of your WordPress installation is actually a lot easier that one might first think. There is just one moment in the process where you might be sure that you have broken everything, but really it’s not a big deal. The creators of WordPress have done their best to ensure that it’s not too easy to completely destroy everything solely from the WordPress dashboard.
To change your WordPress install URL, follow the steps below…
- Log in to your WordPress dashboard
- Go to Settings and click on “General”
- Look for the WordPress Address (URL) and Site Address (URL) fields. Your URL should be set at something like http://www.yourwebsite.com/wordpress (or whatever the URL is). It will vary depending on what you first installed your WordPress installation.
- Change both of these URLs to what you want your new URL to be, e.g. http://www.yourwebsite.com/blog
- Click on “Save Changes” at the bottom of the screen.
Now this is the moment where you are probably sure you have broken everything because you will be taken to a page that says “Page not found” (or something similar depending on the browser). You can’t get to any of your pages and you cannot log in at http://www.yourwebsite.com/wordpress/wp-admin anymore.
Not to worry. All you have to do now is go to the folder (either on your FTP or in your web host’s dashboard file system) where your WordPress install was originally. In our hypothetical example for this tutorial, this would be the folder named “wordpress.” Rename this folder to “blog” (or whatever you set the URL to in step 4)
Now you can go to http://www.yourwebsite.com/blog and you will see all is as normal you can log in at http://www.yourwebsite.com/blog/wp-admin and do all of the WordPress actions as normal just like you used to be able to, now under the new URL!
