JavaScript - Modifying A Wordpress Shortcode Plugin

Hi everyone, first time on these forums. I've installed a WordPress plugin that displays which users are currently online, as a widget on the side-panel of my website, www.mi6gaming.com . There's some problems, however. When using the default code, all the members display correctly and load quickly, but there's no limit to the ammount of users displayed, so it goes on for about 30 members, and then it just starts to overlap and it looks ridiculous.

Here is the download link to view any of the files: http://wordpress.org/extend/plugins/...-online/stats/
See screenshot of what i'm talking about: http://i.imgur.com/JYPGQ.png

When I change "0" to a certain number, say 5, what that does is it will constantly display 5 members at any given time, and any other members who are currently online will be displayed on top of that.
So say I'm a visitor to the website, I will see the 5 most recent people online, and if anyone else logs on during that time, it will display them as being online on top of the other 5 most recently online people.
But, this isn't working correctly. It only shows, for some reason, a specific 5 people all the time and does not update whenever somebody else is logged in. So anytime you visit the website, it always shows the same 5 people and the last time they were logged in, even if other people were logged in more recently than them.
See screenshot: http://i.imgur.com/CBE53.png

So; when I have the code set at 0, it displays everyone correctly and updates on time, but it doesn't cap off and it's too long and overlaps. When I have it set at 5, it stays fixated on 5 people all the time and updates the times THEY were last online, and it shows who is online at the present time, but you have to be on the same page for 45 seconds to be able to see "who's online" right then, whereas when it's at 0, everything is instant and flawless, except for not stopping.

Is there any way to add code to prevent it from loading X ammount of users, and to limit it to a certain number? That would likely be the simplest answer.

Here is the code:
.css
Code:

.wpwhosonline-row {
	float: none;
	width: auto;
	height: 33px;
	padding-bottom: 10px;
	padding-top: 5px;
}

.wpwhosonline-row > img {
	float: left;
	margin-right: 1ex;
}

.wpwhosonline-active > span {
	font-weight: bold;
	color: green;
}

.wpwhosonline-recent > span {
}

.wpwhosonline-ancient > span {
	font-style: italic;
	color: red;
}

/* kubrick style follows */
#sidebar ul li.widget_wpwhosonline ul li:before { content: none; }

.php
Code:

<?php
/*
Plugin Name: Who's Online
Plugin URI: http://www.plymouth.edu/
Description: Sidebar widget to log when a user was last online
Version: 0.5.1
Author: Adam Backstrom
Author URI: http://blogs.bwerp.net/
License: GPL2
*/

/*  Copyright 2011  Adam Backstrom <adam@sixohthree.com>

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as 
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

function wpwhosonline_enqueue() {
	add_action( 'wp_head', 'wpwhosonline_pageoptions_js', 20 );

	wp_enqueue_script( 'wpwhosonline', plugins_url('wp-whos-online.js', __FILE__), array('jquery'), 1 );
	wp_enqueue_style(  'wpwhosonline_css', plugins_url('wp-whos-online.css', __FILE__), null, 1 );
}
add_action('wp_enqueue_scripts', 'wpwhosonline_enqueue');

// our own ajax call
add_action( 'wp_ajax_wpwhosonline_ajax_update', 'wpwhosonline_ajax_update' );

// hook into p2 ajax calls, if they're there
add_action( 'wp_ajax_prologue_latest_posts', 'wpwhosonline_update' );
add_action( 'wp_ajax_prologue_latest_comments', 'wpwhosonline_update' );

/**
 * Update a user's "last online" timestamp.
 */
function wpwhosonline_update() {
	if( !is_user_logged_in() )
		return null;

	global $user_ID;

	update_user_meta( $user_ID, 'wpwhosonline_timestamp', time() );
}//end wpwhosonline_update
add_action('template_redirect', 'wpwhosonline_update');

/**
 * Echo json listing all authors who have had their "last online" timestamp updated
 * since the client's last update.
 */
