Sep 24

How To Find The Position Of An Element

JavaScript/Ajax 2 Comments »

From time to time I need to know what the position of a particular element is.

I could use trial and error until I find the correct position but this is not efficient and it breaks the second I make an adjustment to the elements or any of it’s parent elements. So how can we easily get an elements position? I’m going to break this up a bit so it will be easy to understand.

First we will create a function that excepts an element.

function getPosition(element) {

Next we’ll initialize some variables to hold our running totals.

	var left = 0;
	var top = 0;

Now we’ll ensure that the offestParent property is supported.

	if(element.offsetParent) {

This next part is the real meat of the function that will traverse the DOM and calculate the offset values. This loop will continue until element is null.

		while(element) {
			left += element.offsetLeft;
			top += element.offsetTop;
			element = element.offsetParent;
		}

Finally we just return the calculated values.

	}
	return {offsetLeft: left, offsetTop: top};
}

This function will now give use the exact position of the top left corner of any element we pass to it. I have tested it in IE7 and Firefox 2 but it should work in any browser. We’ll look at a task in my next post that uses this function to calculate pixel coordinates on an image element.

Be sure to grab the RSS feed from the link at the bottom of this post because you won’t want to miss the next post.

Here is a working sample for you to try.

<html>
<head>
	<title>Find Element Position Example</title>
</head>
<body>

<div style="padding:10px">
	<div style="padding:17px">
		<div id="elem">My Element</div>
	</div>
</div>

<script>
	function getPosition(element) {
		var left = 0;
		var top = 0;
		if(element.offsetParent) {
			while(element) {
				left += element.offsetLeft;
				top += element.offsetTop;
				element = element.offsetParent;
			}
		}
		return {offsetLeft: left, offsetTop: top};
	}

	var element = document.getElementById('elem');
	var pos = getPosition(element);
	alert(pos.offsetLeft + ', ' + pos.offsetTop);
</script>
</body>
</html>
Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.
Sep 05

What I Liked About “Blogger: Beyond the Basics”

Personal 1 Comment »

Blogger: Beyond the BasicsAs you know I received a request to review a book on Google’s Blogger platform from Packt Publishing a couple of months ago. About 3 weeks ago I mentioned this to you and gave you my first impressions of the book which where completely positive. This book is very detailed on many aspects of blogging.

Who Is This Book For?

This book is perfect for someone that is just starting out blogging or has been blogging for a while but is unsure of how to take their blog to the next level with a customized theme and growing their reader base.

Getting Started

The book starts out by introducing Georgia Peach, a fanatical fruitier. We get a look at who Georgia is, what her business is, and that she has started blogging in hopes of increasing sales and creating a small community atmosphere among her customers.

Although that may sound corny, it shows the beginner blogger how to get their blog off the ground. It also shows us that there really are no barriers in blogging. You just need to be passionate about what you are writing about.

The key points of this chapter are focused on planning. That’s right. Before you even type a word you should have a clear plan in place for your blog. What do you want to accomplish? What is your target audience? What is the underlying theme of your blog? What are the goals of your blog? And ultimately, how are going to achieve those goals?

Time To Pimp Your Blog

You might assume, based on the title of this book, that it will be all about customizing and using Blogger. This simply is not the case. The book dedicates a couple of chapters to customizing Blogger and there are a few scattered looks at specific features related to various chapters but the bulk of the information in this book can be applied to any blogging platform to generate success.

With that being said, chapter 2 is all about customizing your Blogger template and making your blog you own. Having a unique blog is key to standing out from the millions of other bloggers and showing potential readers that you are worth their time to read what you have to say. Don’t make the mistake of thinking that packaging doesn’t matter because it is critical.

Chapter 5 is dedicated to looking at the widgets that are available to you to make your blog more interactive and personal.

Beyond these two chapters the rest of the book is dedicated to promoting your blog and positioning yourself for success.

Social Networking

Chapter 3 gives us an introduction to social media and how it can be used to drive traffic and build our reader base. We get a look sites like Digg, StumbleUpon, Facebook, and lots more and how they can be used to promote our content to existing and new readers.

