I have the following problem in js that I am working:
Uncaught ReferenceError: slideshow_animate is not defined (anonymous
function)
The function that refers to that is:
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
I have another website where if I is working but it seems that in this application I am having a problem with slideshowa_animate, attached the full code for reference:
(function ($, Drupal) {
Drupal.behaviors.lek7_zen_theme = {
attach: function(context, settings) {
$(document).ready(function(){
var i = 1;
$('.item-slide').each(function(key, value) {
$(value).attr('id', 'item-slide-'+i);
i++;
});
$('.slide_caption').hide();
$('#item-slide-1 > .slide_caption').show();
$('#item-slide-1').addClass('active');
$('.item-slide').not('.active').children('.slide_image_slice').show();
});
var animation = {
'auto_animate': true,
'auto_animate_delay': 8000,
'auto_animate_id': '',
'caption_speed': 'fast',
//'panel_speed': 'slow',
'panel_speed': 1000,
'panel_easing': 'easeInOutCubic'
}
$('.item-slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
setTimeout(function(){hide_slices()},1);
display_caption();
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=769px"}, animation.panel_speed, animation.panel_easing, function(){display_slices();});
$(this).prev().trigger('close');
}
});
$('.item-slide')
.hoverIntent(
function() {
animation.auto_animate = false;
trigger_accordion($(this));
},
function() {
animation.auto_animate = true;
clearInterval(animation.auto_animate_id);
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
}
)
.click(function() {
trigger_accordion($(this));
});
animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay);
function trigger_accordion(itemSlide) {
if(!(itemSlide.is(':animated'))) {
itemSlide.trigger('open');
}
}
function display_caption() {
$('.slide_caption').each(function() {
if(!($(this).parent().hasClass('active'))) {
$(this).fadeOut('fast', function() {
$('.item-slide.active > .slide_caption').fadeIn(animation.caption_speed);
});
}
});
}
function hide_slices() {
$('.slide_image_slice').each(function() {
if($(this).parent().hasClass('active')) {
$(this).fadeOut('fast');
}
});
}
function display_slices() {
$('.slide_image_slice').each(function() {
if(!$(this).parent().hasClass('active') && !$(this).is(":visible")) {
$(this).fadeIn('fast');
}
});
}
function slideshow_animate() {
if(!animation.auto_animate) return;
var next_slide = $('.item-slide.active').next();
if(!next_slide.length) {
next_slide = $('#item-slide-1');
}
next_slide.click();
}
}
};
})(jQuery, Drupal);
When you use animation.auto_animate_id = setInterval('slideshow_animate()', animation.auto_animate_delay); the function is evaluated in the global scope where the function slideshow_animate does not exists since it is in a closure scope
Try
animation.auto_animate_id = setInterval(slideshow_animate, animation.auto_animate_delay);
Related
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));
}
})
}
}
}
});
I would like to add a listener that listens for a click on 'html' and then closes the dropdown. It only ever works without the hide function by puttind css display to none. Nothing seems to work!!
Any ideas?
// Drop Down Menu
EZEMAIN.dropDown = {
slideTime: 200,
dropDown: '.dn-drop-down',
arrow: '.dn-menu-arrow',
arrowUp: 'dn-arrow-up',
bindElms: function () {
this.btn = $('.dn-dropdown-btn');
},
html: function(e) {
},
showHide: function (e) {
var self = EZEMAIN.dropDown,
dropDown = $(this).find(self.dropDown),
arrow = $(this).find(self.arrow),
openedDropDowns = $(self.dropDown).is(':visible');
if ($(e.target).parents(self.dropDown).length == 0)
e.preventDefault();
if (dropDown.is(':hidden')) {
if (openedDropDowns) self.hide();
dropDown.slideDown(self.slideTime, function () {
arrow.addClass(self.arrowUp);
});
setTimeout(function () {
$('body').on('click', self.hide);
}, 100);
}
else
self.hide();
},
hide: function () {
var self = EZEMAIN.dropDown;
$(self.dropDown).slideUp(self.slideTime, function () {
$(self.arrow).filter(function () { return $(this).siblings('.dn-basket-btn').length == 0; }).removeClass(self.arrowUp);
});
$("html").click(function () {
//$("#dn-header-basket").css("display", "none");
$(EZEMAIN.arrow).filter(function () { return $(this).siblings('.dn-menu-arrow').length == 0; }).removeClass(self.arrowUp);
});
$('body').off('click', self.hide);
},
init: function () {
this.bindElms();
this.btn.click(this.showHide);
}
};
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();
});
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
Can´t find in the documentation what to do next.
Calling:
PDFView.open('/MyPDFs/Pdf1.pdf', 'auto', null)
I am able to see the blank pages, the loader and also the document gets the number of pages of my PDF.
The only thing is missing is the rendering.
Does anyone knows what I should call next?
Thanks
$(document).ready(function () {
PDFView.initialize();
var params = PDFView.parseQueryString(document.location.search.substring(1));
//#if !(FIREFOX || MOZCENTRAL)
var file = params.file || DEFAULT_URL;
//#else
//var file = window.location.toString()
//#endif
//#if !(FIREFOX || MOZCENTRAL)
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
document.getElementById('openFile').setAttribute('hidden', 'true');
} else {
document.getElementById('fileInput').value = null;
}
//#else
//document.getElementById('openFile').setAttribute('hidden', 'true');
//#endif
// Special debugging flags in the hash section of the URL.
var hash = document.location.hash.substring(1);
var hashParams = PDFView.parseQueryString(hash);
if ('disableWorker' in hashParams)
PDFJS.disableWorker = (hashParams['disableWorker'] === 'true');
//#if !(FIREFOX || MOZCENTRAL)
var locale = navigator.language;
if ('locale' in hashParams)
locale = hashParams['locale'];
mozL10n.setLanguage(locale);
//#endif
if ('textLayer' in hashParams) {
switch (hashParams['textLayer']) {
case 'off':
PDFJS.disableTextLayer = true;
break;
case 'visible':
case 'shadow':
case 'hover':
var viewer = document.getElementById('viewer');
viewer.classList.add('textLayer-' + hashParams['textLayer']);
break;
}
}
//#if !(FIREFOX || MOZCENTRAL)
if ('pdfBug' in hashParams) {
//#else
//if ('pdfBug' in hashParams && FirefoxCom.requestSync('pdfBugEnabled')) {
//#endif
PDFJS.pdfBug = true;
var pdfBug = hashParams['pdfBug'];
var enabled = pdfBug.split(',');
PDFBug.enable(enabled);
PDFBug.init();
}
if (!PDFView.supportsPrinting) {
document.getElementById('print').classList.add('hidden');
}
if (!PDFView.supportsFullscreen) {
document.getElementById('fullscreen').classList.add('hidden');
}
if (PDFView.supportsIntegratedFind) {
document.querySelector('#viewFind').classList.add('hidden');
}
// Listen for warnings to trigger the fallback UI. Errors should be caught
// and call PDFView.error() so we don't need to listen for those.
PDFJS.LogManager.addLogger({
warn: function () {
PDFView.fallback();
}
});
var mainContainer = document.getElementById('mainContainer');
var outerContainer = document.getElementById('outerContainer');
mainContainer.addEventListener('transitionend', function (e) {
if (e.target == mainContainer) {
var event = document.createEvent('UIEvents');
event.initUIEvent('resize', false, false, window, 0);
window.dispatchEvent(event);
outerContainer.classList.remove('sidebarMoving');
}
}, true);
document.getElementById('sidebarToggle').addEventListener('click',
function () {
this.classList.toggle('toggled');
outerContainer.classList.add('sidebarMoving');
outerContainer.classList.toggle('sidebarOpen');
PDFView.sidebarOpen = outerContainer.classList.contains('sidebarOpen');
PDFView.renderHighestPriority();
});
document.getElementById('viewThumbnail').addEventListener('click',
function () {
PDFView.switchSidebarView('thumbs');
});
document.getElementById('viewOutline').addEventListener('click',
function () {
PDFView.switchSidebarView('outline');
});
document.getElementById('previous').addEventListener('click',
function () {
PDFView.page--;
});
document.getElementById('next').addEventListener('click',
function () {
PDFView.page++;
});
document.querySelector('.zoomIn').addEventListener('click',
function () {
PDFView.zoomIn();
});
document.querySelector('.zoomOut').addEventListener('click',
function () {
PDFView.zoomOut();
});
document.getElementById('fullscreen').addEventListener('click',
function () {
PDFView.fullscreen();
});
document.getElementById('openFile').addEventListener('click',
function () {
document.getElementById('fileInput').click();
});
document.getElementById('print').addEventListener('click',
function () {
window.print();
});
document.getElementById('download').addEventListener('click',
function () {
PDFView.download();
});
document.getElementById('pageNumber').addEventListener('change',
function () {
PDFView.page = this.value;
});
document.getElementById('scaleSelect').addEventListener('change',
function () {
PDFView.parseScale(this.value);
});
document.getElementById('first_page').addEventListener('click',
function () {
PDFView.page = 1;
});
document.getElementById('last_page').addEventListener('click',
function () {
PDFView.page = PDFView.pdfDocument.numPages;
});
document.getElementById('page_rotate_ccw').addEventListener('click',
function () {
PDFView.rotatePages(-90);
});
document.getElementById('page_rotate_cw').addEventListener('click',
function () {
PDFView.rotatePages(90);
});
//#if (FIREFOX || MOZCENTRAL)
//if (FirefoxCom.requestSync('getLoadingType') == 'passive') {
// PDFView.setTitleUsingUrl(file);
// PDFView.initPassiveLoading();
// return;
//}
//#endif
//#if !B2G
PDFView.open(file, 0);
//#endif
});
The system must be initialized first before PDFView.open call! Thanks
In viewer.js I added call to updateViewarea() after the document was downloaded.
... PDFJS.getDocument(parameters).then(
function getDocumentCallback(pdfDocument) {
self.load(pdfDocument, scale);
self.loading = false;
updateViewarea();
}, ...