function wpwhosonline_ajax_update() {
	global $wpdb;

	// update timestamp of user who is checking
	wpwhosonline_update();

	$load_time = strtotime($_GET['load_time'] . ' GMT');
	$users = wpwhosonline_recents( "meta_value=$load_time" );

	if( count($users) == 0 ) {
		die( '0' );
	}

	$now = time();

	$latest = 0;
	$return = array();
	foreach($users as $user) {
		$row = array();

		$last_online_ts = get_user_meta( $user->ID, 'wpwhosonline_timestamp', true );
		if( $last_online_ts > $latest )
			$latest = $last_online_ts;

		$row['user_id'] = $user->ID;
		$row['html'] = wpwhosonline_user( $last_online_ts, $user );
		$row['timestamp'] = $last_online_ts;

		$return[] = $row;
	}

	echo json_encode( array('users' => $return, 'latestupdate' => gmdate('Y-m-d H:i:s', $latest)) );
	exit;
}

function wpwhosonline_pageoptions_js() {
	global $page_options;
?><script type='text/javascript'>
// <![CDATA[
var wpwhosonline = {
	'ajaxUrl': "<?php echo esc_js( admin_url('admin-ajax.php') ); ?>",
	'wpwhosonlineLoadTime': "<?php echo gmdate( 'Y-m-d H:i:s' ); ?>",
	'getwpwhosonlineUpdate': '0',
	'isFirstFrontPage': "<?php echo is_home(); ?>"
};
// ]]>
</script><?php
}

function wpwhosonline_usersort( $a, $b ) {
	$ts_a = get_user_meta( $a->ID, 'wpwhosonline_timestamp', true );
	$ts_b = get_user_meta( $b->ID, 'wpwhosonline_timestamp', true );

	if( $ts_a == $ts_b ) {
		return 0;
	}

	return ($ts_a < $ts_b) ? 1 : -1;
}

function wpwhosonline_recents( $args = array() ) {
	$args = wp_parse_args( $args, array(
		'meta_key' => 'wpwhosonline_timestamp',
		'orderby' => 'wpwhosonline_timestamp',
		'order' => 'DESC',
		'meta_value' => time() - 604800, // 1 week
		'meta_compare' => '>',
		'count_total' => false,
		'number' => 0
	));

	$users = get_users( $args );
	foreach( $users as $user ) {
		// grab all these values, or you'll anger usort by modifying
		// an array mid-execution.
		get_user_meta( $user->ID, 'wpwhosonline_timestamp', true );
	}
	usort( $users, 'wpwhosonline_usersort' );

	return $users;
}

function wpwhosonline_list_authors() {
	$users = wpwhosonline_recents();

	$html = '<ul class="wpwhosonline-list">';
	foreach( $users as $user ) {
		$last_online_ts = get_user_meta( $user->ID, 'wpwhosonline_timestamp', true );
		$item = wpwhosonline_user( $last_online_ts, $user );
		$class = wpwhosonline_class( $last_online_ts );

		$item = '<li id="wpwhosonline-' . $user->ID . '" class="wpwhosonline-row ' . $class . '" data-wpwhosonline="' .
			esc_attr( $last_online_ts ) . '">' . $item . '</li>';
		$html .= $item;
	}
	$html .= '</ul>';

	echo $html;
}

function wpwhosonline_user( $last_online_ts, $user ) {
	$avatar = get_avatar( $user->user_email, 32 );
	$name = $user->display_name;
	$link = '<a href="' . get_author_posts_url( $user->ID, $user->user_nicename ) . '" title="' . esc_attr( sprintf(__("Posts by %s"), $user->display_name) ) . '">' . $name . '</a>';

	// this should always exist; we queried using this meta
	if( ! $last_online_ts ) {
		continue;
	}

	$now = time();
	if( $now - $last_online_ts < 120 ) {
		$last_online = 'Online now!';
	} else {
		$last_online = human_time_diff( $now, $last_online_ts ) . ' ago';
	}

	$last_online_title = date_i18n( get_option('date_format') . ' ' . get_option('time_format'), $last_online_ts );

	if( $last_online ) {
		$last_online = '<span title="Last online: ' . esc_attr( $last_online_title ) . '">' . $last_online . '</a>';
	}

	return $avatar . $link . '<br>' . $last_online;
}

