I am working with images and changing their sizes dynamically from the input I get from the user.
when I change the size of the image first time it doesnot reflect the changes when I click the refresh the page using the browser button the change gets reflected and after that tere is no need to click the refresh button
Please tell how shall I do it so that there is no need to click the refresh button of the browser ,the changes but get reflected at one shot.
Thanks
Ritz
Your browser is cacheing the image. One easy way to get around this is to append something to the image URL such as "?v=101", "?v=102", etc. where the number is a version # you track on each image.
E.g.:
http://mysite.com/image.jpg?v=101
http://mysite.com/image.jpg?v=102
http://mysite.com/image.jpg?v=103
...
Or:
http://mysite.com/imagegen.php?name=foo&v=101
http://mysite.com/imagegen.php?name=foo&v=102
http://mysite.com/imagegen.php?name=foo&v=103
...
You don't have to look at the version number in your code, but its presence on the URL makes the browser think it's a different resource and therefore load it again without having to refresh.
Related
I m designing my portfolio in ruby on rails. In order to restrict the image from being copied, i wanted to disable the right click and other features of copying an image from the website. How to do it?
In most modern browsers you can disable the right-click menu for a particular image. To do so, you can use the event handler oncontextmenu="return false;" within the IMG tag that defines your image:
<IMG border=0 src="..." oncontextmenu="return false;">
For example, the context menu has been disabled for this image:
Note: In older browsers (e.g. Internet Explorer 4.x or earlier) this trick won't work. Also, the context menu will show up if the user has disabled JavaScript.
As all others already said: It's not possible in a reliable way. Only thing you can consider is to watermark your images.
You can disable the right click with javascript.
However, this is a pretty bad idea.
Since your images are sent to the browser of the visitor, they will be accessible, either by displaying the source or analyzing the HTTP requests, in the cache files, or simply screenshoting.
You should not break the user navigation by disabling the right click, your images will be copiable and there's nothing you can do about it. Deal with it.
Sadly its not possible to stop people from copying an image on your page.
Simply disabling right click would not be enough, anyone could just view the source to see the image url
http://www.hypergurl.com/norightclick.html
This guy has mentioned that we can add a transparent gif image to restrict the copy function but i am not getting how to do it. I m displaying my images inside carousel. And carousel gets very tricky sometimes. Also ive uploaded my images in cloudinary so if a person can get the URL of an image then he needs certain parameters to access it which only the owner has.
I have multiple <p:graphicImage>s which gets the image from a servlet by ID. I need to refresh the image when the user has removed or changed the image, so that it disappears or changes instead of showing the old one.
How can I achieve this? Could I use JavaScript or jQuery for this?
I've just started making an iPad app using Phonegap.
On one of my pages I access the camera, take a picture, display that picture on the page and then have a number of customisable options (resizing, positioning of other elements that can be dragged on top of the image etc)
Once you click on a different link (tab bar item) however, all of this information is lost and you have to start over once you go back to the photo page. Is there a way to capture the web page in it's current state, or even grab each elements information (position on page, last photo taken etc) individually so that when the user goes back to the next screen, everything loads as it were when the user left the screen.
Hope this makes sense and someone can help! Thanks in advance!
I'm just a beginner Phonegap developer myself, but I believe you probably want to look into localStorage. http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage
You'll need to use JavaScript (and perhaps a library like jQuery) to get various data about the page's current state. Once you know them, you should be able to to store them for retrieval in subsequent sessions later via localStorage.
I hope this helps.
How does Chrome browser capture a thumbnail image of most visited URLs and show me over a blank page under Most visited??
I am interested in knowing how I would implement it using for my website or an extension.. to take take screenshot.
Lalith
I can only tell you how would I implement it. Once you would go to a site, I will add 1 to a counter if how many times you've entered it. If it's in the top 10, I would also take a screen shot of the site (chrome has a window in the class "Chrome_RenderWidgetHostHWND" which is the window that only contains the site, not the buttons and menus around it).
I can only guess it's not too far from what the guys in Google did.
If you want to write an extension that captures a screenshot of a current site then there is chrome.tabs.captureVisibleTab() method.
I think that it takes a screenshot from the last time you visited the page and saves it in the "Top Sites" SQLite database file that can be found in your profile folder.
I have created a image crop facility that I can click on an image and crop it and it saves the new cropped image over the old one, then redirects back to the original page where the image was show.
But it still shows the old image even after a redirect and doesn't display the new one till I refresh the page.
I have tried just using an image tag and removing the asset timestamp after the image but it still displays the old image and I have also tried adding meta tags to stop browser caching but not working.
How can I solve this without having to do a refresh page?
It's probably not the best way, but I've solved this problem in the past by simply appending a timestamp to the image URL using JavaScript:
http://www.mysite.com/img/some_image.jpg?timestamp=12342312412
Next time it loads, the timestamp is set to the current time and the URL is different, so the browser does a GET for the image instead of using the cached version.
Are you using the rails image helper tag: image_tag in your views?
Rails automatically appends a timestamp based on the last modified date of the image file which is handy because it should change when you do your crop and write out the new image.
More information in the docs: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html