Posts Tagged ‘javascript’

Appending With AJAX For A Clean Body

Thursday, January 24th, 2008

It may sound painful, but really, it’s not.

So you want to add content to the bottom of your web page without reloading the whole page or DIV that the majority of your content is located in? You could add a separate DIV to the bottom of your page and use the document.getElementByID(‘myDIV’).innerHTML = xmlHttp response; method to append the new content…

But, what if you want to append multiple times?

  • add rows to your favorite database’s front end
  • add stories to the front page, as the user scrolls down, like on DZone’s home page
  • use it on the top end to dynamically stack new content without user intervention

Why not include new DIV tags within your response code?

Existing DIV at the bottom of your page:

<div id=”newdiv001″>

</div>

xmlHttp Response from the server:

latest news flash here</div>
<div id=”newdiv002″>

After it’s inserted into your existing DIV, it’ll look like this:

<div id=”newdiv001″>
latest news flash here</div>
<div id=”newdiv002″>

</div>

… and now “newdiv002″ is ready to take the next response.
The important thing to remember here, is to keep track of your DIV ids. By using a number at the end of your id’s name, you can keep track of it with a simple counter.

Google Analytics Date Range – Analytics Today

Wednesday, January 9th, 2008

Google Analytic’s default date range is one month. As of this writing, there isn’t a way to change it. When tracking the visitors of multiple websites, it is often nice to be able to see the activity of the current day. In order to change the date range, you have to use the Flash based calendar on the right hand side of the page. The calendar sends a request back to Google servers to fetch the information for the date range that you chose. Although nice to use, it can be time consuming and tedious.

Analytics Calendar

The other way to request a date range is to pass a date parameter in the URL:

Example:
https: //google.com….dashboard?…&pdr=20080109-20080109

parameter: pdr

value: 20080109-20080109 (YearMonthDay-YearMonthDay)

Greasemonkey is a Firefox Add-on that allows customized JavaScript to be added to any web page that you visit.

I’ve written a user script called Analytics Today that sets your Analytics date range to the current day instead of the previous month. You can still obviously change the range just as you do now. Please feel free to try it out. I’ve included it, along with source code, below!

-

Download it here -> AnalyticsToday.user.js – v0.1.3 (10-21-08)

-

Source Code:

// ==UserScript==
// @name          Analytics Today - v0.1.3
// @namespace     blog.dansnetwork.com
// @description   Sets Google Analytic's default date range to today.
// @include       https://www.google.com/analytics/reporting*
// @exclude
// ==/UserScript==
var url = window.location.href;
var urlParam = "&pdr=";
var today = new Date();
var day = today.getDate().toString();
var month = (today.getMonth() + 1).toString();
var year = today.getFullYear().toString();
var todaysRange;
if(day < 10)
day = '0' + day;
if(month < 10)
month = '0' + month;
var todaysRange = year + month + day + '-' + year + month + day;
if(url.indexOf(urlParam) < 0)
window.location.href += '&pdr=' + todaysRange;