I have a form with a upload photo input on it. I wanted to have it so that people clicked an image and the browse folder dialog box would come up. So off I went this morning looking for how to do this.
So now I know that for security reasons this isn't as easy as I might have hoped. However, apparently you can make an image which is about the same size and the input field would be, set it at the same position as the input and set the inputs opacity to zero.
That's all very nice but there's an issue in IE7 where you can type directly into the text field of a file input. Also you're limited to having an image which is the same size as those inputs.
I was excited to find another solution which using the same idea you can have an image of any size and then with JavaScript make it so that the browse button appears (invisibly) behind the mouse pointer whenever the user mouses over the image.
However, I've just found out this solution doesn't work for Opera. And I've no idea why.
I've been at this all day and can't think of any other words to Google about this. Can anyone tell me how to fix this for opera or even if there's a similar solution (where you can have an image 95x95px) around?
I would look in to uploadify. It's probably a little over-the-top for such a "simple" task, but it gives you all those freedoms and more (like multiple file upload ability if that matters).
The hard part is that the only real standard every browser agreed on, with regards to file uploads, is they need to click something, select a file, and have it upload on submit. Beyond that (size, color, method, etc.) is really on the browser developers.
The other thing you may be able to do is make the code browser-based. If it works (via the second method) on everything but opera, may want to stick with it then have JS intervene and default to the 0% opacity method when it is opera).
Unfortunately, I don't know what other options you have though.
Related
I have some text I'd like to publish, but feel like the "ebook file format" route is just too ridged and doesn't add much, considering what it asks of the user (install reader, download, open... Try another reader... Use iTunes to transfer a file...)
For my purposes, I think it'd be nice to try to create a minimal "browser-native" ebook reading experience. I have book-like content that is formatted in a pretty obvious way. Forgetting about chapters and all that, just imagine a long series of html paragraphs of varying length.
What would be cool is if I could have a <div> to contain the "page" (sort of the book "view port"), and have Next/Previous buttons that scroll through the text one div-hight at a time, without any animation (so it looks like you are flipping pages and not scrolling.)
I worry about lines of text being cut in half instead of dividing the text at per-line boundaries, which I bet is a fixable problem!
Any ideas about how to do this in a clean, minimal way, or maybe suggestions for "frameworks" that exist for this purpose? I'd also be open to an in-browser (e.g.) ePUB viewer if a good something-like-that exists.
If you are really open minded and creative, I would suggest you to try or use as insipration the navigation of "RevealJS".
RevealJS
https://revealjs.com/
(It can be used without the Slides software, you can use it completely programattically)
Usage Examples:
https://cgi1.gitlab.io/g2scoring-presentation/
https://www.jmrenouard.fr/sshcookbook/#/13/1
(Use Arrows, Press ESC, Click, Press M ... All of those, can be customized)
I want to create a bookmarklet that I can drop on my browser's bookmark toolbar which, when clicked, inserts a fixed, predefined text (in my use case, a shruggie: ¯\_(ツ)_/¯ ) at the current cursor position (assuming that the cursor is in an editable input field or textarea). However, I am a beginner at JavaScript, and can't figure out how to get started doing this. Any help? If I can get a pointer in the right direction, I can probably figure it out from there. Thanks!
Apologies for the delay; life threw a few curveballs at me right about the time I posted the question, and I forgot about this until StackOverflow notified me of the responses tonight.
The comment by afuous gave me everything I was looking for, and I now have a working bookmarklet. For anyone else who comes across this, here it is:
javascript:(function(a){a.value=a.value.slice(0,a.selectionStart)+"%C2%AF\\_(%E3%83%84)_/%C2%AF"+a.value.slice(a.selectionEnd);})(document.activeElement);
Or, as JavaScript that hasn't been converted to bookmarklet form:
(function (a) {
a.value =
a.value.slice(0, a.selectionStart) +
"¯\\_(ツ)_/¯" +
a.value.slice(a.selectionEnd);
})(document.activeElement);
This has the benefit of allowing for me to select a portion of a text and use the bookmarklet to replace the selection with a shruggie, as if I had hit a hypothetical shruggie key on the keyboard.
Feel free to steal and modify as you see fit. This has been tested only in Firefox 50.0.2, but I think it should work in all modern browsers. (It won't work in Internet Explorer 8 or earlier.)
CSS Tricks has an article that explains how to do that and more. I'm well aware link only answers are less than ideal here, however the question is asking for pointers in the right direction, so I believe its a good fit.
The bookmarklet from the tutorial prefills forms, so essentially you are going to want to gut it, but first peek into how it is finding form controls and prefilling them. Then tweak to fit your desired functionality, and finally rip everything else out that you do not need or use.
Prefilling Forms Custom Bookmarklet
On my website I need to toggle the visibility of complete articles.
When I make them visible (display:block), the text appears very fast while the space, where the image should be, is white. After a half or a second the image appears from once (it was loaded from the server before, so that's not the prob xD).
Now maybe there is a solution where I can hold the image in the RAM.
I don't even know how to call the Problem so I couldn't found much on google.
(Its important to take the article out of the DOM-Tree so setting opacity or visibility to 0 is not a solution).
It's up to the browser how it stores and fetches images from cache. There are a lot of factors, including what else the browser is doing, how many images, how big they are, etc. If it's taking that long, it's possible they are getting forced out of cache or they are too big or some other problem. Have you checked to make sure they are indeed being cached (again, this may be somewhat browser dependent)? Also make sure you don't have caching disabled (in your dev console or similar).
There are a lot of potential options to manage the image data, really depends on what you are doing as to the best solution.
This SO answer explains it clearly. In short,
If you render the HTML on the page, even if it's hidden, it's going to
load. If you want images to load only when they're needed, you're
going to have to dynamically set the source (src) on the image tag in
javascript.
As highlighted in the image is there a way to change the size of the window in code ?
Is there a way to specify size in pixels
The dialog that pops up is a native to the end user and not part of JavaScript itself. So there is no way that you can actually change it... at least not in JavaScript. In fact, how that dialog works is totally dependent on the persons browsers/OS combination.
You can change the look and feel of the html field relating to <input type='file'>but that is it. Sorry. For more information on styling that check out the tutorial on quirksmode.
I want to give my clients the possibility to preview their personalized product.
In a nutshell, personalization means the user specifies some text and positions the text somewhere on an image of the product.
A great example of what I'd like to achieve is this. Select a frame size and then hit Personalize, after you select the occasion and add the text you can chose to preview the product.
The hardest thing to do here, as I see it, is to generate the image. The positioning of text will probably be made in javascript.
Do you have any recommendations?
Just as a note, using scene7 is not a possibility.
Your page does not work for FireFox Mac OS-X:
Error: s_dc is not defined
File: http://imagestr.thingsremembered.com/wcsstore/CustomB2CStorefrontAssetStoreTR/javascript/lightbox.js
Line: 427
If you really want to do this only by JavaScript you could use Canvas or SVG.
But I guess it would be way easier using PHP Perl or Flash.
This would also increase your cross browser compability.