I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});
Related
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
What do you check to see if the up or down arrow in the listbox vertical scroll bar were clicked.
Looked at dozens of post all over the web and no answer.
What I want to do is if they click up or down then make the next visible item in the list the selected one. Make it highlighted.
thanks all
It looks like the control won't do it natively. You will need to implement it yourself. You can use this post as a guideline:
http://www.codeproject.com/Articles/7554/Getting-Scroll-Events-for-a-Listbox
Note that you will need to handle the WM_VSCROLL message rather than the WM_HSCROLL message as depicted in the code sample.
I am extremely new to Vaadin, and I don't know all controls, I tried to google but didn't find type of control. My question is which is control visible on this link
http://demo.vaadin.com/sampler/#foundation/cssinject
which is used for navigation (left and right arrow buttons on left and right side of screen which you press to change content in middle or something like this doesn't exist in vaadin by default and this is in jquery ?) ?
I need to implement this, to change content on click, to allow user to iterate through shopping cart like this.
They are probably just buttons. Imagine 3 columns Button | Content | Button
Button.onclick -> Load Content
I use this carousel add-on which does that. Buttons are bigger but can be changed using css.
It has a nice transition effect, sliding left and right.
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.
I'd like to create a content box with two tabs. Each tab is associated with a table which contain server-side data. My thought right now is just to load the page with 10 rows worth of data for each table and hide/display each table respectively to begin.
I was then going to toggle display of the tabbed content based on either click events on the tabs OR GET parameters relating to which tabbed content is being acted on (through pagination, for example).
Should I just handle this with UI tabs or is toggling display reasonable in this case? Since the user can update their data, I assume that caching via the tab UI isn't helpful in this case.
Thanks,
Brendan
From what I understood, I don't think its going to be overkill. If you are worried about performance, ten rows for 2 tables is just 20, which is not much. Paginating will also get 10 more rows for each 'click' so it's still good there.
Do use tab activation through click events, but also use GET parameters to know in which page the user currently is, from which tab.
Regarding caching data that you know will change, it might be unnecessary (see my 1st paragraph). Caching can sometimes become unwieldy, so don't add an uneccesary layer of complexity.
As someone who suggests simplicity above all else, I'd discard the whole 'tab loading' thing but leaving the tabs per se (i.e. the interface elements that will be clicked) and when the user clicks each tab, it takes to another page with the tabs too, old-fashioned style.