Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display empty images in a counter

    Hi,

    I've been working on a visitor counter for about a week now, and cannot figure out what I'm doing wrong. The counter uses gif images (0-9) to display how often a person has visited my page. I can get the cookie to track the visits correctly and my script is writing the correct number of visits using the images.

    However, if the number of visits is < 6 digits long, I am getting empty image icons.

    For example, if the person has visited my page 8 times, the display shows 8xxxxx. If the person visits 18 times, the display shows 18xxxx. And so on.

    Here is the page: http://www.geocities.com/bevcuria/572

    Would really appreciate knowing how to solve this problem. Even though the page shows an accurate count, it looks ugly!

    Thanks.

  • #2
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    solved the bad display, but still didn't get my zeroes.

    Well, while I was waiting for help, I managed to solve the ugliness. I didn't get what I wanted (000001, 000010, etc.) but at least I have a nice-looking counter now!

    For those who may be interested, this is what I did:
    http://www.geocities.com/bevcuria/572

    <SCRIPT>

    var visits = getCookie("counter");

    document.write('<FONT COLOR=\"#cc0000\">');

    if (visits) {
    visits = parseInt(visits) + 1;

    if (visits) visits = '' + visits;

    if (visits > 0 && visits < 10) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write(' times.');
    }
    if (visits > 9 && visits < 100) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
    document.write(' times.');
    }
    if (visits > 99 && visits < 1000) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
    document.write(' times.');
    }
    if (visits > 999 && visits < 10000) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
    document.write(' times.');
    }
    if (visits > 9999 && visits < 100000) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(4) + '.GIF">');
    document.write(' times.');
    }
    if (visits > 99999 && visits < 1000000) {
    document.write('You have visited this page ');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(0) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(1) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(2) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(3) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(4) + '.GIF">');
    document.write('<IMG SRC="http://www.geocities.com/bevcuria/' + visits.charAt(5) + '.GIF">');
    document.write(' times.');
    }

    if (visits < 2) {
    document.write('<BR><BR>');
    document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
    }
    }



    document.write("</FONT><BR><BR>");
    document.write("Reload the page to see that the counter has incremented.");

    setCookie("counter", visits);

    </SCRIPT>[SIZE=1]

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Overall, I like your script, but with the use of functions you can vastly improve it's efficiency. Have a look at this (everything I changed is in red)
    Code:
    <SCRIPT>
    
    var visits = getCookie("counter");
    
    document.write('<FONT COLOR=\"#cc0000\">');
    
    if (visits) {
    	visits = parseInt(visits) + 1;
    
    	if (visits) visits = '' + visits;
    
    	document.write('You have visited this page ');
    
    	if (visits > 0 && visits < 10) {
    		document.write(insertZeros(5));
    		document.write(insertNumber(2));
    		}
    	if (visits > 9 && visits < 100) {
    		document.write(insertZeros(4));
    		document.write(insertNumber(3));
    		}
    	if (visits > 99 && visits < 1000) {
    		document.write(insertZeros(3));
    		document.write(insertNumber(4));
    		}
    	if (visits > 999 && visits < 10000) {
    		document.write(insertZeros(2));
    		document.write(insertNumber(5));
    		}
    	if (visits > 9999 && visits < 100000) {
    		document.write(insertZeros(1));
    		document.write(insertNumber(6));
    		}
    	if (visits > 99999 && visits < 1000000) {
    		document.write(insertNumber(7));
    		}
    
    	document.write(' times.');
    
    	if (visits < 2) {
    		document.write('<BR><BR>');
    		document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
    		}
    	}
    
    document.write("</FONT><BR><BR>");
    document.write("Reload the page to see that the counter has incremented.");
    
    setCookie("counter", visits);
    
    var rootPath = "http://www.geocities.com/bevcuria/";
    
    function insertZeros(qty)
    	{
    	var htmlStr = "";
    	for (var i=0; i<qty; i++)
    		htmlStr += "<IMG SRC='" + rootPath + "0.GIF'>";
    	return htmlStr;
    	}
    
    function insertNumber(digits)
    	{
    	digits--;
    	var htmlStr = "";
    	for (var i=0; i<digits; i++)
    		htmlStr += '<IMG SRC="' + rootPath + visits.charAt(i) + '.GIF">';
    	return htmlStr;
    	}
    
    </SCRIPT>
    Last edited by beetle; 08-06-2002 at 03:47 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or, better yet...try this
    Code:
    <SCRIPT>
    
    var visits = getCookie("counter");
    var counterWidth = 6;	// Sets overall number of digits in counter (aka significant digits)
    var rootPath = "http://www.geocities.com/bevcuria/";	// Root path for counter images
    document.write('<FONT COLOR=\"#cc0000\">');
    
    if (visits) {
    	visits = parseInt(visits) + 1;
    	// visits = 7689; I just used this line for testing.  Remove it
    	if (visits) visits = '' + visits;
    
    	var zeros = parseInt(counterWidth - (visits.length));
    	var numbers = parseInt(visits.length);
    	
    	document.write('You have visited this page ');
    	document.write(insertZeros(zeros));
    	document.write(insertNumber(numbers));
    	document.write(' times.');
    
    	if (visits < 2) {
    		document.write('<BR><BR>');
    		document.write('<H2><FONT color="blue">This is your first visit.</FONT></H2>');
    		}
    	}
    
    document.write("</FONT><BR><BR>");
    document.write("Reload the page to see that the counter has incremented.");
    
    setCookie("counter", visits);
    
    function insertZeros(qty)
    	{
    	var htmlStr = "";
    	for (var i=0; i<qty; i++)
    		htmlStr += "<IMG SRC='" + rootPath + "0.GIF'>";
    	return htmlStr;
    	}
    
    function insertNumber(digits)
    	{
    	var htmlStr = "";
    	for (var i=0; i<digits; i++)
    		htmlStr += '<IMG SRC="' + rootPath + visits.charAt(i) + '.GIF">';
    	return htmlStr;
    	}
    
    </SCRIPT>
    Last edited by beetle; 08-07-2002 at 06:53 AM.

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [SIZE=1][COLOR=blue]Thanks, Beetle. If you only knew how many hours I struggled with this little project! I'm going to try out both of your methods and will study them to be sure I learn from them.

    Muchos gracias,

    Beverley

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem! let me know how it works for ya!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •