Displaying WordPress categories in a horizontal dropdown menu

21 Dec

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title.<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

 

<div style="text-align:center;">
    <ul id="menu" style="padding:0; margin:0;">
        <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
    </ul>
</div>


I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

 

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size:1.2em;
}

ul#menu li {
	float: left;
	padding: 0;
	margin: 0;
	border-right:solid 1px #fff;
}

ul#menu ul li {
	float: none;
	position: relative;
	border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
	border-left: 1px solid #FFF;
	z-index:1000;
}

ul#menu li ul {
	margin: 0;
	padding: 0;
	display:none;
	list-style: none;
	position: absolute;
	background: #9CC;
}
ul#menu ul ul{
	margin-left: .2em;
	position: absolute;
	top: 0; /* if using borders, -1px to align top borders */
	left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
	display: block;
	padding: .2em .3em;
	text-decoration: none;
	background: #5587B3;
	 color: #FFFFFF;
}

ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
	width: 8em;
}


Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

Now the last step is the to make it work as a drop-down list on all browsers. This could be done in Firefox with a simple CSS declaration, but Internet Explorer doesn’t understand the :hover pseudo classes, so we mimic this in Javascript.

 

<script type="text/javascript">
 /*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&&document.createElement) {
	var m=document.getElementById(m);
	mbR[mbR.length] = m;
	var i;

	e=m.getElementsByTagName('a');
	if (!mbTf) mbTf=new Function('mbHT();');
	if (!mbSf) mbSf=new Function('mbS(this);');
	for (i=0;i<e.length;i++) {
		e[i].onmouseout=e[i].onblur=mbTf;
		e[i].onmouseover=e[i].onfocus=mbSf;
	}

	m=m.getElementsByTagName('ul');
	for (i=0;i<m.length;i++) {
		mbH(mbL(m[i]));
	}
}}

function mbHA() {
	if (mbA) {
		while (mbA) mbH(mbA);
		mbHE('block');
	}
}

function mbHT() {
	if (!mbT) mbT=setTimeout('mbHA();', 0);
}

function mbTC() {
	if (mbT) {
		clearTimeout(mbT);
		mbT=null;
	}
}

function mbS(m) {
	mbTC();
	if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
	else mbHE('none');

	if (mbM(m)) {
		mbSH(m,'block');
		mbA=m;
	}
}

function mbH(m) {
	if (m==mbA) mbA=mbP(m);
	mbSH(m,'none');
	mbT=null;
}

function mbL(m) {
	while (m && m.tagName != 'A') m = m.previousSibling;
	return m;
}

function mbM(l) {
	while (l && l.tagName != 'UL') l = l.nextSibling;
	return l;
}

function mbP(m) {
	var p = m.parentNode.parentNode;
	if (p.tagName == 'UL') {
		var i = 0;
		while (i < mbR.length) {
			if (mbR[i] == p) return null;
			i++;
		}
	} else {
		return null;
	}
	return mbL(p);
}

function mbSH(m,v) {
	m.className=v;
	mbM(m).style.display=v;
}

function mbHE(v) {
	mbHEV(v,document.getElementsByTagName('select'));
}

function mbHEV(v,e) {
	for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>

A couple notes on the previous code.

  1. To activate it, change your theme’s <body> tag to <body onload=”mbSet(‘menu’);>
  2. It was not written by me, but I’ve been using it for a long time and don’t remember where I got it.
  3. It can occasionally create a JavaScript error, and I’ve intended to rewrite it for a long time, but it usually works fine.

A simple scientific calculator in C

1 Nov

Hello, friends! I beg your pardon? Where the heck have I been? Oh, nowhere. I’ve been on wordpress, at a new blog called 100Feed. I admit I’ve been distracted, with the upcoming election and starting Harvard… but that’s not important! The important thing is, I’ve missed you. And I’ve been doing a lot of coding with C. So as an early Christmas gift to you, I am posting a few of my newest, most often used C and C++ programs. Stay classy, webdesignerers :)

/**********************
A simple scientific calculator in C
Author: Samantha R. Selman
Web: http://www.webdesignerer.wordpress.com
Date: 11/01/2012
***********************/

