Custom Javascript Problem

[Barbara]

I am trying to implement some third party code and am getting $(document).on is not a function error. So I think I need to put the code in the page's load event, but the code has a function argument, and also refers to $(document) within the function. How would I implement this?

Here is the code:

$(document).on("pageinit", function(e){

$("#"+ $(e.target).attr('id') +" :jqmData(slidemenu)").addClass('slidemenu_btn');
var sm = $($("#"+ $(e.target).attr('id') +" :jqmData(slidemenu)").data('slidemenu'));
sm.addClass('slidemenu');

$(document).on("click",".ui-page-active", function(e){
if (sm.data('slideopen')) {
$(".ui-page-active :jqmData(role='header')").removeClass('ui-fixed-hidden');
}
});

$(document).on("swipeleft swiperight",".ui-page-active", function(e){
console.log('b');
e.stopImmediatePropagation();
e.preventDefault();
slidemenu(sm, sm.data('slideopen'));
});

$(document).on("click", ".ui-page-active :jqmData(slidemenu)", function(e) {
slidemenu(sm, sm.data('slideopen'));
e.stopImmediatePropagation();
e.preventDefault();
});

$(document).on("click", "a:not(:jqmData(slidemenu))", function(e) {
slidemenu(sm, true);
});

$(window).on('resize', function(e){
if (sm.data('slideopen')) {
console.log('sd');
sm.css('top', getPageScroll()[1] + 'px');
sm.css('width', '240px');
sm.height(viewport().height);
$(":jqmData(role='page')").css('left', '240px');
}
});

$(window).scroll(function() {
if (sm.data('slideopen')) {
sm.css('top', getPageScroll()[1] + 'px');
}
});

});

function slidemenu(sm, only_close) {
sm.height(viewport().height);
if (!sm.data('slideopen') && !only_close) {
sm.show().animate({width: '240px', avoidTransforms: false, useTranslate3d: true}, 'fast');
$(".ui-page-active").css('left', '240px');
sm.data('slideopen', true);
if ($(".ui-page-active :jqmData(role='header')").data('position') == 'fixed') {
$(".ui-page-active :jqmData(slidemenu)").css('margin-left', '250px');
} else {
$(".ui-page-active :jqmData(slidemenu)").css('margin-left', '10px');
}
} else {
sm.animate({width: '0px', avoidTransforms: false, useTranslate3d: true}, 'fast', function(){sm.hide()});
$(".ui-page-active").css('left', '0px');
sm.data('slideopen', false);
$(".ui-page-active :jqmData(slidemenu)").css('margin-left', '0px');
}
return false;
}

function viewport(){
var e = window;
var a = 'inner';
if (!('innerWidth' in window)) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

function getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
return new Array(xScroll,yScroll)
}

[Maryna Brodina]

Hello! We are working on this issue. I'll update as soon as we figure it out.

[Barbara]

Thanks, I have another one that won't work - none of the events get attached to the elements

(function($){
$.fn.menu = function(settings){
//Global variables
var el, item, httpAdress;
//Default settings
settings = jQuery.extend({
Speed : 220, //Speed animations
autostart : 1, //(true) show subitems on subpages
autohide : 1, //(true) hide active items
itemLink : 1, //(true) redirect to href
openAll : 0 //(false) Open all subitems
}, settings);
//Basic element
el = $(this);
//Items with subitems
item = el.children("ul").parent("li").children("a");
//Get the window location address
httpAdress = window.location;
//Add class
item.addClass("inactive");

//Hide and show the subitem
function _item (){
var clickThis = $(this);
if(settings.autohide) {
//Hide actives
if (clickThis.parent().parent().parent().is("li")) {
clickThis.parent().parent().find(".active").parent("li").children("ul").slideUp(settings.Speed/1.2, function(){
$(this).parent("li").children("a").removeClass().addClass("inactive");
});
} else {
el.parent().parent().find(".active").parent("li").children("ul").slideUp(settings.Speed/1.2, function(){
$(this).parent("li").children("a").removeClass().addClass("inactive");
});
}
}

if (clickThis.attr("class") == "inactive") {
clickThis.parent("li").children("ul").slideDown(settings.Speed, function(){
clickThis.removeClass().addClass("active");
//If the item have a href
if(settings.itemLink && clickThis.attr("href").length 5) {
window.location.href = clickThis.attr("href");
}
});
}
if(clickThis.attr("class") == "active"){
clickThis.removeClass().addClass("inactive");
clickThis.parent("li").children("ul").slideUp(settings.Speed);
}
return false;
}

//Click
item.unbind('click').click(_item);
//Autostart
if(settings.autostart) {
el.children("a").each(function(){
if(this.href == httpAdress) {
if (settings.itemLink) {
$(this).parent("li").children("ul").slideDown(100, function(){
$(this).parent("li").children(".inactive").removeClass().addClass("active");
});
} else {
$(this).parent("li").parents("li").children("ul").slideDown(settings.Speed, function(){
$(this).parent("li").children(".inactive").removeClass().addClass("active");
});
}
}
});
}
if(settings.openAll) {
item.parent("li").children("ul").find(".inactive").parent("li").children("ul").slideDown(settings.Speed, function(){
$(this).parent("li").children(".inactive").removeClass().addClass("active");
});
}
}
})(jQuery); //The end

[Maryna Brodina]

Hello! It seems that there is some conflict with jQuery Mobile. You are using code for 1.7 jQM version http://api.jquery.com/on/ (Tiggzi uses 1.6.4). Please try to use this http://api.jquery.com/delegate/

[Barbara]

Grrrrrr Too many Tiggzi updates!!!

[Barbara]

Yay getting further now.

This has me worried though. I am now getting the following error in the jquery js library

(types || "").split is not a function

on this code

types = (types || "").split(" ");

[Maryna Brodina]

types = (types || "").split(" ") - is this your code or it's some code from jQM?

If this is your code - "types" has no string type (you can check it like this: alert(typeof types);)

[Barbara]

No it's code from jquery.1.6.4,js

[Maryna Brodina]

Could you please share your project (if it's not shared yet)?

[Barbara]

It's shared already