How to track outgoing links using javascript and XML

The idea is simple, everytime an outgoing link is clicked, we will load an XML file at the backend and pass the URL of the outgoing link or an associated unique ID (e.g. web trends ID in case we are using a web analytics software such as Web Trends)

This will leave a stamp of the outgoing link on the web server logs, which we can then use to get the required statistics e.g. we can use web trends to analyze existing logs or can build a custom software to analyze the logs, there are also a lot of free tools available to analyze your web server logs.

Here is the code -

<script language=”JavaScript” type=”text/javascript”>

var wtrendsID = “web trends tag will go here”;

function Tracker(xmlpath, url)
{
  if (window.ActiveXObject)
  {
   btracker=new ActiveXObject(”Microsoft.XMLDOM”);
   btracker.async=false;
   btracker.load(xmlpath);
 }
 else if (document.implementation && document.implementation.createDocument)
 {
   btracker= document.implementation.createDocument(”", “”, null);
   btracker.async=false;
   btracker.load(xmlpath);
 }
 else
 {
  alert(’Your browser does not allow this script.’);
 }
}

//This function needs to be called to load a XML file for tracking impression on server and then load the offsite URL in new window

function customPopup2(url, features)
{
 var xmlpath = “tracker.xml?” + wtrendsID;
 Tracker(xmlpath, url);
 window.open(url, ”, features);
}

//Following can be used to trigger the offsite URL
<A href=”javascript:customPopup2(’http://www.offsitelink.com?’ + //wtrendsID,’toolbar=1, menubar=1,scrollbars=1,resizable=1, status=1, location=1, width=850, height=650, left=125, top=-25′);”>www.offsitelink.com</A>

You can replace wtrendsID with the outgoing link and pass it as tracker.xml?outgoing=www.outgoinglink.com and then can parse / filter all the logs with outgoing keyword to get all stats on the outgoing links clicked.

Show / Display icons and text by default on page load for - I Love Social Bookmarking plugin (Wordpress Social Bookmarking)

Most of the Social Bookmarking plugins show only icons and/or text and you need to click on that icon and/or text to display the complete options. e.g. here is a screenshot of ShareThis, this plugins shows only text that you need to click (on ShareThis) to see the bookmarking sites list.

And then some just show icons e.g.

I completely understand this was done to save some real estate on the page as there are a lot of social bookmarking sites and the number is increasing edveryday. But I personally just wanted to list a selected few on my website and I wanted them to be visible to the user with both icons and text and I want the user to undersatnd that if they are clicking on the icon / text, that means they are adding the article to there favorites on those sites.

My problem was that there are not a lot of social bookmarking plugins available which show up by default on page load without any kind of user action and show both text and ions, some plugins available show like ShareThis (user needs to click) and some show just icons (novice/new users will not understand icons).

I liked - I Love Social Bookmarking plugin because it shows both icons / text and when you hover over each list item individually, this plugins ask the user to Add to Digg or Add to Technorati etc. This is necessary as most of novice users will not be able to understand the purpose of just icons saying nothing.

But there was one problem with this plugin - By default this plugin shows only TEXT asking for users to add bookmarks that you can change in plugins settings, you need to hover over the text to see the full list.

e.g. in this screenshot you need to hover over Share the Love to see the list. You can change the text [Share the Love] in plugins settings.

I dont want my users to hover over text to see the list and I wanted that list to be present by default. Now this is what this post is about, how to show the social bookmarking list by default on page load?

I Love Social Bookmarking plugin can be downloaded from - http://www.milienzo.com/downloads/ilsb.zip
This plugin was developed by Aaron Russell but is licensed under OpenGPL and henceforth I have suggested following changes to show the list as default. I am using the same plugin on my website with the following code changes that I implemented.

Now following can only be implemented if you have FTP or file level access to your wordpress hosting. After you download the plugin you need to extract or copy the unzipped files to wp-content/plugins folder of your wordpress installation. Following files will be included when you download it.

includes folder
ilsb.php

Inside the includes folder there will be a javascript file called ilsb.js. Please change the content of this file to following, you can delete the existing content and paste the following js code -

———————From here———————————–

// JavaScript Document
jQuery(document).ready(function()
{
/* jQuery(”.ilsb-parent”).hover(
function()
{
jQuery(”.ilsb-child”).show();
},
function()
{
jQuery(”.ilsb-child”).hide();
}
); */

jQuery(”.ilsb-parent > a”).click(function()
{
return false;
});
});

———————-Till here————————————

and then in the same folder there is a CSS stylesheet named - style.css
In that file change the style from

div.ilsb-child {position:absolute; display:none; margin:0px; padding:0px 0px 6px 0px;}

TO

div.ilsb-child {position:relative; display:block; margin:0px; padding:0px 0px 6px 0px;}

and then go to your plugin settings and leave the List Title field blank. Make sure you select the List style as Horizontal.

 

And that is it you are good to go with both text and icons available for social bookmarking of your wordpress articles.

Building a Javascript Ad Rotator / Slideshow (with 123 buttons, play, pause and stop options)

This script work in all major browsers - IE6, IE7, Firefox 3.0. You can even rotate images and flash objects as everything within DIV’s will be rotating.

Example of Banner Rotation using this script -

These are real banners rotating using this script. You can click on 1 2 3 buttons to see a particular banner or play / pause the rotation. Banners sequence will change randomly everytime you refresh the page

The idea is to pick up all the DIV’s within the main DIV container and rotate them randomly.

Here is an example of the Ad Rotator / Slideshow with some CSS thrown in and play/pause, 123 buttons. Please feel free to use the CSS and code. Leaving the reference back to my site (http://www.coolwebdeveloper.com) in the comments will be much appreciated though.

We will be using a set of open source scripts in addition to my own code to build this javascript adrotator/slideshow.

Please scroll to the bottom of the article to download the zipped files package that we are going to use for this project.

You will find a number of methods inside slideshow.js to control the slideshow. At the top level is a javascript class used to initiate the slideshow object from the HTML file.

Some of the options that can be set are -

duration - sets the total duration of transitioning per image
seconds_per_slide - sets the time per image/div is shown
pause_on_mouseover - whether the rotation will be paused when mouse over happens
onChange: function() {} - You can define here, any javascript code that you want to run when the image changes

Following functions are used to control the behavior of the slide show -

forward()
backward()
jumpToSlide()
start()
pausePlay()
stop()
rndm()
transition()

Class can be initiated by using following code - You can pass any available number of property values when defining the rotation class

var slideshow = new MDSK.Slideshow(”slideMainDiv”, “.slideDiv”, {
seconds_per_slide: 5.0
});

The random() function is used to change the rotation pattern every tine the page is refreshed, as a result the images contained within the object are displayed randomly.

/**********************************/

rndm : function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
},

/**********************************/

and then we will call this function every time the class object is instantiated

/**********************************/

this.slides.sort(function(a,b){
return me.rndm(-1,1);
});

/**********************************/

Please fill in the following information to receive the Javascript Adrotator code with fully working example via email and to subscribe to FREE Newsletter and email feed.
Your email address will also be used to provide any important updates and new versions for Adrotator script in near future.

All the scripts are pretty self explanatory but if you have any questions please dont hesitate to contact me by leaving a message in the comments section.

There is a lot of room for improvement in this code and lot of inline CSS can be moved to CSS file. Also, I am working on a wordpress adrotator plugin (enhancing this code) and will be releasing soon. So keep checking this site.

ASP self populating drop down list using javascript

One of my friends was trying to accomplish a no post back drop down combo using javascript and while searching on google he downloaded code from http://www.asp101.com/resources/DependentLists.asp and found that there were minor bugs in the code. He being still in college and having shortage of time he sent the script to me for debugging.

I am pasting a debugged and trimmed version of that code just in case if anybody else needs it. You can download an MDB file to use with this code from the link pasted above. This code populates 2nd drop down list from database based on the input selected for first drop down and works without a postback. And on a separate note - This is okay for small lists but for populating larger lists you need to use XMLHttpRequest object to fetch data from the server. I will write an article on that sometime soon.

<%@LANGUAGE=”VBSCRIPT”%>
<html>
<head>
<%
dim connstring, sqlstring, rs, conn
connstring = “Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\inetpub\wwwroot\DependentLists.mdb”
set conn = Server.CreateObject(”ADODB.Connection”)
conn.open(connstring)
sqlstring = “select * from classfd_subcategory”
set rs = conn.execute(sqlstring)
x=0
%>
<script language = “JavaScript”>

function sublist(inform, selecteditem) { inform.subcategory.length = 0 <% count= 0 y=0 do while not rs.eof %> x = <%= trim(y) %> subcat = new Array();

subcategorys = “<%= trim(rs(”subcategory”))%>”
subcategoryof = “<%= trim(rs(”subcat_of”))%>”
subcategoryid = “<%= trim(rs(”subcategory_id”))%>”
subcat[x,0] = subcategorys;
subcat[x,1] = subcategoryof;
subcat[x,2] = subcategoryid;
if (subcat[x,1] == selecteditem)
{
var option = new Option(subcat[x,0], subcat[x,2]);
inform.subcategory.options[inform.subcategory.length]=option ;
}
<%
count = count + 1
y = y + 1
rs.movenext
loop
%>
}
</script>
<title>Submit an Ad</title>
<LINK rel=”stylesheet” type=”text/css” href=”style/summary.css”>
</HEAD>
<BODY onLoad = “sublist(document.subad,document.subad.category[document.subad.category.selectedIndex].value)”>
<form name = subad action = “thankyouad.asp” >
<Table>

« Previous Page