I'm building a website on which users can draw objects.
I want to build a window for logging whatever mistakes that users make
For example, the drawing rule is only circle is allowed inside a triangle. However, one user come and draw a square inside a triangle. The system still allows and perform it as the user wants. But there will be a warning message such as "only circle allowed inside a triangle" appeared in the logging window (located at the bottom of the page). Whenever the user fix the mistake, the warning in the window will be deleted.(Due to this function, I think it should be called dynamic logging window)
I'm using JavaScript with ExpressJS and dojoJS.
Can anyone tell me how to build such a window??? I'm quite new to web developing
Any help would be appreciated.
I want to build a window like this on my website
I'm not sure if you're asking for any part of the error-detection logic or not. I haven't addressed it here.
Here's one simple way of going about this:
Create a fixed position div at the bottom or wherever you like. This will hold all the errors.
Maintain a shapeId for every shape added and an errorId for every error generated. Map the errorId to the list of shapeIds it affects. For each errorId add an element to the window. Set the id of the element as the errorId of the error.
When a shape is added/modified, iterate through all errorIds and modify the affected errors in the list by using their id.
Hope this addresses your issue.
Update:
If you're just going to display errors like mentioned in the question, I guess plain old Bootstrap will be enough.
Here's a fiddle
jSlate looks pretty relevant to your case. I'd suggest you take a look at the demo once.
Related
I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D
At times when right clicking and hitting "Record Missing Steps in Scenario", I am able to get the AUT open, the Squish Control Bar open, and all buttons on the control bar are active (except Pause of course). However, when I go to try to use Verify with Properties for a step, the control bar buttons disable for a second, then re-enable, and I'm not able to pick any properties.
This happens whether the scenario is among other scenarios in a feature file, or on its own. There is no existing code in the steps.js, or if there is, it is commented out so that new code can be auto-generated. I doubt it matters, but I'm trying to record a "When" step.
Any thoughts and ideas appreciated! I have not contacted support yet as I am working on a bigger issue with them.
---Update---
This seems to occur when I try to modify a 'given', 'when', or 'then' case that's already recorded, by changing the wording in order to record a new case. Or, when I comment the existing case out to auto-generate the new steps that are recorded. Is there a more correct way to do this?
I'll try and ask this as accurate as possible as I don't exactly understand my assignment.
Basically we had to create 3 HTML controls or JS controls and for each control we had to add an event handler that'd read something from a control and show it in a DIV.
Now my question is, how can I save the information shown in that DIV. I really don't understand how to do this. To be more specific, when I close the Build and re-open it after typing something in a textbox that would for example then give me the info from the textbox in a DIV, i'd want to see the same information I typed earlier in the Div again.
Thanks in advance!
I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.
If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here
I have a chat app where it shows users who are online (username + profile pic). I have an ajax poll that basically checks to see which users are still online, and refreshes the list automatically. Also, the list is ordered based on last activity.
The way I've been doing it is:
Get list of current online users
Clear existing elements
Re-add them (will be ordered correctly since the returned list from step1 is ordered)
This works fine in Chrome, but I notice in Firefox that it is causing a "flickering" effect while the images get re-added.
What is the best way to do this? It seems overly difficult to create an algorithm check which elements exist, if they are in the right order and move them, etc. Thoughts?
How often do you poll to see if users are still online?
I think the best way may be to give the user records unique ids so you can then check the list of users that were online against the new list of users that are now online.
fade away the users that have left and fade in any that have logged on.
It will be a much more elegant solution and it solves the problem you are having.
Firstly, I would try to "cache" the images separately, using the "preload" technique. That's when you create an Image object and set it's src to the URL of the userpic. Then you store all those objects in a global array. This will prevent the browser from getting rid of the images when they are no longer on the screen, so that it will not have to load them again when you reload the list.
If that doesn't help, I would actually reuse the existing list elements. I would just go over the elements, one by one, and replace their content with the appropriate content from the list. If I run out of existing elements in the process, I add new ones. If any elements are left over when the list ends, I remove them. This is a bit more complex, but actually not as complex as it looks at first glance.