Heading tags are often seen paired with paragraph tags like this example:

<h1>This is a headline</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis</p>

HTML provides six different heading tags (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) which should be used to specify information hierarchy on a web page.

The <h1> tag, for example, should be used for the most important heading on a page and is generally reserved for site names and web page titles. It should only be used once on a page.

If the <h1> tag is used for the site name, an <h2> tag could be used for the page title (i.e. Blog). Then, if sticking with the blog example, the headline for each blog post’s could be <h3> tags.

<h1>htmOwl</h1>

<h2>Blog</h2>

<h3>HTML: Headings - h tags</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobor</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobor</p>

<h3>HTML: Paragraphs - p tags</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobor</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobor</p>

The headings hierarchy would continue down the page. If a sidebar existed, one might use <h4> tags for the titles of the sidebar sections. And <h5> could be used for headings in footer content.

For more information about heading tags, visit the MDN.

The post HTML: Headings – h tags appeared first on htmOwl | Web Development, Chicago.

W3Schools, despite its commonly high rankings in search results, has a bad reputation in the development community for providing incomplete or incorrect information. Despite sharing a name and domain that appear to be related to the World Wide Web Consortium, the site has no affiliation.

The MDN is provided by Mozilla, the guys behind Firefox, and is a solid source for HTML, CSS and Javascript documentation.

For jQuery information, go directly to the source. Do the same with PHP.

Those looking for entry level tutorials and exercises may also be interested in these recommendations.

The post Use MDN for reference, skip W3Schools appeared first on htmOwl | Web Development, Chicago.

It is used to wrap a group of sentences. The tag is opened at the beginning of a paragraph and closed at the end. In HTML, tags are closed by preceding the tag with a forward slash: “/”. HTML tags are wrapped in angle brackets.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

A group of text wrapped in a p tag may stand alone, but is often seen following a heading tag.

For deeper information on the p tag, consult the Mozilla Developer Network.

The post HTML: Paragraphs – p tag appeared first on htmOwl | Web Development, Chicago.

Horizontal carousels scroll left and right in a single row. Vertical carousels scroll up and down in a single column.

But what if you want horizontally positioned carousel with multiple items to scroll up and down?

Start by expanding the “jcarousel-clip-vertical” css rule to a width that will allow your items to properly fill the space.

I used images that all shared a width of 111px and wanted to show three images at a time, so I set the clip to a width of 333px.

In the jCarousel configuration settings, set vertical to true so that your images will scroll up. The plugin auto calculates the number of total scrolls to allow based on the number of items in the carousel list, so that calculation needs to be adjusted.

Using the size property, overwrite the value with the total number of rows.

jQuery(document).ready(function() {
		    jQuery('#mycarousel').jcarousel({
		    	vertical:true,
		    	size: 2 //Change to match total number of rows.
		    });
		});

This approach will do in a pinch but a better way would be to grab the size value and simply divide it by the number of items you want in each row. It would allow you to change the number of list items on the fly without having to manually adjust the size value.

The post jCarousel: Vertical scroll with multiple items appeared first on htmOwl | Web Development, Chicago.

Which fonts are safe for the Web? What font should you use behind Tahoma as a fall back? Papyrus will work on Macs?

CSS Font Stack offers a convenient reference for beginning developers as well as veterans.

While browsing the font list, font names are displayed using the suggested font stack so you may browser test on the fly.

Each font offers a convenient “Copy to Clipboard” button. Font stack details can be viewed by hovering over a magnifying glass icon and browser use percentages are offered via an info icon.

The font Papyrus, for instance, is used in 92.43% of Macs and 70.37% of Windows machines according to the site.

Of course, always be sure to test your project in all browsers to confirm the fonts behave as expected.

The post Convenient tool for quick font stack browsing appeared first on htmOwl | Web Development, Chicago.

I wrapped the like button in a div and set the div to display:none. Using jQuery’s show() or fadeIn() functions worked fine on the box itself, but the like button was behaving inconsistently across browsers. In Firefox I believe it disappeared completely.

