Develop Reference

Auto Scaling Image Annotation

Scalize is a jQuery plugin used for adding custom markers (hotspots) with custom popovers and animations to containers or images.
But now When I click one by one on pointer it show all one by one But I am trying to show only one so when click another pointer will close the other which already opened.
Here is my EXAMPLE
(function(jQuery) {
"use strict";
//----------------------------------------//
// Variable
//----------------------------------------//
var variable = {
width : 0,
height : 0,
selector : '.item-point',
styleSelector : 'circle',
animationSelector : 'pulse2',
animationPopoverIn : 'flipInY',
animationPopoverOut : 'flipOutY',
onInit : null,
getSelectorElement : null,
getValueRemove : null
}
//----------------------------------------//
// Scaling
//----------------------------------------//
var scaling = {
settings : null,
//----------------------------------------//
// Initialize
//----------------------------------------//
init: function(el, options){
this.settings = jQuery.extend(variable, options);
this.event(el);
scaling.layout(el);
jQuery(window).on('load', function(){
scaling.layout(el);
});
jQuery(el).find('.target').on('load', function(){
scaling.layout(el);
});
jQuery(window).on('resize', function(){
scaling.layout(el);
});
},
//----------------------------------------//
// Event
//----------------------------------------//
event : function(elem){
// Set Style Selector
if ( this.settings.styleSelector ) {
jQuery(this.settings.selector).addClass( this.settings.styleSelector );
}
// Set Animation
if ( this.settings.animationSelector ) {
if( this.settings.animationSelector == 'marker' ){
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
jQuery(this.settings.selector).append('<div class="pin"></div>')
jQuery(this.settings.selector).append('<div class="pulse"></div>')
}else{
jQuery(this.settings.selector).addClass( this.settings.animationSelector );
}
}
// Event On Initialize
if ( jQuery.isFunction( this.settings.onInit ) ) {
this.settings.onInit();
}
// Content add class animated element
jQuery(elem).find('.content').addClass('animated');
// Wrapper selector
jQuery(this.settings.selector).wrapAll( "<div class='wrap-selector' />");
// Event Selector
jQuery(this.settings.selector).each(function(){
// Toggle
jQuery('.toggle', this).on('click', function(e){
e.preventDefault();
jQuery(this).closest(scaling.settings.selector).toggleClass('active');
// Selector Click
var content = jQuery(this).closest(scaling.settings.selector).data('popover'),
id = jQuery(content);
if(jQuery(this).closest(scaling.settings.selector).hasClass('active') && !jQuery(this).closest(scaling.settings.selector).hasClass('disabled')){
if ( jQuery.isFunction( scaling.settings.getSelectorElement ) ) {
scaling.settings.getSelectorElement(jQuery(this).closest(scaling.settings.selector));
}
id.fadeIn(500,function(){
if( getBrowserName() == "Safari" ){
setTimeout(function(){
id.removeClass('flipInY');
},125);
}
});
scaling.layout(elem);
id.removeClass(scaling.settings.animationPopoverOut);
id.addClass(scaling.settings.animationPopoverIn);
}else{
if(jQuery.isFunction( scaling.settings.getValueRemove )){
scaling.settings.getValueRemove(jQuery(this).closest(scaling.settings.selector));
}
id.removeClass(scaling.settings.animationPopoverIn);
id.addClass(scaling.settings.animationPopoverOut);
id.delay(500).fadeOut();
}
});
// Exit
var target = jQuery(this).data('popover'),
idTarget = jQuery(target);
idTarget.find('.exit').on('click', function(e){
e.preventDefault();
// selector.removeClass('active');
jQuery('[data-popover="'+ target +'"]').removeClass('active');
idTarget.removeClass(scaling.settings.animationPopoverIn);
idTarget.addClass(scaling.settings.animationPopoverOut);
idTarget.delay(500).fadeOut();
});
});
},
//----------------------------------------//
// Layout
//----------------------------------------//
layout : function(elem){
// Get Original Image
var image = new Image();
image.src = elem.find('.target').attr("src");
// Variable
var width = image.naturalWidth,
height = image.naturalHeight,
getWidthLess = jQuery(elem).width(),
setPersenWidth = getWidthLess/width * 100,
setHeight = height * setPersenWidth / 100;
// Set Heigh Element
jQuery(elem).css("height", setHeight);
// Resize Width
if( jQuery(window).width() < width ){
jQuery(elem).stop().css("width","100%");
}else{
jQuery(elem).stop().css("width",width);
}
// Set Position Selector
jQuery(this.settings.selector).each(function(){
if( jQuery(window).width() < width ){
var getTop = jQuery(this).data("top") * setPersenWidth / 100,
getLeft = jQuery(this).data("left") * setPersenWidth / 100;
}else{
var getTop = jQuery(this).data("top"),
getLeft = jQuery(this).data("left");
}
jQuery(this).css("top", getTop + "px");
jQuery(this).css("left", getLeft + "px");
// Target Position
var target = jQuery(this).data('popover'),
allSize = jQuery(target).find('.head').outerHeight() + jQuery(target).find('.body').outerHeight() + jQuery(target).find('.footer').outerHeight();
jQuery(target).css("left", getLeft + "px");
jQuery(target).css("height", allSize + "px");
if(jQuery(target).hasClass('bottom')){
var getHeight = jQuery(target).outerHeight(),
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else if(jQuery(target).hasClass('center')){
var getHeight = jQuery(target).outerHeight() * 0.50,
getTopBottom = getTop - getHeight;
jQuery(target).css("top", getTopBottom + "px");
}else{
jQuery(target).css("top", getTop + "px");
}
jQuery('.toggle', this).css('width', jQuery(this).outerWidth());
jQuery('.toggle', this).css('height', jQuery(this).outerHeight());
// Toggle Size
if(jQuery(this).find('.pin')){
var widthThis = jQuery('.pin', this).outerWidth(),
heightThis = jQuery('.pin', this).outerHeight();
jQuery('.toggle', this).css('width', widthThis);
jQuery('.toggle', this).css('height', heightThis);
}
});
}
};
//----------------------------------------//
// Scalize Plugin
//----------------------------------------//
jQuery.fn.scalize = function(options){
return scaling.init(this, options);
};
}(jQuery));
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}

