I am developing a small web based top trumps game (personal practice project) and would like to add a finish game button that is hidden until the round count hits 10, is this possible? I can set it's display properties to none and that works fine, however I can't get it to re-appear when the count reaches 10. i thought an else statement would work here but not sure what the display property should be if that is the case?
Here is the code for the section I'm working on:
if (round <= 9) {
let finishGame = document.getElementById("finish-game-button");
finishGame.style.display = 'none';
}
Related
I have an AppMaker app that has a from based off of one address table/datasource. I can get a form with next/prev buttons, but replaced the key field (name) with a dropdown list of all names (a user can start typing names to jump there, with the dropdown showing).
My hope is that when a user selects from the dropdown, the entire form updates and the next/prev buttons work properly as well (there too many records to page thru with next/prev only). I don't have to have next/prev functionality if it complicates things too much.
Currently the dropdown is working, but I cannot get the index for the next/prev buttons set or the rest of the form to reflect the selected dropdown record.
I've tried to set the "onValueEdit" event to something like this...
var selected = widget.value;
var idx = widget.options.indexOf(selected);
console.log("Selected: "+selected+", index = "+idx+"\n");
if(idx < 0) { //...this error is never hit
console.log("Index error - setting to zero!\n");
idx = 0;
}
widget.datasource.loadPage(idx); //...update form?
Two observations via console logging:
The "idx" var is never set to the selected dropdown index reliably, and is
often "0" (tho no error msg ever shows), so the "indexOf()" function
isn't working as expected.
The "selected" var (name) is always correct.
If I call widget.datasource.loadPage(...) with a fixed value (say 5) it has no effect on what is shows in the form either (previous loaded data remains) - obviously not the way to do it :v/
Can you steer a noob in the right direction?
If you are using default App Maker form, then you can see that so-called pager, doesn't actually paginate. It triggers prevItem/nextItem datasource methods, in other words it navigates through datasource items, not pages. Here is a quote from App Maker docs:
nextItem: Selects the next item. For Query Datasources, if the current item is the last item on the page, then this loads the next page and selects the first item on the newly loaded page.
So, if you already have all your items loaded(you set query page size for your datasource to 0), then you need just to change selected item within datasource:
// onValueEdit dropdown event
// assuming, that form and dropdown share same datasource
widget.datasource.selectKey(newValue._key);
If you really have lots of items and it is not feasible to load all of them in one call... then it will be all another story...
UPDATE:
It's important that Options and Value are set as shown in the image below!
However, I had trouble setting them that way (read: wasted hours!) until I wiped them both completely using More options in the binding picklist, and tried again (I had even tried on a brand new app!). I was being forced to choose ..projections.. and then a final field before the OK button would be available.
Not sure if AppMaker is buggy here or there is something simple I'm not understanding!
None of the coding in my original question is required.
Once set this way, binding just works as you would expect it!!
All other fields are set as #datasource.item. and are bound to whatever item is chosen. No Events settings are necessary for the dropdown either, as I thought they might be.
I deleted this page and started again, and replaced the default business name data field with a drop down, I set the dropdown as:
Options: #datasources.Addresses.items
Value: #datasources.Addresses.item
It works fine?! Not sure what happend in my original page!
UPDATE:
So it seems you need to delete both the Value and Options and then re-enter these. The OK will light up when you do.
Also, my original take on App Maker was to build the UI and attach data. That was my first mistake. You build the data then have App Maker build edit/add pages for you.
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
So I have managed to get my lovely GLKit 3D menu working with a UIScrollview and life is good until I push to another view controller and come back.
So completely smooth movement, move to next controller and come back. UIScrollview does not bounce or flow nicely?
CADisplay Link is init and nil'd every time the scrollview moves and stops and this seems to work fine up until I push to another controller and come back.
Randomly if I click on a item which causes the scrollview to move and fire off all the code, it then kicks back in to life. sadly if I try to fire this off on the view did appear it does not do the same thing.
- (void)startDisplayLinkIfNeeded
{
if (!self.displayLink)
{
self.displayLink = [CADisplayLink displayLinkWithTarget:self.view selector:#selector(display)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}
}
- (void)stopDisplayLink
{
if (self.displayLink)
{
[self.displayLink removeFromRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
[self.displayLink invalidate];
self.displayLink = nil;
}
}
So, after a whole day of trying to work out this issue, it comes down to
self.preferredFramesPerSecond = 60`
If I dynamically change this to around 15 to 20 depending on what I do, the whole problem goes away.
Setup: My Flex application is one consisting of several "subapps". Basically, the main application area is an ApplicationControlBar with buttons for each of the subapps. The rest of the area is a canvas where the subapps are displayed. Only one subapp is visible at a time. When switching between subapps, we do a canvas.removeAllChildren(), then canvas.addChild(subAppSwitchedTo). It's essentially a manual implementation of a ViewStack (the pros and cons of which are not the topic of this, so refrain from commenting on this).
Problem: In one of my subapps (let's say subapp "A"), I have a search function where results are displayed in a TitleWindow that gets popped up. Workflow is like enter search criteria, click search button, TitleWindow pops up with results (multiple selection datagrid), choose desired result(s), click OK, popup goes away (PopUpManager.removePopUp), and continue working. This all works fine. The problem is if I switch to a different subapp (say "B" -- where A gets removeAllChildren()'d and B gets added), then switch back to A and search again, when the results TitleWindow pops open, there will be TWO stacked on top of each other. If I continue to navigate away and back to A, every time I search, there will be an additional popup in the "stack" of popups (one for each time A gets addChild()'d).
Has anyone else experienced this? I'm not sure what to do about it and it's causing a serious usability bug in my application. Does this ring any bells to anyone? It's like I somehow need to flush the PopUpManager or something (even though I'm correctly calling removePopUp() to remove the TitleWindow). Please help!
EDIT
Flex SDK = 4.5.1
// Subapp "A"
if (!certificateSearchTitleWindow)
{
certificateSearchTitleWindow = new CertificateSearchTitleWindow;
certificateSearchTitleWindow.addEventListener("searchAccept", searchOKPopupHandler);
certificateSearchTitleWindow.addEventListener("searchCancel", searchClosePopupHandler);
}
PopUpManager.addPopUp(certificateSearchTitleWindow, this, true);
My guess is that the popup is removed from the main display list when you remove its parent (this in the PopUpManager.addPopup() method), but not from its parent display list. Why don't you listen, in your subapps, to the Event.REMOVED event, and then remove your popup ? That would be :
private var pp:CertificateSearchTitleWindow;
private function onCreationComplete():void
{
addEventListener(Event.REMOVED, onRemovede);
}
private function addPopUp():void
{
if (!pp) {
pp = new CertificateSearchTitleWindow();
PopUpManager.addPopUp(pp, this, true);
}
}
private function onRemoved(event:Event):void
{
if (pp) {
PopupManager.removePopUp(pp);
pp = null;
}
}
Thank you to those who gave suggestions. It turned out I was re-registering an eventListener over and over.
I am using a singleton to act as "shared memory" between the subapps. I was setting singleton.addEventListener(someType, listener) in subapp A's creationComplete callback. So everytime I navigated back to A, the creationComplete was running and re-adding this listener. After the search, the listener method (that opened the popup) was being called multiple times, i.e., as many times as the event had been added.
xref: http://forums.adobe.com/message/3941163
I'm developing a grid with excel-like functionality using the telerik controls. For example users can click on a cell and the cell turns into an input control for editing. Users can tab to move onto the next cell or use arrow keys for up/down to get the cell above or below. I've found the standard telerik grid is good but I've had to extend it with custom javascript to achieve what I need.
My problem is performance in the IE browser. While Firefox, Chrome, Safari are all fine, IE is a real pain. IE8 is considerably better than IE7 however moving around with the cursor keys is a bit unnatural, and nothing like as smooth as Chrome or FF.
I can't really post sample code due to the complexity of what the grid is doing, but generally I'm displaying the standard telerik grid and using the telerik javascript API to fill and bind in the browser. When a cell is clicked a javascript function moves a previously hidden input control into the cell from a hidden collection and gives it focus. When you tab away the cell value is cleared and the server is updated using ajax pagemethods and the next cell is selected in a similar manner.
The grid has approx 40 columns and 20 rows, i.e. 800 extra controls are hidden on the page and only activated by clicking a cell or through navigating with the keyboard. I originally had just one hidden control for each column but moving up and down with the cursor keys became problematic in IE.
Any advice for things to check that might speed up IE8 would be greatly appreciated.
//selects a cell and sets the value
this.select = function(value) {
this.moveFromTo(this._hiddenCell, this._gridCell);
this._bIsSelected = true;
this.set_inputValue(value);
this._focus();
}
//clears inner content for a cell
this.removeChildrenFromNode = function(node) {
if (node == undefined || node == null) {
return;
}
var len = node.childNodes.length;
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
}
//move back or forwards between hidden or active cell
this.moveFromTo = function(from, to) {
var currChild = null;
this.removeChildrenFromNode(to);
var i = 0;
if (from.childNodes != null) {
while (i < from.childNodes.length) {
currChild = from.childNodes[i];
if (to != null) to.appendChild(currChild);
i += 1;
}
}
this.removeChildrenFromNode(from);
}
Load up your page in IE8, open the developer toolbar F12 and turn on the profiling:
Profiler (tab) > Start Profiling
Use your grid for a bit as normal, and let IE profile your code.
When done, click Stop Profiling, and verify which function calls are chewing up the memory or taking the most time.
They may be ones that are beyond your control (e.g. in Telerik's code) but if anything you've added is the bottleneck post the function(s) back here on SO to ask for advise on how to optimize.
It sounds as though most if not all of your controls related to the grid are created from within JavaScript?
If so there are a couple of things to keep in mind:
IE hates string concatenation: there are numerous posts about it's poor performance
Ensure your clearing your events when switching controls and not just overwriting them
memory leaks are not your friend
IE hates adding controls as much as you do - so reuse them when possible
IE is faster if the controls are created via HTML (why oh why?)
IE hates it when you add lots of dynamic images and CSS with on-the-fly HTML controls
IE prefers innerHTML to addChild() (seems counter intuitive to string issue above)
etc
etc
There's many more, but with IE you also have to implement almost every single JavaScript performance suggestion you can find:
short variable names
ensure variables are properly scoped (otherwise the runtime will jump up scopes until nothing is left to search)
iterators from frameworks like prototype and jQuery are often slower than traditional for and while loops (VERY VERY sad but quite true)
etc
etc
When a cell is clicked a javascript
function moves a previously hidden
input control into the cell from a
hidden collection and gives it focus.
You have to explain the quote above in more detail. How exactly do you move the previously hidden control into the cell? Check the site below for a benchmark that uses different methods to generate a dynamic table. Moving the control using the W3C DOM methods or table methods could slow down IE while working fine in other browsers.
http://www.quirksmode.org/dom/innerhtml.html
Edit: Try this to check if it's faster(not as a final solution):
this.moveFromTo = function(from, to) {
to.innerHTML = from.innerHTML; }
Here are some useful links
Understanding and Solving Internet Explorer Leak Patterns
IE Sieve, Memory Leak detector for Internet Explorer
JavaScript Profiling
Try Google Frame. It pushes the performance on IE8 ;)
Test you code with jslint.com