#include<stdio.h>
#include<conio.h>
#include<math.h>

int main(void)

{
int choice, i, a, b;
float x, y, result;
clrscr();
do {

printf(“\nSelect your operation (0 to exit):\n”);
printf(“1. Addition\n2. Subtraction\n3. Multiplication\n4. Division\n”);
printf(“5. Square root\n6. X ^ Y\n7. X ^ 2\n8. X ^ 3\n”);
printf(“9. 1 / X\n10. X ^ (1 / Y)\n11. X ^ (1 / 3)\n”);
printf(“12. 10 ^ X\n13. X!\n14. %\n15. log10(x)\n16. Modulus\n”);
printf(“17. Sin(X)\n18. Cos(X)\n19. Tan(X)\n20. Cosec(X)\n”);
printf(“21. Cot(X)\n22. Sec(X)\n”);
printf(“Choice: “);

scanf(“%d”, &choice);
if(choice == 0) exit(0);
switch(choice) {

case 1:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = x + y;

printf(“\nResult: %f”, result);

break;
case 2:

printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = x – y;
printf(“\nResult: %f”, result);
break;

case 3:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = x * y;
printf(“\nResult: %f”, result);
break;

case 4:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = x / y;
printf(“\nResult: %f”, result);
break;

case 5:
printf(“Enter X: “);
scanf(“%f”, &x);
result = sqrt(x);
printf(“\nResult: %f”, result);
break;

case 6:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = pow(x, y);
printf(“\nResult: %f”, result);
break;

case 7:
printf(“Enter X: “);
scanf(“%f”, &x);
result = pow(x, 2);
printf(“\nResult: %f”, result);
break;

case 8:
printf(“Enter X: “);
scanf(“%f”, &x);
result = pow(x, 3);
printf(“\nResult: %f”, result);
break;

case 9:
printf(“Enter X: “);
scanf(“%f”, &x);
result = pow(x, -1);
printf(“\nResult: %f”, result);
break;
case 10:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = pow(x, (1/y));
printf(“\nResult: %f”, result);
break;

case 11:
printf(“Enter X: “);
scanf(“%f”, &x);
y = 3;
result = pow(x, (1/y));
printf(“\nResult: %f”, result);
break;

case 12:
printf(“Enter X: “);
scanf(“%f”, &x);
result = pow(10, x);
printf(“\nResult: %f”, result);
break;

case 13:
printf(“Enter X: “);
scanf(“%f”, &x);
result = 1;
for(i = 1; i <= x; i++)

{
result = result * i;

}

printf(“\nResult: %.f”, result);
break;

case 14:
printf(“Enter X: “);
scanf(“%f”, &x);
printf(“\nEnter Y: “);
scanf(“%f”, &y);
result = (x * y) / 100;
printf(“\nResult: %.2f”, result);
break;

case 15:
printf(“Enter X: “);
scanf(“%f”, &x);
result = log10(x);
printf(“\nResult: %.2f”, result);
break;

case 16:
printf(“Enter X: “);
scanf(“%d”, &a);
printf(“\nEnter Y: “);
scanf(“%d”, &b);
result = a % b;
printf(“\nResult: %d”, result);
break;

case 17:
printf(“Enter X: “);
scanf(“%f”, &x);
result = sin(x * 3.14159 / 180);
printf(“\nResult: %.2f”, result);
break;

case 18:
printf(“Enter X: “);
scanf(“%f”, &x);
result = cos(x * 3.14159 / 180);
printf(“\nResult: %.2f”, result);
break;

case 19:
printf(“Enter X: “);
scanf(“%f”, &x);
result = tan(x * 3.14159 / 180);
printf(“\nResult: %.2f”, result);
break;

case 20:
printf(“Enter X: “);
scanf(“%f”, &x);
result = 1 / (sin(x * 3.14159 / 180));
printf(“\nResult: %.2f”, result);
break;

case 21:
printf(“Enter X: “);
scanf(“%f”, &x);
result = 1 / tan(x * 3.14159 / 180);
printf(“\nResult: %.2f”, result);
break;

case 22:
printf(“Enter X: “);
scanf(“%f”, &x);
result = 1 / cos(x * 3.14159 / 180);
printf(“\nResult: %.2f”, result);
break;

default:
printf(“\nInvalid Choice!”);
}
}

while(choice);
getch();
return 0;
}