Add this to your initialisation:
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
This hooks into the getSelectorElement method in the Scalize plugin and triggers a click on any active (open) elements that don't match the most recently clicked item.
Add it like so:
$(document).ready(function(){
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'fadeIn',
animationPopoverOut: 'fadeOut',
animationSelector: 'pulse2',
getSelectorElement: function(el) {
$('.item-point.active').not($(el)[0]).find('.toggle').click();
}
});
});
Note, because this is hooking into existing methods in the plugin it's a little safer (no unpredictable side effects, plus you get the intended transition out on the disappearing elements). Fiddle.

I've modified your jsFiddle to work.
TL;DR: Anytime an point is clicked, if there are other active siblings, loop over them and hide their popups.
It isn't a pretty way of doing it but it is working in the Fiddle.
$('.scalize').on('click', '.item-point', (function() {
$(this).siblings('.item-point.active').each(function() {
var popover = $(this).data('popover');
$(popover).removeClass('fadeIn').css({
'display': 'none'
});
$(this).removeClass('active');
});
}));

Change colorpicker for nicedit.js to photoshop like

I want to change the default color picker for nicedit.js
While going through the js file, I can see that the below code is generating the color-picker. Data is set up using colorList variable. Can anyone please help me to get a color-picker like photoshop or more relavant.
var nicEditorColorButton = nicEditorAdvancedButton.extend({
addPane : function() {
var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'};
var colorItems = new bkElement('DIV').setStyle({width: '270px'});
for(var r in colorList) {
for(var b in colorList) {
for(var g in colorList) {
var colorCode = '#'+colorList[r]+colorList[g]+colorList[b];
var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems);
var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare);
var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);
if(!window.opera) {
colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent;
}
}
}
}
this.pane.append(colorItems.noSelect());
}
});

I would change the colorList to array containing photoshop hex values and then use it like this:
var nicEditorColorButton = nicEditorAdvancedButton.extend({
addPane : function() {
var colorList = {0 : '000000',1 : 'FFFFFF'}; /* here goes color list */
var colorItems = new bkElement('DIV').setStyle({width: '270px'});
for(var g in colorList) {
var colorCode = '#'+colorList[g];
var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems);
var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare);
var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder);
if(!window.opera) {
colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent;
}
}
this.pane.append(colorItems.noSelect());
}});
Not sure if my code is edited correctly but you get the basic idea. Remove 2 for loops and loop within the colorList directly

