search

OiWorld / CarbonFootprint

A Google Chrome browser extension that displays carbon footprint information in Google Maps.
34 stars 33 forks source link

Replaced "Know More" link by a question mark icon #116 #123

Closed boro741 closed 8 years ago

boro741 commented 8 years ago

Replaced the Know More with question mark from CarbonFootprintCore.js file

ceilican commented 8 years ago

Hi @boro741 ! Thank you for your contribution. We wanted to have a question mark icon, not just the question mark character.

Could you revise your pull request, replacing the question mark character by a nice green question mark icon?

boro741 commented 8 years ago

Yep I'm working so far on that. I just kinda struggling how to make img tag work locally on computer. But I've successfully tested using url links.

ceilican commented 8 years ago

Hi @boro741 ! Yes, it would be better to make the extension access locally stored images than remote URL linked images. I suggest that you have a look where @PrateekGupta1509 stored the images he used in the "Know More" pages and see how he accessed those images, and then do something similar for the question mark icon.

Thanks!

boro741 commented 8 years ago

Thats ok how @PrateekGupta1509 used image in HTML but the problem is it doesn't work the same with innerHTML in Js file. So I think I'm kinda lack some basic in using innerHTML. So I'm trying to figure out how to make img link work in innerHTML.

So here's code snippet: I've Working with link: e.innerHTML = '<a href=' + knowMoreUrl + ' target=\'_blank\' title=\'' + titleStr + '\' class=\'carbon\' id=\'carbon\'>' + this.footprintToString(footprint) + '</a> <a class=\'know-more-link\' href=' + knowMoreUrl + ' target=\'_blank\' title=\'' + titleStr + '\'><img src="https://goo.gl/yaTlH5" id="test_smiley"</a>'; e.onh;

Not working when path specified locally: e.innerHTML = '<a href=' + knowMoreUrl + ' target=\'_blank\' title=\'' + titleStr + '\' class=\'carbon\' id=\'carbon\'>' + this.footprintToString(footprint) + '</a> <a class=\'know-more-link\' href=' + knowMoreUrl + ' target=\'_blank\' title=\'' + titleStr + '\'><img src="/images/test.png" id="test"</a>'; e.onh;

Sorry if this question was not supposed to be asked here and the problem need to be figured out by myself.

By the way thank you @Ceilican for ur kind response.

ceilican commented 8 years ago

Ah, ok. I understand the difficulty now.

This might help: https://www.google.com.au/search?client=safari&rls=en&q=chrome+extension+how+to+inject+local+images+through+content+script&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=yuIgWKSALKbM8gfYxpWADg

ceilican commented 8 years ago

And yes, it is ok to ask technical questions here. It is even better than by email.

boro741 commented 8 years ago

Hey @Ceilican I've done replacing html character question mark with question mark icon. Checkout my new commit. https://github.com/OiWorld/CarbonFootprint/pull/123/commits/6b3a964f5e07677239ef4fe6339aa182d74276ff

ceilican commented 8 years ago

Hi @boro741 ! Great that you managed to solve the issue. Thank you very much! Just two minor things before I can merge your pull request:

1) Have you checked that the icon you chose is free (i.e. not copyrighted)? (You can use Google's advanced search tools to narrow down the image search to free images only.)

2) Your pull request became conflicting and cannot be automatically merged. This usually happens when another developer changed the same file that you did and pushed his changes before you did. To fix this issue, you must first pull all the changes in the main Github repository to your local repository, solve the conflict locally, then push your changes to your own forked Github repository, and finally re-submit the pull request. (That's a common procedure when working with git and github, and there should be easy to find tutorials on how to do this in the internet. If you need help, let us know.)

ceilican commented 8 years ago

Thanks!