/**********************
End of code
***********************/

Now save this as, for example, scientific.c and then compile it using the command gcc scientific.c. This should provide you with a nice little calculator. En

How to Zombiefy Yourself in the GIMP

4 Jul

Pick a base photo of yourself that features an up-close face shot to highlight the details of a zombie face. If you want to do a full-body zombie, take a picture of yourself or a friend posing in a gruesome undead position, such as with your limbs hanging to your sides with your head cocked, or with your hands outstretched and a ghastly expression on your face. Find a stock photo of a forward-facing skeleton, or even just a skull, to add to the picture later. Open the base photo in GIMP.

 

Click “Tools” in the top menu, then “Free Select” to select the lasso tool. Use the lasso tool to outline your zombie’s face and body. Click “Tools,” “Color Tools” and “Hue-Saturation” to bring up the “Adjust Hue/Lightness/Saturation” dialog. Click on the “Hue” slider and drag to the left. Repeat for “Saturation” until the skin of your zombie takes on a grayed or deadened tint.

Click “OK.” Open the second photo of a forward-facing skull. Use the lasso tool once more to select the right or left of the skull — specifically the eye sockets, part of the nose and the mouth. Once selected, press and briefly hold “CTRL” + “C” to copy your selection. Click the window in GIMP that contains your original photo. Press “CTRL” + “V” to paste the selection you copied earlier.

Now go to the layer on top of the original photo and drag to the left or right side to position the skull over one area of your face. Right-click on the layer in the layer palette on the right and select “Mode.” Set the mode to “Multiply,” with an opacity of 50. Play around with the opacity levels and modes to give your skull different looks.

Then click the pink eraser icon on your toolbox, to the left. Click on the “Tool Options” menu on the right, and set the opacity to 70. Spot-erase areas of the skull to blend it in with your face. Press “CTRL” + “M” to merge the skull to your face when you’re finished.

Go to “Paint Tools” from the “Tools” menu again. Click “Dodge/Burn” or click the “Dodge/Burn” tool from the toolbox on the left. On the right, in the “Tool Options” box, click “Burn.” Set the opacity to 50. Burn around the edges of your eyes, nose and mouth. The eyes should appear hollow. Use the burn tool to add a gaunt look to the cheeks by brushing under the cheekbone. Add dark, shapeless burn spots to other parts of the body to simulate rotting flesh. Click the paintbrush tool from the toolbox on the left. Underneath the tool icons, you will see two boxes.

Click the first to bring up the foreground color menu. Choose a dark red and click “OK.” Set “Mode” to “Multiply” in the tool options dialog on the right. Set the opacity to 60. With the paintbrush, mark around the areas of your burn spots to show open wounds. The skin should take on a dark red hue but should also blend in with the characteristics of your skin’s shadows and texture because of the “Multiply” effect. Drag the brush over your zombie’s hairline and throughout the area of the hair strands. Keep brushing over areas to add more layers of blood and to darken missing pieces of your zombie’s skull. Set the size of the brush in “Tool Options” to a smaller width, then draw trails of blood leading down from the mouth and other open wounds. Drag the brush over your teeth to give the zombie a “freshly feasted” look.

For the foreground color choose a lime green color. Set “Mode” in the tool options to “Overlay.” Choose a larger size for the brush this time. Set the opacity to 30. Spot-click and drag around the neck, forehead, arms and other areas to show a sick discoloration of the skin tone. If you add more of this color to the skin, you can create a more cartoonish look for your zombie, something that might work for a comic strip. Click the foreground color again and choose a golden yellow. Color in areas of the teeth and fingernails if they are visible in the photo.

Click the foreground color again and select black. Hollow out parts of the mouth and hair. Click “Filters” at the top of the screen, then “Distort” and “IWarp.” Click “Shrink” and set the deform radius to 50 and the deform amount to 0.30. Inside the preview box with your image, click the edge of your zombie’s lower jaw, just briefly, to sink it inward.

