Javascript context menu for images - javascript

I have a website where lots of people copy images off it, which is fine. What I do want to do, however, is help them embed it on the target website they are going to.
Ideally this would take the form where when a user right clicks the image a context menu will appear giving them easy options to embed or share the image.
What is the best way to do this?
P.s. I don't care about them hotlinking, or saving the images at all, all I want to do is provide the user with an easier way to share the images!

Don't send the image to their browser.

No. You can prevent the common user from bothering, but the fact is the URL is sent to the browser to download. So at the very least I could view the source and figure it out.
If you really want to try to annoy the user, though, you can attach an oncontextmenu event which will capture the right-click in some browsers.
edit:
In response to your comment..
Since you're using jQuery, you can use this plugin to detect right clicks. It has been tested on most browsers.
You can then use something like SimpleModal to display the modal box you want to show the user..
$('img').rightClick(function (e) {
$.modal(...);
});

You can actually render HTML as embedded mime data in all major browsers except for IE:
http://jimbojw.com/wiki/index.php?title=Data_URIs_and_Inline_Images
Another weird, but workable solution is to convert the image to CSS:
http://elliottback.com/wp/convert-image-to-css/
Neither is really that great a solution, but it highlights the fact that you need to be willing to lose an image by just putting on the web.
Even if you use a plug-in, people can just do a screen capture.

Related

How do i hide my wordpress site page source like (bczcentral.com)?

Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

how to hide text in html page source?

I wanna show some text (and images) in browser but this text shouldn't be able to select in page preview or page source :
At first i tried to use canvas, but managing text and also images in canvas is not easy and for this case i can't use canvas.
I tried to use image but in this case, image is too slow to load.
I used ROT13 encryption in Aptana studio, but ROT13 just encrypt page source with JS and when you click on 'inspect element' in chrome or opera you can see decrypt text and html yet.
Question: Is there any way in jquery or anything else?
No, whatever you display as text in webpage can be found by digging into the source of the webpage (including js). What would this be useful for btw.?
Edit: This looks useful but ends up using canvas or flash I believe. Still might be tuned to be fairly fast and therefor useful:
http://eric-blue.com/2010/01/03/how-to-create-your-own-personal-document-viewer-like-scribd-or-google-books/
You most likely won't find a way to do this easily, as when the browser downloads the page, in order to show the text to the user it has to be decoded or decrypted. So no matter what, if the user can see it, they can copy it. If all you want is to block selection in the browser, this answer should help
No, if you want to place something on the page a browser need to know what you want to place on the page. And everything what was sent to the browser is readable for a user. So you cannot do this.
The answer is very simple: If you don't want to publish something don't place it on the internet.
yes, this my logic check out
make you string in ascii code and write on document
check below link and find example may you help
Link W3School
I guess no one could do that.
Just use some image instead, old-style, but useful.

gmail type filechooser for firefox

I have a simple requirement:
One browse button opens multiple file choosers.
When file is chosen, its filename gets added to an order list.
This works just fine in IE, because i can programatically click on hidden file inputs, but firefox does not let the click event open the file choose dialog.
Question:
What options do i have? I noticed that gmail uses a piece of flash to make this happen, this isnt really an option for me, i need to stick to an html/javascript solution if possible.
Thanks.
There's a reason GMail uses a piece of Flash: it is the best least-worst option. Some other sites I've seen use Java applets or their own browser add-on or Active-X component, which I find much more intrusive to the user than Flash.
If it were possible with HTML/javascript, you wouldn't see so many sites (like GMail) going out of their way to use flash or Java.
If you're stuck to HTML/Javasctipt, the next best thing you can do is the way GMail used to do it: put an "attach another file" link below the file selection input field, when the user clicks it another file selection input field is added to the page with javascript, so that they can add an unlimited number of files without navigating away from the page, but they still have to pick them one at a time.
There is not much you can do aside from Flash because the file input fields have been locked down for security over the past few years. If you want, there are several freely available Flash uploaders that will do the trick you want.
impossible Based on your data (users not having Flash) this is not possible with just HTML and Javascript. has alway been a huge debate whether to improve it or not. It doesn't even support too much CSS styling.
Multiple file uploads are able only via plugins. Either Flash, Java or Silverlight nowadays.

Lightbox/Forms Question

I am trying to allow for the filling out of a form from a lightbox pop up window. One like the one that Get satisfaction uses (though I only need to be able to collect info, not display from a query as well). You can see a Get Satisfaction example at http://tweet.fabeetle.com and clicking the feedback tab.
What is the best way to do this? JQuery?
I used http://www.nickstakenburg.com/projects/lightview/ a while back and it worked very well.
bgadoci, if you're not an experienced javascript user (or you are and want to avoid a lot of unnecessary work) you'll definitely want to go with a Javascript library like jQuery. As far as choosing the right plugin, you should shop around while keeping in mind your objective. Some of them will be friendlier with forms where others are built for images only.
I can recommend colorbox from experience.

Categories