jCarousel Lite + how to add pagination? - pagination

I need pagination in jCarousel Lite. Also want pause on mouse over event. Can anybody help?
I'm using code from : http://www.gmarwaha.com/jquery/jcarousellite
Thanks in advance..

You need to use the "btnGo" variable.
Create an array of references to classes, one for each of your list items in the carousel. Then pass this when you make the carousel.
$j('#home_carousel .side').jCarouselLite({
auto: 6000,
speed: 750,
visible: 1,
btnGo: ['.button1', '.button2', '.button3']
});
In that example the page has 3 divs on the page with id's of button1 - 3 and the carousel has 3 slides.

Related

Yii2 Kartik Gridview Editable not working with pagination

I am about to show a list of warranties like this. However, when I tried to using pagination, I can not edit things in EditableCoumn like before. The picture also shows the parameters sent. How can I solve this?
Note: this is just a demo, so I set the pagination size is 1. In real life, we have over a million results instead of 2!
Thank you in advance!
Use this code:
echo GridView::widget([
// set pjax to true then you will be able to do that
// If set to true, the entire GridView widget will be parsed via Pjax and rendered inside a yii\widgets\Pjax widget container
'pjax' => true, // pjax is set to always true for this demo
]);

Jointjs creating link once it is deleted

I have recently started working with JointJS. I have not seen any example/tutorial on their website mentioning creating of link again once it is deleted. For example on this link.
http://jointjs.com/demos/org
I wonder if its possible to create the link again between the two Members once it is deleted.
I tried with this code in the function function (x, y, rank, background, textColor):
'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0, magnet: true, pointerevents:'none' }
But its not working.
I am not sure if the member type has ports. If yes you need to add ports to recreate the links once rendered. If you look at the source code, the links are created during render so if you refresh the page or run the code again the links come back.

Continuously scrolling caroufredsel ticker with variable width items

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

Ext JS Grid doesnt fill panel even with 'fit' layout

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.

YUI ScrollView Paging by Page numbers

I am trying to use the YUI ScrollView with paging but I do not want to use the "previous + next" button. Instead I would like a to have a container with links to each page.
Is it possible to skip to a specific page of ScrollView on a button/link click.
Something like
scrollView.pages.ScrollToPage(3);
Any help would be highly appreciated. You can find the documentation here.
As the documentation explains, there is a scrollTo method in the ScrollViewPaginator plugin: http://yuilibrary.com/yui/docs/api/classes/Plugin.ScrollViewPaginator.html#method_scrollTo.
You just need to write something like scrollview.pages.scrollTo(3, 0.6, "ease-in");.

Resources