Develop Reference

Cursor pointer moves to first position onclick textarea using CK-Editor

I am using CK-Editor 4. In which I have created Directive. When I click on Textarea my cursor pointer is Move to First position. I want my cursor position should be available when I click in any of the Place inside Textarea. It should not be able to move first or last position until I click on last position.
vpb.directive('ckeInline', function ($timeout, $parse, $rootScope,$) {
return {
require: "ngModel",
link: function (scope, element, attrs, ngModel) {
if (attrs.ckeInlineShowtitle) ngModel = "";
isMobile = $(".ipad, .ipod, .android").length > 0;
var destroy_this_editor = function(id)
{
setTimeout(function () {
try{
CKEDITOR.instances[id].destroy(true);
} catch (ex) {
}
},500)
}
if (!isMobile) {
var create_and_focus = function () {
if (scope.setup.edit_mode || attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
var a_id = attrs.ckeInlineId;
var menu_selector = attrs.ckeInlineMenu;
//get editor
//create editor if doesn't exist
var e = CKEDITOR.instances[a_id];
if (!e) {
element.menu = $(menu_selector);
//set up behavior for menu
uif.wire_up_menu(element, scope);
//hide all menu bars
$("nav.text-editor-menu-bar").hide();
//create editor
var config = {
toolbar: "More",
on: {
'blur': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focusout': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focus': function () {
//show the current menu
element.menu.show();
//fix menu width
uif.stretch_menu(element);
},
'instanceReady': function (event,element) {
//----------------I think,Here i want logic to set caret sign or set mouse
//pointer to appropriate place
// event.editor.focus();
// element.focus();
}
}
};
if (attrs.ckeInlineToolbar) {
config.toolbar = attrs.ckeInlineToolbar;
}
var editor = CKEDITOR.inline(a_id, config);
if (attrs.ckeInlineOnInit) {
uif.apply_scope($rootScope, $parse(attrs.ckeInlineOnInit));
}
}
else
{
e.focus();
element.focus();
}
} else
{
attrs.$set('contenteditable', false);
}
}
element.click(function () {
create_and_focus();
});
if (attrs.ckeInlineFocusWatch) {
scope.$watch(function () {
return $parse(attrs.ckeInlineFocusWatch);
}, function () {
if (attrs.ckeInlineFocusCondition == undefined || $parse(attrs.ckeInlineFocusCondition)() == true) {
create_and_focus();
}
})
}
var saving = false;
var save_editor_content = function (cb) {
if (!saving)
{
saving = true;
var a_id = attrs.ckeInlineId;
if (a_id) {
var editor = CKEDITOR.instances[a_id];
if (editor) {
var menu_selector = attrs.ckeInlineMenu;
element.menu.hide();
//attrs.$set('contenteditable', false);
var newValue = editor.getData().replace(/ /, ' ');
if (ngModel.$modelValue != newValue) {
if (attrs.ckeInlineBlurBool) {
$parse(attrs.ckeInlineBlurBool).assign($rootScope, false);
}
ngModel.$setViewValue(newValue);
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
$timeout(function () {
saving = false;
if (cb) cb();
}, 1100)
} else
{
saving = false;
$rootScope.setup.blcok_edits = false;
$rootScope.setup.block_all_editors = false;
if (cb) cb();
}
}
}
else
{
saving = false;
}
}
};
} else if (attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
element.blur(function () {
ngModel.$setViewValue(element.html().replace(/ /, ' '));
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
})
}
}
}
});

Property undefined on production server but works on development

