|
JavaScript - Javascript And Wordpress
Hey,
I need some help with a javascript code. The code works fine in a HTML editor but produces this error, "HTTP method GET is not supported by this URL" in WordPress. Problem: I can't get this URL: https://www.geonlineapply.com/servlet/MCSGenericApp to function probably in WordPress. Any suggestions would be highly appreciated! Here's the HTML code: <SCRIPT language=javascript>function callSubmit() { document.frmApplicationTermsCond.submit(); } </SCRIPT> <FORM name=frmApplicationTermsCond action=https://www.geonlineapply.com/servlet/MCSGenericApp method=post target="_blank"> <INPUT type=hidden value=N name=MCSCLIENTTEST> <INPUT type=hidden value=OR name=PRODUCTCODE> <INPUT type=hidden value=03 name=GROUPCODE> <INPUT type=hidden value=1290800802 name=MERCHANTNUMBER> <INPUT type=hidden value=http://www.hrirrigation.com name=HOMEURL> <INPUT type=hidden value=TC name=OPERATION> <INPUT type=hidden value=I name=ORIGINATIONCODE> <INPUT type=hidden value=N name=CALLBACKCODE> <INPUT type=hidden value=00 name=FRAMESIZE> <INPUT type=hidden name=DEALERIMG1> <INPUT type=hidden name=DEALERIMG2> <INPUT type=hidden name=DEALERIMG3> <INPUT type=hidden name=BOTTOMFRAME> <INPUT type=hidden name=STORELOCATOR> <INPUT type=hidden value=3E name=APPROVALTEMPLATE> <INPUT type=hidden value=#FFFFFF name=BGCOLOR> <INPUT type=hidden name=DECLINEURL></FORM> <TABLE width="32%" align="center"> <TBODY> <TR> <TD width="100%" colSpan=2> <P align=center><A href="javascript:callSubmit()"><SPAN style="FONT-SIZE: 18px; COLOR: #cc0000">Apply Now Similar Tutorialshello folks, I start modding on a new theme, that wordpress theme got a javasript that flash news. see the website : Code: http://www.casapost.biz the problem is if i want to put any post or page, in that section, so I have to do it manually, so i have to put the HTML code. My Question is how can I change that probleme, in instead of coping HTML code, just to get post automatically from a category, So any post from that category will be showen as the news flash right now. the javaScript for that file is : Code: <div id="Featured">
<script type="text/javascript">
var delay = 5000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(234,250,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 11px Geneva, Arial, Helvetica, sans-serif; padding: 10px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>News 1</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit elit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros......<br><br>Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet nec, congue non, accumsan sit amet, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
fcontent[1]="<b>News 2</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maec at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris. Duis sed assa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi......";
fcontent[2]="<b>News 3</b><br><br> Flash Info</a>";
closetag='</div>';
var fwidth='672px'; //set scroller width
var fheight='176px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid #282828; background: #ffffff; width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>
Thank you, any help is welcome, i'm noob to this world I’ve recently bought a Javascript/xml map of the USA. After payment a zip archive could be downloaded that includes a .html file, a .js file and a css stylesheet. Instructions on how to set it up in wordpress were not included though. Basically it comes down to this: every state of the US is clickable. In the .html file the settings can be configured for each state, such as whether the state is active (clickable) or not, and where it should link to. This part i understand and i know how to configure the .html file. The problem is that i can’t implement it on a wordpress page due to my limited programming skills. I tried uploading the .js file in my wp-content folder, and copying the code from index.html to a new page (note that i didn't use the WYSIWYG editor but the HTML option) but it seems like the Javascript file doesn't load. Any help would be greatly appreciated Screenshot of how the map looks like when i open the .html file in my browser (the map is working, i just can't get it to work in Wordpress) Screenshot of the files included in the zip file Thanks in advance I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? Hello, I'm trying to change the background image with a mouseover function on the menu (Center Consoles, etc.). Here's my the page I'm working on (Boats | Striper Boats) When you hover on Center Consoles> 200CC, the background image should change. What am I doing wrong?? My Wordpress template uses this php code to call the background image: PHP Code: <?php /* #Start the Loop ======================================================*/ if (have_posts()) : while (have_posts()) : the_post(); ?> <?php /* #Get Fullscreen Background ======================================================*/ $pageimage = get_post_meta($post->ID,'_thumbnail_id',false); $pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false); ag_fullscreen_bg($pageimage[0]); ?> and here is my code for the Javascript I set up to get the mouseover function and to set up the menu: PHP Code: <script language="JavaScript"> var backImage = new Array(); // don't change this // Note how backImage[3] = "" -- which would // set the page to *no* background image. backImage[0] = "http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg"; backImage[1] = "22.jpg"; backImage[2] = "33.jpg"; backImage[3] = ""; // Do not edit below this line. //----------------------------- function changeBGImage(whichImage){ if (document.body){ document.body.background = backImage[whichImage]; } } </script> <div class="contentarea"> <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'>Center Consoles</a> <ul> <li class='sub'><a class="rollover" href="http://takeitto11.com/striper2015/portfolio/2oo-cc/" onMouseOver="javascript:changeBGImage(0)">200 CC</a></li> <li class='sub'><a class="220CC" href='#'>220 CC</a></li> <li class='sub'><a class="2605CC" href='#'>2605 CC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Dual Consoles</a> <ul> <li class='sub'><a class="200DC" href='#'>200 DC</a></li> <li class='sub'><a class="220DC" href='#'>220 DC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Walk Arounds</a> <ul> <li class='sub'><a class="200WA" href='#'>200 Walk Around</a></li> <li class='sub'><a class="220WA" href='#'>220 Walk Around</a></li> <li class='sub'><a class="2601WA" href='#'>2601 Walk Around</a></li> <li class='sub'><a class="2901WA" href='#'>2901 Walk Around</a></li> </ul> </li> </div> <div class="clear"></div> </ul> For some reason it's not working. I've already tried jQuery and that ended up with some weird results, please help!! 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 used the tutorial here (http://www.darrenhoyt.com/2008/02/12...-in-wordpress/) to install a top nav bar in my page: http://www.diveneycue.com/wordpress/ however I have two pages (http://www.diveneycue.com/wordpress/?page_id=24 and http://www.diveneycue.com/wordpress/?page_id=22 which are child) which are both child pages of the parent http://www.diveneycue.com/wordpress/?page_id=6. I thought the sub/child pages would show up in the nav bar when i hover over the parent page (Pool Cues). But alas, they do not. how do i make this happen? please advise. thanks! Hello! I'm developing a small application with Google Maps API for use in Wordpress and didn't want to place all the javascript into the Worpress page template file. But whenever I place the javascript that works fine in page tempalte into separate javascript file in Wordpress, all of the code using Google Maps API except the code that runs Maps itself stops working. So the Maps runs but for example Geocoder does not. I'm simulatenously using Google's jQuery API. I hope someone has experience with this and can help me. On my wordpress based website, I have jquery for the top button selection part on the homepage, and lightbox for the gallery, and they work fine. But when I enter the url with a GET (.com?something), they don't work. I can't figure out if it is a jQuery error, or jQuery with wordpress's url structure. Ex: http://www.naturallookinstitute.com/gallery/ - OK http://www.naturallookinstitute.com/gallery?get - Lightbox broken http://www.naturallookinstitute.com/ - OK http://www.naturallookinstitute.com?get - Top header selector broken Hi very good site I do a query is as follows I have this theme using jQuery and I've included a Featured Content Gallery plugin called the problem is that I have a conflict with the plugin and does not show the slider post Then I discovered that removing this line of code <? php include (TEMPLATEPATH. '/ includes / scripts.php');?> the footer if it shows the slider post but let me operate the menus, using it as the call of scritp any solution? this is the theme http://su-paginaweb.com/website/Polished2.zip thanks in advance Hi guys, I am building my second site, this time with wordpress, for a friend's restaurant. I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/ Main code Code: <?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored
function rotateHeader() {
var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif
jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
counter++; if (counter > num_images) counter = 1;
}
</script>
I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition? Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you 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! Hi, I'm currently the owner of www.sc2-strategy.com and I want to have javascript show/hide like one of my rivals www.sc2casts.com has, however I have no javascript knowledge and want to learn how to implement this, It makes the site look much more professional and allows for better user experience, sorry if it sounds like I don't know much, I'm just looking for help and since you guys have a very large active forum user base, I thought this would be the best place to ask, thanks. Btw, the javascript is basically meant to be used to display Game 1 (clicked) Youtube video displayed (hide button) Game 2 (display) Hidden Youtube Video etc. You'll be able to see what i mean if you go onto www.sc2casts.com Hi, I am trying to make a Wordpress theme from this in HTML: http://www.jbiddulph.com/chrisbradshaw/ to this (wordpress blog) http://www.jbiddulph.com/blog/ Why doesn't the JavaScripts? do I need to @import them like the CSS? I've wrote a jQuery script to fade some lines of text on the page. I've tested it and know it works. I've tried adding it to my WordPress homepage and testing it locally, but it doesn't work, I don't really know what I'm doing, and I can't make heads nor tails of the codex. I'd appreciate either a simple explanation or a real-world example Here are the steps I've taken: 1. added the line <?php wp_enqueue_script("jquery"); ?> just above the wp_head line. 2. added the script just below the wp_head line 3. Used the "No Conflict" syntax of jQuery(document).ready(function() {. Here's what the header looks like where I put my script Code: <?php
/**
* Template Name: Home Page
*
* @package WPFramework
* @subpackage Template
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<?php if (is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<title>
<?php
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
//set all the divs opacity to 0
$("#rotator div").css({opacity: 0});
//show the current div
$("#rotator div.current").css({opacity: 1});
//run the rotateImages function every 3 seconds
setInterval("rotateBanners()", 4000);
});
function rotateBanners () {
var curBanner = $("#rotator div.current");
//get whatever div is after the current banner
var nxtBanner = curBanner.next();
//if there's nothing left, go back to top of loop
if (nxtBanner.length == 0)
nxtBanner = $("#rotator div:first");
curBanner.removeClass('current').addClass("previous").animate({ opacity: 0.0 }, 1500);
nxtBanner.css({ opacity: 0.0 }).addClass("current").animate({ opacity: 1.0 }, 1500,
function() {
curBanner.removeClass("previous");
});
};
</script>
</head>
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();
});
I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next. The source was used from Edit fiddle - JSFiddle the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC. I am open to any suggestions. Code: <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<style type='text/css'>
.cycle-slide {
width: 100%;
text-align: center;
}
img {
max-width: 300px;
}
#next {
float: right;
}
#prev {
float: left;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var slideshow = $('.cycle-slideshow');
maxSlides = slideshow.data('cycle.opts').slideCount;
slideshow.on({
'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
UpdateTitles();
}
});
function UpdateTitles(){
var currentSlide = slideshow.data('cycle.opts').currSlide;
activeSlide = $(".cycle-slide-active");
activeTitle = activeSlide.data('title');
if(currentSlide == 0){
nextTitle = activeSlide.next().data('title');
prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
}
else if(currentSlide == maxSlides-1){
prevTitle = activeSlide.prev().data('title');
nextTitle = $(".cycle-slide").eq(0).data('title');
}
else {
nextTitle = activeSlide.next().data('title');
prevTitle = activeSlide.prev().data('title');
}
$('h1').html(activeTitle);
$('#prev').html("Previous: "+prevTitle);
$('#next').html("Next: "+nextTitle);
}
UpdateTitles();
});//]]>
</script>
I bet you all hate WordPress questions (sorry!) but the WordPress support forum is useless. I use the Sandbox theme, which has two sidebars, but they are both on the left hand side, one on top of the other. Can anyone explain how I can either move one of these sidebars to the right hand side? Or how I can create a new sidebar and put it on the right hand side? I've tried editing the theme code myself. My blog is http://www.ieltsielts.com Thanks in advance. Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. |
|||||||