Related
Consider this:
<a-entity id="player">
<a-entity id="camera" camera look-controls></a-entity>
<a-entity id="leftHand" oculus-touch-controls="hand: left"></a-entity>
<a-entity id="rightHand" oculus-touch-controls="hand: right"></a-entity>
</a-entity>
If I want to move my player through the scene, I would add wasd-controls to #player. Doing that, disregards the orientation of the head (camera): W always moves "north", wherever you are looking at. If I add wasd-controls to #camera, the head moves correctly but the controllers are left behind.
So I thought of creating a custom wasd-controls, but I am unable to extend that component. I have been successful copying and pasting all the code, but that is very nasty.
This did not work: AFrame extend component and override.
Any idea?
my-wasd-controls.js
var KEYCODE_TO_CODE = require('aframe/src/constants').keyboardevent.KEYCODE_TO_CODE;
var AFRAME = require('aframe');
var THREE = require('aframe/src/lib/three');
var utils = require('aframe/src/utils');
var bind = utils.bind;
var shouldCaptureKeyEvent = utils.shouldCaptureKeyEvent;
var CLAMP_VELOCITY = 0.00001;
var MAX_DELTA = 0.2;
var KEYS = [
'KeyW', 'KeyA', 'KeyS', 'KeyD',
'ArrowUp', 'ArrowLeft', 'ArrowRight', 'ArrowDown'
];
/**
* WASD component to control entities using WASD keys.
*/
module.exports.Component = AFRAME.registerComponent('my-wasd-controls', {
schema: {
acceleration: {default: 65},
adAxis: {default: 'x', oneOf: ['x', 'y', 'z']},
adEnabled: {default: true},
adInverted: {default: false},
easing: {default: 20},
enabled: {default: true},
fly: {default: false},
head: {type: 'selector'},
wsAxis: {default: 'z', oneOf: ['x', 'y', 'z']},
wsEnabled: {default: true},
wsInverted: {default: false}
},
init: function () {
// To keep track of the pressed keys.
this.keys = {};
this.position = {};
this.velocity = new THREE.Vector3();
// Bind methods and add event listeners.
this.onBlur = bind(this.onBlur, this);
this.onFocus = bind(this.onFocus, this);
this.onKeyDown = bind(this.onKeyDown, this);
this.onKeyUp = bind(this.onKeyUp, this);
this.onVisibilityChange = bind(this.onVisibilityChange, this);
this.attachVisibilityEventListeners();
},
tick: function (time, delta) {
var currentPosition;
var data = this.data;
var el = this.el;
var movementVector;
var position = this.position;
var velocity = this.velocity;
if (!velocity[data.adAxis] && !velocity[data.wsAxis] &&
isEmptyObject(this.keys)) { return; }
// Update velocity.
delta = delta / 1000;
this.updateVelocity(delta);
if (!velocity[data.adAxis] && !velocity[data.wsAxis]) { return; }
// Get movement vector and translate position.
currentPosition = el.getAttribute('position');
movementVector = this.getMovementVector(delta);
position.x = currentPosition.x + movementVector.x;
position.y = currentPosition.y + movementVector.y;
position.z = currentPosition.z + movementVector.z;
el.setAttribute('position', position);
},
remove: function () {
this.removeKeyEventListeners();
this.removeVisibilityEventListeners();
},
play: function () {
this.attachKeyEventListeners();
},
pause: function () {
this.keys = {};
this.removeKeyEventListeners();
},
updateVelocity: function (delta) {
var acceleration;
var adAxis;
var adSign;
var data = this.data;
var keys = this.keys;
var velocity = this.velocity;
var wsAxis;
var wsSign;
adAxis = data.adAxis;
wsAxis = data.wsAxis;
// If FPS too low, reset velocity.
if (delta > MAX_DELTA) {
velocity[adAxis] = 0;
velocity[wsAxis] = 0;
return;
}
// Decay velocity.
if (velocity[adAxis] !== 0) {
velocity[adAxis] -= velocity[adAxis] * data.easing * delta;
}
if (velocity[wsAxis] !== 0) {
velocity[wsAxis] -= velocity[wsAxis] * data.easing * delta;
}
// Clamp velocity easing.
if (Math.abs(velocity[adAxis]) < CLAMP_VELOCITY) { velocity[adAxis] = 0; }
if (Math.abs(velocity[wsAxis]) < CLAMP_VELOCITY) { velocity[wsAxis] = 0; }
if (!data.enabled) { return; }
// Update velocity using keys pressed.
acceleration = data.acceleration;
if (data.adEnabled) {
adSign = data.adInverted ? -1 : 1;
if (keys.KeyA || keys.ArrowLeft) { velocity[adAxis] -= adSign * acceleration * delta; }
if (keys.KeyD || keys.ArrowRight) { velocity[adAxis] += adSign * acceleration * delta; }
}
if (data.wsEnabled) {
wsSign = data.wsInverted ? -1 : 1;
if (keys.KeyW || keys.ArrowUp) { velocity[wsAxis] -= wsSign * acceleration * delta; }
if (keys.KeyS || keys.ArrowDown) { velocity[wsAxis] += wsSign * acceleration * delta; }
}
},
getMovementVector: (function () {
var directionVector = new THREE.Vector3(0, 0, 0);
var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
return function (delta) {
var rotation = (this.data.head || this.el).getAttribute('rotation');
var velocity = this.velocity;
var xRotation;
directionVector.copy(velocity);
directionVector.multiplyScalar(delta);
// Absolute.
if (!rotation) { return directionVector; }
xRotation = this.data.fly ? rotation.x : 0;
// Transform direction relative to heading.
rotationEuler.set(THREE.Math.degToRad(xRotation), THREE.Math.degToRad(rotation.y), 0);
directionVector.applyEuler(rotationEuler);
return directionVector;
};
})(),
attachVisibilityEventListeners: function () {
window.addEventListener('blur', this.onBlur);
window.addEventListener('focus', this.onFocus);
document.addEventListener('visibilitychange', this.onVisibilityChange);
},
removeVisibilityEventListeners: function () {
window.removeEventListener('blur', this.onBlur);
window.removeEventListener('focus', this.onFocus);
document.removeEventListener('visibilitychange', this.onVisibilityChange);
},
attachKeyEventListeners: function () {
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
},
removeKeyEventListeners: function () {
window.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('keyup', this.onKeyUp);
},
onBlur: function () {
this.pause();
},
onFocus: function () {
this.play();
},
onVisibilityChange: function () {
if (document.hidden) {
this.onBlur();
} else {
this.onFocus();
}
},
onKeyDown: function (event) {
var code;
if (!shouldCaptureKeyEvent(event)) { return; }
code = event.code || KEYCODE_TO_CODE[event.keyCode];
if (KEYS.indexOf(code) !== -1) { this.keys[code] = true; }
},
onKeyUp: function (event) {
var code;
code = event.code || KEYCODE_TO_CODE[event.keyCode];
delete this.keys[code];
}
});
function isEmptyObject (keys) {
var key;
for (key in keys) { return false; }
return true;
}
I would still recommend copy and pasting it. If you ever upgrade A-Frame later, and wasd-controls changes, your extensions will probably break.
Changing the prototype should work (e.g., AFRAME.components['wasd-controls'].Component.prototype.foo = () => {}). The prototype methods are writable.
Another alternative is to overwrite the method on the component instance. el.components['wasd-controls'].foo = () => {}.
Does anyone have a sample project for lightbox2 rotate? I have applied all the javascript and css for this example http://jsfiddle.net/pootie/EBLc7/
and the rotate button never seems to show. What am I missing please help me
HTML CODE:
<img src="http://grgichtran.com/code/img/car-seat.jpg" class="img-polaroid" style="width: 100px;"/>
JS CODE:
(function () {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function () {
function LightboxOptions() {
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.showImageNumberLabel = true;
this.wrapAround = false;
}
LightboxOptions.prototype.albumLabel = function (curImageNum, albumSize) {
return "Image " + curImageNum + " of " + albumSize;
};
return LightboxOptions;
})();
Lightbox = (function () {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
Lightbox.prototype.init = function () {
this.enable();
return this.build();
};
Lightbox.prototype.enable = function () {
var _this = this;
return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function (e) {
_this.start($(e.currentTarget));
return false;
});
};
Lightbox.prototype.build = function () {
var _this = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a><a class='lb-rotate'></a></div></div></div></div>").appendTo($('body'));
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
this.$overlay.hide().on('click', function () {
_this.end();
return false;
});
this.$lightbox.hide().on('click', function (e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
}
return false;
});
this.$outerContainer.on('click', function (e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
}
return false;
});
this.$lightbox.find('.lb-prev').on('click', function () {
if (_this.currentImageIndex === 0) {
_this.changeImage(_this.album.length - 1);
} else {
_this.changeImage(_this.currentImageIndex - 1);
}
return false;
});
this.$lightbox.find('.lb-next').on('click', function () {
if (_this.currentImageIndex === _this.album.length - 1) {
_this.changeImage(0);
} else {
_this.changeImage(_this.currentImageIndex + 1);
}
return false;
});
this.$lightbox.find('.lb-rotate').on('click', function () {
$cont = _this.$lightbox.find('.lb-outerContainer');
$image = _this.$lightbox.find('.lb-image');
if ($($cont).attr('angle') == null) {
$($cont).attr('angle', 0);
}
var value = Number($($cont).attr('angle'));
value += 90;
$($cont).rotate({
animateTo: value
});
$($cont).attr('angle', value);
return false;
});
return this.$lightbox.find('.lb-loader, .lb-close').on('click', function () {
_this.end();
return false;
});
};
Lightbox.prototype.start = function ($link) {
var $window, a, dataLightboxValue, i, imageNumber, left, top, _i, _j, _len, _len1, _ref, _ref1;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
this.$overlay.width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
dataLightboxValue = $link.attr('data-lightbox');
if (dataLightboxValue) {
_ref = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) {
imageNumber = i;
}
}
} else {
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.attr('title')
});
} else {
_ref1 = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
a = _ref1[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) {
imageNumber = i;
}
}
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.changeImage = function (imageNumber) {
var $image, preloader,
_this = this;
this.disableKeyboardNav();
$image = this.$lightbox.find('.lb-image');
this.sizeOverlay();
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$outerContainer.addClass('animating');
preloader = new Image();
preloader.onload = function () {
var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
$image.attr('src', _this.album[imageNumber].link);
$preloader = $(preloader);
$image.width(preloader.width);
$image.height(preloader.height);
if (_this.options.fitImagesInViewport) {
windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
$image.width(imageWidth);
$image.height(imageHeight);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
$image.width(imageWidth);
$image.height(imageHeight);
}
}
}
return _this.sizeContainer($image.width(), $image.height());
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
Lightbox.prototype.sizeOverlay = function () {
return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};
Lightbox.prototype.sizeContainer = function (imageWidth, imageHeight) {
var newHeight, newWidth, oldHeight, oldWidth,
_this = this;
oldWidth = this.$outerContainer.outerWidth();
oldHeight = this.$outerContainer.outerHeight();
newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
this.$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing');
setTimeout(function () {
_this.$lightbox.find('.lb-dataContainer').width(newWidth);
_this.$lightbox.find('.lb-prevLink').height(newHeight);
_this.$lightbox.find('.lb-nextLink').height(newHeight);
_this.showImage();
}, this.options.resizeDuration);
};
Lightbox.prototype.showImage = function () {
this.$lightbox.find('.lb-loader').hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
Lightbox.prototype.updateNav = function () {
this.$lightbox.find('.lb-nav').show();
if (this.album.length > 1) {
if (this.options.wrapAround) {
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
}
}
}
};
Lightbox.prototype.updateDetails = function () {
var _this = this;
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
} else {
this.$lightbox.find('.lb-number').hide();
}
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function () {
return _this.sizeOverlay();
});
};
Lightbox.prototype.preloadNeighboringImages = function () {
var preloadNext, preloadPrev;
if (this.album.length > this.currentImageIndex + 1) {
preloadNext = new Image();
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
preloadPrev = new Image();
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function () {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function () {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function (event) {
var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
KEYCODE_ESC = 27;
KEYCODE_LEFTARROW = 37;
KEYCODE_RIGHTARROW = 39;
keycode = event.keyCode;
key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
}
}
};
Lightbox.prototype.end = function () {
this.disableKeyboardNav();
$(window).off("resize", this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);
return $('select, object, embed').css({
visibility: "visible"
});
};
return Lightbox;
})();
$(function () {
var lightbox, options;
options = new LightboxOptions();
return lightbox = new Lightbox(options);
});
}).call(this);
I'm not sure what your question is; please allow me to confirm that after applying the code in your project,
the lightbox shows up properly, but rotate button doesn't
nothing special shows up. Neither lightbox, nor rotate button show up.
If your question is the first one, please check if the rotate button image (rotate.png) is placed in proper path. From the css file, this image should be put in img/ folder.
From this sample's css, rotate.png should be here:
background: url(../img/rotate.png) top right no-repeat;
On the other hand, if your question is second one, please check all files (js/css/images) exist and are in correct path, especially css and images.
I have a problem with plugin SoundManager + Slider jquery UI - this one works as volume/current position changer while playing music.
After page is loaded, sometimes (i think it depends on file size) volume and current position are works fine, but if file are too huge, slider is loading properly (no errors in console) but not changing anything.
<?php
// In page Javascript
function audio_player_javascript () {
?>
<script>
var AudioPlayerDebugMode = true;
var songPlays = 0;
function AudioPlayerConsole (message) {
if (AudioPlayerDebugMode == true)
console.log(message);
}
function convertMilliseconds (ms, p) {
var pattern = p || "hh:mm:ss",
arrayPattern = pattern.split(":"),
clock = [ ],
hours = Math.floor ( ms / 3600000 ), // 1 Hour = 36000 Milliseconds
minuets = Math.floor (( ms % 3600000) / 60000), // 1 Minutes = 60000 Milliseconds
seconds = Math.floor ((( ms % 360000) % 60000) / 1000) // 1 Second = 1000 Milliseconds
// build the clock result
function createClock(unit){
// match the pattern to the corresponding variable
if (pattern.match(unit)) {
if (unit.match(/h/)) {
addUnitToClock(hours, unit);
}
if (unit.match(/m/)) {
addUnitToClock(minuets, unit);
}
if (unit.match(/s/)) {
addUnitToClock(seconds, unit);
};
}
}
function addUnitToClock(val, unit){
if ( val < 10 && unit.length === 2) {
val = "0" + val;
}
clock.push(val); // push the values into the clock array
}
// loop over the pattern building out the clock result
for ( var i = 0, j = arrayPattern.length; i < j; i ++ ){
createClock(arrayPattern[i]);
}
return {
hours : hours,
minuets : minuets,
seconds : seconds,
clock : clock.join(":")
};
}
<?php
$detect = new Mobile_Detect();
if ($detect->isMobile())
{
?>
setTimeout(function () {jQuery(".audio-player-toggle").trigger("click");}, 1000);
<?php
}
if (get_option("audio_player_autoplay_plugin") == "yes")
{
?>
setTimeout(function () { jQuery("#play-pause-button").trigger("click"); }, 1000);
<?php
}
?>
jQuery(function() {
soundManager.url = "<?php echo plugins_url('/js/soundmanager/swf', __FILE__);?>";
// Hide audio player
jQuery(".audio-player-toggle.open").live("click", function (e) {
jQuery(".audio-player-container").animate({
bottom: '-' + jQuery(".audio-player-container").height() + 'px'
}, 300, function () {
jQuery(".audio-player-toggle").removeClass("open");
jQuery(".audio-player-toggle").addClass("closed");
});
});
// Show audio player
jQuery(".audio-player-toggle.closed").live("click", function (e) {
jQuery(".audio-player-container").animate({
bottom: '0px'
}, 300, function () {
jQuery(".audio-player-toggle").removeClass("closed");
jQuery(".audio-player-toggle").addClass("open");
});
});
jQuery( "#position-scrubber" ).slider({
range: "max",
min: 0,
max: 0,
value: 0,
slide: function( event, ui ) {
}
});
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
{
// Set volume range if browser has Flash enabled
jQuery( "#volume-scrubber" ).slider({
range: "max",
min: 0,
max: 100,
value: 50,
slide: function( event, ui ) {
}
});
}
else
{
// Set volume range if browser doesn't have Flash enabled
jQuery( "#volume-scrubber" ).slider({
range: "max",
min: 0,
max: 1,
value: 0.5,
step: 0.01,
slide: function( event, ui ) {
}
});
}
jQuery(".audio-controls-container a").click(function (e) {
e.preventDefault();
});
var htmlSound = new Audio ();
// Set first song in playlist to be played
jQuery(".playlist_item:first").addClass("current");
var firstSong;
var mySound;
// Find playlist item with current class
firstSong = jQuery(".playlist_item:first").attr("data-song_file");
jQuery("#play-pause-button").live("click", function (e) {
AudioPlayerConsole(songPlays);
if (songPlays == 0)
{
playAudio(firstSong);
jQuery(this).addClass("playing");
}
else
{
// Pause music if it has playing class
if (jQuery(this).hasClass("playing"))
{
AudioPlayerConsole("stop playing");
jQuery(this).removeClass("playing");
if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined)
mySound.pause('audio-player');
else
htmlSound.pause();
return;
}
else
{
AudioPlayerConsole("start playing");
jQuery(this).addClass("playing");
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
mySound.resume('audio-player');
else
htmlSound.play();
return;
}
}
});
jQuery("#next-button").live("click", function (e) {
var thisSongFile = jQuery(".playlist_item.current").next(".playlist_item").attr("data-song_file");
if(!thisSongFile)
{
jQuery(".playlist_item").removeClass("current");
jQuery(".playlist_item:first").addClass("current");
thisSongFile = jQuery(".playlist_item:first").attr("data-song_file");
playAudio(thisSongFile);
}
else
{
console.log(thisSongFile);
var foundCurrent = false;
jQuery(".playlist_item").each(function () {
if (foundCurrent == true)
{
jQuery(this).addClass("current");
foundCurrent = false;
return;
}
if (jQuery(this).hasClass("current"))
{
jQuery(this).removeClass("current");
foundCurrent = true;
}
});
playAudio(thisSongFile);
}
});
jQuery("#previous-button").live("click", function (e) {
var thisSongFile = jQuery(".playlist_item.current").prev(".playlist_item").attr("data-song_file");
if(!thisSongFile)
{
jQuery(".playlist_item").removeClass("current");
jQuery(".playlist_item:first").addClass("current");
thisSongFile = jQuery(".playlist_item:first").attr("data-song_file");
playAudio(thisSongFile);
}
else
{
var foundCurrent = false;
jQuery(".playlist_item").each(function () {
if (jQuery(this).hasClass("current"))
{
jQuery(this).removeClass("current");
jQuery(this).prev(".playlist_item").addClass("current");
}
});
playAudio(thisSongFile);
}
});
// Load album track preview into audio player
jQuery(".track-preview").live("click", function (e) {
e.preventDefault();
var thisSongFile = jQuery(this).attr("data-song_file");
var thisSongArtist = jQuery(this).attr("data-song_artist");
var thisSongTitle = jQuery(this).attr("data-song_title");
var isInPlaylist = false;
// Determine if selected song is already in playlist
jQuery(".playlist_item").each(function () {
// Get title and artist of playing song
var songTitle = jQuery(this).attr("data-song_title");
var songArtist = jQuery(this).attr("data-song_artist");
if (thisSongArtist == songArtist && thisSongTitle == songTitle)
{
jQuery(".playlist_item").removeClass("current");
jQuery(this).addClass("current");
isInPlaylist = true;
}
});
if (isInPlaylist == true)
{
playAudio(thisSongFile);
}
else
{
jQuery(".playlist_item").removeClass("current");
var newPlaylistItem = '<li class="playlist_item current" song_title="' + thisSongTitle + '" song_artwork="" song_file="' + thisSongFile + '" song_artist="' + thisSongArtist + '"></li>';
jQuery("#audio-player-playlist").append(newPlaylistItem);
playAudio(thisSongFile);
}
});
function playAudio (songFile) {
songPlays++;
AudioPlayerConsole("Loading " + songFile);
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
{
soundManager.onready(function() {
soundManager.destroySound('audio-player');
mySound = soundManager.createSound({
id:'audio-player',
url: songFile,
onload: function() {
var duration = mySound.duration;
jQuery( "#position-scrubber" ).slider("option", "max", duration);
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock);
jQuery( "#position-scrubber" ).bind( "slide", function(event, ui) {
mySound.setPosition(ui.value);
});
// Show pause button
jQuery("#play-pause-button").addClass("playing");
},
whileplaying: function() {
var position = mySound.position;
var positionTime = convertMilliseconds(position, "mm:ss");
jQuery("#current-track-time").html(positionTime.clock);
jQuery( "#position-scrubber" ).slider("option", "value", position/1000);
var volume = jQuery( "#volume-scrubber" ).slider("option", "value");
mySound.setVolume(volume);
},
whileloading: function() {
var duration = mySound.duration;
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock);
},
onfinish: function() {
// Play next song in playlist
setTimeout(function () {jQuery("#next-button").trigger("click");}, 300);
}
});
// End soundManager.createSound
mySound.play();
});
jQuery("#play-pause-button").addClass("playing");
}
// End if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
else
// Player will use HTML5
{
htmlSound.src = songFile;
htmlSound.load();
jQuery( "#position-scrubber" ).bind( "slide", function(event, ui) {
htmlSound.currentTime = ui.value;
});
htmlSound.addEventListener("timeupdate", function() {
var newVolume = jQuery( "#volume-scrubber" ).slider("option", "value");
htmlSound.volume = newVolume;
var duration = htmlSound.duration * 1000;
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock );
var position = htmlSound.currentTime * 1000;
var positionTime = convertMilliseconds(position, "mm:ss");
jQuery("#current-track-time").html(positionTime.clock );
jQuery( "#position-scrubber" ).slider("option", "max", duration/1000);
jQuery( "#position-scrubber" ).slider("option", "value", position/1000);
});
htmlSound.addEventListener("ended", function() {
setTimeout(function () {jQuery("#next-button").trigger("click");}, 300);
});
htmlSound.play();
jQuery("#play-pause-button").addClass("playing");
}
// End Player will use HTML5
jQuery(".playlist_item").each(function () {
if (jQuery(this).hasClass("current"))
{
// Set title, artist, and artwork of playing song
var songArtwork = jQuery(this).attr("data-song_artwork");
var songTitle = jQuery(this).attr("data-song_title");
var songArtist = jQuery(this).attr("data-song_artist");
if (songArtwork != "")
{
jQuery(".audio-player-artwork img").attr("src", songArtwork);
jQuery(".audio-player-artwork").show();
}
else
{
jQuery(".audio-player-artwork img").attr("src", "");
jQuery(".audio-player-artwork").hide();
}
jQuery(".audio-player-song-title").html(songTitle);
jQuery(".audio-player-song-artist").html(songArtist);
}
});
}
// End playAudio()
});
</script>
i have a site i did for a friend using the theme KIN for wordpress as a base. The site is built on Wordpress and it's using AJAX to load all the pages, but the links although visible cannot be clicked! i don't really know why at all. Below is the site...
http://www.baudesigncreative.com
if you navigate to the keep in touch page, you will notice there are links to pages. Odd thing here as i can see the link on the status bar, but nothing happens when i click. Im not sure where to look to resolve this, can anyone offer any help?
thanks so much!
I found the link break to be from bau.js thanks to help from below,
$(document).ready(function() {
var url = '';
var currentOpen = '';
var mousedown = false;
var galleryMousedown = false;
var mouseX = 0;
var xdiff = 0;
var movePercentage = 0;
var toMove = 0;
function randomQuotes() {
$('body').append('<div id="bau-quotes-holder"></div>');
$('#bau-quotes-holder').hide();
var quotesUrl = 'http://baudesigncreative.com/quotes/';
var quotesLength = 0;
$('#bau-description').html('').hide();
$('#bau-quotes-holder').load(quotesUrl + ' #page_content_wrapper', function() {
$('#bau-quotes-holder').find('dt').each(function() {
$('#bau-description').append('<img src="' + $('a', this).attr('href') + '" />');
quotesLength++;
});
$('#bau-description img').hide();
var randomized = Math.floor((Math.random() * quotesLength) + 1);
$('#bau-description').show();
$('#bau-description img:nth-child(' + randomized + ')').fadeIn(500, function() {
$('#bau-quotes-holder').remove();
});
});
}
randomQuotes();
function scrollers() {
$('#bau-gallery').hover(function() {
$('#bau-gallery-left').fadeIn(200);
$('#bau-gallery-right').css('marginLeft', $('#galleryScrollbar').width() - '29').fadeIn(200);
}, function() {
$('#bau-gallery-left').fadeOut(200);
$('#bau-gallery-right').fadeOut(200);
});
var galleryLength = 0;
$('#bau-gallery-list').find('img').each(function() {
galleryLength++;
});
var scrollbarWidth = parseFloat($('#galleryScrollbar').width()) - 20;
var scrollbarToMove = 0;
var isDown = false;
var galleryLeft = parseFloat($('#bau-gallery-list').css('left'));
var galleryWidth = parseFloat($('#bau-gallery-list').width());
var lastImgWidth = parseFloat($('#bau-gallery-list img:last-child').width()) + 2;
toMove = Math.abs($('hr').width() - $('#bau-gallery-list img:last-child').width());
// var jumpWidth = ((galleryWidth - lastImgWidth - toMove) / (galleryLength - 1)) / 20;
var jumpWidth = ((galleryWidth - lastImgWidth - toMove) / (galleryLength - 1)) / 2;
// scrollbarToMove = (scrollbarWidth / (galleryLength - 1)) / 20;
scrollbarToMove = (scrollbarWidth / (galleryLength - 1)) / 2;
var timeoutLeft;
var timeoutRight;
$('#bau-gallery-left').dblclick(function(e) {
return false;
});
$('#bau-gallery-right').dblclick(function(e) {
return false;
});
$('#bau-gallery-left').click(function(e) {
galleryWidth = parseFloat($('#bau-gallery-list').width());
lastImgWidth = parseFloat($('#bau-gallery-list img:last-child').width()) + 2;
toMove = Math.abs($('hr').width() - $('#bau-gallery-list img:last-child').width());
jumpWidth = ((galleryWidth - lastImgWidth - toMove) / (galleryLength - 1)) / 2;
if ((galleryWidth - Math.abs(parseFloat($('#bau-gallery-list').css('left')))) > galleryWidth - jumpWidth) {
$('#galleryScrollbarThumb').css('left', 0);
$('#bau-gallery-list').css('left', 0);
}
else {
$('#bau-gallery-list').animate({'left': '+=' + jumpWidth + 'px'}, 100);
$('#galleryScrollbarThumb').animate({'left': '-=' + scrollbarToMove + 'px'}, 100);
}
return false;
});
$('#bau-gallery-right').click(function(e) {
galleryWidth = parseFloat($('#bau-gallery-list').width());
lastImgWidth = parseFloat($('#bau-gallery-list img:last-child').width()) + 2;
toMove = Math.abs($('hr').width() - $('#bau-gallery-list img:last-child').width());
jumpWidth = ((galleryWidth - lastImgWidth - toMove) / (galleryLength - 1)) / 2;
if ((scrollbarWidth - Math.abs(parseFloat($('#galleryScrollbarThumb').css('left')))) < scrollbarToMove) {
$('#galleryScrollbarThumb').css('left', scrollbarWidth);
$('#bau-gallery-list').css('left', -(galleryWidth - lastImgWidth - toMove));
}
else {
$('#bau-gallery-list').animate({'left': '-=' + jumpWidth + 'px'}, 100);
$('#galleryScrollbarThumb').animate({'left': '+=' + scrollbarToMove + 'px'}, 100);
}
return false;
});
//onhold
// $('#bau-gallery-left').mousedown(function(e) {
// if (!galleryMousedown) {
// galleryMousedown = true;
// timeoutLeft = setInterval(function() {
// if ((scrollbarWidth - Math.abs(parseFloat($('#galleryScrollbarThumb').css('left')))) > scrollbarWidth - scrollbarToMove) {
// $('#galleryScrollbarThumb').css('left', 0);
// $('#bau-gallery-list').css('left', 0);
// }
// else {
// $('#bau-gallery-list').animate({'left': '+=' + jumpWidth + 'px'}, 50);
// $('#galleryScrollbarThumb').animate({'left': '-=' + scrollbarToMove + 'px'}, 50);
// }
// }, 50);
// }
// return false;
// });
// $('#bau-gallery-right').mousedown(function(e) {
// if (!galleryMousedown) {
// galleryMousedown = true;
// timeoutRight = setInterval(function() {
// if ((scrollbarWidth - Math.abs(parseFloat($('#galleryScrollbarThumb').css('left')))) < scrollbarToMove) {
// $('#galleryScrollbarThumb').css('left', scrollbarWidth);
// $('#bau-gallery-list').css('left', -(galleryWidth - lastImgWidth - toMove));
// }
// else {
// $('#bau-gallery-list').animate({'left': '-=' + jumpWidth + 'px'}, 50);
// $('#galleryScrollbarThumb').animate({'left': '+=' + scrollbarToMove + 'px'}, 50);
// }
// }, 50);
// }
// return false;
// });
// $(window).mouseup(function(e) {
// galleryMousedown = false;
// clearInterval(timeoutLeft);
// clearInterval(timeoutRight);
// return false;
// });
}
function backLoop() {
$('#bau-gallery-back a').dblclick(function(e) {
return false;
});
$('#bau-gallery-back a').click(function(e) {
randomQuotes();
var backShowcaseUrl = $(this).attr('href');
$('#bau-content').fadeOut(1000, function() {
$('#bau-gallery').remove();
$('#bau-content').hide();
$('#bau-content').append('<div id="page_content_wrapper"><div class="inner"><div id="bau-showcase"></div></div></div>')
$('#bau-showcase').append($('#bau-showcase-holder').html());
$('#bau-content').height('')
.css('marginBottom', '')
.width('')
.css('overflow', '');
$('#bau-content').fadeIn(500, function() {
$('#bau-showcase-holder').remove();
showcaseEvents();
});
$('#bau-content').height($('.inner').height());
});
return false;
});
}
function showcaseEvents() {
$('#bau-showcase li').dblclick(function(e) {
return false;
});
$('#bau-showcase li').click(function(e) {
randomQuotes();
var showcaseUrl = $('a', this).attr('href');
var tempWidth = 0;
$('#bau-content').fadeOut(1000, function() {
$('#bau-showcase-holder').remove();
$('body').append('<div id="bau-showcase-holder">' + $('#bau-showcase').html() + '</div>');
$('#bau-showcase-holder').hide();
$('#page_content_wrapper').remove();
$('#bau-content').append('<div id="bau-gallery"></div>');
$('#bau-gallery-holder').load(showcaseUrl + ' #page_content_wrapper', function() {
$('#bau-gallery').append('<div id="bau-gallery-title">' + $('#bau-gallery-holder h2').text() + '</div><div id="bau-gallery-list"></div><div id="bau-gallery-left" class="scroller scroll-left"></div><div id="bau-gallery-right" class="scroller scroll-right"></div>')
$('#bau-gallery-holder').find('dt').each(function() {
var _thisImgUrl = $('a', this).attr('href');
$('#bau-gallery-list').append('<img src="' + _thisImgUrl + '"/>');
});
$('#bau-gallery').append('<div class="clear"></div><div id="galleryScrollbar"><div id="galleryScrollbarThumb"><img src="http://baudesigncreative.com/wp-content/uploads/2011/09/scrollbar_thumb.png" alt=""></div></div>')
.append('<div id="bau-gallery-back"><img src="http://baudesigncreative.com/wp-content/uploads/2011/09/back-to-showcase.png" />Back to Showcase</div>');
$('#bau-content').fadeIn(1000, function() {
tempWidth = $('#bau-gallery').width();
// $('#bau-gallery').width($('hr').width());
$('#bau-content').width($('hr').width());
// $('#bau-gallery-list').width($('#bau-gallery').width());
// $('#bau-gallery-list').width($('hr').width());
$('#galleryScrollbarThumb').mousedown(function(event) {
if (!mousedown) {
mousedown = true;
}
return false;
});
var scrollerOffset = $('hr').offset();
var scrollerOffsetLeft = scrollerOffset.left;
var realEvent = 0;
$(window).mousemove(function(event) {
if (mousedown) {
realEvent = event.pageX - (scrollerOffsetLeft + 10);
if (realEvent < 0) {
realEvent = 0;
}
else if (realEvent > ($('hr').width() - 20)) {
realEvent = $('hr').width() - 20;
}
$('#galleryScrollbarThumb').css('left', realEvent);
movePercentage = (realEvent) / ($('hr').width() - 20);
toMove = Math.abs($('hr').width() - $('#bau-gallery-list img:last-child').width());
$('#bau-gallery-list').css('left', -(movePercentage * ($('#bau-gallery-list').width() - $('#bau-gallery-list img:last-child').width() - 2 - toMove)));
}
return false;
});
$(window).mouseup(function(event) {
mousedown = false;
if (parseFloat($('#galleryScrollbarThumb').css('left')) <= 0) {
$('#galleryScrollbarThumb').css('left', 0);
$('#bau-gallery-list').css('left', 0);
}
else if (parseFloat($('#galleryScrollbarThumb').css('left')) >= $('hr').width() - 20) {
$('#galleryScrollbarThumb').css('left', $('hr').width() - 20);
toMove = Math.abs($('hr').width() - $('#bau-gallery-list img:last-child').width());
$('#bau-gallery-list').css('left', -($('#bau-gallery-list').width() - $('#bau-gallery-list img:last-child').width() - 2 - toMove));
}
return false;
});
scrollers();
backLoop();
});
$('#bau-content').height($('#bau-gallery').height())
.css('marginBottom', $('#bau-gallery').css('marginBottom'))
.width('100%')
.css('overflow', 'hidden');
$('#bau-gallery-back').width($('hr').width());
$('#galleryScrollbar').width($('hr').width());
$('#bau-gallery-holder').remove();
$('body').prepend('<div id="bau-gallery-holder"></div>');
});
});
return false;
});
}
$('#page_content_wrapper').remove();
$('#main_menu li:first').append('<div id="bau-ajax"><div id="bau-content"></div><div class="clear"></div></div>');
$('#bau-ajax').hide();
$('body').prepend('<div id="bau-gallery-holder"></div>');
$('#bau-gallery-holder').hide();
$('#main_menu > li').dblclick(function(e) {
return false;
});
$('#main_menu > li').click(function(e) {
randomQuotes();
$('#bau-showcase-holder').remove();
var _this = $(this);
var _thisA = $('a', this);
$('#main_menu li a').css('color', '#000');
$('#bau-content').slideUp(500, function() {
if (_this.attr('id') != currentOpen) {
$('#bau-ajax').remove();
_this.append('<div id="bau-ajax"><hr><div id="bau-content"></div><div class="clear"></div><hr></div>');
url = _thisA.attr('href');
$('#bau-ajax').show();
$('#bau-content').hide();
_thisA.css('color', '#909295');
$('#bau-content').load(url + ' #page_content_wrapper', function() {
$('#bau-content h1').remove();
$('#bau-content br').remove();
$('#bau-content').fadeIn(500, function() {
$('#bau-content').click(function(e) {
return false;
});
showcaseEvents();
});
$('#bau-content').height($('.inner').height());
currentOpen = _this.attr('id');
});
}
else {
$('#bau-ajax').remove();
_this.append('<div id="bau-ajax"><div id="bau-content"></div><div class="clear"></div></div>');
url = _thisA.attr('href');
currentOpen = '';
}
});
return false;
});
//styleSheets
$('#menu_wrapper').css('width', '100%');
$('#page_content_wrapper').css('width', '1000px');
});
Anyone by any chance spot anything that could be it?
when i comment out (from line 297)
$('#page_content_wrapper').remove();
it seems to remove the styling overlapping it which results it the page breaking a bit :(
am i missing something simple by any chance?
your link are working on my end if still you have problem with links then use CSS proerty.
Z-index:999;
i have a asp dropdownlist, which is getting generated by ajax, now my problem is, i have a jquery, now basically this jquery is for apply dropdown effect to any select element, now what this does is, once the select element have some option, it hide those option and copy those inside ul and li format, now whats happening, before my ajax call is made, this jquery is executed, and as it finds nothing in select element, it does not creates ul and li, because of which i always gets blank list, i tried placing static items inside DropDownList, it works, but with jquery it does not works, i also tried to place whole jquery code (Jquery which is adding slide effect for dropdownlist) inside document.ready below the ajax call function, but that too is not working, below is my ajax function:
function GetRegion() {
$("select[id$=ddlRegion] > option").remove();
$.ajax({
type: "POST",
url: "InteractiveMap.asmx/GetRegions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
var Items = data.d;
ddlRegion.attr("disabled", false);
ddlCountry.append('<option value="-1">--Select Region--</option>');
$.each(Items, function (index, Item) {
ddlRegion.append('<option value="' + Item.RID + '">' + Item.Text + '</option>');
});
ddlRegion.val(RegionQueryString);
},
failure: function (msg) {
ShowErrorMessage(msg);
}
});
}
and below is my jquery which is adding slide effect, sorry but its pretty large:
(function ($) {
$.fn.jNice = function (options) {
var self = this;
var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
/* Apply document listener */
$(document).mousedown(checkExternalClick);
/* each form */
return this.each(function () {
$('input:submit, input:reset, input:button', this).each(ButtonAdd);
$('button').focus(function () { $(this).addClass('jNiceFocus') }).blur(function () { $(this).removeClass('jNiceFocus') });
$('input:text:visible, input:password', this).each(TextAdd);
/* If this is safari we need to add an extra class */
if (safari) { $('.jNiceInputWrapper').each(function () { $(this).addClass('jNiceSafari').find('input').css('width', $(this).width() + 11); }); }
$('input:checkbox', this).each(CheckAdd);
$('input:radio', this).each(RadioAdd);
$('select', this).each(function (index) {
//$(this).attr('size')
if ($(this).attr('multiple')) {
MultipleSelectAdd(this, index);
}
else
SelectAdd(this, index);
});
/* Add a new handler for the reset action */
$(this).bind('reset', function () { var action = function () { Reset(this); }; window.setTimeout(action, 10); });
$('.jNiceHidden').css({ opacity: 0 });
});
}; /* End the Plugin */
var Reset = function (form) {
var sel;
$('.jNiceWrapper select', form).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceSelectWrapper ul', $(this).parent()).each(function () { $('a:eq(0)', this).click(); }); });
$('.jNiceWrapper select', form).each(function () {
sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceMultipleSelectWrapper ul li', $(this).parent()).each(function () {
if ($('a:first', this).hasClass('selected'))
$('a:first', this).click();
});
});
$('a.jNiceCheckbox, a.jNiceRadio', form).removeClass('jNiceChecked');
$('input:checkbox, input:radio', form).each(function () { if (this.checked) { $('a', $(this).parent()).addClass('jNiceChecked'); } });
};
var RadioAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jRadioWrapper jNiceWrapper"></span>');
var $wrapper = $input.parent();
var $a = $('<span class="jNiceRadio"></span>');
$wrapper.prepend($a);
/* Click Handler */
$a.click(function () {
var $input = $(this).addClass('jNiceChecked').siblings('input').attr('checked', true);
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
return false;
});
$input.click(function () {
if (this.checked) {
var $input = $(this).siblings('.jNiceRadio').addClass('jNiceChecked').end();
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
}
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $a.addClass('jNiceChecked'); }
};
var CheckAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function () {
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked === true) {
input.checked = false;
$a.removeClass('jNiceChecked');
}
else {
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
$input.click(function () {
if (this.checked) { $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $('.jNiceCheckbox', $wrapper).addClass('jNiceChecked'); }
};
var TextAdd = function () {
var $input = $(this).addClass('jNiceInput').wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"></div></div>');
var $wrapper = $input.parents('.jNiceInputWrapper');
$input.focus(function () {
$wrapper.addClass('jNiceInputWrapper_hover');
}).blur(function () {
$wrapper.removeClass('jNiceInputWrapper_hover');
});
};
var ButtonAdd = function () {
var value = $(this).attr('value');
$(this).replaceWith('<button id="' + this.id + '" name="' + this.name + '" type="' + this.type + '" class="' + this.className + '" value="' + value + '"><span><span>' + value + '</span></span>');
};
/* Hide all open selects */
var SelectHide = function () {
$('.jNiceSelectWrapper ul:visible').hide();
};
/* Check for an external click */
var checkExternalClick = function (event) {
if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { SelectHide(); }
};
var SelectAdd = function (element, index) {
var $select = $(element);
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
SelectUpdate(element);
/* Apply the click handler to the Open */
$('div', $wrapper).click(function () {
var $ul = $(this).siblings('ul');
if ($ul.css('display') == 'none') { SelectHide(); } /* Check if box is already open to still allow toggle, but close all other selects */
$ul.slideToggle('fast');
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({ scrollTop: offSet });
return false;
});
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectAdd = function (element, index) {
var $select = $(element);
var size = parseInt($select.attr('size'));
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceMultipleSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceMultipleSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceMultipleSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
//$('.jNiceMultipleSelectWrapper ul').height(($select.height()+4) +'px');
//$('.jNiceMultipleSelectWrapper ul').css({'overflow-x':'hidden','overflow-y':'auto'});
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
MultipleSelectUpdate(element);
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceMultipleSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().show();
$('option', $select).each(function (i) {
if ($('option:eq(' + i + ')', $select).attr('selected'))
$ul.append('<li>' + this.text + '</li>');
else
$ul.append('<li>' + this.text + '</li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
//$('a.selected', $wrapper).removeClass('selected');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
//$select[0].selectedIndex = $(this).attr('index');
/// we make the select in the input also true
$('option:eq(' + $(this).attr('index') + ')', $select).attr('selected', true);
if ($(this).attr('index') == 0)
$('span:eq(0)', $wrapper).html($(this).html());
return false;
});
/* Set the defalut */
$('a:eq(0)', $ul).click();
};
var SelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().hide();
$('option', $select).each(function (i) {
$ul.append('<li>' + this.text + '</li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
if ($select[0].selectedIndex != $(this).attr('index')) {
$select.trigger('change');
}
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the defalut */
$('a:eq(' + $select[0].selectedIndex + ')', $ul).click();
};
var SelectRemove = function (element) {
var zIndex = $(element).siblings('.jNiceSelectWrapper').css('zIndex');
$(element).css({ zIndex: zIndex }).removeClass('jNiceHidden');
$(element).siblings('.jNiceSelectWrapper').remove();
};
/* Utilities */
$.jNice = {
SelectAdd: function (element, index) { SelectAdd(element, index); },
MultipleSelectAdd: function (element, index) { MultipleSelectAdd(element, index); },
MultipleSelectUpdate: function (element) { MultipleSelectUpdate(element); },
SelectRemove: function (element) { SelectRemove(element); },
SelectUpdate: function (element) { SelectUpdate(element); },
Reset: function (element) { Reset(element); }
}; /* End Utilities */
/* Automatically apply to any forms with class jNice */
$(function () { $('.content').jNice(); });
})(jQuery);
You don't need to $.parseJSON(response); on success. jQuery parses it ahead of time and passes the object (not the JSON string) to the success function. So response contains the object.
See the "dataType" section for "json" here: http://api.jquery.com/jQuery.ajax/