We've been implementing a lightbox into our wordpress theme and it works perfectly on our development server which is on the same server as our live site and the build is exactly the same to my knowledge as the build for the development site was just taken from a live site backup, but for some reason on some pages i am getting the following error but on others i'm not as if the JS isn't getting loaded before this JS file but i don't understand why it works perfectly every time on the dev server:
Uncaught TypeError: Cannot read property 'imageUrl' of undefined
jQuery(document).ready(function( $ ) {
var WHLightbox = {
settings: {
overlay: $('.portfolio-tile--overlay'),
imageCell: $('.cell-image, .portfolio-tile--image')
},
data: {
images: []
},
init: function() {
this.events();
this.buildImageData();
},
events: function() {
var self = this;
this.settings.imageCell.on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
// set up the overlay
//self._positionOverlay();
self._openOverlay();
self._preventScrolling();
// create the image slide
self._createImageSlide($(this));
});
$('.portfolio-tile--overlay--close').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self._closeOverlay();
});
$('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('.portfolio-tile--overlay--controls--prev').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showPrev();
});
$('.portfolio-tile--overlay--controls--next, .portfolio-tile--overlay').on('click tap', function(e) {
e.preventDefault();
e.stopPropagation();
self.showNext();
});
},
// public functions
showPrev: function() {
var index = this.currentImageIndex();
if(index === 0) {
index = this.data.images.length;
}
this._createImageSlide(false, index-1);
},
showNext: function() {
var index = this.currentImageIndex();
if(index === this.data.images.length-1) {
// set to -1 because it adds 1 in the _createImageSlide call
index = -1;
}
this._createImageSlide(false, index+1);
},
currentImageIndex: function() {
if(this.settings.overlay.hasClass('open')) {
var imageUrl = $('.portfolio-tile--main-image').attr('src');
for(var i=0; i<this.data.images.length; i++) {
if(this.data.images[i].imageUrl === imageUrl) {
return i;
}
}
} else {
return false;
}
},
// image data
buildImageData: function() {
var self = this,
i = 0;
this.settings.imageCell.each(function() {
self.data.images[i] = {
imageUrl: self._getImagePath($(this))
}
i++;
});
},
// slide
_createImageSlide: function($el, index) {
var imagePath;
if(!$el) {
imagePath = this.data.images[index].imageUrl;
} else {
imagePath = this._getImagePath($el);
}
this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
},
_getImagePath: function($el) {
var imagePath,
spanEl = $el.find('span.js-cell-image-background'),
imgEl = $el.find('img.cell-image__image');
if(spanEl.length) {
imagePath = spanEl.css('backgroundImage');
imagePath = imagePath.replace(/url\(["]*/,'').replace(/["]*\)/,'');
} else if(imgEl.length) {
imagePath = imgEl.attr('src');
}
return imagePath;
},
// overlay
//_positionOverlay: function() {
// this.settings.overlay.css({
// position the overlay to current scroll position
// top: $(window).scrollTop()
// });
//},
_openOverlay: function() {
this.settings.overlay.addClass('open');
},
_preventScrolling: function() {
$('html, body').addClass('no-scroll');
},
_reInitScrolling: function() {
$('html, body').removeClass('no-scroll');
},
_closeOverlay: function() {
this.settings.overlay.removeClass('open');
this._reInitScrolling();
}
};
WHLightbox.init();
});

Jquery message only on first row

I'm having a problem: when clicking on edit buttom, the message of the successful/error alert is displayed only on the first row even if i click on the second.
This is the js
var ROUTE = new function () {
var oGlobal = this;
this.sSaveUrl = '';
this.setSaveUrl = function (_sUrl) {
this.sSaveUrl = _sUrl;
}
this.setEventSubmit = function () {
$('[id^="route_update"]').each(function () {
$(this).click(function () {
var oData = $(this).closest('tr').find('input').serializeArray();
var oRow = $(this).closest('tr');
console.log(oData);
oReq = $.post(oGlobal.sSaveUrl, oData, function (data) {
if (data['valid'] != "true") {
//console.log('error');
//Fade in
oRow.closest('#comment').html('Error').css('display', 'block').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
} else {
//console.log('success');
//Fade in
$('#comment').html('Insert Success').fadeIn(1000);
//Fade out
setTimeout(function () {
$('#comment').html('').fadeOut(1000);
}, 1500);
//fade in
$('#comment')
}
return false;
}, 'json');
return false;
});
});
}
this.init = function () {
this.setEventSubmit();
}
}
What do I wrong?
Thanks in advance

JavaScript Image Flip

I have some code that is running a JavaScript image flip, I'm new to JS and I need the image to flip when hovered and and hovered off, if I put it to onhover it flips everytime the mouse is moved, not when the mouse is off.
Here is the code:
$(document).ready(function () {
setInterval(function () {
$('.sponsorFlip').load('script.js');
$('.sponsorFlip').load('jquery.flip.min.js');
}, 30000);
$('.sponsorFlip').one("mouseenter mouseleave", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
$('.sponsorFlip').bind("click", function () {
var elem = $(this);
if (elem.data('flipped')) {
elem.revertFlip();
elem.data('flipped', false)
}
else {
elem.flip({
direction: 'rl',
speed: 250,
onBefore: function () {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
}
});
});

Make use of classes. ;) Preview - http://jsfiddle.net/TJZmM/3/
$('div').bind('mouseover mouseout', function(){
var self = $(this);
if(self.toggleClass('flipped').hasClass('flipped')) {
self.html('rl');
}
else {
self.html('lr');
}
});​

jQuery Menu Hover, but don't at click

HTML Structure:
<a class="fadeThis" id="paperoff" href="#"><span id="paperon" class="hover">News</span></a>
JAVASCRIPT:
$('.fadeThis > .hover').empty();
$('.fadeThis').each(function () {
var text = $(this).text();
$(this).append(''+text+'');
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
// HERE SOMETHING THAT TELLS TO NOT FADE BACK THE SPAN (ONLY FOR THE CLICKED DIV).
});
});

Your question is not very clear, but do you want someting like this?
var fadeBlock = false;
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
if (!fadeBlock) {
$span.stop().fadeTo(500, 0);
} else { fadeBlock = false;}
}).click (function () {
fadeBlock = true;
});