Require working code of RepeatBox and its row click event to jump on the respective page in smartface.io

Please share the working code for repeatbox in smartface.
I have been testing all the possibilities but non have worked yet, I wish to show the data from the database on the repeatbox. I am able to get the data but real problem occurs when I want to show the respective page on each item click.
below is the test code which I am using in callback function to show the retrieved test data on the repeatbox.
function Listalluser_callBack(ul) {
var userdata = ul.split("|");
for (var i = 0; i < userdata.length - 1; i++) {
var rowdata = userdata[i].split(",");
var productsObj = {}
productsObj.Id = rowdata[0];
productsObj.Username = rowdata[1];
productsObj.Password = rowdata[2];
productsData.push(productsObj);
}
var lbl = new SMF.UI.Label({
top : "0%",
left : "0%",
width : "10%",
height : "100%",
fillColor : "#FFFFFF",
textAlignment : SMF.UI.TextAlignment.cente
});
var lbl1 = new SMF.UI.Label({
top : "0%",
left : "10%",
width : "70%",
height : "100%",
fillColor : "#FFFFFF",
textAlignment : SMF.UI.TextAlignment.center
});
var imgbtn = new SMF.UI.ImageButton({
top : "0%",
left : "80%",
height : "100%",
width : "20%"
});
var repeatBox1 = new SMF.UI.RepeatBox({
width : "100%",
height : "95%",
left : "0%",
top : "0%",
showScrollbar : true,
fillColor : "white",
backgroundTransparent : true
});
imgbtn.defaultImage = "ic_action_next_item.png";
//imgbtn.text = "";
imgbtn.onTouch = function (e) {
// alert(imgbtn.text);
alert(repeatBox1.controls[2].text);
}
repeatBox1.dataSource = productsData;
repeatBox1.onRowRender = function (e) {
this.controls[0].text = productsData[e.rowIndex].Id;
this.controls[1].text = productsData[e.rowIndex].Username;
this.controls[2].text = productsData[e.rowIndex].Id;
};
repeatBox1.onSelectedItem = function (e) {
alert("Selected " + (e.rowIndex + 1) + ". row");
};
repeatBox1.onRowDeleting = function (e) {
if (e.rowIndex === 0) {
alert("first row is deleted...");
}
};
repeatBox1.autoSize = true;
repeatBox1.itemTemplate.height = Device.screenHeight / 8;
repeatBox1.itemTemplate.add(lbl);
repeatBox1.itemTemplate.add(lbl1);
repeatBox1.itemTemplate.add(imgbtn);
repeatBox1.layoutType = SMF.UI.LayoutType.linear;
repeatBox1.horizontalGap = 5;
//repeatBox1.groupItems = true;
repeatBox1.useActiveItem = true;
Pages.pgHome.add(repeatBox1);
}
Any other sample code which can be used to show the respective page depending upon the condition for example as below depending on id i have to show his profile on the other page.
Thanks in advance.

To change a page according to a pressed row, you can use the onSelectedItem function.
repeatboxReference.onSelectedItem = function(e){
switch(e.rowIndex){
case 0:
Pages.Page1.show(/*params*/);
break;
case 1:
Pages.Page2.show(/*params*/);
break;
//And so on
}
};

You should refresh your repeatbox and also use repeatBox1.show(); to show the box

Appcelerator: Adding custom (dynamically) views to a ScrollView on Button Click to create card

