I want to make a web page with several type of forms,each one on a different area that allows those areas to be rearranged and user will be able to change their position according to their preference.(X form to the left top, Y form to the right bottom etc.) i don't know what that type of windows are called, but think you can get a idea what I'm mentioning here.only thing i know is it can be achieved with javascript, i searched for it but i can't find the relevant tutorial or guide to self study.
some one please tell me what they are, and how to make them and include in my web page? is there any thing that ease of making those thing except javascript?please provide me a source of studying and i really appreciate the instructions of the knowledged people.thanks in advance!
regards,
rangana.
The nutshell version is that you wait for a mousedown event, store information about where the click started and where the element started, wait for a mousemove event and change those positions, then wait for a mouseup event to clean up afterwards.
Usually, this is best achieved by just using a library such as YUI or jQuery UI
Related
so I want to create cross-platform app that will be invisible overlay over whole screen. When user interacts with whatever is under, I want to catch the event (mouse location, mouse click etc) so I can have info of what user attempted and where, and then "pass" the event through. Also, I might wanna display something in overlay as result of the event.
Coming from .NET, I understand how I would hook into mouse events. I also understand that it is possible to simulate user clicks with Mouse class in .NET Core. However I was wondering if this is possible with electron, as I was checking it for cross-platform solution.
I checked some topics (like this click-through discussion) that mostly deal with passing events through overlay, but I am not sure those do this catching-then-passing. So is there something like that and is it actually possible with only electron/nodeJS? Or would I have to use additional libs, and would they be different for Win/Linux/Mac?
I checked at:
Overlay Electron and
electron-overlay-window
but both seem complicated with attaching to game and following the window respectively. I was hoping it is possible and simple somehow.
IMHO, it's is possible, but will require a ton of OS-specific code and possibly some native modules.
I suggest to start with https://www.electronjs.org/docs/api/browser-window#wingetnativewindowhandle and https://www.electronjs.org/docs/api/browser-window#winsetignoremouseeventsignore-options
So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.
I am writing a chrome extension that records your actions like ( mouse click, keyboard keyup ). The idea of the extension is to help me and my colleagues to reduce the boring testing of our web based project. I made it to record the events and store it on the dev server as mysql so i can use or share to them. But the problem is replaying the saved actions.
So how if there is a way to force mouse move, mouse click events. Can it be done from flash,java or something like that.
PS. The project is Extjs but i want to make the extension useful for developer using other frameworks and publish it.
Consider using Selenium for this. It has support for many languages, and you can script your whole test with it. You can for example set it to click on an element, wait for something to happen or fill text boxes.
Imagine some random website controlling your mouse ... not cool, is it? (That's why you cant force mousemove via javascript)
However, you can trigger clicks on elements. To achieve that, you need to save the event(mouse-over|out/(dbl)click/whatever) and the according element (in the eventfunction: this). That should be sufficient to simulate theworkflow.
jQuery-Example:
$('#item').click();
$('#item').trigger('click');
vanilla javascript:
document.querySelector("#item").click();
How I do monitor all the clicks and inputs on my page? I would ideally want to make a video of what the user does on my app; the way they uses my app.
How do I go about this?
Any links or demos would be really great.
Edit : What I have in mind is:
log all the events into a cookie , and send it to the server in frequent intervals.
then startup a Firefox session and trigger these events on the page . and capture it as a video.
Edit: Basically I have an app, and I want to see what the user does on the app, so I will monitor their clicks and inputs (that's pretty much what they do on the click), and then trigger those events back on my web app. So I will pretty be able to replicate their actions on my page. Now the question is, how do I capture all the necessary events, how do I serialize and trigger these events for later?
Not sure that you can make a 'video' unless you tracked every single movement of the mouse, which would extremely unfriendly, probably take a lot of processing time and raise ethical questions.
If you want to know how a user interacts with your site so that you can improve it (presumably) then you need to get into web analytics.
There are many options. My personal favourite is Google Analytics
With JavaScript you can create what's known as a heatmap of use clicks:
http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/
You can't capture a video of the users desktop session using JavaScript.
I remember seeing ClickHeat (or a similar variant) a long time ago. Had no experience with it, so I can't help with pros and cons, and it doesn't answer your question entirely (don't think it does keystrokes, although maybe I'm wrong, like I said I don't really know).
Might not be a total solution, but should be a good starting point.
In a similar vein it wouldn't be hard to capture mouse position every so often along with a timestamp and recreate a given user's actions. Generating a general/average movement is much more difficult with this type of data, but it's useful on the single-unit basis. So too with keystrokes, they're all just events.
So I have looked through most of the facebook questions here and it has absolutely confirmed my thoughts. Facebook development may be among some of the worst I've ever used. I'll avoid my rant for now, but as a note to where I'm coming from: tried php sdk, worked decently out of the box, found out I need to put the functionality on a pages tab, can't iframe on pages tab, have to use FBML (which they are retiring in two months, yet I can't start testing the iframe approach yet)
Anyway, I run into FBJS at this point. It works "good enough" for most things, but for some reason I can't get an event registered to an object (a select box in particular interest) by adding a listener (as per FBJS documentation). I am able to add it directly to the html object and have it work, but this is not desirable and I would really like to know what I consider the proper way to do it, which involves seperation of logic and display.
What I want to happen: click on the select box, make a selection, display the text of the selection in an empty div (later on adding Ajax but one step at a time here)
Code:
<script>
var obj = document.getElementById('select-id');
obj.addEventListener('onchange',my_func);
function my_func(evt){
var inner = document.getElementById('div-id');
inner.setTextValue('hey'); // for testing purposes
}
</script>
The above code doesn't do anything when I make a change to the select box. However, this behaves as planned:
<select name="find_state" id="find_state" onchange="my_func();">
I will be grudgingly using this method as I develop, but would really love to know what I might be doing wrong or if anyone else has this issue? And if anyone has any opinions on the matter I would love to know of some form of facebook development recommendations as applications, pages, and tabs all appear to behave totally different from eachother, yet it seems that they all should be doing the same thing to me? Is there any unified way to develop across all three of these things, or am I missing something?
Thanks in advance, as well as for the past help!
I think it should be:
obj.addEventListener('change',my_func);
(instead of onchange)
Straight from Facebook documentation:
The third parameter [to addEventListener], boolean useCapture is required (it does not have a default value)
That means that you should have:
obj.addEventListener('change', my_func, false);
Use the following html and your events attached with .addEventListener() start to work. This seems to be undocumented "feature".
<select name="find_state" id="find_state" onmousedown="return true;">
This also enables the event to fire first time the user changes the value of select. Otherwise it would fire only on second onchange event.