I would like to create a continuously scrolling ticker which has got variable width items in it. This is going to be used for a news ticker where the news items are aligned one after each other depending on their width according to the news title length. I would need them to continuously scroll towards the left in a continuous manner in an equal, linear easing manner.
Is this possible through caroufredsel?
Set duration to .1
$("#foo").carouFredSel({
scroll: {
duration: 0.1
}
});
Source:
http://support.dev7studios.com/discussions/caroufredsel/UC-951092
Please have a look at this demo:
http://coolcarousels.frebsite.nl/c/23/
Try to check this example
http://caroufredsel.dev7studios.com/examples/continuously-scrolling.php
I think you just need to add - items: {width: "variable"} - and will work
Related
Is it possible to set a x-scrolling in react-virtualized? I have a table with a fixed width, and more columns to display than I got space in my table, so I need a x-scrollinig. In my tests if i did it, the table just shrinked up and did just display '...''s for content if the table runs out of space.
Intro paragraph for react-virtualized Table docs (emphasis added):
Table component with fixed headers and windowed rows for improved
performance with large data sets. This component expects explicit
width and height parameters. Table content can scroll vertically but
it is not meant to scroll horizontally.
You might be able to hack it, but it isn't meant to support horizontal scrolling so it probably won't work. Consider using Grid or MultiGrid instead if this is a requirement for your app.
I was struggling with this myself for a while. I did it by by setting the width of the table to width={Object.keys(rows[0]).length*150} and set each column min width to 150 (or whatever you choose just make sure it is the same in your table).
Then wrap it in a Paper and give it a width and overflowX:'auto'
something like this:
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
export default function DataPreview(props) {
const rows = [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]
return (
<Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
<VirtualizedTable
width={Object.keys(rows[0]).length*150}
rowCount={rows.length}
rowGetter={({ index }) => rows[index]}
columns={Object.keys(rows[0]).map(head=>{return(
{
minWidth:150,
label:head,
dataKey:head
}
)})}
/>
</Paper>
);
}
Building on bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this, however, beware of the following caveats that come with this hack:
Your overflowing Table columns will not be virtualized
The scrolling focus gets captured by the wrapper's x-axis scrolling and you will need to click within the internal Table component to refocus and regain y-axis scrolling. This is incredibly frustrating to use especially on mobile devices.
I need to set the width of an element that is used in various places in my fluid Susy layout. The parent element is not always the same width, but I want this element to always have the same width relative to the page width.
Example:
In a 12-column grid, a news article sometimes spans 12 columns, sometimes 6. Editors are able to add a <blockquote> in the news article text. I want a blockquote to always be 3 columns wide (relative to the full page), regardless of its context (12 or 6 columns).
Of course if this was a grid with fixed column widths it would be easier, but I'm looking for a fluid, percentage-based solution.
PS. I am willing to use Susy 2 alpha if that makes it easier to solve the problem.
You would do this the same way in Susy 1 or 2, though it's always more fun in 2. :)
The issue isn't really related to anything specific about Susy, it would be a problem in any fluid CSS situation. You can only solve it if you have a hook for knowing which context you are in. At that point, you can solve it from either end. Something like this:
blockquote {
#include span-columns(3);
.narrow & { #include span-columns(3,6); }
}
There really isn't any way to do it without the hook. CSS doesn't have element-queries (and isn't likely to any time soon, for the reasons given in that article).
I have a gwt button that has a fixed size.
I want to present a text on it, and if that text exceeds the button length, I need to cut it short and put "..." in the end. I use the following code now:
if(name.length() > 11){
//limiting the size of the text presented on the button
name = name.substring(0,10)+"...";
}
I have a list of such buttons, and this approach causes that not all button's text have the same size.
The problem is, for example, that 10 chars of "!" are much shorter than 10 chars of "A".
Can anyone help me with a way to solve this issue?
Thanks!
Fast answer. Try ussing HTML5/CSS3 property. It does exactly that:
http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
If you need to do that for non-CSS3 browsers you'll need to make some kind of fake. Maybe setting a button div content, with overflow-hidden, and placing a floating "..." to the right. But it's more difficult...
You could add a style-class to all those buttons and fix their size.
Should be something like this:
First, add the style-class to each button:
Button button = new Button();
button.addStyleName("buttonSizeStandard");
Then add a matching style in the css file:
.buttonSizeStandard{
width: 200px; //change 200 to whatever
}
Afternoon All,
I'm trying to draw a dynamic "ruler" which can be zoomed (along with the rest of the page) and is annotated, using Raphael.
I've found Raphael's pathBBox() and isBBoxIntersect very useful for determining if a graduation should be printed at a certain point or if it would be too close to another and should thus be skipped.
Now I need to annotate some of the graduations and want to follow a similar method - annotate the largest graduations, working down to the smallest level of detail but skipping drawing the text if it would intersect with some already drawn.
Unfortunately my look through the Raphael docs have only shown me the Paper.print() and Paper.text() methods, both of which add to the paper. This means I would have to add, then find the bbox and test, then remove if bad - which is potentially rather slow.
Is there a way to find the dimensions of some text I want to print without printing it, such that I can manually create a bbox object and test it against my stored bboxes?
As always, thanks very much in advance! :-)
Cheers,
-Oli
You can use .getBBox() on text:
var text = paper.text(...);
if (text.getBBox().width > max) ...;
I didn't see this documented officially, but it works, and apparently cross-browser.
I'm trying to get a grid to occupy the entire space within a panel and after having searched through this forum i read that a fit layout should help with such a case. However, i'm still having problems getting it to do so.
{
xtype:'panel',
layout:'fit',
items: [{
xtype: 'grid',
store: 'DimensionStore',
id: 'dimension-grid',
padding: '0 5 0 5',
viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
columns: [{
header: 'Name', dataIndex: 'DimensionName', flex: 2
}]
}
}]
}
The only way it works is to set an absolute height for the grid,but that defeats the purpose since the panel + grid lies within a window that is expandable and doesnt look nice when it does get expanded.
Based on the image you showed us, it looks like the layout issue is with the top "Dimensions" panel containing your text field and grid. That's actually the component in charge of layout here, not the grid.
There are a couple things you can do, depending on how you intend for this to be used. The easiest solution would be to use a "vbox" layout. The "Dimensions" panel would have two items, one for a panel with a fixed height containing your text field, the other containing your grid with a flex of 1. That way, the grid will fill the remaining area.
Ext.layout.container.VBox documentation
You could also use a border layout with your text field as the "north" region and your grid as the "center" region with "fit" layout, which will accomplish the same thing.
Ext.layout.container.Border documentation
This is all based off your limited code sample and linked image. You may need to provide a more complete code example to facilitate further assistance.