niklasvh / feedback.js Goto Github PK

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 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

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 :)

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.

Hi,

I wonder if there is a possibility to have just one modal, the scenario is:

• click Send feedback button
• type in some description
• click Send
  and now the screenshot is taken and everything sends out.

So, shortly, is this possible to skip the Blackout 'page'?

Looking forward for an answer.

Best regards
Partyz

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.

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.

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?

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

The feedback captured in window, remains the old one...when captured twice

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'!)

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.

1. Open examples/index.html in Chrome
2. Click button "Send Feedback"
3. It prints a error message on console:

GET {feedback.js folder}/examples/img/glyphicons-halflings.png net::ERR_FILE_NOT_FOUND

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.

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?

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?

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.

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!

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

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.

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

1. Can I use send feedback button as icon or a link in my menu bar or under sub menu if yes then can u please show me the example.
2. Also i would like to save the image in my local folder after highlight / blackout is it possible?
3. feedback.js is unable to capture flash object or SVG Tag is there any work around to capture this???

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

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!

Hi all!

1. I would like to say that this project is very amazing, a good part of some closed source projects that I have here on GitHub use feedback.js.
2. When the project is something very interesting and concrete I usually write a thank you letter as a demonstration of my personal satisfaction with projects that I feel are good, well done, have a purpose.
3. Please do not consider this as spam.
4. In short, I am writing this letter to demonstrate my happiness. And demonstrate that this project is very relevant.
5. Keep up the great work, there are people at the moment who like this project as much as I do.
6. In the future, I think about collaborating with this project.

Regards,
Raphael Louis Andress.

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.

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

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

This should be fetched via https://, not http://

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

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!

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.

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.

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.

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.

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'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.

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.

Hey! First of all great work thanks a lot for this script.

Problem

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.

Solution

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.

Code

// 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";
...

Patch for close box

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"),"");

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?