I'm stuck trying to get a very simple task to work on my app. Essentially, I want to be able to add view to a ScrollView when users click a button. Let's call this first view added a "Card". Inside this card, I also have another scrollview which is supposed to then dynamically receive and display "categories" views.
For the most part everything is working fine: when the "Add" button at the top is clicked, the "card" is created and I am able to see all of the information, HOWEVER, the problem is that each time I "Add" a card, I end up not only adding "categories" views to the current created card by a factor of 2, but also the same happens to the previously added cards. Like the following:
I hope this makes sense.
Here's my code (my button event listener):
addViewButton.addEventListener('click', function(e) {
var url = "https://my.apilink.com";
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET', url);
xhr.onload = function() {
var response = JSON.parse(this.responseText);
var t = response.data.categories;
var bons = [];
for (var item in t) {
bons.push(t[item]);
}
Ti.API.info("Data received" + bons);
var resp = {
response : bons
};
createCard(resp);
};
xhr.send();
}
And here's where it all happens (creating the views (cards)):
var catScrollView = Titanium.UI.createScrollView({
top : 130,
left : 0,
right : 0,
contentWidth : '100%',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true,
});
var scrollView = Ti.UI.createScrollView({
top : 130,
left : 0,
right : 0,
backgroundColor : 'white',
contentWidth : '100%',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true,
});
var topPosition = 20;
var leftPosition = 20;
var topPositionCat = 30;
var i = 0;
function createCard(_args) {
var response = _args.response;
Ti.API.info("Response" + response);
var colorArr = ["red", "orange", "blue", "green", "pink", "yellow"];
var fakeArray = ["card 0", "card 1", "card 2", "card 3"];
var ranIndex = getRandom(colorArr.length);
i++;
for (var d = 0; d < response.length; d++) {
var panelImage = Ti.UI.createView({
backgroundColor : colorArr[ranIndex],
top : topPosition + (i * 60),
borderRadius : 5,
borderColor : 'white',
borderWidth : 2,
id : i,
bit : false,
active : false,
height : 350,
width : 290,
});
//add a few attributes to the card
var cardTitle = Ti.UI.createLabel({
text : "I am card # " + i,
top : 10,
left : 0,
color : 'black'
});
panelImage.add(cardTitle);
//Add the EventListener for the view.
panelImage.addEventListener('singletap', cardButtonHandler);
//Add scrollview and a card here
var leftPosition = 20;
if (d % 2 == 0) {
leftPosition = 20;
} else {
leftPosition = 180;
}
var panelImageCat = Ti.UI.createView({
backgroundImage : '/images/row_bg.png',
top : topPositionCat,
left : leftPosition,
height : 100,
width : 100,
});
var catImageButton = Ti.UI.createImageView({
image : response[d].icon,
name : response[d].name,
id : response[d].id,
icon : response[d].icon,
width : 90,
height : 90,
top : 4
});
panelImageCat.add(catImageButton);
var catName = Ti.UI.createLabel({
text : response[d].name,
textAlign : 'center',
color : 'black',
top : 3,
font : {
fontWeight : 'bold'
}
});
panelImageCat.add(catName);
if (leftPosition == 180) {
topPositionCat += panelImageCat.height + 10;
}
// add the view in scroll view
catScrollView.add(panelImageCat);
panelImage.add(catScrollView);
// Add the EventListener for the view.
catImageButton.addEventListener('click', function(e) {
alert(e.source.name);
});
}// END FOR LOOP
catScrollView.contentHeight = topPositionCat + 20;
// add the view in scroll view
scrollView.add(panelImage);
}
Of course there's more code for when users tap on each "card" etc. But that's irrelevant.
This is probably very simple to solve. I suspect it has to do with how I am setting up the loops to create each card and its corresponded categories views etc.
Any help, guidance is highly appreciated.
Thank you!

I guess that the main problem of your code is the way you are adding cards to the row. You shouldn't add a card for each category, but only create a card, add each category to that card, and then, add the card to the parent scrollView.
Nevertheless, in order to improve the readability of your code (and thus, your capability to maintain it), you should consider doing two things :
Move all the code that concern styling inside a separated file.
Create "builders" to instantiate views components so that, your main code only contains relevant information.
Here is an example on TiFiddle, and right below, explanation about it.
Move styling in a separated file
Just make a really easy-to-use commonJS-like module. Titanium supports them, do not be shy.
styles.js
/* ------ Top Level Components ------ */
exports.mainWindow = {
backgroundColor: "#ffffff",
layout: "vertical"
};
exports.topLevelScrollView = {
width: Ti.UI.FILL,
height: Ti.UI.FILL,
contentWidth : '100%',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true
};
exports.addButton = {
width: Ti.UI.FILL,
backgroundColor: "#999999",
color: "#ffffff",
font: { fontSize: 14 },
height: 50
};
/* ------ Card ----*/
exports.cardContainer = {
borderRadius : 5,
borderColor : '#ffffff',
borderWidth : 2,
top: 0,
height : 350,
width : Ti.UI.FILL,
};
exports.cardTitle = {
top : 10,
left : 10,
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
color : '#141414'
};
exports.cardScrollView = {
layout: "horizontal",
contentWidth : '100%',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true,
top: 50,
height: Ti.UI.SIZE,
width: Ti.UI.SIZE
};
/* ------ Category ------*/
exports.categoryContainer = {
backgroundColor: "#cccccc",
opacity: "0.8",
left: 30,
right: 30,
top: 10,
bottom: 10,
height : 100,
width : 100,
};
exports.categoryImage = {
width : 90,
height : 90,
top : 4
};
exports.categoryTitle = {
textAlign : 'center',
color : 'black',
top : 3,
font : {
fontWeight : 'bold'
}
};
/* TIPS: Always use fancy colors for your tests <3 */
exports.colors = [
"#c0392b",
"#e67e22",
"#3498db",
"#2ecc71",
"#9b59b6",
"#f1c40f"
];
Create also some utils
The way you are creating card and categories has nothing to go alongside the other function. So, let's create another module.
ui_utils.js
exports.pickColor = function (colors) {
var randomIndex = Math.floor(Math.random() * colors.length);
return colors[randomIndex];
};
/* Create and return a cardContainer that may hold several categoryContainers */
exports.createCardView = function (id, title, color, styles, listener) {
var cardContainer = Ti.UI.createView(styles.cardContainer),
cardTitle = Ti.UI.createLabel(styles.cardTitle),
cardScrollView = Ti.UI.createScrollView(styles.cardScrollView);
cardContainer.id = id;
cardContainer.bit = false;
cardContainer.active = false;
cardContainer.backgroundColor = color;
cardContainer.cardScrollView = cardScrollView;
cardTitle.text = title;
cardContainer.addEventListener(listener.eventName, listener.listener);
cardContainer.add(cardTitle);
cardContainer.add(cardScrollView);
return cardContainer;
};
/* Create and return a categoryContainer */
exports.createCategoryView = function (category, styles, listener) {
var categoryContainer = Ti.UI.createView(styles.categoryContainer),
categoryTitle = Ti.UI.createLabel(styles.categoryTitle),
categoryImage = Ti.UI.createImageView(styles.categoryImage);
categoryTitle.text = category.name;
categoryImage.id = category.id;
categoryImage.name = category.name;
categoryImage.image = category.icon;
categoryImage.addEventListener(listener.eventName, listener.listener);
categoryContainer.add(categoryTitle);
categoryContainer.add(categoryImage);
return categoryContainer;
};
Rewrite your main file
And finally, the main function with just the minimal amount of code.
app.js
/* Start by requiring defined modules, and creating different views */
var styles = require('styles'),
uiUtils = require('ui_utils'),
mainWindow = Ti.UI.createWindow(styles.mainWindow),
topLevelScrollView = Ti.UI.createScrollView(styles.topLevelScrollView),
addButton = Ti.UI.createButton(styles.addButton);
/* The famous one */
function createCard(_args) {
var response = _args.response;
Ti.API.info("Response :" + response);
/* Create the new card */
var id = topLevelScrollView.children.length, /* Ugly .. find another way */
title = "I am card #" + id,
color = uiUtils.pickColor(styles.colors),
listener = {
eventName: "singleTap",
listener: function () { } /* Just supply a listener */
},
cardContainer = uiUtils.createCardView(id, title, color, styles, listener);
cardContainer.top = 50 * id;
/* Iterate over each category that we have in response */
for (var i = 0, category; category = response[i]; i++) {
/* Create the category view */
var listener = {
eventName: "click",
listener: function(e) { alert(e.source.name); }
},
categoryContainer = uiUtils.createCategoryView(category, styles, listener);
/* Add it to the card scrollView */
cardContainer.cardScrollView.add(categoryContainer);
}
/* Dont forget to add the card to the topLevelScrollView */
topLevelScrollView.add(cardContainer);
}
/* Initialize the different views */
addButton.title = "ADD";
mainWindow.add(addButton);
mainWindow.add(topLevelScrollView);
mainWindow.open();
Enjoy!

Call inner Javascript functions from .js file

I'm working on an ASP.NET MVC 4 application. I am using the GetUikit css library which also offers some basic javascript/ jQuery powered stuff. I'm using the Off canvas component which is actually working.
Getuikit: https://github.com/uikit/uikit http://getuikit.com/index.html
Offcanvas Component: http://getuikit.com/docs/offcanvas.html
I can call the offcanvas as advertised via an anchor tag. That's no problem at all. I would want to be able to hide and show the offcanvas area from javascript. I've tracked down the specific Javascript section in the UIKit provided .js file. This section looks like this:
(function($, UI) {
"use strict";
var $win = $(window),
$doc = $(document),
Offcanvas = {
show: function(element) {
element = $(element);
if (!element.length) return;
var doc = $("html"),
bar = element.find(".uk-offcanvas-bar:first"),
rtl = ($.UIkit.langdirection == "right"),
dir = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;
scrollpos = {x: window.scrollX, y: window.scrollY};
element.addClass("uk-active");
doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw
bar.addClass("uk-offcanvas-bar-show").width();
setTimeout(function() {
/*SELF ADDED FOR ARROW*/
var elementArrow = document.getElementById('notification-arrow');
$(elementArrow).css("display", "inline-block");
/*--------------------*/
}, 250);
element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {
var target = $(e.target);
if (!e.type.match(/swipe/)) {
if (!target.hasClass("uk-offcanvas-close")) {
if (target.hasClass("uk-offcanvas-bar")) return;
if (target.parents(".uk-offcanvas-bar:first").length) return;
}
}
e.stopImmediatePropagation();
Offcanvas.hide();
});
$doc.on('keydown.ukoffcanvas', function(e) {
if (e.keyCode === 27) { // ESC
Offcanvas.hide();
}
});
},
hide: function(force) {
var doc = $("html"),
panel = $(".uk-offcanvas.uk-active"),
rtl = ($.UIkit.langdirection == "right"),
bar = panel.find(".uk-offcanvas-bar:first");
if (!panel.length) return;
/*SELF ADDED FOR ARROW*/
$('#notification-arrow').css("display", "none");
/*--------------------*/
if ($.UIkit.support.transition && !force) {
doc.one($.UIkit.support.transition.end, function() {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
window.scrollTo(scrollpos.x, scrollpos.y);
}).css((rtl ? "margin-right" : "margin-left"), "");
setTimeout(function(){
bar.removeClass("uk-offcanvas-bar-show");
}, 50);
} else {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
bar.removeClass("uk-offcanvas-bar-show");
window.scrollTo(scrollpos.x, scrollpos.y);
}
panel.off(".ukoffcanvas");
$doc.off(".ukoffcanvas");
}
}, scrollpos;
var OffcanvasTrigger = function(element, options) {
var $this = this,
$element = $(element);
if($element.data("offcanvas")) return;
this.options = $.extend({
"target": $element.is("a") ? $element.attr("href") : false
}, options);
this.element = $element;
$element.on("click", function(e) {
e.preventDefault();
Offcanvas.show($this.options.target);
});
this.element.data("offcanvas", this);
};
OffcanvasTrigger.offcanvas = Offcanvas;
UI["offcanvas"] = OffcanvasTrigger;
// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {
e.preventDefault();
var ele = $(this);
if (!ele.data("offcanvas")) {
var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
ele.trigger("click");
}
});
})(jQuery, jQuery.UIkit);
I found one similar thread on Stackoverflow (How can I access the inner functions of this script?) which suggested I'd need to use the following method:
jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');
Where #alerts-canvas is the id of my offcanvas area. When I try to call this from javascript I get the following Javascript error: Uncaught TypeError: Cannot read property 'offcanvas' of undefined.
I have no idea what I'm doing wrong, but I really hope this will work because I really need this to work.
I made sure the script is linked (this happens for all pages in the general _Layout page.
Do you guys have any idea what I might be doing wrong?

try
$.UIkit.offcanvas.show('#alerts-canvas');