Jssor slide out each caption - transition

I downloaded and used Jssor slide from this source : http://www.jssor.com/demos/introduction-slider.html
And how can I slide each caption in a slide.
Ex : in slide 1, caption A fade in, then caption A fade out after 3s and caption B fade in with position is same caption A.

't3' is for play out as well as 't2', but 't3' plays after 't' immediately.
And you can set 'd3' to 3000 to specify the delay (3s).
<div u=caption t="yourfadetransitionname" t3="yourfadetransitionname" d3="3000" ...
Reference: http://www.jssor.com/development/slider-with-caption-jquery.html

Related

How can I offset a MUI Popover component from an anchorEl?

With anchorOrigin, I can give a MUI Popover an offset with anchorPosition.top and anchorPosition.left. But this has no effect when I'm using an anchorEl (i.e., attaching the popover to a trigger element), not an anchorOrigin (i.e., using absolute positioning).
It seems I can do this with the MUI Popper
(see this issue), but not very easily with the popover. I want the clickaway functionality so apart from this positioning difficulty I prefer the popover.
What's the best way to attach to an element but shift the popover (say, down and right)?
You can just pass a number to the horizontal and vertical properties to have them offset with respect to the top-left corner of the anchor element, like this:
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 100,
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
this will open the popover 100 pixels to the right of the left margin of the anchorEl.

Alignment of injected buttons on sap.m.table

I have a table (sap.m.table) and am using the delete table mode (mode="Delete") and am also including the edit feature by setting the ColumnListItem type to (type="DetailAndActive")
<Table id="usersTable" mode="Delete"
...
<ColumnListItem type="DetailAndActive" vAlign="Middle" detailPress="onEdit" highlight="{= ${users>EmailConfirmed} === true ? 'None' : 'Error'}">
I have 2 lines per row as I have an objectidentifier as 1 of the cells:
<ObjectIdentifier title="{users>Email}" text="last: {path: 'users>LastLoggedOnUtcDate', formatter: '.formatDateTime'}"/>
When displaying I get the following outcome:
The button alignment is out - the edit button is vertically aligned at the top while the delete button is vertically aligned in the center.
As you can see I have set vAlign to Middle on the ColumnListItem.
I would appreciate any help for aligning the edit button in the center too?
Thanks!

How To Arrange a Desain Gameobject or UI to become Scrollable using Scroll Rect ? Unity C#

Please help me..
How to arrange gameobject or UI to become like the screenshot and make it scrollable using scroll rect ?
The UI must be arrange like screenshot.
There is a border yellow contain the UI and it must be scroollable.
and then there is a cyan border contain 5 Slot item or more and scrollable too. it can be generate automatically or manual.
And then there is a magenta border contain 3 button UI. Button 1, button 2, and button 3. Each button have different size.
Why it must be scrollable ? Because The Cyan border Contain and the Magenta border contain can be more than one. So if it not scrollable then the object wouldn't enough to show in the yellow border box.
I have try to make it for 1 day and i can't finish it.
Please help me how to finish it and how to make it step by step.
if you have any question just comment it.
Thanks A lot
I found the answer myself.
That is how it work.
Create Gameobject Name Panelprocess
In the Panelprocess add component : image, mask and scroll rect
Create child Gameobject Panelproceess Name ListProcess
In the ListProcess add component : Grid Layout Group and contain size fitter
at Grid Layout Group component set the value like below :
cell size : x ( 285 ) y ( 65 )
constraint : fixed column count
constraint count : 1
at Contain size fitter set the value like below :
horizontal fit : preffered size
vertical fit : preffered size
Create child Gameobject ListProcess Name Item1 (UI Image), Button1 (UI Image), Item2 (UI Image), Button2 (UI Image)
Create child Gameobject Item1 Name Slot1 (UI Image), Slot2 (UI Image), Slot3 (UI Image), Slot4 (UI Image), Slot5 (UI Image)
Note : Arrange the position and size of slot according to the screenshot
Do step 4 for Item2 too
Create child Gameobject BUtton1 Name Btn1, Btn2, Btn3
Note : Arrange the position and size of each btn1, btn2, btn3 accroding to
the screenshot.
Do step 5 for Button2 too
Back to gameobject Panelprocess
at Panelprocess component :
Scroll Rect (set the setting like below) :
content : (Drag the ListProcess gameobject to content)
Horizontal : unchecked
vertical : checked
MOvement Type : Elastic
Now Play it.
The Grid Layout Group now contain and object with a different size and scrollable.
Done

Opacity toggle three (or more) DIV

<div id="rotator">
<p id="1">Some Text 1</p>
<p id="1">Some Text 2</p>
<p id="1">Some Text 3</p>
</div>
They are presented in a row. All I want is automatically cycle the three text by toggling opacity, ie. at first text 1 is opacity 1, and test 2 and 3 are opacity .5. Then after 5 seconds or so, text 2 is opacity 1, and text 1 and three are opacity .5... so on in a cycle.
Can someone give me a hint/direction on how to do this in jquery please. Thank you in advance.

LWUIT Form.show() has a weird margin (or padding)

When i add a Form to LWUIT using form.show(), the form is not set exactly in the (0,0) coordinate, it's leaving like 20 pixels in the top and 3 on the left.
I'm developing for the Nokia SDK 1.1 FYI and i'm using their version of LWUIT
Let me know if there is a workaround on this.
Cheers!
Alberto
EDIT:
Here is how i'm creating the Form
Display.init(this);
this.view = new Form();
this.view.setLayout(new CoordinateLayout(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight()));
this.view.setScrollableY(false);
this.view.show();
This shows a padding on the top and on the left side (Bigger on the top than on the left side)
See a screen shot:
Found the 2 Issues:
1) I had to set the titleArea padding and margins to 0 like this:
this.view.getTitleArea().getStyle().setMargin(0, 0, 0, 0);
this.view.getTitleArea().getStyle().setPadding(0, 0, 0, 0);
this.view.revalidate();
2) For the left padding, it was in the label where i was placing the photo, so just changing it's style (padding) to 0 made the trick
Cheers,