The solution, which is actually more of a workaround, is to keep the wrapping div visible, but set it’s margin outside the view of the window. I ended up absolutely positioning the div so that it’s right CSS property was -500 pixels and then using jQuery’s animate() function, I slid the box in so that it rested with a right property of 20 pixels or so.

The Facebook button liked that setup.

Hopefully somebody finds this and saves themselves a few minutes of troubleshooting.

The post Facebook like button hates popping up appeared first on htmOwl | Web Development, Chicago.

WordPress is an excellent CMS in no small part due to its ease of customization. As users explore the full spectrum of possibilities, it’s easy to find oneself with a host of plugins that were added after the installation of the WordPress core files.

Simply put: less is more.

Most plugins will slow your site’s load time. Only install and activate plugins that are absolutely necessary.

Can plugins slow down your site even if they are deactivated? Some say yes. Others say no.

I tend to think that if a plugin is installed but deactivated, it can likely be deleted. Make it a best practice.

If you want to run some plugin load testing, developer Dave Clements suggests the P3 Plugin Performance Profiler and details its usage.

The post Common culprit for a sluggish WordPress site appeared first on htmOwl | Web Development, Chicago.

The “Click Me” prank is a single button which displays on the page. When the user tries to click the button, the button moves away from the cursor.

You can view the prank here. Feel free to download the file and use it as you wish.

Let’s start with the markup and styling:

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">

	<style>

	#button {
		width:100px;
		height:50px;
		position:absolute;
		top:100px;
		left:100px;
	}

	</style>
</head>
<body>

	<button id="button">Click Me!</button>

<script></script>
</body>
</html>

The above code creates a basic HTML page, ads a Click Me! button and applies some CSS styling.

Now on to the javaScript. You will put the following code between the <script> tags.

var button = document.getElementById("button");

First, grab the button by its ID using document.getElementByID. Then assign the button element to a variable named button.

var buttonWidth = button.offsetWidth;
var buttonHeight = button.offsetHeight;

Next, grab the width and height of the button element using offsetWidth and offsetHeight. Set those to new variables.

var browserWidth = window.innerWidth || document.documentElement.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight;

Next you need to determine the width and height of the user’s browser window. You will use the information later to randomly position the button around the page.

You start by creating a variable for both the height and width. Then grab the width of the browser window by using window.innerWidth. Because older “legacy” browsers such as IE8 do not support innerWidth, you also have to add an OR operator and use document.documentElement.clientWidth. Repeat the steps for height.

The width and height variables will be set to a number.

function move() {
		button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
		button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
	}

Next, create the function that will move the button around the page.

Using Math.random(), generate a random number between 0 and 1. Then multiply that number by the width of the window (stored in the browserWidth variable). For example, if the width of the browser was 800, Math.random() may generate a value of .04328 which would multiply to 34.624. Subtract the width and height of the button from the browser measurements to be sure it never get’s positioned off the right or bottom sides of the browser window.

Math.floor is used to remove the decimals from our product, which would result in 34. Concat “px” to the end to convert the number into a string (“34px”) and set it equal to the button’s left or top properties.

if(typeof addEventListener !== "undefined") {
		button.addEventListener("mouseover", move, false);
	} else if (typeof attachEvent !== "undefined") {
		button.attachEvent("onmouseover", move);
	} else {
		button.onmousover = move;
	}

Finally, add an event to the page which will trigger when the user’s mouse moves over the button.

Start by checking if the user’s browser is modern (standards compliant) by checking if it supports the addEventListener method. If addEventListener does not return undefined, call that method on the button element.

Use “mouseover” as the event type for the first property, followed by our move function as the listener, followed by false for useCapture.

If addEventListener returns undefined, use the attachEvent method which is supported by older browsers. For the type property, change “mouseover” to “onmouseover”. Also, you may remove the useCapture property.

Finally, as a safety guard for browsers that don’t support attachEvent, we use a DOM level 0 event handler. Set button.onmouseover equal to the move function. This last step is likely overkill for this project, but promotes best practices.