There isn’t a whole lot I can say about this except that it is an important area and that you really should not ignore it or you may be missing out on hundreds or even thousands of potential readers.

RSS, Link Building, and SEO

An RSS feed is a great tool for your readers to stay up to date on what you are doing and saying without having to visit your blog every few hours to see if they missing anything.

Your reader will take the URL of your RSS feed and enter it into their RSS reader, like Google Reader or News Gator. This will allow them to see all the new updates you post to your blog in their reader, along with all the other feeds they are following, without having to go out to each individual site.

Offering your readers an RSS feed is very important and it should be placed prominently and made very noticeable so your readers can easily find it.

Chapter 6 covers what you need to know about RSS and some features of blogger that help you make your feed available.

Chapter 4 covers a crucial topic, link building. Your blogs failure or success hinges on backlinks. Without them you will not rank in search engine results and you will not be see by the Internet as a whole. Basicially a backlink is a link from an eternal web page to your site. This is what search engines use to determine your blog’s authority level and rankings for certain keywords.

Chapter 9 looks at SEO, search engine optimization. Link building is a form of SEO, but he core of SEO is making sure your blog is configured to perform it’s best in search results. This includes focusing your content on the keywords you want to rank for and tweaking your template’s code to make it easy for search engines to index and evaluate.

Conclusion

I want to wrap this up before it grows even longer. Sorry about that. I wanted to present a concise overview of this book but there is just so much great content in this book that it is hard to do in only a few words.

Some other areas that this book covers, that I won’t go into detail about, are making money through advertising, measuring performance with Google Analytics, and integrating your blog with your existing website.

These are all good topics but I just don’t have the time to talk about them.

Over all this book as a great spring board to get new bloggers launched and on their way to being successful with their blogs. I highly recommend this book and hope that you will take the time to pick it up and give it a read. You won’t be disappointed.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.
Sep 03

First Look At Chrome

Browsers 6 Comments »

I must say that my first expereinces with Chrome have been very positive. I’ve been browsing around my usuage spots with it today and I am noticing a difference, a good one.

A bit about my habits

Normally I browse with Firefox. I use Firefox for all the typical reasons; it’s more secure, has better web staqndards support, easier javascript debugging, Firebug, and a host of other great extensions that improve my browsing experience. However, Firefox is a big memory hog, not as big as early reports of IE8 mind you. There are plenty of intense sites that just don’t perform well for me in Firefox (especially in a terminal server environment) and are sluggish. For those of you that are yelling at me, yes I have Firebug turned off and it is still slow.

First reaction

I was pleasently surprised when these sites were blazing fast when using Chrome today. Quickly looking at the Task Manager, it looks like Chrome is only using a fraction on the resources of Firefox as well.

Putting it to the test

To put Chromes promise of better performance for JavaScript and Ajax applications I decided to pull out all the stops. Benjamin Joffe’s Canvascape is a 3D JavaScript world using the canvas tag. Firefox really chokes on this app, especially in textured mode. I thought that if Chrome could preform well here it probably would perform well just about anywhere.

To my delight Canvasscape runs smoothly and flawlessly in Chrome, even in textured mode. It runs so well it seems that the walking speed may need to be adjusted to as it seems to walk very fast or maybe that is just because I am used to the very slow performance in Firefox.

Conclusions

This first experience with Chrome has been very positive and I hope that future betas and the final product continue to perform this well. Currently Chrome doesn’t have a lot of options, not extensions facility which will hopefully be added in a future beta. Hopefully performance isn’t degraded once more features start getting added to the browser.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.
Sep 02

Google Announces Lean And Mean Browser While Internet Explorer Gets Fatter

Browsers, News No Comments »

If you haven’t heard by now Google has annouce Google Chrome. Chrome is a new browser from Google that is based on WebKit and includes a lot of exciting new features and looks to push web standards to the fore front were they can’t be ignored any longer. Check out the comic book that explains Chrome.

On the other hand, early test of IE8 beta 2 don’t look so promising. According to InfoWorld IE8 consumes a whopping 400MB of RAM and executes upto 200 concurrent threads. In short, it uses more resources than Windows XP..yes I mean the OS!!!

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.
WP Theme & Icons by N.Design Studio
Entries RSS Login