Instead of always declare variables and find dom elements in an event such as scroll...
I have a template which has to know the scroll position to move some dom elements
according the view, but I've thought it's inefficient always call a find once one pixel
moved with scroll. What's the nice solution for this?
There isn't really one. You just have to wait for a scroll event and pass the event data to your function.
There are a few good plugins that listen for scroll events that meet certain criteria. Jquery waypoints has even been packaged for meteor.
Related
I've got a network graph and I need to use the dragging event.
This overrides the scroll by dragging and the ability to drag nodes that I also need to preserve.
Is there a way to access the default callback and call it? What other solution would you suggest?
I tried to use the dragging event and everything worked ok in my case.
You can also try to use the dragStart or the dragEnd event and see if those fits your case.
my 2 cents
I am writing an application in Meteor with React. I am trying to achieve an infinite scroll feature.
What I am doing is subscribing to a publication with a limit which is tracked by my component's state. When the component detects that it has reached the bottom, it increments the limit in its state.
This triggers a re-render and a subscription to more data.
The issue I have is the whole component being re-rendered. It loses scroll position and takes you to the top.
How do I achieve infinite scroll with pub/sub based on the limit saved in state and only adding extra rows in the component instead of rendering the whole thing?
Subscribing to the whole list with no limits is not an option for me
So, I couldn't find a way to do it with pub/sub so I had to use Meteor.call, that does a mongo's skip() and limit() based on a page to fetch data from the database and then save that data in the component's state.
This way it does not re-render the entire thing but only adds nodes for the new data it receives.
This also means there is none of the automatic socket stuff happening, which is fine for my use case.
One benefit I do get is it's easy to know whether there is more data left in the database to fetch. Surprisingly tricky with pub/sub unless you add a package.
You have to store your data in some stack and enlarge it. React will render only new elements of your stack instead of re-rendering whole component.
All,
As part of requirements for a new feature of "locking" a page, it is desired to have all elements on a locked page be non-selectable. This is not to be confused with disabled. All elements should appear as if the page were active, but not be selectable.
The current thought is to create a clear canvas and place it over the existing elements. With this thought, I have two questions:
if you can think of a better way to make all items non-selectable than applying a clear canvas element over the existing elements could you describe it?
if not, what is the best way to retrofit existing implementations to accept the overlayed canvas item? BTW, all .mxml pages inherit from a custom .as file.
Sorry if this is not very descriptive, however, I am new to Flex and have spent many days trying to figure this out.
Thanks,
Todd
You could also set the mouseChildren property of the page to false so the elements will not receive any mouseEvents
All,
To fully "lock" a screen from user manipulation, one must combine Chris Bos's and www.Flextras.com's answers: disable mouse input (mouseChildren) and disable keyboard focus (focusEnabled).
Todd
Would the focusEnabled property work for you?
Documentation says it only relates to "Tabbing", but my memory says it relates to all sorts of selection.
I have a List component from which I'd like to be able to remove items using drag & drop, but without having a specific target. If you use the mac, the behaviour I'm looking for is something like what the Dock uses; when you drag something out of the bounds of the control it should get an icon that indicates that it'll be deleted (OSX uses a cloud or something?) and then if you release it it will be removed from the list.
How can I do this?
(If I need to provide a more clear description, please comment; I'll fill in what I can)
In my experience with drag/drop in Flex, you cannot simply drag something out and handle that. There is no dragOut event (unfortunately), so that would leave you up to the task of writing dragOver and dragDrop listeners on all the containers surrounding your dragInitiator and handling the process accordingly.
It's more time consuming and can become complicated if any of these controls already have specific dragOver and dragDrop event handlers.
Hope this helps.
Having no Flex experience all I can offer is some psuedo code which resembles how I implemented a similar effect in JavaScript, but hopefully it will get you started.
Essentially what you'll want to do is during your drag event measure the current coordinates of the object you're dragging to see if they intersect the original container and when they fall outside of its bounds call the logic to update the icon in order to indicate it will be removed. Then, on the drop event, check the coordinates once more and delete the item if needed.
i want to display the pop ups in asp.net page like how the stack over flow show the pop ups on the top of the site (you get the new answer for the question like that in a orange color) how can i write the code is there any free source code or any reference. thank you
Given below are the steps to achieve what you want.
Have a div (a container) to show your updates
Create a window.setTimeout to execute a JS function (AJAX)
In that function check for updates from server
Finally if there are any updates then show it in the div container
When there are updates then again setTimeout to make it invisible over a period of time (say 3 secs)
To achieve this in a very easy fashion use JS libraries like JQuery.
HTH
Thats not a 'popup', its probably just a standard DIV that has its height and content changed dynamically. You can do a "view source" on the page to locate the item, or use firebug (easier).
After looking, its a div called 'notify-container'.
These days, all that wizzery is generally done with jQuery
The asp.net ajax control toolkit has that. Check it out here.
I think you'll find that's done using a holding container at the top of the page, a timer to periodically query an AJAX enabled method for updates which replaces the content of the container based on the response.