Play around with the “IWarp” tool. The “Move” effect shifts parts of the picture where you click. For example, use the “Move” tool to deform limbs and push a part of your forehead higher to create a bulging look. Push the lower part of your zombie’s mouth down to create a distorted mouth of blood and teeth, enhancing the ghoulish look.

Click “File” and “Save” when you are finished with your photo. Your zombie is ready for action :D

8 May

Originally posted on WordPress.com News:

This is a guest post by Kristina Chang, Evan Moore, Tony Xu, and Omer Rabin; students at the Stanford Graduate School of Business.

“What makes a blog popular? What drives page views?” These are the questions that we’ve been trying to answer over the last few weeks. We were on a mission to dig into the data and analyze the strongest parameters that influence the flow of visitors to WordPress.com blogs.

Out of the 30+ million blogs on WordPress.com, we randomly selected a sample of almost 100,000 blogs to perform a regression analysis. Here are our findings, together with a few recommendations. We hope that this provides some new information, and kudos to you in case you’ve already incorporated these tips into your blog – the data suggests that you’re on the right track. Keep it up!

Make your blog easy to follow – It almost sounds obvious, but the…

View original 323 more words

26 Apr

Originally posted on 100Feed:

CSS logo

1 It’s critical when working with CSS to be aware of the various properties at your disposal and how to use them correctly.

2 Using a good editor can increase productivity. Syntax highlighting and auto-complete functionality (plus validation and code references) make life easy. Check out Notepad++, Coda, and don’t discount Dreamweaver CS’s code view until you try it.

3 In many ways, experimentation is the mother of innovation. Give yourself time to play; trial and error will help you learn and memorize techniques quickly. Check out these CSS3 experiments, for inspiration: How to Create Inset Typography with CSS3, Semantic CSS3 Lightboxes, and 10 Interesting CSS3 Experiments and Demos.

4 Enable Gzip compression server-side whenever possible; it shrinks the size of files such as CSS and JavaScript without removing any of the content.

5 Caching will conserve bandwidth for visitors and account for much faster speeds. Take advantage of it…

View original 2,930 more words

Creating Your Own Social Home

9 Mar

With the advancements in Social Media in the past decade, many of us now have “Social homes” on the internet. Personally I use Twitter and Facebook. These web services offer ways to interact with them and extract data from them without visiting the site itself. This is called an API (or Application Programming Interface).

You can think of an API as something like an RSS feed. If you read webdesignerer through a feed reader like Google Reader, you know that you don’t even need to visit my site to read my content, because that data is being displayed in another way. In the case of RSS, it’s an XML file formatted in a very specific way. API’s are often served up as XML. XML is nice, but much like HTML, it needs to be parsed before you can really do anything with it.

JSON (JavaScript Object Notation) is what all the applications are using these days with their API’s as an alternative to XML. The nice part about JSON is that you don’t need to parse it in the same way you do XML. That data you get from a JSON comes back as an object that is ready to use.

Using APIs (jQuery and JSON)

jQuery provides a very simple way of retrieving these JSON objects.

$.getJSON(‘http://url-to-api.com&#8217;, function(data){

$.each(data, function(index, item){

// do stuff with each item

});

});

The code above hits the URL provided (you’ll need to replace that with a real URL to a real API that has real JSON of course) and then does a loop through each “item” and gives you a chance to do something with that item. I say “item” because while that is a common name that APIs use, you’ll need to be specific and accurate here as JSON provides very little in the way of error handling.

Putting it All Together on Your Page

Another reason to use jQuery is because of the simplicity. Let’s take a look at the code example for extracting recent “tweets” from Twitter and then using the built-in jQuery function append() to get them on the page.

$.getJSON(‘http://twitter.com/status/user_timeline/SamanthaRSelman.json?count=10&callback=?&#8217;, function(data){

$.each(data, function(index, item){

$(‘#twitter’).append(‘<div class=”tweet”><p>’ + item.text + ‘</p><p>’ + item.created_at + ‘</p></div>’);

});

});

