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...
Related
I generate a PDF File from a HTML Source. Each Page has a height of 1402px. First solution was, a DIV for each side.Placing Footer and Header was easy then. Problem is: if the content (dynamically generated) doesn't fit the page div, it overlaps the footer and in worst case, destroys the layout. So all the Pages and their content goes into one div, but how do i add 300px of margin, which I need for Footer and Header?
I tried to display my problem in this picture:
The whole white thing is one Div.
The black lines display each page in the Div but they are not in the code.
The green lines display where I need a margin so the red content doesn't overlap, but continues on the second page instead.
Red -> current situation
Blue -> what I need
I can also use Javascript in the document.
Can you help me?
http://i.stack.imgur.com/iMFBb.png
Here is the fiddle of how its solved until now:
https://jsfiddle.net/8yvpavd7/1/
I suggest you ensure that the height of your page is lower than a specific limit. Since you are using absolute sizes and positioning anyway you can easily check that using jquery (example:)
$('#page1').height() / $('#page1').outerHeight()
Since we don't know anything about your datastructure, i can only assume what you need. The following fiddle should explain what i'm talking about https://jsfiddle.net/rkvs5s1z/2/
You could remove parts of your content until it fits the height. You need to store the removed data.
The fiddle does not store the data in the correct direction - it should only demonstrate how this could work
Afterwards you append a new page including your headers and footers.
You might need to repeat these steps if the content of one page is bigger than two pages.
I would also suggest to improve the shown example by not slicing single characters but complete words. If your pages contain html you might also need to check for html code and correct nesting.
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.
Is there any JS/CSS/jQuery magic I can work to identify whether the last visible bit of content in a div is being cut off, and slightly increase/decrease the DIV's height to prevent the cut off text?
Our system allows the user to enter "elements" containing XHTML (using a Telerik Edit control). We have an ElementList page, where we show all the user-entered elements. However, since the user-entered XHTML can be very large, on the list page we only want to show the first 3 lines of each. So I set the DIV containing the XHTML to a specific height equal to 3 rows of text, and set overflow: hidden. So far, so good.
However, since the user can enter XHTML, they can create tables with padding (or otherwise diverge from standard text height). The text within those cells appears to be sliced off horizontally, due to the combination of height and overflow: hidden. Our requirements person doesn't like the look of this; but of course we cannot restrict the XHTML editable by the end user.
Here is a JSFiddle example of the issue.
This question is not a duplicate of:
"Stopping cut off text in variable height div..." as that question involves "webkit-line-clamp" which is irrelevant to my situation. (and in any case, that question was never answered)
"Cut text by height, no truncate" as that question is about a DIV containing pure text; my DIV contains XHTML. You'll note in the JSFiddle that I'm already sizing the DIV height using the em measurement.
This issue has me completely baffled - I'm hoping the SO community can come to my rescue!
UPDATE:
Ultimately, I suspect this cannot be resolved using HTML/JS/jQuery. In fact, you can craft a table (or series of DIVs) with gradually increasing top-margins, such that there's no way to avoid slicing at least one of them.
Thanks to all for their responses. I'm marking one as an answer, because in my opinion, it's a particularly simple/elegant workaround.
This is not the solution you were looking for, but it might be a good design workaround.
I put a white gradient in the bottom of the div, so that it creates sort of a "visual ellipsis"
Take a look: http://jsfiddle.net/robertofrega/LkYjs/3/
It is not as ugly as when the text is simply cut.
Your trouble is coming from overflow:hidden;. This line is doing exactly what you tell it to do, namely hiding the overflow. Can you use overflow-y: auto or something like that? That along with a grippy (like SO uses on its text areas), should help you out.
Instead of having overflow:hidden, you could set it to auto and then check for the presence of a scrollbar upon submission of the content. See this thread:
detect elements overflow using jquery
Try CSS3 property: text-overflow and set it to ellipsis, the default value is clip
I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it comes to lining things up, but it demonstrates how to use it for your application.
DEMO: http://wecodesign.com/demos/stackoverflow-7433377.htm
For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)