This is a wierd one,
both inputs and text areas, cant move through the text with the left and right arrows?
there's lots of javascript/jquery on the page so it's likely a plugin is overriding, but thought i'd see if anyone's ever had a similar experience or got any pointers before i wade through mountains of code!
My issue was the jquery dialog box I was using (fancybox) has a problem with inputs/cursors, not just in my instance.
I'm going to try using http://colorpowered.com/colorbox/ instead and see if it works
Related
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
I've been trying to make a row-marking script to help me read text online. When I read books I always use a ruler or paper. Online, I don't have this option and usually get lost in text.
W - move div up
S - move div down
JS fiddle for my current effort (S = down, W = up)
The best thing I could come up with is to have equal row height for all text-elements, but makes styling quite hard. Also, I would like to be able to run it in the console to enable it on any website (or install it as a add-on).
Is there some better way to design a tool like this, that makes it more capable and adaptive to unknown content?
I can of course select text and I do that a lot. Usually, it results in me selecting only some words-> attention goes to that word, which is kind of what I want to avoid.
I could also use a secondary window, which I do sometimes. But it's a bit wobbly and as soon as you click it disappears.
A div that follows mouse-pointer is a possibility, but it's too shaky and feels like something got stuck on your finger.
EDIT: I updated the fiddle with the changes. I kept the javascript because without it you won't be able to move the ruler to the lower parts of the text.
Updated reading-ruler
Instead of JavaScript you could set a position: fixed for the .ruler. It will stay in the same place all the time so you can read the text with the .ruler element below it.
Here is the jsFiddle. http://jsfiddle.net/RxDpP/1/
On stackoverflow, while in the Tag-inputbox if you hold the left key button, it will go all the way to the left and open every tag for editing, same goes for the right key, and the backspace.
I am trying to replicate the same functionality on mine.
I have the following code: JSFiddle
The problem with the current code is that I am not sure how to implement the arrow keys movements.
Any ideas?
Take a look at these two jQuery plugins, maybe one of it will fit your needs (though they are not identical to the stackoverflow tagging functionality):
http://webspirited.com/tagit/#demos
http://aehlke.github.com/tag-it/
So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.