JavaScript - Making A Website With Wordpress. Need Help On Coding/plugins In 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

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

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.

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

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?

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

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 &quot;"); echo '&quot; - '; }
		      elseif (is_archive()) {
		         wp_title(''); echo ' Archive - '; }
		      elseif (is_search()) {
		         echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
		      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>

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 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'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!!

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?

Hello. I have built a basic website that contains an iframe in the middle, called "iframe1". In this iframe I wish to load an external message board from proboards.com. In my code I can easily do this by making a button or hyper-link with the href="httproboards.com/myforums" and the rel="nofollow" target="iframe1"

When I do this it will load inside of it the iframe jsut as I want it to. However, my the problem is when you click on the button to login its coded to target "_top" and it opens on the entire page replacing the whole website. If i run firebug (a real time HTML editor). I can easily locate and change the link code to rel="nofollow" target="iframe1". But How can I write a script in javascript in my webpage code to do this as soon as the iframe has loaded the external messageboard?

I have also been trying things like
javascript:void(document.iframe1.getElementsByTag("a")[5].rel="nofollow" target="iframe1")

but i have had no luck so far in changing the target without the aid of firebug.

Here is the code that needs to be changed. the rel="nofollow" target="_top" needs to be altered somehow to rel="nofollow" target="iframe1" as soon as the frame has finished loading the messageboards.

Code:

<p><font size="2"> 

Welcome Guest.  Please <a href="/index.cgi?action=login" rel="nofollow" target="_top">Login</a> or <a href="/index.cgi?action=register" rel="nofollow" target="_top">Register</a>.<br/>Nov 19, 2010, 7:23pm

</font><br /></p>

Heres a screenshot that may help, as you can see I have easily changed the target of the link to="iframe1" using firebug, but I need to hardcode a script in my website that does this automatically after the iframe has loaded the forums page.

http://img191.imageshack.us/img191/7264/26796014.jpg

Thanks to for any help.

Hi All,

I am a novice in javascript. I am trying to use two plugins in a same page. I have seen many articles, and tutorial for debugging the problems related to this. I have also seen the messages on this board which discuss the same issue.

However, my knowledge in javascript is very much limited and I could not resolve my problem.

I am using two jquery plugins - a) galleria, and b) stepcarousel.

I have got them to work separately, tweaked the CSS, and other things to fit them on the webpage, added automatic slideshow in galleria.

Now, I am trying to run them simulataneously on the same page. But, it is not working. I have tried to use the jQuery.noConflict (); tag but after using that, the stepcarousel is working but the galleria is not working.

Here is the part of the javascript included in the header of my website.
Code:

<script type="text/javascript" src="../javascripts/jquery.min.js"></script>
<script type="text/javascript" src="../javascripts/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../javascripts/jquery.galleria.js"></script>

<script type="text/javascript">
	
	jQuery.noConflict ();

        var t;
        var timer_is_on=0;
        var timer=2000;

        function startSliding()
        {
        $.galleria.next();
        t=window.setTimeout("startSliding()",timer);
        }

        function showSlide()
        {
        if (!timer_is_on)
          {
          timer_is_on=1;
          startSliding();
          }
        }
        
        function stopSlide()
        {
        window.clearTimeout(t);
        timer_is_on=0;
        }

        $(document).ready(function(){
                
                $('.gallery_spandan').addClass('gallery'); // adds new class name to maintain degradability
                
                $('ul.gallery').galleria({
                        history   : false, // activates the history object for bookmarking, back-button etc.
                        clickNext : true, // helper for making the image clickable
                        insert    : '#main_image', // the containing selector for our main image
                        onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
                                
                                // fade in the image + caption
                                image.css('display','none').fadeIn(400);
                                caption.css('display','none').fadeIn(400);
                                
                                // fetch the thumbnail container
                                var _li = thumb.parents('li');
                                
                                // fade out inactive thumbnail
                                _li.siblings().children('img.selected').fadeTo(400,0.3);
                                
                                // fade in active thumbnail
                                thumb.fadeTo('fast',1).addClass('selected');
                                
                                // add a title for the clickable image
                                image.attr('title','Next image >>');
                                

                        },
                        onThumb : function(thumb) { // thumbnail effects goes here
                                
                                // fetch the thumbnail container
                                var _li = thumb.parents('li');


                              // if thumbnail is active, fade all the way.
                                var _fadeTo = _li.is('.active') ? '1' : '0.3';
                                
                                // fade in the thumbnail when finnished loading
                                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                                
                                // hover effects
                                thumb.hover(
                                        function() { thumb.fadeTo('fast',1); },
                                        function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
                                );
                        }
                });
        });


        </script>


<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript">

stepcarousel.setup({
        galleryid: 'albumcovers_gallery', //id of carousel DIV
        beltclass: 'albumcovers_belt', //class of inner "belt" DIV containing all the panel DIVs
        panelclass: 'albumcovers_panel', //class of panel DIVs each holding content
        autostep: {enable:true, moveby:1, pause:3000},
        panelbehavior: {speed:500, wraparound:false, persist:true},
        defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/prev_left.gif', -20, 20], rightnav: ['images/next_right.gif', 20, 20]},
        statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
        contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});

</script>

The step carousel code also uses the jQuery.noConflict --->

Code:

jQuery.noConflict();

var stepcarousel={
	ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
	defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
	configholder: {},

	getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
		return (val=="auto")? 0 : parseInt(val)
	},

...

Please help me to debug this problem. I am really stuck.

Edit: If you would like to view the webpage where I am trying to do this, please visit he Step Carousel working, Galleria not working.

And here, Galleria working separately

Thanks in advance,
banskt.