I have a long sencha touch list and I am trying desperately to scroll that list into somewhere in the middle on startup.
The function
btnScroll:function() {
var list = Ext.getCmp("myList");
var position = 4;
list.scrollToRecord(list.getStore().getAt(position));
}
works if I tap the button: scrollBtn.setHandler(btnScroll);, but it does not work in
MyList.constructor:function() {
...
this.callParent();
this.btnScroll();
}
It just fails without error message. Same goes if I do it in the calling function:
btnOpenList:function() {
var list = new MyList();
list.show();
list.btnScroll();
}
It works sometimes(!) if I use setTimeout(this.btnScroll,70); instead, but never if I use setTimeout(this.btnScroll,50); or setTimeout(this.btnScroll,120);
I think it happens because the list elements are not rendered/positioned. But I did not find any afterrender event.
So how would I define a scroll position in which the list should start?
You could do it in painted event. just add to your list or to container that contains all components that u need to bind the painted event.. and then get your list there and add event to btn.. or whatever you want.. by the template:
element.clearListeners();
element.addListener('tap',function(){
//...
});
Related
Setup
I've got a reusable custom dropdown menu, the rough framework is something like:
var List = (function() {
// Custom list prototype stuffs...
function ListObj(el, options) {
this._init(el);
}
ListObj.prototype._init = function(el) {
var self = this;
self.menu = el;
}
// Expose an init function
return {
init : function(el, options) {
new ListObj(el, options);
}
};
})();
And each menu is initialized with something like:
var ddlist = document.querySelector('.ddlist');
DDList.init(ddlist, options);
This all works as expected.
What I want
One behaviour I'd like each menu to have is to automatically minimize if a click occurs that isn't within the menu itself.
What I've done
Instead of having a single click listener for the document, and then having to add each menu and check where the click was, I've decided to add the document click listener within the _init method above:
ListObj.prototype._init = function(el) {
var self = this;
self.menu = el;
document.addEventListener('click', function(e) {
var el = e.target;
if(self.menu === el || self.menu.contains(el)) {
// Click was inside menu
// Perform whatever tasks
}else {
// Click was outside of (this) menu, so minimize
self.menu.minimize();
}
});
}
This way, each individual menu is automatically initialized with the behaviour to monitor document clicks, and either minimize if click is not within the menu, or perform whatever task is required.
This works perfectly. Of particular interest to me is that I can dynamically create new dropdown menus without having to add them to the document click listener, and I don't have to fight with event.stopPropagation(); (I'd rather cut off my foot).
But... Will my computer explode?
This is all for a single-page webapp, which means that many dozens or hundreds of these menus could be created (and removed). My concern is that all these document click listeners will pile up and cause performance issues.
If I do something like...
document.getElementById('someMenu').remove();
will JS garbage collection know that it can do away with the one document click listener? Or will the listener persist until the end of days? If the latter, is there any way that I can remove that particular listener when the menu is removed?
An important caviate is that the menu will likely never directly be removed, but rather its parent will be removed - so .remove() will never act on the menu directly.
Much thanks!
Just tested...
I created two menus and then deleted one of them (.remove()). Even though the one menu was removed, the document click listener within still fires for every click. This seems to suggest that garbage collection will not handle this mess, and I will end up with countless listeners.
So, now what?
Give the function a name, so you can then remove the event listener.
ListObj.prototype._init = function(el) {
var self = this;
self.menu = el;
self.click_handler = function(e) {
var el = e.target;
if (!document.contains(self.menu)) { // This element has been removed from DOM
document.removeEventListener("click", self.click_handler);
return;
}
if(self.menu === el || self.menu.contains(el)) {
// Click was inside menu
// Perform whatever tasks
}else {
// Click was outside of (this) menu, so minimize
self.menu.minimize();
}
};
document.addEventListener("click", self.click_handler);
}
I'm still a novice, so please go easy on me!
I'm making a JavaScript game. The game works fine, as do the basics of the user interface, like making menu selections or switching screens. But I'm also trying to implement jQuery UI sliders in one of my options menus, which is where I run into trouble.
I can only use the slider once, after which it becomes "stuck." It responds to mouseover - it'll highlight as though it's ready to scroll - but will not budge if I try to move it again.
So far, I've ruled out any problems with the build of jQuery/jQUI I'm using; the demo page works fine.
I have no idea what the problem might be, but I suspect it has something to do with the way I've put together my UI. The way my UI works is by creating a "View" object that contains pointers to a parent DOM element. I then use jQuery to construct its children and use the "loadElement" method to add it to the view's list of children elements:
function CView (parent, target, visible, jQElements) {
this.parent = parent;
this.visible = visible;
this.parentDisplay = parent.css("display");
this.parentPosition = parent.css("position");
this.elements = [];
for(element in jQElements) {
this.elements.push(element);
}
if (!this.visible) {
this.parent.css({ // Default to hidden state
"opacity": 0,
"display": "none"
});
}
this.parent.appendTo(target);
};
CView.prototype.loadElement = function(element) {
element.appendTo(this.parent);
this.elements.push(element);
return element;
};
All these elements can be shown and hidden together with a method call on the View object. Currently, hiding a view unbinds all event listeners in the elements of that view. I don't think this is the problem, since I get this problem immediately after creating a new view.
The issue, I think, might be in this code, which is for swapping views- Perhaps I'm unbinding some kind of document-level listener that jQUI uses?
var swapView = GameUI.swapView = function(view, callbacks) {
$(document).off(); // unbind key listeners
currentView && currentView.hideView(); // also unbinds event listeners
currentView = view;
view.showView(callbacks);
};
There's one more thing that might be relevant, the way I construct the slider and put it in:
var $volumeSlider = jQuery("<div/>", {
class: "options-menu-volume-slider"
});
var resetVolumeSlider = function () {
$volumeSlider.slider({
range: "min",
value: GameUI.options.volume,
min: 0,
max: 100
})
};
resetVolumeSlider();
If you need to see more code, let me know. I really am not sure what's going wrong here. Any and all help is appreciated. (Also, I don't know how to host my game online to demo it. It's basically just an HTML page that runs a bunch of JS.)
It turns out that this problem was caused by my call to $(document).off(), which I used to remove potentially dangling document-level keypress handlers. This had the unfortunate result of also destroying event handlers for jQuery UI.
In the future, my views will have keypresses bound at the parent div level with tab indices set for each div, so that I don't have to make the call to $(document).off() and can simply use hideView() to unbind.
Let's say I have custom dropdown(). When the button is clicked I want to bring up the menu, and when the user clicks outside of the menu I want it to close. So I do something like this:
$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(htmlMouseDown,myDropDown);
function dropDownMouseDown(event) {
event.target.open();
event.stopPropagation();//I need this line or else htmlMouseDown will be called immediately causing the dropDown-menu to close right before its opened
}
function htmlMouseDown() {
this.close();
}
Well, this works. But what if I add two of these? If I click to open the first, then the same on the second then both will be open because dropDownMouseDown stops the propagation so that htmlMouseDown never gets called for the first.
How do I get around this?
If I only had these two then adding some logic for that would of course be easy, but if the quantity is dynamic? Also I might not want to call event.stopPropagation() because it will do strange stuff to other libraries I'm using which listen for that event too?
I also tried putting this line:
$("html").mousedown(htmlMouseDown,myDropDown)
inside the dropDownMouseDown-handler but it will be called immediately anyway once the bubbling reaches the html-element.
Assuming you have a selector for your dropdows, (let's say ".dropdown"), I would try to use '.not()'
$('.dropdown').mousedown(dropDownMouseDown);
$("html").on('mousedown', htmlMouseDown);
function dropDownMouseDown(event) {
event.target.open();
}
function htmlMouseDown(event) {
$('.dropdown').not($(event.target)).close();
}
Here is a fiddle in the same idea with css classes :
http://jsfiddle.net/eFEL6/4/
What about using a variable that contains the last openened one ? There are probably many other ways of doing this, but here is a way I could think of:
var lastOpened = null; // initially nothing is open (unless something is)
Then:
function dropDownMouseDown(event) {
if (lastOpened != null) { // if one is still open
lastOpened.close(); // close it
lastOpened = null; // nothing is open anymore
}
event.target.open();
lastOpened = event.target; // now this one is open
event.stopPropagation();
}
function htmlMouseDown() {
this.close();
lastOpened = null; // nothing is open
}
That should work in a way that the last opened one always close itself before opening a new one.
Thanks for the answers. They're really appreciated. I did figure out a way of doing it that I'm satisfied with. Here's how:
$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(myDropDown,htmlMouseDown);//Pass in the dropDown as the data argument, which can then be accessed by doing event.data in the handler
function dropDownMouseDown(event) {
event.target.open();
}
function htmlMouseDown(event) {
if (event.target!=event.data)//event.target is the element that was clicked, event.data is set to the dropdown that this handler was added for. Unless these two elements are the same then we can...
event.data.close();///close the dropdown this handler was added for
}
Can't believe I didn't think of that. In my case though the element that opens/closes has child-elements so event.target could be one of the child elements instead of the element that the handler was attached to. So I changed my html-element-handler to this:
function htmlMouseDown(event) {
var element=event.target;
while (element) {
if (element==event.data)
return;
element=element.parentElement;
}
event.data.hide();
}
I'm having a little issue with an application I'm making. I have a page where the user edits a document via dragging modules into the page or "canvas" area.
http://thinktankdesign.ca/temp_img.jpg
When the page is loaded, javascript haves the modules collapsible (like above). However after the user drags in a new module the effect is applied again some new modules can collapse as well. here is the problem. each time a module loads the same effect gets applied to the modules that already can collapse. It ends up breaking their animations.
heres the code that gets executed on page load.
//make colapsible
$("h1.handle").click(function() {
var object = $(this);
v$(this).next().toggle("fast", colapsible_class(object));
vreturn false;
}).addClass("open");
and heres the code that gets executed in the creation of a module via ajax
function get_module(id){
var template = $('input[name=template]').val();
$.post(window.location.href, { template: template, module: id, mode: 'create' },
function(data){
$(data).insertBefore(".target_wrapper");
//enable deletion of module
$(".js_no_modules").slideUp("slow");
$(enable_module_deletion());
//show delete button
$("button[name=delete]").show();
//make colapsible
$("h1.handle").click(function() {
var object = $(this);
$(this).next().toggle("fast", colapsible_class(object));
return false;
}).addClass("open");
}
);
}
I need a solid way of preventing the toggle effect to be applied to the same module twice
Use jQuery 1.3 live events instead.
//make colapsible
$("h1.handle").live("click", function() {
var object = $(this);
v$(this).next().toggle("fast", colapsible_class(object));
vreturn false;
}).addClass("open");
and then eliminate the click declaration in the second block of code, changing it to $("h1.handle").addClass("open");
Live events bind all current and future matching elements with an event.
In your Ajax success handler try the following:
//make collapsible
$("h1.handle:not(.open)").click(function() {
var object = $(this);
$(this).next().toggle("fast", colapsible_class(object));
return false;
}).addClass("open");
The best way to solve your problem is, instead of using $("h1.handle") on the AJAX callback, go for $(data).find("h1.handle"). Something like,
var x = $(data);
x.insertBefore(...);
/* your other code */
x.find('h1.handle').click(...).addClass(...);
Like that, only the newly added items will have the event bounded. The already present ones will not be touched.
If we want to answer your question instead of just solving your problem, then we have several alternatives, such as:
store, in your objects, that the onclick event handler has been set so that you don't set it twice
always bind the onclick event, but always unbind it first
use jQuery's live events and the addClass open only on the newly created items.
IMO, the first one is the easiest. You can accomplish it by using jQuery's data(). Then you could do something like:
$("h1.handle").each(function() {
var me = $(this);
// if already has click handler, don't do anything
if (me.data('click_set') != null) { return true; }
// otherwise, store the data and bind the click event
me.data('click_set', true).click(function() {
/* the code you already have on the click handler */
}).addClass('open');
}
The second alternative involves storing the function that you pass inline to the click event binder in a variable, and then using jQuery's unbind to disable it.
I am trying to show a tooltip in a mouseover event. The reason I am creating the tooltip on the fly rather than as a precursor (i.e. creating the qtip in document.ready) is that I have generated a list of items that map to a list of objects and I store the hash key for each object in the object list in a hidden element in the "li", so I grab that every time there is a mouseover on an li element.
What is important though is that I can't seem to get the tooltip to display in the mouseover, and I notice that adding the qtip is generating a lot of mouseover events that crash the browser:
$('.result-company-name').mouseover(function() {
var key = $(this).parent().parent().parent().find('.result-company-key').text();
var group = thisview.objGroup.getGroupFromKey(key);
var contacts = group.spotlight().fields.contacts;
if(!contacts)
return;
var qt = $(this).qtip(
{
content: contacts.length,
});
qt.qtip("show");
}
Any thoughts? Thanks.
Maybe you are generating an infinite loop somewhere?
Fixed by using show: { ready: true } to show the tooltip right away when I created it. Seems to be working fine.