niklasvh / feedback.js Goto Github PK
View Code? Open in Web Editor NEWFeedback form with screenshot
Home Page: http://experiments.hertzen.com/jsfeedback/
License: Other
Feedback form with screenshot
Home Page: http://experiments.hertzen.com/jsfeedback/
License: Other
The demo page at http://experiments.hertzen.com/jsfeedback/
This should be fetched via https://, not http://
I have your system successfully running on multiple web systems correctly, no problems at all. But using a new template this is the problem I'm running into:
http://i.imgur.com/vquYC4l.png
It's like it makes everything smaller and puts it in the top left corner. Then when you hover the layout is completely wrong.
I know this is caused by something in the new template causing conflict, I'm just not sure what it is or where to start with the conflict. I also don't know if this is HTML2CANVAS or feedback.js that is conflicting with something else.
I'd appreciate any help you can give me with this issue :)
feedback.js is very useful for me, I really appreciate it. But, can you make the highlight area selected by mouse, by resizing and dragging it, like in Google Feedback.
The current feedback.js use existing div to make selection, meaning we must select the div.
I recently found this great library and immediately got to do something with it, finishing my implementation with some modifications I discovered that you can not take screenshot on a website with iframe. Can you guide me how to achieve this?
Thank you for your great contribution.
Hello!
First of all; thanks for an amazing plugin.
I do however, experience minor troubles. All images on my page dissapear when clicking "send feedback". See:
https://www.dropbox.com/s/7cqzmavvc26y61z/Screenshot%202013-11-27%2016.29.48.png
Should look like:
https://www.dropbox.com/s/xcq1nihdj4lh2i1/Screenshot%202013-11-27%2016.31.05.png
Could this be because we make use of SVG's of our icons?
I think it'd be useful to eventually have documentation or an adapter for styling the "Send Feedback" button that is displayed. This would allow feedback buttons like http://www.alexpeattie.com/projects/feedback_button/, for instance.
Hi All.
I've created a rails gem that wraps this functionality: https://github.com/amaabca/feedbackandscreencap
If you have an issue with them please, PLEASE, open a ticket there and any issues with the javascript library open them here still.
Thanks!
Chris
The feedback captured in window, remains the old one...when captured twice
I have an <ul>
which contains large number of <li>
elements. But only a few of them are visible on view( list has a scroll so others are not visible until you scroll ).
Actual Scenario : When I call Feedback()
function it takes upto 60 seconds because it parse all the elements including those which are not visible on view too.
Required Scenario: It should only parse those elements which are visible on view to avoid performance hit.
This seems to be a great bit to coding but I am confused. What actually happens yo the data after I click send? Where does it go? Can I pick it up (the image and text) with query and if so, how?
I Want to send it back to my php server for processing but I don't know how to get it there. Could someone show the code required to either get the data in a javascript variable so I can pass it back to the server.. or how to do it directly if its inbuilt?
Thanks
EDIT:
i worked it out in the end...
To help anyone else it posts the data to the URL specified in the url option (surprisingly to the post variable 'data'!)
Hi,
I'm new to this and want to use same feature on my site. Here are some couple of things which i want to know
I search whole web and couldn't found any documentation or easy example who can tell me how to implement it easily.
Sorry to ask you silly question but i like this function and want to use it some where on my web :).
Thank you,
Regards,
Ankit
Hi,
I wonder if there is a possibility to have just one modal, the scenario is:
So, shortly, is this possible to skip the Blackout 'page'?
Looking forward for an answer.
Best regards
Partyz
I would like to use feedback.js but the floating 'Send feedback' button would need to be replaced with a fixed A HREF link on the page.
The issue I have is the onClick event contains a lot of JS and I don't know how to activate it via a href without the floating button removed.
This possible?
As a UX designer I may want to hook into the feedback functionality from navigation elements other than a button.
The implementation encourages a very specific user interaction - namely using a bootstrap button floating at the bottom of a page. This feature will allow a developer to call feedback.js more simply and will remove the bootstrap button as the default UI.
How i have to do to send more external data in the feedback?
For now i have make this change on the code:
window.Feedback.Form.prototype.data = function() {
if ( this._data !== undefined ) {
// return cached value
return this._data;
}
var i = 0, len = this.elements.length, item, data = {};
for (; i < len; i++) {
item = this.elements[ i ];
data[ item.name ] = item.element.value;
}
$('*[id^="feedback_"]').each(function(){
name = $(this).attr('id');
name = name.replace(/feedback_/,'');
data[ name ] = $(this).val();
});
// cache and return data
return ( this._data = data );
};
Thanks!
I downloaded the feedback.js and includ it and the jQuery library. I also added "Feedback" in the document ready function. I got a new button but after clicking it the popup is not working. I get a div at the bottom. After clicking "continue", I get grey "Send Feedback" and "review" buttons. Did I miss any step? It will be good to provide what one need to do to have this working.
If I try to access a kibana API like (localhost:5601/api/timelion/run), I get a stack trace displayed on the Web UI.
This exposes the details of kibana installation path. Similarly if there is an error while querying data, in that case as well the stack trace is thrown on the UI. Is there a way to disable this by some simple configurational change or anything else?
I posted a plea for C# help on SO - feel free to post here if someone can help!
http://stackoverflow.com/questions/26847291/implementing-feedback-js-with-c-sharp
Hello @niklasvh, really cool plugin.
I am currently using canvas and html2canvas to take screen grab of a DOM element. And while searching around, i stumbled upon this. Could you let me know whether i can use feedback.js simply to get the screenshot alone and skip the steps? Please advice.
I am facing this in the Firefox 23.0, fine in FF22.0 & for chrome 28.0.1500.72 m it is also fine.
The concern is with canvas tag highlighted area, which won't go/fade away. while clicking on close button of the send feedback.
which is leaving box-shadow patches on the screen..
and i noticed there is one white space, ahead of the class feedback-highlighted.
GET {feedback.js folder}/examples/img/glyphicons-halflings.png net::ERR_FILE_NOT_FOUND
Hey,
Just looking through the code. Is there any way we can send the feedback and the images to an email? Is this something that we have to implement ourselves?
Also, where can we get the data once we press 'Send'? Any help would be appreciated.
Regards,
Sujan
Hi! This looks like really cool software. I ran across it while using html2canvas for another project.
When I tried using the demos on the demo page, the demos hung.
Opening up the hood, I see there's a 'Failed to load html2canvas library, check that the path is correctly defined' error.
Just a heads up,
I haven't tried the source code yet, but I'm pretty sure it works great. Just only the demos on the demo page are failing right now.
Best, -C
Hey! First of all great work thanks a lot for this script.
The problem is that IE9 is not supporting the pointer-events CSS attribute for all HTML elements (just for the element) since this is the W3C recommendation to prevent clickjacking.
In order to be able to highlight/blockout elements with IE9 a few lines need to be added to the mousemove event. The hack is to hide all elements for a moment that should not receive the mouse event (i.e. having pointer-events: none
set) and use the cross-browser function document.elementFromPoint
to get the element the user points at.
// delegate mouse move event for body
this.mouseMoveEvent = function( e ) {
var target;
if (jQuery.browser.msie) {
$(".feedback-nopointer").hide();
target = document.elementFromPoint(e.clientX, e.clientY);
$(".feedback-nopointer").show();
} else {
target = e.target;
}
...
All subsequent appearances of e.target
should be replaced with target
. Furthermore all elements with the CSS attribute pointer-events: none
set have to be marked with class="feedback-nopointer"
at DOM injection. In my case:
glass.className = "feedback-glass feedback-nopointer";
feedbackHighlightElement = "feedback-highlight-element feedback-nopointer",
this.h2cCanvas.className = 'feedback-canvas feedback-nopointer';
highlightContainer.id = "feedback-highlight-container";
highlightContainer.className = "feedback-nopointer";
...
In order to make the close link for already highlighted elements work with the new feedbackHighlightElement
classes, you need to edit the following lines from
highlightBox.className = highlightBox.className.replace(/feedback\-highlight\-element/g,"");
to
highlightBox.className = highlightBox.className.replace(new RegExp(feedbackHighlightElement, "g"),"");
Does this use jQuery (since you link it in to your examples)? We have sites which use other libraries so we need a solution not dependent on jQuery. If it does use it, we could try converting it to vanilla/plain JS, but I want to know if has already been done.
Hi all!
Regards,
Raphael Louis Andress.
Hi
I very like this plugin and want to use It on my php web site.
As I see it works nicely
but how can I set my own email address, to receive the screenshot ?
it writes "sending", when defines whom to send??
Thank you very much!
on line 291 feedback.js
((options.appendTo !== undefined) ? options.appendTo : document.body).appendChild( button );
we shouldn't use
" document.getElementById(options.appendTo) "
insted of " options.appendTo " ?
The notice at the top of https://github.com/niklasvh/feedback.js/blob/master/examples/css/feedback.css indicates that the file was taken from Bootstrap 2.0.4 and then heavily modified.
But the Apache license says that "You must cause any modified files to carry prominent notices stating that You changed the files" (section 4.b).
Could you either add the info about the customizations you made or remove the notice/replace it with your licensing info? Just to make using feedback.js 100% safe.
I have a RoR application and I have implemented the feedback tool on that app. There is an issue with highlighting elements(firefox, chrome) some elements get highlighted but some do not and the feedback highlight container also appears translucent instead of showing highlighted colors. What would be the probable cause for this, I am assuming it is the rendering of .haml and .scas files that is producing some fishy .css properties not supported by html2canvas.js. I have also tried configuring z-index level for both host and feedback tool canvasses but no luck.
Can you explain how can we actually submit the form and send the collected data to a server?
I mean how can i send the image and the issue description?
When I try to open online examples in IE9 I get error:
Unable to get value of the property 'add': object is null or undefined
feedback.js, line 621 character 13
I'd really like to use this on our intranet.
When it comes to the highlight/blackout section the whole page (on your examples) ends up fading to black or nothing is intractable. Which then produces a stretched, elongated image. This is happening on IE 10.0.9200.16921
Tried this in FireFox (34.0.5) too which was better but after sending feedback the page doesn't restore - there's still highlighting/blacking out. Whereas Chrome restores the view.
Also the text I type in on the first dialogue doesn't appear on the send feedback, it just shows a number. ie: "Issue: 7"
Keep up the good work, this is going to be amazing.
As a UX designer I may want to change the workflow of the feedback mechanism to fit my particular context.
The current workflow is modeled off of Google's feedback mechanism and is somewhat static. For example in the context of Google+ it may be very useful to black out sensitive information. If this were implemented for site like www.NewYorker.com however, there might be no need to block out sections of the DOM. These steps should be modular, optional and have the ability to be ordered.
I have read introduction about feedback.js, but I don't knwo how I can use it in my project!
More details and docs??
Thanks a lot!
I'm wondering what the license of feedback is?
I looked in the expected place at the source header of the files and didn't see anything, so I'm not sure the conditions of using this.
Basically still provide the send feedback functionality without screenshotting, and an option to disable the send feedback button completely if screenshotting isn't supported on the browser.
The demo page at http://experiments.hertzen.com/jsfeedback/
fetches
http://html2canvas.appspot.com/query?url=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fcd2699dedd7a4c7ac0c396739a7eeec9%3Fs%3D40&callback=html2canvas_0
(via GET)
However the server responds with
Python 2.5 is no longer available. Please refer to https://goo.gl/aESk5L for more information.
If you tried to capture second feedback without refreshing the page it does not show the latest feedback instead of it i keep showing the old feedback.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.