When looking at my website today, I noticed something strange. When clicking on an input field an entering one letter, the background slides a little bit. Unfortunately I do not know, why this is the case.
For making it more clear, here is a (poor-quality) GIF: http://makeagif.com/i/FRMlyL
JSFiddle link is here: http://jsfiddle.net/pesrd/
Maybe this is a well-known issue but I never had to deal with that.
Related
I have been working on a dynamic question thingee(technical terms) but of course there is always some small hop that you need to overcome.
My issue is that when I select 'show answer' on one of the question panels then the dividers add a massive white space between the rows.
Basically the amount of questions asked are managed by the width of the screen, then via AJAX is gets the questions from index.php?questions&a={insertwidthofscreen*4} this is done via javascript and works automatically.
The code that I have is the following, it is called 'math.php' as a temp test:
http://pastebin.com/MjGgSTYh
Everything is generated via the above file and no external connections are made, the database stuff is easy and I will use my old system that keeps a track of what has already been shown.
The idea is that all the DIVS change height when the answer button is clicked, the height is dependent on the answer, the answer could vary from 1 word to a paragraph.
Screen shots of what I mean with the white space.
http://imgur.com/KAOPHFI,wj0vWSg
there is two photos in that, I didn't see the next button for a while.
Cheers,
Leon
Since it isn't complete code (and therefore difficult for me to test myself) I'll just spitball this -- your qbox style (and possibly others?) have fixed width -- qbox is 200px. Should that be dynamic? (you also have width listed twice, but same value so it shouldn't matter in this case)
If you want to post more complete code that I can paste into a file myself, I'd be able to troubleshoot much easier.
Update:
I see what is happening now. The whitespace occurs when you click the answers in a particular order -- ie if you go through them left to right top to bottom, there is no extra whitespace, but if you click diagonally like in your screencap, the whitespace is added to allow for the length of the current answer, but doesn't reorder the previous cells to utilize the space.
In order to resolve this, it looks like you'll have to relocate some of the answer boxes when one answer is clicked on... just expanding them in a certain order will cause the issue you're seeing. Another option would be to have an answer pane/frame, on the side or bottom of the page, that shows the answer without expanding the question boxes themselves. I can't picture the algorithm you'd need to auto rearrange the boxes every time one is clicked...
I'm using smooth-scroll.js on my website, and I have an active javascript that creates an anchored link depending on the information entered into option tags. The problem I'm having is:
smoothScroll.init() is executing before the anchor link is initiated, so it just jumps to the link instead of smooth scrolling. I was thinking that using setTimeout() to delay the execution of smoothScroll.init(); would fix the problem, but it still isn't working.
Here's the link to the site. Paper Inventory
My goal is to get the site to smooth scroll to the correct paper DIV when the person clicks on the "Go To Paper" DIV. It should be simple, but because everything is dynamic, it's adding a bit more difficulty than I expected.
If you go to the site to test it, I suggest choosing United Trade Printers, 12x18, 100#, Accent Opaque, Smooth, White, Cover. I don't have an error message yet if you choose a paper that doesn't exist. So That's a good default one.
I'm also using jQuery, so jQuery answers are more than welcome, and would be easier to implement.
Any help is greatly appreciated. Thank you in advance.
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?
I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.
Please look at the image at the end of this question whilst trying to answer.
Updated Question:
At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.
My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.
In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).
Here's the image:
I would recommend using an already made jQuery slider, like this one:
http://basic-slider.com/
For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.
These are a good start for achieving what you want with jquery:
Animate: http://api.jquery.com/animate/
Capture a click: http://api.jquery.com/click/
Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/
Set the html of an element: http://api.jquery.com/html/
If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.
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.