|
JavaScript - Help With A Simple Wordpress Plugin, Users Online
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();
});
Similar TutorialsHello! So I came across this Featured Content Slider mod (http://css-tricks.com/creating-a-sli...ontent-slider/) which is based on the Coda Slider (http://www.ndoherty.biz/demos-index/) which uses jQuery. However, you'll notice that the Coda Slider has since received an update (2.0). What I'm trying to do is update the mod for the Coda Slider update, which I'll then use to create a WordPress plugin for my site. Thing is, I don't really know JavaScript (only enough to logic my way through simply stuff). A lot of things seemed to have changed in the Coda update, but I can't seem to get things to work properly in the FCS, specifically being able to click a thumbnail and make the slider switch to that one. I'm pretty sure I've ruled out CSS being an issue, leaving the JavaScipt. If anyone's willing to take a look, I've uploaded what I currently have to http://www.thetanooki.com/coda.zip It's a bit rough at the moment, since I'm pretty much using trial and error to figure things out... and don't mind the seemingly useless PHP code at the top of the .js.php file - that's just an example I'm hoping to use for when I eventually make a WordPress plugin out of it. Anyway, index2.html is the one I'm working on, I'm only using index.html (original) as a guide, and the original FCS as well as old version of Coda can be found at the other links above. Thanks in advance; any light that can be shed on this would be a tremendous help! If I've screwed something else up, let me know - I may have overlooked conflicting class names or something like that since the originals aren't my own code and I'm still familiarizing myself. Hello, I'm modifying a wordpress plugin to include a product manager module where administrators can input data into the fields and the shortcode will style it. Surprisingly enough, I have that part complete and working! The part I'm scratching my head over is how to get the "Add One More Item" link to work. It functions to the extent of adding a new set of fields but when I fill out the fields and submit, only the first set posts. It's all javascript and that is not my where my strengths lie. If any of you javascript ninjas would be willing to drop some knowledge, I would be greatly appreciative. I've attached the entire php file that the script is contained in and also a picture of the product manager module window with a label of the problem I'm having (for clarification). If you decide to try and help and have further questions, I am at your disposal. Thank you so much in advance! 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"><</a><a class="arrow forward">></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"><</a><a class="arrow forward">></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!! (: http://www.hellowallet.com The blue tabbed navigation that fills the page. Is that a jquery plugin or..? Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
Hi.. Anyone can help me to reslove tis.. How to detect iTune plugin in IE Browser...Am using navigator.plugins[] array..its working in firefox,chrome but i need for IE browser..pls help on tis very urgent.. I'm using a horizontal coda slider for nav and an image viewer (ceebox)....all jquery. I am trying to incorporate a lava lamp (also jquery) effect on the navigation. I can either get the viewer/slider to work (but lavaLamp doesn't) or the reverse......can't get them all. I've tried everything and have the issue narrowed down to the "easing" jquery plugin. With it lava lamp works but the rest doesn't and w/o it lava doesn't. Has anyone had this issue....anyone know how to resolve it? http://seeyatom.com/ I did have this in another category but i think it was the wrong one, so i am now posting it here i found this script which ran great for the new year. I have been trying to change it so it counted down from todays date to a new date in the future instead of from a date picked to the new year. I have the code here, how would i go about doing this. jquery script Code:
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
$('<span class="count'+this+'">').html(
'<span class="position">\
<span class="digit static">0</span>\
</span>\
<span class="position">\
<span class="digit static">0</span>\
</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:'-2.1em',
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:'2.5em',opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
The section that inilialises it: Code: $(function(){
var note = $('#note'),
ts = new Date(2012, 0, 1),
newYear = true;
if((new Date()) > ts){
// The new year is here! Count towards something else.
// Notice the *1000 at the end - time must be in milliseconds
ts = (new Date()).getTime() + 10*24*60*60*1000;
newYear = false;
}
$('#countdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
var message = "";
message += days + " day" + ( days==1 ? '':'s' ) + ", ";
message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
if(newYear){
message += "left until the new year!";
}
else {
message += "left to 10 days from now!";
}
note.html(message);
}
});
});
ive tried making the ts = new Date(2012, 0, 1) like ts = new Date() so it reads today's date and i also tried making timestamp : 0 a date in the future as that is basically what i thought was happening. I have tried a load more stuff but i seam to be making a mess of the code and it does not work after that. Could someone point me in the right direction on where to start and which variables are important within this script. Hello guys, I have implemented the jquery validation in one of my projects. I have a <div> which has all the billing details & another <div> below it which has the shipping details. There is a checkbox in between these <div>'s which says "Same as Billing Address". It is used to populate all the shipping fields from the billing fields. Well, on this particular form there are some fields which are mandatory & which I have validated by jquery validation. I have used the $("#form_id").validate().form(); statement to check validation on the click event of the checkbox. The actual problem is that after page loads, I directly click on the checkbox & submit the page, the page gets submitted & validation does not execute. If I click the submit button with the checkbox unchecked then the validation runs properly. Why is my form not being validated if I checked the checkbox? Please guys, help me out. Thanks in advance. Bhavik. Is there any type of script or plugin out that has a secure, DropBox-like interface? I wanted clients to have a username and password, and that username and password to be tied to a mysql db of sorts that allows them access to their specific FTP space without them knowing the actual server info.
Hi can Javascript talk to the flash plugin to access the microphone functionality? if so how can i do this? I have managed to get a model to load and to load multiple models, however i cannot seem to work out how to get these models to move. I have seen it done so i know there is a way in which it can be done, any help would be much appreciated. Also if anyone knows how to create and load custom terrain and stuff thats something i'd like to klnow how to do. It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works. When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return. I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks! http://www.denver-website-designer.com/quote.html <script type="text/javascript"> $().ready(function() { var erroralert = $("#quoteForm").bind("invalid-form.validate", function() { $("#erroralert"); }); }); $.metadata.setType("attr", "validate"); $.validator.addMethod("ninja", function(value) { return value == "ninja"; }, 'Can a robot spell "ninja"'); $().ready(function() { $("#quoteForm").validate({ errorContainer: $("#erroralert"), rules: { fullname: { required:true, minlength:2, }, email: { required:true, email:true, }, phone: { required:true, minlength:10, maxlength:15, }, pages: { required:true, minlength:1, maxlength:10, number:true }, whyrate: { required:true, minlength:10, }, ninja: "ninja", }, messages: { email: "Please enter a valid email address", pages: "Numeric values only", } }); }); </script> on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?! here is the code for my Home link: Code:
$('#nav ul li.home').hover(
function() {
$(this).stop().animate({backgroundColor:'#ff8300'}, 1300);
}, function () {
$(this).stop().animate({backgroundColor:'#666666'}, 100);
});
Hello I'm not sure if I post this message on the right section or not...Actually what iam having difficulty at is I put a facebook plugin commentbox on my page. here is the link for my site http://www.mxstudio.ca/comments.html what my qestion is I can't delit other people message from this page. So if someone post badwords to my site is there anything I can remove his or her comments from this comment section. Any answer greatly precaite thanks... Hi, I am using the JS plugin DataTables. I am initializing the plugin on the Document ready and it is working fine. However, when I try to invoke a method, it throws the error: TypeError: table.fnSort is not a function When debugging, table shows all the properties and methods of DataTables and fnSort shows undefined. I checked the DataTables js file and fnSort is there. Does anyone know why this might be happening? Here is the page: Prudential Annuities FP Portal If you click the upper arrow of the right column (Double), you will see the alert and the error. FYI - You have to refresh the page each time to see the error. Thanks! hey. i'm not a code expert or anything but i here's what i'm trying to do: i set up this blog using weebly.com: http://noamagger.weebly.com and i wanna add color animations to the post titles and some buttons and i can't seem to get it working. here's what i did: added this to the html head: <script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery.color.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#blog-read-more-link").hover(function() { $(this).stop().animate({ backgroundColor: "#53b9df"}, 800); },function() { $(this).stop().animate({ backgroundColor: "#e7e7e7" }, 800); }); }); </script> tried making the "read more" button's background to change colors on hover. it simply does not work for me. firebug gives me this: $("#blog-read-more-link") is null $("#blog-read-more-link").hover(function() { i've tried so many things already and nothing seems to work... please help! thanx fly_earth_chung is a small free flight / car simulator i have written using google earth plugin and javascript. you can find it there => http://chungswebsite.blogspot.com/se...ly_earth_chung |
|||||||