Need help with automating vertical scrolling. I'm a teacher and my 15 year old son is learning C# to help with making online worksheets. We are currently making a computer based worksheet that teaches 3 phonics sounds using 3 letter words (cat, dog, fox, etc). The form is constructed of four rows with 5 pictures in each row. The actual worksheet used as a template can be seen at http://www.tampareads.com/phonics/phondesk/cvc/cvc-1.htm - Because of size limitations I am displaying only 2 rows at a time. When the student clicks on the correct letter for the last problem in row 2 we want the form to scroll down to view rows 3 and 4. Is there a way to get have the form to scroll down to view these last 2 rows automatically, so the student does not have to scroll manually? We've been reading and trying for days but no luck. We tried using "ScrollControlIntoView" but it would appear to work, but then when clicking the answer of the first problem in row 3, it jumps back up to row 1. We are pulling our hair out!! Any help would be appreciated.
IF your using jQuery or could add it to your page, you could do something like this.
var position = $(window).scrollTop() + 100
$('.correctLetter').click(function () {
$('html, body').animate({ position }, 'slow');
});
Position = the amount already scrolled down the page + 100. You may need to adjust the 100 to however many pixels you need to scroll.
$(.correctLetter) refers to a class on whatever element you want to trigger the scroll.
Related
I'm trying to develop a tablature editor with a specific look, and I'm struggling to display my controls as I want. I think I'm doing it the wrong way so I need your help! I'm working on Visual Sutdio with C# / Winforms.
Ideally, this should look like this : [1]: https://i.stack.imgur.com/B3q5r.png
Basically, this is an A4 sheet on which I display a datagridview with custom borders. As I progressively fill the datagridview, this one should expand: I do that by adding columns dynamically.
The problem is when I reach the right border of the sheet, it should expand on a new line (like a flow layout panel: when there's no more space the control is added on a new line).
I don't manage to do that. If I add more columns to my datagridview, a horizontal scrollbar appears instead of going on a new line. I tried to mix my datagridview with a flowlayoutpanel but I can't make it work.
Have you got any idea on how to do that? Any help would be highly appreciated.
EDIT :
So in my picture, the grid represents the subdivision of the beat (musically speaking). Each beat is divided in 4 subdivisions (=4 columns).
The numbers represent the notes on the instrument, and several notes can be played at the same time (that's why there are sometimes 2 or more notes in the same column). On the contrary, we can also play 0 notes at a given time, that is why some columns are empy. The user write these notes
Consequently, 1 beat = 1 grid of 4 columns * 4 rows (4 notes maximum can be played at the same time).
The horizontal line is just an indication wether the note should be played with the right hand (above the line) or the left hand (below the line). When the user writes the notes, he decides where to write them.
Each time I add a beat, I add 4 columns. So my whole tablature is a grid of 4 rows * X columns (X being a multiple of 4), in which the user writes the notes he wants. My problem is that I would like to "cut" my grid and display it on several lines so that it fits an A4 sheet.
...without knowing how many columns the grid view may have or which columns will contain a lot of text. (Auto resize all other columns)
I have a grid view on a webpage that is generated from a database and it displays different columns in different orders depending on the user or user groups. Typically, it is displaying somewhere between 15 and 30 columns. For some user/user groups all of the columns can fit on the screen without any text wrapping too much, for others even after the grid view auto sizes all of the columns to be as small as possible it doesn’t all fit on the screen requiring a horizontal scroll bar and it’s then forcing the columns with large amount of text to wrap after only one or two words.
I am trying to figure out if there is a way to stop a column from resizing to a tiny size if its content is really long and instead wrap only after a certain size (assuming that the content of that column is large enough to require the column to be that “certain size” to begin with) however I can’t know which column is going to have a ton of words since each user / user group can modify which columns they use, which are displayed, and what each column is called. (So I can’t hard code a specific column to be a minimum/specific width)
Example
If for example a column has text that is long than say, 50 words, I want to set that column to only word wrap after at least 4 or 5 words have already been displayed on the first line (or a certain pixel size) But if a column is smaller than that I want the column to become as small as possible so that as many rows / columns can be visible on the screen as possible. I don’t mind the horizontal scroll but I am trying to get the wrapped text to not wrap more than 5 or so lines. (Currently it’s wrapping like 15-30 lines leaving 1 -2 words on a line)
Example – What I want
UserGroup1
This is what I would like to happen (The column with the long text is kept large enough to read multiple words before wrapping
Example -- What I’m currently getting
UserGroup1 (This only happens to users groups who have a ton of columns, other user groups are able to fit everything on the screen without ridiculous word wrap)
Example of what I'm currently getting -- Row with lots of columns is word wrapping every word or two causing the row to take up ton of space on the site. (Made image a bit smaller since its so tall)
This User/User group also has so many columns set to display that it has a horizontal scroll making it difficult for users to get to easily read the data.
Additional Example
Example of a different user group who has less columns and a different order.
Description
This is an example of a different user/user groups gridview display. This user/user group has chosen to have a lot less columns and all of the columns have no problem fitting on the page. This gridview does not have a horizontal scroll bar and already wraps nicely due to less columns.
This grid view automatically resizes the smaller columns and makes the column with more data bigger because it doesn’t need to try to fit a ton of columns on the page. This example is similar to the "What I want" example, except it has less columns so the description column is wider.
I am new to Unity.
I am converting my Sudoku game written in WPF to Unity2D. I converted everything. However I cant achieve 9*9 grid with Buttons as I did in WPF.
In WPF I created 81 buttons with same event. So when it is called I jsut got their position displayed keyboard with only numbers that cell allowed.
Here is what I needed
Here is what I did.
1: I inserted canvas then tried vertical layout(for adding 3 rows) without success
2: Then I tried grid layout with canvas with fixable count column no success
3: grid layout with flexible option still no result.
I also tried via coding using GUI.BOX, and all still the result is not good.
How can I do it?
Do not use GridLayout, it is only for fixed size "icons" - irrelevant here, do not use.
First use VerticalLayoutGroup
include ..
Don't forget you must put a LayoutElement on each of your three items.
Get that working first.
Then, for your MIDDLE item, add a horizontal group and make that work.
Am Using Visual studio 2010 and coding by C#. Now i want to do a star rating control ie I have some values within 5, not more than that and i want to show the value rated by start based on the rating. Below is the clear scenario.
If I get a value 5 then i have to to show all 5 star filled up with some colour.
If i get a value 3 then i have to show 3 star which is filled up with some colour and rest stars as empty.
If i get the value 3.5 theh i have to show 3 start which is filled up with colour and next 4th star with HALF FILLED and another HALF and one star as empty ie without colour.
If i get the value some 4.2 means i have to show 4 starts which is filled with colour completely and the last only 0.2 % should be filled with colour and rest part as empty.
How can i achieve this?? Am using ajax control and i don't want to use jquery please note.
Can any one help me in this??
Thanks
I guess this is exactly what you want
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Rating/Rating.aspx
I think what you need is this......
CLICK ME
Only AJAX and No Jquery used just as you want.
I've got a single-row, 40 column-long DataGridView that i need to print.
Since i can neither print it directly (because A4 sheets won't cut it ;)) nor adjust its width to the width of the page itself (because the headers look terrible), i wanted to break the DataGridView to 4 separate pieces and display 10 columns per row (imagine: column 1 to 10 in the first line, column 11 to 21 four or five lines below, etc...).
Is there an easy way to do this? I was leaning towards a more manual approach (using fors), but i'd love to know if there's a more elegant way.
Cheers
Would it be better to pivot the view to give you 40 rows rather than 40 columns?