Let say I have an text box in an HTML page as follows.
<DIV style = "display:none;">
<DIV style = "display:inline;">
<INPUT type = "text" style = "display:inline;">
</DIV>
</DIV>
In this case, the text box will not be visible to the user. How can I identify that text is not currently visible to the user.
Dont say that, I should travel up to the parent objects to find out if they are set to not visible. I have bunch of fields to be validated like this and this would reduce the application performance.
Is there any other way to find out as this object is not visible to the user?
Thanks in advance.
If you don't need it to be pure JavaScript I would suggest using jQuery. Using the :visible or :hidden selector will accomplish what you want:
if ( $('yourElement').is(":hidden") ) {
// The element is not visible
}
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
If you need pure JavaScript and you don't want to travel up through every ancestor element, you could try checking the element's offsetWidth and offsetHeight. If the element is hidden because of an ancestor element, they should both be 0. Note: I've always used jQuery for this, so I don't know how reliable this is.
var yourElement = document.getElementById('yourElementsId');
if ( yourElement.offsetWidth == 0 && yourElement.offsetHeight == 0) {
// The element is not visible
}
https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.offsetHeight
Related
Currently I get my message with no problem when the login if it isnt successfull, but I want to display a div if theres any message (for this time just the error message)
This is the code
div(class='formPosSize')
form(action='/auth/login' method='post' autocomplete='off')
fieldset
legend.legend Login
.input
input(name='username', placeholder='Email', required='')
span
i.fa.fa-envelope-o
.input
input(type='password',name='password', placeholder='Password', required='')
span
i.fa.fa-lock
button.submit(type='submit')
i.fa.fa-long-arrow-right
.feedback(class=message!=="undefined" ? "" : "feederror")
if(message)
| #{message}
if theres any message at all, I would like to change the current feedback style variable "display: none and opacity : 0" to "display: block and opacity : 1" a
the feedback class is just a rectangle, I want the message value in there and showing it if it does exist
i tried this too, but it didnt work
if(message)
.feedback(class=feederror)
| #{message}
I have another class called "feederror" that is the same as feedback, but the difference is with opacity and display..
I fixed it at last!
One afternoon lost, but victory!
whenever you get the "message" variable its better to check its lenght rather than check if exist, or is empty, or if true:
this code:
if (message.length > 0)
div.feederror
div #{message}
Generates this if the message variable has anything on it:
<div class="feederror">
<div>Usuario o contraseña incorrectas.</div>
</div>
And it does not generate anything if message does not have anything or does not exist.
This helps when you need to show an already designed div with its class (in my code is feederror) containing the message variable from flash.
We have developed a site with typo3 v8.7.11. We want to display the search box in the sidebar section, for this we installed the indexed_search extension. B
How to display a search box in all the frontend page sidebar section?
Edit:
The search and form action of the SearchController are both non-cacheable. This means that you would place a non-cacheable plugin on each of your pages, if you used my old answer. This harms performance and could have other side-effects.
Nowadays I usually simply include a search form on each of my pages by including this in my Fluid Template:
<form action="{f:uri.action(controller: 'Search', action: 'search', extensionName: 'indexedsearch', pluginName: 'Pi2', pageUid: searchPid)}" method="POST" role="search">
<input type="text" name="tx_indexedsearch_pi2[search][sword]" spellcheck="false" autocomplete="off" />
<button type="submit">Search</button>
</form>
I hand over the searchPid variable via TypoScript like this:
page.10.variables.searchPid = TEXT
page.10.variables.searchPid.value = <Pid where search results should be displayed>
Old answer:
My tip would be to create a TypoScript object that actually includes the plugin, like this:
lib.headerSearch = USER
lib.headerSearch {
userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
extensionName = IndexedSearch
pluginName = Pi2
vendorName = TYPO3\CMS
switchableControllerActions {
Search {
1 = form
2 = search
}
}
features {
requireCHashArgumentForActionArguments = 0
}
view < plugin.tx_indexedsearch.view
view.partialRootPaths.10 = Path/To/Partial/
view.templateRootPaths.10 = Path/To/Template/
settings =< plugin.tx_indexedsearch.settings
}
Then, in your template, include it like this
<f:cObject typoscriptObjectPath="lib.headerSearch" />
Note that you should create a new "Search.html" Template in Path/To/Template/Search/ for this TS-Plugin, so that it does not interfere with the regular plugin. Also, be careful if you include the search slot on the same page as the search Plugin itself.
you have multiple options:
copy the HTML of the form from the search plugin in the normal content and insert it in your page-(html-)template.
create a special BE-column, insert the search-plugin into this column and render this column inherited in all pages
make a special page not visible in FE, where you insert the search-plugin and include this special CE in the rendering of every page (use a CONTENT object in typoscript to select that special CE)
include and configure the plugin in typoscript. (see answer of Thomas Löffler)
I prefer option 2 as it is most flexible and does not need any special page or content IDs, which might change with time (option 3). It also can handle any kind of CE.
Option 1 needs manual fixing if there are changes in the plugin rendering after an update for example.
Option 4 is not possible for each plugin or CEs at all to inherit. If you can configure the plugin with typoscript it is a fine option because you do not need any record (from tt_content)
for option 2:
temp.inheritedContent = CONTENT
temp.inheritedContent {
table = tt_content
select.orderBy = sorting
// -- use your own column id: --
select.where = colPos = 100
select.languageField = sys_language_uid
slide = -1
}
Use a TYPO3 extension, which can be a copy (fork) of the newly developed version of macina_searchbox
Template Module: Add "Macina Searchbox" under "include static from extensions" .
Use this or a similar TypoScript to include it, where '6' in this example is the search page. Use your own page id instead.
Constants:
lib.macina_searchbox {
pidSearchpage = 6
}
Setup:
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/template/template.html
10.workOnSubpart = DOKUMENT
10.marks {
SUCHE < lib.macina_searchbox
LOGO = TEXT
LOGO.value = <img src="fileadmin/template/img/logo.png">
NAVI= HMENU
NAVI {
Then you can edit the Fluid template files in the folders below macina_searchbox/Resources/Private/ to modify the output of the searchbox. This method is necessary in order that the search result list will not be shown on the page. You must instead insert an Indexed Search plugin on your search page, which has id=6 in this example. SUCHE is the marker in the main template of the website. Use your own marker.
The easiest way is to copy the given plugin from indexed_search to a variable you use in your template.
When you e.g. use FLUIDTEMPLATE:
page.10 = FLUIDTEMPLATE
page.10.variable.searchBox < plugin.tx_indexedsearch
After that you can assign a separate template and make other modifications by changing page.10.variable.searchBox with the possible configuration here: https://docs.typo3.org/typo3cms/extensions/indexed_search/8.7/Configuration/Index.html
I have run into a problem selecting an item within Microsoft's CodedUI framework. I have a page full of items that can be added/removed via selecting a checkbox. The checkboxes do not have unique id on them, and I am having trouble selecting other than the first item when looking for a particular Tag/class combination. Is there some trick to doing this that isn't immediately obvious.
There are a couple different options here:
1. You could select the object by selecting the item related to it
<div id="parent">
<label id="checkbox1234">MyCheckBox</label>
<input checked="false"></input>
</div>
... could be selected as:
HtmlDiv parent = new HtmlDiv(browserWindow);
parent.SearchProperties["innerText"] = "MyCheckBox";
HtmlCheckBox target = new HtmlCheckbox(parent);
target.SearchProperties["TagName"] = "INPUT";
return target;
or
HtmlLabel sibling = new HtmlLabel(browserWindow);
sibling.SearchProperties["id"] = "checkbox1234";
UITestControlCollection col = sibling.GetParent().GetChildren();
foreach (UITestControl control in col)
{
if (control.ControlType.ToString().Equals("HtmlCheckBox"))
{
return (HtmlCheckBox)control;
}
}
You can use these test utilities created by Gautam Goenka. They worked wonders for me as far as identifying the content of an object and using it for assertions. Still, if you don't have any meaningful way of identifying the objects based on content, this won't help you either. When all else fails, add some useful identifying properties to the HTML.
I'm working with liferay portal 6.2. And I want to get the value of the text in a tag with alloy user interface.
exemple:
<div>
<p> Paragraph </p>
"value"
</div>
the desired result is: value
please help.
AlloyUI, being an extension of YUI3, uses get/set methods to access and manipulate the properties/attributes of the object (YUI3 Node / AlloyUI Node) that is returned when looking up elements from the page.
Some examples can be reviewed in this documentation as well as this documentation.
In general you'll need something unique (i.e. id, css class) to the div in order to fetch only that element. Once you have that element, divNode.get('text') will give you all of the text within the element. There is not a means to easily "skip" the paragraph contents within the div without the value being contained within some other markup. If you have control over the markup and can do this, that would be the best option. Otherwise you are left to using the replace function to strip out the paragraph contents from the text.
<script>
AUI().use('aui-base', function(A) {
var paragraphText = A.one('#myDiv>p').get('text');
var divText = A.one('#myDiv').get('text')
var onlyValue = divText.replace(paragraphText, "").trim()
console.log(onlyValue)
})
</script>
First of all, I'm working with GXT 2.2.5 and GWT 2.3.
I have a ListView that displays the items generated by a user. I want it to display the items already entered, or a single row that says "No Items Attached" if the store is empty.
I figure I could use the "tpl if" tag in the template, but how can I detemine the size of the store for comparison?
In other words, what value do I use for "size" in the following?
<tpl if="size == 0">
<p>No Items attached</p>
</tpl>
<tpl if="size > 0">
<tpl for =".">
...
</tpl>
</tpl>
Thanks!
GXT 2 XTemplates are based on JavaScript, so instead of keying off of size, use length, the name of the property that holds the size of a JavaScript array. In GXT 3, XTemplates were rewritten to work with any Java object, so expect the size method like you've written here.
Modified template from http://www.sencha.com/examples-2/#listview :
private native String getTemplate() /*-{
return ['<tpl if="length == 0">',
'nothing to show',
'</tpl>',
'<tpl if="length != 0">',
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{path}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'</tpl>'
].join("");
}-*/;