Need Some help here please.
Question:-
1)PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible
2)STRICT EQUALITY COMPARISON: For better performance please use Strict Equality Comparison.
I have no idea what to do actually and would appreciate some help.
This is my code (it’s quite long sorry):
Search Js:
$(document).ready(function(){
var submitIcon = $('.searchbox-icon');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
}
Menu:-
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
// SmartMenus mobile menu toggle button
$(function() {
var $mainMenuState = $('#main-menu-state');
if ($mainMenuState.length) {
// animate mobile menu
$mainMenuState.change(function(e) {
var $menu = $('#main-menu');
if (this.checked) {
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
} else {
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
}
});
// hide mobile menu beforeunload
$(window).bind('beforeunload unload', function() {
if ($mainMenuState[0].checked) {
$mainMenuState[0].click();
}
});
}
});
Preloader:-
$(window).on('load', function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
Counter:-
(function($){
$(window).on("load",function(){
$(document).scrollzipInit();
$(document).rollerInit();
});
$(window).on("load scroll resize", function(){
$('.numscroller').scrollzip({
showFunction : function() {
numberRoller($(this).attr('data-slno'));
},
wholeVisible : false,
});
});
$.fn.scrollzipInit=function(){
$('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
};
$.fn.rollerInit=function(){
var i=0;
$('.numscroller').each(function() {
i++;
$(this).attr('data-slno',i);
$(this).addClass("roller-title-number-"+i);
});
};
$.fn.scrollzip = function(options){
var settings = $.extend({
showFunction : null,
hideFunction : null,
showShift : 0,
wholeVisible : false,
hideShift : 0,
}, options);
return this.each(function(i,obj){
$(this).addClass('scrollzip');
if ( $.isFunction( settings.showFunction ) ){
if(
!$(this).hasClass('isShown')&&
($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
){
$(this).addClass('isShown');
settings.showFunction.call( this );
}
}
if ( $.isFunction( settings.hideFunction ) ){
if(
$(this).hasClass('isShown')&&
(($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
){
$(this).removeClass('isShown');
settings.hideFunction.call( this );
}
}
return this;
});
};
function numberRoller(slno){
var min=$('.roller-title-number-'+slno).attr('data-min');
var max=$('.roller-title-number-'+slno).attr('data-max');
var timediff=$('.roller-title-number-'+slno).attr('data-delay');
var increment=$('.roller-title-number-'+slno).attr('data-increment');
var numdiff=max-min;
var timeout=(timediff*1000)/numdiff;
numberRoll(slno,min,max,increment,timeout);
}
function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
if(min<=max){
$('.roller-title-number-'+slno).html(min);
min=parseInt(min)+parseInt(increment);
setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
}else{
$('.roller-title-number-'+slno).html(max);
}
}
})(jQuery);
lucky,
Thanks for the helping hand, really appreciated.
So you meant to say that i should rewrite the code as bellow?
Updated JS:
// JavaScript Document
$(document).ready(function(){
"use strict";
var submitIcon = $('.searchbox-icon');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.on("click", function(){
if(isOpen === false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.on('mouseup', function(){
return false;
});
searchBox.on('mouseup', function(){
return false;
});
$(document).on('mouseup', function(){
if(isOpen === true){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
}
1) Just replace all your submitIcon.click(function(){ with submitIcon.on("click", function(){ (and all other events).
2) Strict comparison is ===, in your code I can see for example if(isOpen == false){ - you should replace it with if(isOpen === false){; you can see well-defined difference between strict and non-strict equality comparison in this answer Which equals operator (== vs ===) should be used in JavaScript comparisons?
Related
I want to learn how to write Jquery plugin.This is my normal function and convert it into jquery plugin could you suggest me how to do this.
So that I can easily understand how to convert function to the plugin.
function probe_Validity(element) {
var validate = true;
$(".required-label").remove();
var warnings = {
text: "Please enter Name"
};
element.find(".required").each(function() {
var form_Data = $(this);
if (form_Data.prop("type").toLowerCase() === 'text' && form_Data.val() === '') {
form_Data.after('<div class="required-label">' + warnings.text + '</div>').addClass('required-active');
validate = false;
}
if (validate) {
return true;
} else {
return false;
}
$(function() {
$(".required").on("focus click", function() {
$(this).removeClass('required-active');
$(this).next().remove();
});
});
});
}
Take a look at this project jQuery plugin boilerplate
Consider this as a base plugin definition, look it up, follow the steps and adjust them to your needs.
It's quite easy to do you just use
jQuery.fn.theNameOfYourFunction = function() {}
then you can get the element the function is called on like this :
var element = $(this[0])
so with your function it would be :
jQuery.fn.probe_Validity = function() {
var element = $(this[0]);
var validate = true;
$(".required-label").remove();
var warnings = {
text: "Please enter Name"
};
element.find(".required").each(function() {
var form_Data = $(this);
if (form_Data.prop("type").toLowerCase() === 'text' && form_Data.val() === '') {
form_Data.after('<div class="required-label">' + warnings.text + '</div>').addClass('required-active');
validate = false;
}
if (validate) {
return true;
} else {
return false;
}
$(function() {
$(".required").on("focus click", function() {
$(this).removeClass('required-active');
$(this).next().remove();
});
});
});
};
this can be called like so :
$('#id').probe_Validity ()
I'm working with this code to play and pause several audios:
jQuery(document).ready(function(){
var getaudio;
var audiostatus = 'off';
var current_id;
jQuery(document).on('click touchend', '.speaker', function() {
elemento = jQuery(this);
current_id = elemento.children("audio").attr("id");
clase = current_id.replace(/player/, '');
if (!jQuery('.c'+clase).hasClass("speakerplay")) {
getaudio = jQuery('#'+current_id)[0];
if (audiostatus == 'off') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.load();
getaudio.play();
audiostatus = 'on';
return false;
} else if (audiostatus == 'on') {
jQuery('.c'+clase).addClass('speakerplay');
getaudio.play()
}
} else if (jQuery('.speaker').hasClass("speakerplay")) {
getaudio.pause();
jQuery('.c'+clase).removeClass('speakerplay');
audiostatus = 'on';
}
});
// Here is my problem: I need to get the value of current_id...
jQuery('#'+current_id).on('ended', function() {
jQuery('.speaker').removeClass('speakerplay');
audiostatus = 'off';
});
});
In the last function I want to remove the class 'speakerplay' once the audio reached the end, but I can't get the value of current_id
Could anybody help me with this?
Thanks in advance!
don't use
var current_id;
use window.current_id directly
window.current_id = elemento.children("audio").attr("id");
jQuery('#'+window.current_id).on('ended', function() {
I have developed a jQuery plugin with prototypal inheritance.But functions are only working for main init() function and other prototypes are not working.
My main function is
function Mynav(){
....
}
Mynav.prototype.linkBehaviour = function(){
$('.nav-menu li a').on('click', function(e) {
if ($(this).attr('href') !== '#') {
var link = $(this).attr('href');
$('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
setTimeout(function() {
window.location = link;
}, 1500)
} else if ($(this).attr('href') == '#') {
e.preventDefault();
}
});
}
Mynav.prototype.verticalConverter = function(){
if (verticalNavOn) {
if(!verticalLive){
menuConverter();
verticalLive = true;
}
}
$(window).on('load resize', function(){
width = $(window).width();
if(width < 959){
if(!verticalLive){
menuConverter(); //This is a function also available with Mynav.prototype.menuConverter
header.removeAttr('style');
verticalLive = true;
}
} else{
convertHorizontal(); // Its also a function available
$('.header-fixed').attr('style',headerAttr);
verticalLive = false;
}
});
}
function init(){
new Mynav();
}
init();
In the upper codes linkBehaviour and verticalconverter is not working if i place linkBehaviour function in the main Mynav() it works then but not working in individual.
And i don't actually know about load/resize works with prototype or not .
Can any one help About the above two functions?
function Mynav(){
this.verticalNavOn = false;
}
Mynav.prototype.linkBehaviour = function(){
$('.nav-menu li a').on('click', function(e) {
if ($(this).attr('href') !== '#') {
var link = $(this).attr('href');
$('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
setTimeout(function() {
window.location = link;
}, 1500)
} else if ($(this).attr('href') == '#') {
e.preventDefault();
}
});
}
/* --------------------------------------------------------------------------------------------------------
* I believe that is in trouble when the RESIZE happens.
*
* To make the BIND (on), you must pass the own plugin AHEAD. To be used in the event when it happens.
* --------------------------------------------------------------------------------------------------------
*/
Mynav.prototype.verticalConverter = function(){
var self = this;
if (self.verticalNavOn) {
if(!self.verticalLive){
self.menuConverter();
self.verticalLive = true;
}
}
// parse THIS plugin for EVENT
$(window).on('load resize', {self: self}, function(e){
// get SELF PLUGIN
var self = e.data['self'];
width = $(window).width();
if(width < 959){
if(!self.verticalLive){
self.menuConverter(); //This is a function also available with Mynav.prototype.menuConverter
header.removeAttr('style');
self.verticalLive = true;
}
} else{
self.convertHorizontal(); // Its also a function available
$('.header-fixed').attr('style',headerAttr);
self.verticalLive = false;
}
});
}
function init(){
var x = new Mynav();
// focing start function for tests
x.verticalConverter();
}
init();
See full changes HTML and JS in: http://jsbin.com/ricaluredi/3
Any general tips how to increase a longish js code like this? It works great but sometimes it gets a little sluggish and all the drag/drop and ajax features slow down.
I know this code is a little longer so I am not looking for specific suggestions. Just your first thoughts after taking a quick glance at this code.
EDIT:
I have found a pretty scary thing. The calls to dragDrop() are exponentially increasing in the $('.folderListOnclick').click event. After each click dragDrop() is called 1 time, 2 times, 4 times, 8 times. That's what's slowing it down.
But I don't understand why it is happening.
<script type="text/javascript">
//<!--
$(document).ready(function() {
function in_array (needle, haystack, argStrict) {
var key = '', strict = !!argStrict;
if (strict) {
for (key in haystack) {
if (haystack[key] === needle) {
return true; }
}
} else {
for (key in haystack) {
if (haystack[key] == needle) {
return true;
}
}
}
return false;
}
var openedFolders = new Array();
var start = 0;
var stop = 0;
$('.drag').each(function() {
var draggables = $(this).parents('table').find('.drag');
var $next = draggables.filter(':gt(' + draggables.index(this) + ')').first();
var width = $(this).css('width');
var nextWidth = $next.css('width');
if (nextWidth > width /*&& 30 == parseInt(width)*/) {
$(this).removeClass('ordinaryFolderClosed');
$(this).removeClass('ordinaryFolderOpened');
if (in_array($(this).attr('rel'), openedFolders)) {
$(this).addClass('ordinaryFolderOpened');
} else {
$(this).addClass('ordinaryFolderClosed');
}
}
if (in_array($(this).attr('rel'), openedFolders)) {
start = 1;
}
if (1 == start && stop < 2) {
if (30 == parseInt(width)) {
stop++;
}
} else {
start = 0;
stop = 0;
if (parseInt(width) > 30) {
$(this).parent().parent().hide();
}
}
});
function dragDrop()
{
$('.folders .trow1').hover(
function () {
if ($(this).css('backgroundColor') != 'rgb(52, 108, 182)' && $(this).css('backgroundColor') != '#346cb6') {
$(this).css('background', "#C2E3EF");
}
},
function () {
if ($(this).css('backgroundColor') != 'rgb(52, 108, 182)' && $(this).css('backgroundColor') != '#346cb6') {
$(this).css('background', 'transparent');
}
}
);
$('.drag').click(function() {
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
} else {
var draggables = $(this).parents('table').find('.drag');
var $next = draggables.filter(':gt(' + draggables.index(this) + ')').first();
var width = $(this).css('width');
var nextWidth = $next.css('width');
if (nextWidth > width /*&& 30 == parseInt(width)*/) {
var isVisible = $next.is(':visible');
if (isVisible) {
$(this).removeClass('ordinaryFolderClosed');
$(this).removeClass('ordinaryFolderOpened');
$(this).addClass('ordinaryFolderClosed');
} else {
$(this).removeClass('ordinaryFolderClosed');
$(this).removeClass('ordinaryFolderOpened');
$(this).addClass('ordinaryFolderOpened');
}
clickedId = $(this).attr('rel');
clickedId = clickedId.split(',');
clickedType = clickedId[1];
clickedId = clickedId[0];
// $.ajax({
// type: 'POST',
// url: 'body/obsah/mediaManager/setOpenedFolder.php',
// data: 'id='+clickedId+'&type='+clickedType,
// success: function(msg){
// //alert(msg);
// }
// });
var start = 0;
var stop = 0;
var i = 0;
// close folder
if (isVisible) {
$('.drag').each(function() {
if (0 == start) {
iteratedId = $(this).attr('rel');
iteratedId = iteratedId.split(',');
iteratedId = iteratedId[0];
if (iteratedId == clickedId) {
start = 1;
}
}
if (1 == start && stop < 2) {
if ($(this).css('width') > width) {
$(this).parent().parent().hide();
if ($(this).hasClass('ordinaryFolderClosed') || $(this).hasClass('ordinaryFolderOpened')) {
$(this).removeClass('ordinaryFolderClosed');
$(this).removeClass('ordinaryFolderOpened');
$(this).addClass('ordinaryFolderClosed');
}
} else {
stop++;
}
}
i++;
});
}
// open folder
else {
$('.drag').each(function() {
if (0 == start) {
iteratedId = $(this).attr('rel');
iteratedId = iteratedId.split(',');
iteratedId = iteratedId[0];
if (iteratedId == clickedId) {
start = 1;
}
}
if (1 == start && stop < 2) {
if (parseInt($(this).css('width')) == parseInt(width)+5) {
$(this).parent().parent().show();
}
if (parseInt($(this).css('width')) == parseInt(width)) {
stop++;
}
}
i++;
});
}
}
}
});
var dragId = 0;
var dragType = 0;
var dropId = 0;
var dropType = 0;
var isFile = false;
$('.drag').draggable({
revert: true,
cursorAt: {top: 0, left: 0},
drag: function() {
if ($(this).attr('rel') !== undefined) {
dragId = $(this).attr('rel');
dragId = dragId.split(',');
dragType = dragId[1];
dragId = dragId[0];
}
isFile = false;
},
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$('.drag2').draggable({
revert: true,
cursorAt: {top: 0, left: 0},
drag: function() {
if ($(this).attr('rel') !== undefined) {
dragId = $(this).attr('rel');
dragId = dragId.split(',');
dragType = dragId[1];
dragId = dragId[0];
}
isFile = true;
}
});
$('.drop').droppable({
tolerance: 'pointer',
drop: function() {
if ($(this).attr('rel') !== undefined) {
dropId = $(this).attr('rel');
dropId = dropId.split(',');
dropType = dropId[1];
dropId = dropId[0];
if (dropId != dragId) {
if (false == isFile) {
$.ajax({
type: 'POST',
url: 'body/obsah/mediaManager/folder_move.php',
data: 'nid='+dragId+'&pid='+dropId+'&ft='+dropType,
success: function(msg){
ajaxElementCall('left1', 'body/obsah/mediaManager/folder_list.php?type=1', 'right1', 'body/obsah/mediaManager/file_list.php?type=1&browse=0&assignType=0&CKEditorFuncNum=0&idFolder=0');
dragDrop();
}
});
} else if (true == isFile) {
$.ajax({
type: 'POST',
url: 'body/obsah/mediaManager/file_move.php',
data: 'fid='+dragId+'&did='+dropId+'&ft='+dropType,
success: function(msg){
ajaxElementCall('right1', 'body/obsah/mediaManager/file_list.php?type=1&browse=0&assignType=0&CKEditorFuncNum=0&idFolder=0&reloadTree=0');
dragDrop();
}
});
}
}
}
}
});
}
dragDrop();
$('.folderListOnclick').click(function() {
var append = 'idFolder='+$(this).attr('rel')+'&browse=0&assignType=0&CKEditorFuncNum=0&reloadTree=0';
ajaxElementCall('right1', 'body/obsah/mediaManager/file_list.php?type=1&'+append);
dragDrop();
$('.trow1').css('background', 'transparent');
$('.trow1').css('color', '#3e4245');
$(this).parent().css('background', "#346cb6 url('img/menuButtonOver.png') left top repeat-x");
$(this).parent().css('color', 'white');
});
$('.folderEditOnclick').click(function() {
var append = 'idFolder='+$(this).attr('rel')+'&browse=0&assignType=0&CKEditorFuncNum=0';
showModal('modal_div', 'Editácia adresára');
ajaxElementCall('modal_div', 'body/obsah/mediaManager/folder_edit.php?kam=edit1&'+append);
});
$('.folderDeleteOnclick').click(function() {
var append = 'idFolder='+$(this).attr('rel')+'&browse=0&assignType=0&CKEditorFuncNum=0';
showModal('modal_div', 'Vymazanie adresára');
ajaxElementCall('modal_div', 'body/obsah/mediaManager/folder_delete.php?kam=del1&'+append);
});
$('.addNewFolder').click(function() {
showModal('modal_div', 'Nový adresár');
var id = '0';
$('.folders .trow1').each(function() {
if ($(this).css('backgroundColor') == 'rgb(52, 108, 182)' || $(this).css('backgroundColor') == '#346cb6') {
id = $(this).attr('rel');
id = id.split(',');
id = id[0];
}
});
ajaxElementCall('modal_div', '/body/obsah/mediaManager/folder_add.php?type=1&kam=new1&idFolder='+id+'&browse=0&assignType=0&CKEditorFuncNum=0');
});
}); //-->
</script>
Well you have not posted any of your HTML markup, and you have not posted the details of what the "ajaxElementCall" function does. Therefore it's hard to say exactly how you should fix the problem. It is true however that on every "drop" event, you end up calling the "dragDrop()" setup function again. You say that "ajaxElementCall" reloads some portion of the page, but your "dragDrop()" code always installs new event handlers on all ".drag" and ".drop" elements on the page. If "ajaxElementCall" only updates part of the page, then all the unchanged ".drag" and ".drop" elements will get additional event handlers piled on.
When you call .click() or .hover() for some selector, jQuery adds the event handler you supply to the set of handlers already registered. Thus, because you register new event handlers every time "dragDrop()" is called, you'll get more and more piled up. When an event happens, all of those handlers will be run.
Probably what you need to do is change "dragDrop()" so that you can tell it to only operate on a particular fraction of the page. Either that, or else when it runs it should "mark" each element it affects and then check for that mark before applying new event handlers. That way it will only affect newly-loaded code. (It would be more efficient to narrow down the search, however; the expression $('.drag') may have to look through every DOM element on the page, so it would be preferable to use something more precise anyway.)
For one, all the $(this) should be changed to use a variable.
var me = $(this);
me.XXX
$(this) is a method call and its unnessesary to call it over and over again on the same object.
This needs to be done on a per block basis as this will be differet objects in every block ;)
Lookup operations like $(this) are pretty expensive. You'd better store and address object references instead; it helped me a lot in similar circumstances.
It won't make it that much faster, but this will speed it up a few milliseconds:
You should reuse a jquery instance instead of generating a new one (this costs some time).
Example: instead of
$(this).parent().css('background', "#346cb6 url('img/menuButtonOver.png') left top repeat-x");
$(this).parent().css('color', 'white');
use
var this_parent = $(this).parent();
this_parent.css('background', "#346cb6 url('img/menuButtonOver.png') left top repeat-x");
this_parent.css('color', 'white');
One thing that can significantly optimize the above code is replacing the in_array function and the openedFolders array a JS object that functions as a dictionary and is much more efficient.
Decleration:
openedFolders={};
Add a new folder to the opened folders object:
openedFolders[folderName]=valueRelatedToTheFolderIfYouHaveOneOrWhatEver; // :)
Search for an opened folder:
if(openedFolders.hasOwnProperty(folderName)){/*folderName is open*/}
I am trying to be able to tab through these tooltip as a part of my tab order on my page but the tabbing stops at the first tooltip. Is the problem with the try catch statement in my Javascript code?
landingTooltip = {
locked :false,
initialize: function(){
if (dojo.byId('pickup-cycle')){
this.buttons = dojo.query('.button-link', dojo.byId('pickup- cycle'));
}
else{
return;
}
var _this = this;
dojo.forEach(
_this.buttons,
function(obj){
Hoverable.disconnect(obj)
domExtender.connect(obj,"onmouseenter",function(e){
_this.show(domExtender.closest(obj, '.step'), obj);
});
// dojo.connect(obj,"onmouseleave",function(e){
// _this.hide(domExtender.closest(obj, '.step'), obj, null);
// });
domExtender.connect(dojo.query('a', obj)[0],"onfocus",function(e){
_this.show(domExtender.closest(obj, '.step'), obj);
});
}
);
},
show: function(el, t){
if (this.locked == true){
return;
}
this.locked = true;
var t = t;
var _this = this;
dojo.addClass(dojo.query('span', t)[0], 'hover');
this.tt = dojo.query('.tool-tip', el)[0];
var placed = dojo.place(
_this.tt,
dojo.body(),
'first'
);
dojo.style(_this.tt, 'display', 'block');
_this.tt.focus();
var setFocus = dojo.query('h5', placed)[0];
setFocus.focus();
this.inst = dojo.connect(_this.tt,"onblur",function(e){
if (domExtender.closest(e.target, 'div.tool-tip') == null) {
_this.hide(domExtender.closest(t, '.step'), t, true);
}
});
this.inst1 = dojo.connect(dojo.body(), 'onclick',function(e){
//alert(domExtender.closest(e.target, 'div.tool-tip'));
if (domExtender.closest(e.target, 'div.tool-tip') == null){
_this.hide(domExtender.closest(t, '.step'), t, true);
}
});
},
hide: function(el, t, blur){
// if (this.locked == true){
// return;
// }
this.locked = true;
var _this = this;
if (this.inst){
dojo.disconnect(_this.inst);
}
if (this.inst1){
dojo.disconnect(_this.inst1);
}
dojo.removeClass(dojo.query('span', t)[0], 'hover');
var placed = dojo.place(
_this.tt,
el,
'first'
);
dojo.style(placed, 'display', 'none');
_this.locked = false;
try {
var setFocus = domExtender.next(el);
setFocus.focus();
} catch (e) {
}
}
}
Install firebug
Set a breakpoint
See what exactly is causing tab order to break.
Report a new specific question here.