I want to realize the following. Let's imagine 6 company logos vertically placed on desktop view. When I watch the site on tablet (or shrink the browser manually), 2 company logos jump to the next line, but I want them to be centered. And not floated to left, as all grid systems do. Is it possible somehow? Especially with Bootstrap?
My theory is, if I could know which images are in the second row, I could count then the offset from left, and move the images with js to a centered position. But only, if it is needed, so if 3 images jump to the new row, it's okay, nothing to do with them. Am I right?
Didn't found any solution or plugin knowing this specific feature.
It is possible to use Javascript to do this but it would be better most of the time to do this using responsive breakpoints. So if your desktop grid classes are col-md-2 and when going to a tablet size, two jump down, it would usually be better just to make the logos col-sm-4, making 3 logos on each row.
If you notice only 2 images jump down on tablet, you could also add col-sm-6 to just the last two to potentially center those images on the next row.
Related
this is a general web design question but seeing that the site I have built for my client was built using wordpress I will ask it here first.
My client has a lodge/chalet with 2 floors. She has supplied CAD drawn floor plans of both floors and photos of all the rooms. She has asked if I could add the functionality of showing image popup's of the rooms as the mouse pointer is hovered over each separate room in the original floor plan image. I understand that somehow I would need to create zones overlaying the original image, with mouse over css rules which display the photos.
I think it is a lovely idea and hope some clever soul could point me in the right direction of achieving this.
Many thanks
I would split up the floor plan into smaller sections (squares or rectangles), put them into divs as backgrounds, then add CSS or jQuery for mouse over on the divs to popup said images.
I'm a CS scrub and I thought I understood everything until now. I'm being prompted to make anything I want, so I'm choosing to make a little game I've been thinking about for a few months. The problem is that I don't know where to start. We've been using JavaFX and we've done some animation but I don't fully understand everything. I don't really understand mouse events but the idea I have depends on them. Anyway, here's the idea:
The main (2D) game is about reducing fractions.
Imagine the window being split horizontally into top and bottom.
Now, imagine boxes spawning out of view and moving into view toward the horizontal center line. The boxes will only be moving vertically and each box has a random integer. When a box gets to the center, it'll stay there and allow for other boxes to land on top of it (or below it if it came from the bottom).
Boxes are eliminated by "reducing" a number in the numerator with a number in the denominator. Several boxes may be selected on one side before reducing them with the other side. Here's a picture that might help convey what I want to do:
Crude Three Frames of the Gameplay Drawn In Paint
Hopefully that all makes sense.
I've been trying to use an extension of Rectangle but I don't really know what else to do. I figure I'll need to create some ArrayLists to keep track of the boxes and some other lists to keep track of factors as well. Anyway, any help would be fantastic. Thank you guys very much!
The problem
Today's modern websites may use infinite scrolling technique to replace paged lists to make a more seamless experience to their users.
This is all nice and dandy as long as users don't scroll to far down which means that your document becomes very complex with huge amounts of DOM nodes. There are of course ways to mitigate this problem (i.e. replacing over-top overflowed scrolled elements with a single DIV of appropriate height for example), but they're either complex to implement and they still have their flaws.
The idea
I was thinking if anyone has already seen an implementation where items, that get scrolled out (top or bottom) somehow become smaller and fainter until they disappear and get replaced by its adjacent item.
I'm thinking of a mix of experience of:
scrolling
fading
scaling
Fading and scaling can be seen on Medium.com when you get to the bottom of any article and you click the next recommended one displayed below (click the title). When you do click and if you pay attention you can see the effect of original article disappearing while being replaced by an up-sliding new article.
Content scrolling could be done in this way and infinite scrolling would be much smoother and less resource consuming as elements would get replaced on the fly and in-place.
Number of simultaneously displayed items of course depends on items' size. In case of Medium-line articles it would likely be one article that would also scroll until you'd scroll it to the very bottom (or top). In case of posts like Facebook, it would be many more items simultaneously as they don't take as much vertical space.
Coverflow works in somewhat similar way as it displays middle content completely and rest is either hidden or scaled/transformed.
The question
Has anybody seen such an implementation on the web? If done properly it would actually make a much nicer infinite scrolling experience without hogging our browsers.
But to make my question more clear and non-debatable. Can you provide a working (albeit simplified) example of such experience?
Requirements:
when an item gets scrolled out it disappears (using fade/scale/both)
when items appear at the bottom (or top when scrolled up) they should display in the opposite to scrolled out items
pressing usual scrolling buttons Home, End, Page Up, Page Down and Space should work.
invisible items should be removed from DOM
scrolling should somehow be available using some sort of scrollbar as well
I think I might have found what you were looking for.
http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
Is it possible to virtualize both horizontally and vertically?
All examples show one or the other.
Imagine a large grid like structure:
n amount of rows
and as many columns as there are hours in one month
At any one point only 4 rows maybe on screen showing only 2 columns (2 hours). Virtualization one way doesn't make sense. This is an up down / left to right scrollable grid.
I ask because I can't for life of me find any examples online? Also I can't find anyone else who has had the same query. Maybe the design in general is wrong or I don't quite know what I'm searching for.
I did think the design maybe wrong i.e. is there a better alternative but I don't think so. This planner-like-grid is required! The only other consideration I had was to dyanmically build pivot pages but this seems messy and won't have the same feel.
Can anyone begin to advise were I might look?
Whether right or wrong, the direction I'm going in is the following. I wanted to post one answer for any one stumbling across the question.
Using a grid, I'm creating a 2 x 2 grid. Top right, bottom left and bottom right will all contain scroll viewers. The scroll viewer in the bottom right when scrolled will dyanmically change the scroll position of the bottom left scroll viewer and top right scroll viewer. Similar scroll top right will dyanmically scroll bottom right, and bottom left will scroll bottom right.
Obviously a lot of scroll viewer bindings but this is one solution which will work in order to give me the planner functionality and layout.
In terms of the virtualization I am dyanmically going to queue controls in order to keep the performance decent, reusing controls where required.
Is there a standard Aqua way to handle a practically infinite document?
For example, imagine a level editor for a tile-based game. The level has no preset size (though it's technically limited by NSInteger's size); tiles can be placed anywhere on the grid. Is there a standard interface for scrolling through such a document?
I can't simply limit the scrolling to areas that already have tiles, because the user needs to be able to add tiles outside that boundary. Arbitrarily creating a level size, even if it's easily changeable by the user, doesn't seem ideal either.
Has anyone seen an application that deals with this problem?
One option is to essentially dynamically expand the area as the user scrolls through it - any time the user scrolls within X units of an edge, add another unit in that direction. Essentially, you'll never be able to scroll "all the way" to an edge, because the closer you get the farther it will expand.
If the user scrolls back away from the edge, contract it to back to no more than X units beyond where there is actually content.
Have you seen what Microsoft Excel does for this problem? It has to represent an unbounded space with scrollbars, as well.
One solution is to define a reasonable space for the original level size, and when the user scrolls to one tile away from its bounds, add another row or column of tiles, and adjust the scrollbar accordingly. This way, the user never reaches the actual bounds.
If the user decides to cut down on the level size, you could also add code that shrinks the "reasonable space" once an unused row consists only of empty tiles. This saves the user from being stuck with a huge level that they scrolled through, with no way to shrink it.
Edit: Same as Dav's answer. :)