Here is the final code:

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">

	<style>

	#button {
		width:100px;
		height:50px;
		position:absolute;
		top:100px;
		left:100px;
	}

	</style>
</head>
<body>

	<button id="button">Click Me!</button>

<script>
	var button = document.getElementById("button");
	var browserWidth = window.innerWidth || document.documentElement.clientWidth;
	var browserHeight = window.innerHeight || document.documentElement.clientHeight;
	var buttonWidth = button.offsetWidth;
	var buttonHeight = button.offsetHeight;

	function move() {
		button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
		button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
	}

	if(typeof addEventListener !== "undefined") {
		button.addEventListener("mouseover", move, false);
	} else if (typeof attachEvent !== "undefined") {
		button.attachEvent("onmouseover", move);
	} else {
		button.onmousover = move;
	}

</script>
</body>
</html>

The post JavaScript ‘Click Me’ prank for beginners appeared first on htmOwl | Web Development, Chicago.

I thought I’d share two particular resources that I have found highly useful.

Nettuts+

Part of a larger collection of educational resources from Envato, Nettus+ offers online tutorials on HTML, CSS, Javascript and PHP, along with a large number of popular libraries like jQuery.

Additionally, they have full “courses” — usually a lengthy series of video tutorials — they offer via a subscription fee.

When Nettuts+ launched their premium service last year they offered a course titled “30 Days to Learn HTML and CSS” for free. That course is still available as a no-cost example.

Tutorials are usually instructed by Editor Jeffrey Way, who I find to be an astonishingly knowledgeable and effective educator.

Envato also offers Wptuts+ for WordPress developers and Webdesigntuts+ for those on the design side. Many more tutorial collections are available at the Tuts+ Hub.

CodeCademy

Those that prefer hands-on coding should be sure to check out Codecademy.

The resource focused solely on javascript at launch, but has since expanded into HTML and CSS.

Instead of articles or video tutorials, Codecademy offers live problems the user must correctly solve to advance. The site is careful to introduce users slowly as to not scare away those brand new to coding languages. Those who begin the javascript track, for example, receive the following as their first question:

Hey! Let’s get to know each other. What’s your name?

Type it with quotes around it like this “Ryan” and then press enter on your keyboard.

Users of the site are rewarded for correct answers with points and badges. There are more than 500 excercises in the javascript track alone.

The post Best resources for aspiring Web developers appeared first on htmOwl | Web Development, Chicago.

• In your dashboard go to Users, choose your profile and then check “Disable the visual editor when writing.”

Next, you have to install a plugin that lets you choose to keep your page in it’s raw code form. I chose Text Control, as recommended in the WordPress codex. Note: There seems to be a newer version (2.3) if you choose to install the plugin from inside the WP dashboard, but I couldn’t get it to work properly.

• Install Text Control.
• Go to the page you want to include JavaScript on and make sure there’s a saved version/draft. The plugin options may not appear in the backend of the individual page until there is a saved version.
• From Text Control’s two drop-down menus, choose “No Formatting” and “No Character Encoding”.

Next you have to create a JavaScript file and upload it to your server. Put all of the JavaScript defining code in that file. All functions and variable creations go in in there.

So for instance, if you have the following code:

<script type="text/javascript" charset="utf-8">

	function myFunc() {
	sum = 5 + 10;
	return sum;

	}

	myFunc();

</script>

You would put this in a .js file:

	function myFunc() {
	sum = 5 + 10;
	return sum;

	}

• Upload your JavaScript code to the server. I put mine in a folder called “scripts”.
• Finally, call to your javascript to run from inside your WordPress page.

Following the above example, we would post the following code into the WordPress page we want to run the JavaScript:

<script type="text/javascript" src="http://www.yourdomain.com/scripts/yourjavascriptfile.js"></script>
<script type="text/javascript">
<!--
myFunc();
//--></script></pre>

“myfunc();” is the call to action that fires up your JavaScript code from the .js file.

That should do it!

The post How to use JavaScript in WordPress pages, posts appeared first on htmOwl | Web Development, Chicago.