Uniform plugin and select box issue - javascript

I am really baffled at this issue because I have no idea where the problem is at, nor do I know where to begin.
I have two selects as you can see in the image. The one to the left is fine but the one on the right is much smaller than the content within it. I personally believe the issue is with the plugin but again, I don't know where to look.
Here is what I've done. I've disabled the plugin and the select box comes back to full size and the onchange event works as expected. When I enable it again, the onchange is more like a mouseup event because the instant you click on the select, you're forwarded over to another page; it won't allow you time to make a selection.
Can anyone shine a little joy over this way, please?

Related

Select closest focus targets on Browser or Windows

First time posting here. I'm working on a mouse-and-keyboard disability device for a course bioengineering course and I've got a feature that I've got no clue how to begin implementing. Basically, I want to be able to "select" which are the K "focus targets" nearest to the cursor, draw boxes around them/highlight them (much like Chrome or Windows does) and, after deciding which "target" I want to select, focus/click that one. The goal is to use eye-tracking software to move a cursor and then blink/contract a muscle to see which are the closest targets (that way you can click on really tiny stuff which would be hard to select otherwise).
Not sure if "focus target" is the right word, I mean "what gets selected next" after you press Tab. If there's some "universal" way of doing this across apps that'd be great, but either a browser-only or Windows-only way would be great. The only workaround idea I've had so far is to press Tab a bunch of times, see what changes appear on screen, use OpenCV to detect on-screen changes and then see which are closest to the cursor, but that means the screen would spaz out and also wouldn't work if there's any sort of animation on the screen.
Thanks in advance!
You can get element by your cursor and then search the dom tree for input, and then you can use javascript to focus on that input

Select2 resizing box during load

I've been struggling massively to understand this issue and how to fix it.
Essentially, using a standard select2() box, when loading the page, the selection box starts at a slightly larger sized box with a small font and then resizes itself to a smaller sized box.
I am experiencing this issue, and if you look at https://select2.github.io/examples.html
You will see this happens on several of the examples (at least using Chrome)
I cannot reasonably reproduce this error and am using a super standard
$('#myselect').select2();
Is there anyone who can give me some sort of idea why and when this resizing would occur?
EDIT:
I've discovered that the issue has to do with the fact that it starts with Bootstrap styling, and then select2 adds classes to it, thereby changing the formatting of the output.
For whatever reason, I've struggled to exactly emulate the css properties of select.form-control without select2 as looking the same as with select2, despite painstakingly looking over the computed css properties.
I would very much so prefer to have the solution above - where the select before and after select2 adds classes is visually identical.
For now however, I have created a makeshift solution which is
In css:
#myselect
{
display:none;
}
Once select2 loads the select completely, it will become visible.
The issue with this solution is that the bar will temporarily not show up immediately upon loading the page, and so it will look like it "pops up" on your page.

Logic for Switching a Div

I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.

How to prevent clumsy text selection behaviour in websites

I noticed that in some websites, text selection behaves in a somewhat clumsy manner: the user click and hold the left button, and then move it in the direction of the text he/she wants to select, and then an entire portion of text on the opposite side of the movement gets selected.
This is not something that happen everywhere, and it's hard do describe, so I will provide an example. I've found this really cool article. Check the last line of it:
ENV:REDIRECT_STATUS is my new best friend.
If I click on the left of this line, and drag a little to the right (say, up till the :), I expect to have the ENV: portion of this line selected. Instead, what gets selected is the remainder of this line (REDIRECT_STATUS is my new best friend.) plus every comment and the sidebar! I am using Firefox 15.0.1, but already notice this behaviour in Chrome and Internet Explorer.
So what I want to know is, why this happen, and what needs to be done in order to prevent this glitch.
PS: please excuse me for not being clear on this subject; I found this issue really hard to describe on words.
It all has to do with the HTML markup and the CSS. The browsers tend to select the text in the same order as it appears in the HTML. Adding padding like Tim Down suggested can help user select the text because it gives a little margin of error in the text selection.

Click through transparent floating iframe

I have a transparent floating iFrame with a lot of empty area. It floats on top of my site (position:fixed).
The problem is that if anyone click on the empty area, it does not click below on the real page.
Is there a way to perform this? Like a click through in someway.
Well, no. The only thing you could do is to simulate it by capturing the click event, get the coordinates, and then try to find the correct element beneath, and execute the onclick event handler. However, it's a bit impractical, and I think that you should expect some bugs..
Are you sure there isn't another way to solve your problem without that transparent iframe?
Traversing DOM would be necessary, as stated by Onkelborg.
You'd get the mouse position and test every dom element to see whether or not it was clicked. You'd then have to invoke whatever event handler you've defined... You'd have to manually manage event bubbling as well [which is different between IE and other browsers, as far as i know]...
I should also note that it isn't possible to take a picture of your website with JavaScript, so you couldn't click through transparent text either way, nor could you click through images that have transparency.
I think the best option here would be for you to show us an example of what you're trying to do. Usually, a little restructuring of the website can go around this problem.

Categories