function wpwhosonline_class( $lastonline ) {
	$diff = time() - $lastonline;
	if( $diff > 7200 ) {
		return 'wpwhosonline-ancient';
	} elseif( $diff > 600 ) {
		return 'wpwhosonline-recent';
	} else {
		return 'wpwhosonline-active';
	}
}

function widget_wpwhosonline_init() {

  // Check for the required plugin functions. This will prevent fatal
  // errors occurring when you deactivate the dynamic-sidebar plugin.
  if ( !function_exists('wp_register_sidebar_widget') )
    return;

  // This is the function that outputs the Authors code.
  function widget_wpwhosonline($args) {
    extract($args);

    echo $before_widget . $before_title . "Users" . $after_title;
?>
<ul>
<?php wpwhosonline_list_authors(); ?>
</ul>
<?php
    echo $after_widget;
  }

  // This registers our widget so it appears with the other available
  // widgets and can be dragged and dropped into any active sidebars.
  wp_register_sidebar_widget( 'widget_wpwhosonline', "Who's Online", 'widget_wpwhosonline' );
}

// Run our code later in case this loads prior to any required plugins.
add_action('plugins_loaded', 'widget_wpwhosonline_init');

.js
Code:

/*
    Copyright (C) 2011    Adam Backstrom <adam@sixohthree.com>

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License along
    with this program; if not, write to the Free Software Foundation, Inc.,
    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/

jQuery(function($) {
	/*
	* Update author "last online" timestamps
	*/
	function getwpwhosonline(){
		toggleUpdates();
		var queryString = wpwhosonline.ajaxUrl +'?action=wpwhosonline_ajax_update&load_time=' + wpwhosonline.wpwhosonlineLoadTime + '&frontpage=' + wpwhosonline.isFirstFrontPage;
		ajaxCheckAuthors = $.getJSON(queryString, function(response){
			if(typeof response.latestupdate != 'undefined') {
				wpwhosonline.wpwhosonlineLoadTime = response.latestupdate;
				for(var i = 0; i < response.users.length; i++) {
					var current = response.users[i],
						$o = $('#wpwhosonline-' + current.user_id);

					console.dir(current.user_id, current.timestamp);

					if( $o.length == 0 ) {
						$o = $('<li/>').attr('id', 'wpwhosonline-' + current.user_id).
							addClass( 'wpwhosonline-row wpwhosonline-active' ).
							prependTo( '.wpwhosonline-list' );
						console.log($o);
					}

					$o.html( current.html ).
						data('wpwhosonline', current.timestamp);
				}
			}

			console.log('Done');
		});

		toggleUpdates();
		updateRecents();
	};

	// from http://snippets.dzone.com/posts/show/5925
	function formatDate(formatDate, formatString) {
		if(formatDate instanceof Date) {
			var months = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
			var yyyy = formatDate.getFullYear();
			var yy = yyyy.toString().substring(2);
			var m = formatDate.getMonth();
			var mm = m < 10 ? "0" + m : m;
			var mmm = months[m];
			var d = formatDate.getDate();
			var dd = d < 10 ? "0" + d : d;

			var h = formatDate.getHours();
			var hh = h < 10 ? "0" + h : h;
			var n = formatDate.getMinutes();
			var nn = n < 10 ? "0" + n : n;
			var s = formatDate.getSeconds();
			var ss = s < 10 ? "0" + s : s;

			formatString = formatString.replace(/yyyy/i, yyyy);
			formatString = formatString.replace(/yy/i, yy);
			formatString = formatString.replace(/mmm/i, mmm);
			formatString = formatString.replace(/mm/i, mm);
			formatString = formatString.replace(/m/i, m);
			formatString = formatString.replace(/dd/i, dd);
			formatString = formatString.replace(/d/i, d);
			formatString = formatString.replace(/hh/i, hh);
			formatString = formatString.replace(/h/i, h);
			formatString = formatString.replace(/nn/i, nn);
			formatString = formatString.replace(/n/i, n);
			formatString = formatString.replace(/ss/i, ss);
			formatString = formatString.replace(/s/i, s);

			return formatString;
		} else {
			return "";
		}
	}

	function updateRecents(){
		var now = Math.round(new Date().getTime()/1000.0);

		var active = 120; // 2 minutes
		var recent = 600; // 10 minutes
		var ancient = 7200; // 2 hours

		$('.wpwhosonline-row').each(function(){
			var $o = $(this);
			var since, oclass, remove;

			var last = $o.data('wpwhosonline');
			since = now - last;

			if(since > ancient) {
				oclass = "wpwhosonline-ancient";
				remove = "wpwhosonline-recent wpwhosonline-active";
			} else if(since > recent) {
				oclass = "wpwhosonline-recent";
				remove = "wpwhosonline-ancient wpwhosonline-active";
			} else {
				oclass = "wpwhosonline-active";
				remove = "wpwhosonline-ancient wpwhosonline-recent";

				// no longer active; remove "Online now!' text
				if(since > active && $o.text() == 'Online now!' ) {
					var theDate = new Date(last * 1000);
					$o.text( formatDate(theDate, 'dd mmm yyyy HH:MM:ss') );
				}
			}

			$o.addClass( oclass ).removeClass( remove );
		});
	}

	function toggleUpdates() {
		if (0 == wpwhosonline.getwpwhosonlineUpdate) {
			wpwhosonline.getwpwhosonlineUpdate = setInterval(getwpwhosonline, 30000);
		} else {
			clearInterval(wpwhosonline.getwpwhosonlineUpdate);
			wpwhosonline.getwpwhosonlineUpdate = '0';
		}
	}

	toggleUpdates();
	updateRecents();
});

Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out!

