<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.
Related
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.
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!
I have a flex table in GWT , it has 3 rows . Now I want to draw a line / separator after every row .(just separator between rows, Not for column)
can i acheive this ..
here's the current screen
You can see 3 rows , just need a clean and nice line between them
A FlexTable is rendered as just a <table> with their cells being simple <td>s. So in your CSS you can include something like this:
.tableWithRowsDelimiter td {
border-bottom: 1px solid #c9c9c9;
}
And then assign the tableWithRowsDelimiter style to your FlexTable, via ui.xml:
<g:FlexTable ui:field="yourFlexTable" class="tableWithRowsDelimiter"/>
Or in your Java code:
yourFlexTable.setStyleName("tableWithRowsDelimiter");
I'm trying to build a nested menu structure, but the submenus should appear in a different element on the page.
Grouping and hiding the submenus will make them appear always, not just after activating the parent menu.
Menu.i("Startseite") / "index" >> Hidden >> LocGroup("servicenav"),
Menu.i("Impressum") / "about"/"index" >> Hidden >> LocGroup("servicenav"),
Menu.i("menu_1") / "100_menu1" submenus(
Menu.i("menu_1a") / "100_menu1a" >> Hidden >> LocGroup("sidenavbar"),
Menu.i("menu_1b") / "200_menu1b" >> Hidden >> LocGroup("sidenavbar"),
Menu.i("menu_1c") / "300_menu1c" >> Hidden >> LocGroup("sidenavbar")
),
Menu.i("menu_2") / "400_menu2" submenus(
Menu.i("menu_2a") / "400_menu2a" >> Hidden >> LocGroup("sidenavbar"),
Menu.i("menu_2b") / "500_menu2b" >> Hidden >> LocGroup("sidenavbar")
)
)
And the html part:
<ul id="mainnav">
<lift:Menu.builder li_item:class="open" li_path:class="open">
Upper Navigation Panel for primary Menu
</lift:Menu.builder>
</ul>
<ul id="nav">
<lift:Menu.group group="sidenavbar" a:class="firstChild">
Side-Navigation panel for submenus
<li><menu:bind /></li>
</lift:Menu.group>
</ul>
Has anyone a good idea?
Thanks in advance
You didn't specify the "group" in the first part of the HTML. Maybe this would help ?
I understood you incorrectly the first time.
Would level solve your problem?
level: What level of the entire selected menu tree to show. Counting begins at zero, for the top level. Consider a top level menu with ‘item1’, ‘item2’, and ‘item3’ and supposed ‘item1’ has a submenu with items ‘item1a’ and ‘item1b’. Level 0 will show the top level plus the submenus (see next option). If item2 or item3 is selected level 1 will show nothing, while if one of the item1 variants is selected the item1a and item1b entries will be displayed.
https://www.assembla.com/wiki/show/liftweb/SiteMap#using_sitemap_in_templates
Ok, I created a workaround by grouping the top-menu level and let the submenu appear in the main-sitemap. With this, the level-parameter can be applied and therefore only the active submenus appear in the div.
Menu.i("Startseite") / "index" >> Hidden >> LocGroup("servicenav"),
Menu.i("Impressum") / "about"/"index" >> Hidden >> LocGroup("servicenav"),
Menu.i("menu_1") / "100_menu1" >> LocGroup("mainnavbar") submenus(
Menu.i("menu_1a") / "100_menu1a",
Menu.i("menu_1b") / "200_menu1b",
Menu.i("menu_1c") / "300_menu1c"
),
Menu.i("menu_2") / "400_menu2" >> LocGroup("mainnavbar") submenus(
Menu.i("menu_2a") / "400_menu2a",
Menu.i("menu_2b") / "500_menu2b"
)
And the HTML:
<ul id="mainnav">
<lift:Menu.group group="mainnavbar" level="1">
<li><menu:bind />
</li>
</lift:Menu.group>
</ul>
<div id="navblock">
<ul id="nav">
<lift:Menu.builder level="1" li_item:class="opfirstChildOpenen" li_path:class="firstChildOpen">
Side-Navigation panel for submenus
</lift:Menu.builder>
</ul>
</div>
So, finally got a solution.
I simlpy added two Sitemaps. The first with with level="0" and expand="false", the second with level="1". However if you click in the second menu, the first will expand regardless of the expand parameter. So I set the in the stylesheet the width and heigth for the following in the first menu to 0.
Not clean, but it works...
<ul id="mainnav">
<lift:Menu.builder li_path:class="open" level="0" expand="false">
Top Menu
</lift:Menu.builder>
</ul>
<ul id="nav">
<lift:Menu.builder level="1" li_item:class="current" li_path:class="open">
Side-menu
</lift:Menu.builder>
</ul>
ul#mainnav li ul li{
height: 0;
width: 0;
}
Since nowrap on td element doesn't seems to work in IE, see this question, I am in desperate need of help how to add a span element with nowrap to every cell in a Dojox Datagrid without having to define field formatters to accomplish this.
See jsfiddle here http://jsfiddle.net/HkxHZ/4/
Using this css I get what I want in Chrome and FF, i.e. no word wrap and overflow hidden. But it doesn't work in IE..
<style type="text/css">
.dojoxGridRowTable {
table-layout: fixed;
width: 0px;}
.dojoxGrid .dojoxGridCell {
text-align: left;
overflow:hidden;
white-space:nowrap;}
</style>
This method is like auto-size in that is will make the width of each column in the DataGrid big enough to show your data with no wrapping.
What you should do is calculate the proper width for each column of the grid layout based on PX size of the text in the column description and data for that column. This should be done before creating the grid layout.
Here is how you get the proper width in px. Add the following html to your page:
css:
#test
{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
<div id="test"></div>
1) Get the font size used in your DataGrid
2) Get the div object and set the font size to what is used in the grid
<div id="test"></div>
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = grid_fnt_sz;
3) Place each column description and data item intended for your DataGrid into the hidden div:
tst_item.innerHTML = "Your data";
var widthPX = (tst_item.clientWidth + 1); //Width of text in PX
Store this widthPX in an array for each column keeping only the largest found for the column.
4) When creating the layout for your grid, set the width for the column to the largest width from your column description and data for that column.
This method ensures that width of each column will be big enough to show your data without wrapping. Depending on your needs, you can tweek the logic to do what you need. This might not be feasible with large amounts of data. But, it works great for me.