This will put a new div of class “tweet” onto the page (inside the parent div of ID “twitter”) for each “item” in the object. Notice the “count” variable in the URL which Twitter provides. It is set at 10 which will return 10 items thus there will be 10 divs on the page. Inside of those div’s we have two paragraph elements. One with “item.text” and one with “item.created_at”. These will be the actual text of my last tweet and when I submitted it. Please note, replace my twitter name with yours, or else it won’t work.

Example of resulting HTML from one item:

<div>

<p>New post on the “webdesignerer” blog!</p>

<p>1 day ago</p>

</div>

Our project is going great! We can use our CSS skills to style this however we want. (Look forward to the next post, when I’ll give you some ideas on how to style up your website twitter feed!)

Furthering The Idea

Let’s make a div for our web page twitter feed. Then we’ll use our jQuery + JSON technique to fill it up.

Base HMTL:

<body>

<div id=”page-wrap”>

<div id=”twitter”>

<h1>Twitter Updates</h1>

</div>

</div>

</body>

Now here is the jQuery to extract and display all the data from Twitter:

<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$.getJSON(‘http://twitter.com/status/user_timeline/SamanthaRSelman.json?count=10&callback=?&#8217;, function(data){

$.each(data, function(index, item){

$(‘#twitter’).append(‘<div class=”tweet”><p>’ + item.text.linkify() + ‘</p><p>’ + relative_time(item.created_at) + ‘</p></div>’);

});

});

});

</script>

Cleaning Up Twitter

There are two problems with the raw data that make the Twitter API stand out… in a bad way.

The full URL is there, but it’s just text, not a real anchor link.

The date appears as an ugly timestamp, not really readable text such as “2 days ago”.

So let’s fix it!

Linkify:

String.prototype.linkify = function() {

return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {

return m.link(m);

});

};

relative_time:

function relative_time(time_value) {

var values = time_value.split(” “);

time_value = values[1] + ” ” + values[2] + “, ” + values[5] + ” ” + values[3];

var parsed_date = Date.parse(time_value);

var relative_to = (arguments.length > 1) ? arguments[1] : new Date();

var delta = parseInt((relative_to.getTime() – parsed_date) / 1000);

delta = delta + (relative_to.getTimezoneOffset() * 60);

var r = ”;

if (delta < 60) {

r = ‘a minute ago';

} else if(delta < 120) {

r = ‘couple of minutes ago';

} else if(delta < (45*60)) {

r = (parseInt(delta / 60)).toString() + ‘ minutes ago';

} else if(delta < (90*60)) {

r = ‘an hour ago';

} else if(delta < (24*60*60)) {

r = ” + (parseInt(delta / 3600)).toString() + ‘ hours ago';

} else if(delta < (48*60*60)) {

r = ‘1 day ago';

} else {

r = (parseInt(delta / 86400)).toString() + ‘ days ago';

}

So now instead of just putting “item.text” in your append statement, you can put “item.text.linkify()”. Also instead of putting “item.created_at” you can put “relative_time(item.created_at)”. If you have a problem with the code, liked the idea I presented here or have an idea, please don’t hesitate to leave a comment.

Add a “Follow on Twitter” Button to Your Site

18 Feb

This month I am attempting to post a few tips and tricks about social networking sites such as Twitter. Since I am relatively new to Twitter, I am starting out simple. In this post I will show you how to create a “Follow on Twitter” button for your site. This is quite simple.

First, create a new division on your page (<div></div>) for your twitter buttons. (See my last post “Add a Tweet This button to your Site“)

Insert the following code:

<a href=”https://twitter.com/SamanthaRSelman” class=”twitter-follow-button” data-show-count=”false” data-size=”large”>

Follow @SamanthaRSelman</a>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

</script>

Please note  this would create a link to my Twitter profile, so be sure to change SamanthaRSelman to your own Twitter username. You can see an example of the Twitter button below, which you can style with CSS. Congratulations! You have created your own “Follow on Twitter” button, which I hope will bring you more Twitter followers.

If you have liked this post or have a problem with the code, please leave a comment.

Follow @SamanthaRSelman
//

Follow

Get every new post delivered to your Inbox.

Join 367 other followers