61 replies to this topic

[Pete248]

Hi Dave,

yesterday I've listened to your latest Podcast and there was a tip to clip webpages on the iPhone by copying the content into an email and sending it to your Evernote email-address. Hmm, well this works but it is not really elegant. So today I decided to give your webclipper for the desktop a try on the iPhone.

To my surprise it works overall well but has some issues:
First, on Safari iPhone the content in the floating box is rendered wider than the box itself and thus overwrites the right border.
Second the floating box is right aligned in the browser window, which is fine on a desktop monitor, but it almost always forces you to scroll to that box on the tiny iPhone screen, which is annoying.

So I patched the javascript code from your webclipper a bit to eliminate these issues. Have installed a copy on my webserver for testing, so I can use it on my iPhone right now. Probably some users might be interested to give it a try as well.

I can post the modified bookmarklet code, that points to the patched javascript code on my server, so people would only need to install this bookmarklet instead or in addition to the original on their iPhone to test the improved webclipper. As the code is copyrighted to Evernote, I want to ask you first, whether I have your ok to do this. (Well everyone can download it from your site, so it is no secret anyway. ;-) )

Of cause you can use my patches in your official webclipper, if you like.

Peter

[engberg]

Sure, it would be great to see what you were able to do. We've been planning to investigate how to improve the Javascript clipping for iPhone. Feel free to post a link or the .js here and we'll take a look over it and see if there's something we can put up on our site to make this easier.

Thanks

[Pete248]

Sure, it would be great to see what you were able to do. We've been planning to investigate how to improve the Javascript clipping for iPhone. Feel free to post a link or the .js here and we'll take a look over it and see if there's something we can put up on our site to make this easier.
Thanks

Well, its not a big thing, just some tweaks. ;-)

For those who want to try it, make a bookmark with the content below and sync it to your iPhone.

javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src='http://files.media-fact.com/25498/bookmarkClipper2.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

The code can be downloaded from http://files.media-f...markClipper2.js

Have fun.

Pete

[engberg]

Neat, thanks.

I did a little research and found that there's really no clean way to install a JS bookmarklet on the iPhone, unfortunately. You either need to manually muck around with the URL or else bookmark on a desktop computer and then sync your bookmarks to the phone. This seems to be a common source of frustration for developers. E.g.:
http://openradar.appspot.com/6589436

We'll keep looking into this to try to figure out a better solution to help people clip on the phone.

Thanks

[engberg]

Converted this to a "Sticky" post, since iPhone power users may want to try out this bookmark for clipping.

[zpkat]

This works very well - thanks!

[WillT]

The improved webclipper code works quite well. Thank you.

[Pete248]

Btw. I recently watched the Advanced Evernote Tip: How to get the most out of the Evernote search bar http://bit.ly/3uJT1c probably you did too - if not do it, it is quite handy to have that information in one place.

This webpage has an optional mobile-site layout for easier reading and this layout is selected by default, if you view the page on your iPhone. Wanted to clip the page into Evernote and by accident I've used Evernote's original webclipper, that I've had still bookmarked alongside my improved version on my iPhone.

The webclipper failed completely because the webclipper windows was drawn ways too big and as a result most part was truncated, so no buttons were accessible. "Damn, my improved webclipper isn't that much improved in real life" I thought until I realized, I've used the original one. Reclipped with my improved version and the zoom level on the iPhone screen was automatically reduced to fit the whole webclipper window and after I submitted the clipping, the zoom-level went back to original - hooray.

Wasn't aware, that my improved webclipper works that well - especially for sites utilizing a mobile-site layout, when I did the modifications.

Pete

[burblespork]

You are awesome! The cut off clipper on mobile webpages has been driving me batty. Emailing myself a link to the page just adds more steps which is annoying since one of evernote's draws is the simplicity of getting the information in there.

Thanks for sharing!

[thermalspindle]

Emailing myself a link to the page just adds more steps which is annoying since one of evernote's draws is the simplicity of getting the information in there.

When I'm noting things from Safari on my iPod, I often just want to push it straight into Evernote and sort out the filing and tagging later when I'm at a full keyboard and screen. When I have the time I do make use of the mobile web clipper, but more commonly I do just mail it into Evernote ... but I do it in one quick step without leaving the browser ... just tapping on a bookmark(let).

The details are in one of my blog posts - Quickly add a page to Evernote from iPhone Safari.

[loongshifu]

in one of the comments, the following was stated:
"For those who want to try it, make a bookmark with the content below and sync it to your iPhone."

Parden me for asking, how do you make a bookmark and how do you sync it to your iphone?

[Pete248]

Unfortunately the link for the improved Evernote webclipper broke during a server update a while back.

I've restored everything, so the webclipper should work again. I apologize, if someone switched from the original Evernote webclipper to my version and thus was unable to snap an important note on the go.

If you prefer to keep access to the webclipper under your control, feel free to host the bookmarkClipper2.js file on your own webserver and adjust the

x.src='http://files.media-fact.com/25498/bookmarkClipper2.js?

part in the bookmarklet to your own URL.

Pete

[katpaust]

HI,

Has anyone tried to see if this works on the iPad?

:? kat
Oslo, Norway

[Pete248]

HI,

Has anyone tried to see if this works on the iPad?

:? kat
Oslo, Norway

Yes, it works.

Have you had any issues with using it on the iPad?

Pete

[zimzala]

Hi

I'm still trying to take clips of webpages in Safari on iPad and iPhone and posting it to an Evernote note, but still can't work it out. The advice above too for the JS code, I don't even know how to use this.. I tried posting it into safari but that didn't work.

Can someone please help?

Thanks

[iphonelover]

Can't you just do the standard screen grab/capture that your iphone allows? It will save it to your images and you can send to evernote that way. If you don't know how to do this screengrab...you click the top power button on the top of the iphone + the main circle button (the only hard key and one that takes you to the main menu) at the same time.. you will hear a click...and without any notice it will have sent the image to your photo album. Hope this helps.
iphone application development

[BurgersNFries]

I'm still trying to take clips of webpages in Safari on iPad and iPhone and posting it to an Evernote note, but still can't work it out.

If a web page fits entirely on the screen, I do what iphonelover suggests - screen cap & email directly to my EN account. If the page doesn't fit on an entire screen, I use this method.

[Smoakhouse]

This is a feature I can't wait for you to work the kinks out of.

For now I save things to "Read It Later" then save it to Evernote later from my laptop.
Not ideal, but the only way I have found to keep the notes neat.

[JuBe88]

Is there a way to do this on Android devices? Right now I have an iPhone 3GS and I'm going to switch to an Android device once my contract runs out, so I'm just wondering.

[tomsiko]

Can't you just do the standard screen grab/capture that your iphone allows? It will save it to your images and you can send to evernote that way. If you don't know how to do this screengrab...you click the top power button on the top of the iphone + the main circle button (the only hard key and one that takes you to the main menu) at the same time.. you will hear a click...and without any notice it will have sent the image to your photo album. Hope this helps.
iphone application development

You can but that will only grab what's visible on your screen. With the clipper it should clip the entire web page and re-create the link functionality in the EN environment.