The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great!

Here is the java:

Code:

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();

});
$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapper.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
//Carousel 2
  $('.infiniteCarouselTwo').infiniteCarouselTwo();

$.fn.infiniteCarouselTwo = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapperTwo.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapperTwo.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapperTwo.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapperTwo.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapperTwo.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapperTwo.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

Here is the CSS:
Code:

.infiniteCarousel {
	width: 395px;
	position: relative;
}
.infiniteCarousel .wrapper {
	width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarousel ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarousel .wrapper ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarousel ul.thumb li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
	display:block;
}
.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarousel .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarousel .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
}

/* Carousel Two */
.infiniteCarouselTwo {
	width: 395px;
	position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
	width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarouselTwo ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
	display:block;
}
.infiniteCarouselTwo .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarouselTwo .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarouselTwo .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_viewTwo {
}

Here is the HTML:

Code:

   <div id="around" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
      <div class="CollapsiblePanelContent">
     <div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarouselTwo">
          <div class="wrapperTwo">
            <ul class="thumbTwo">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>
    <div id="campus" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
      <div class="CollapsiblePanelContent">
        <div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarousel">
          <div class="wrapper">
            <ul class="thumb">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>

Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for.

how do i make a wordpress website with tabs to different sub-sections without changing pages, its almost seems like an iframe...
example: http://www.alexa.com/siteinfo/google.com
[look at the tabbing, and how it doesn't change URL]

how can i make it like this using wordpress? is there a plugin?

also,
i need something that will make an iframe for me [of another website] but make it impossible to click or right-click, BUT can scroll. is there some type of plugin for wordpress that can help me do that? [so i can customize the template of the iframe and the page the holds the iframe]

thanks!! (:

I am very new to js. I have a jquery plugin that is a live countdown timer and I would like to modify it.
Can someone tell me how to modify the code below so that the date is 20 minutes from right now (currently it is set as 26 January 2013).

Code:

<script type="text/javascript">
$(function () {
	var austDay = new Date();
	austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
	$('#defaultCountdown').countdown({until: austDay});
	$('#year').text(austDay.getFullYear());
});
</script>

Hi All,

I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time, can someone help me with the below code on how i can accomplish this

Code:

var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired');
var obj;0

function formCheck() {
	for(var i=0;i<inputsToCheck.length;i++)
	{
	obj = document.getElementById(inputsToCheck[i]);

	if (obj.value == "") {
	    obj.style.backgroundColor = "red";
	    return false
	}
	else {
	    return true
      
	}
	}
}

Im new to javascript so this could be a simple change for someone with more knowledge then my self.

the webpage is built with ASP.Net

Thanks in Advance