This question already has answers here:
Changing a CSS rule-set from Javascript
(9 answers)
Closed 3 years ago.
I use in the head of a page a style tag with definition of the styles used by elements in the body using the ‘class’ attribute.
Example:
.itemColor { color:red; }
Is it possible, with javascript, to change the value of the color property in the classes defined in the tag style?
For your example, you would first select your item, and then change its style:
myitem = document.getElementById("itemColor") // searches in all children and grandhildren of document
myitem.style.color = "blue";
You can do the same for the elements in getElementsByClassName and getElementsByTagName, which are HTML collections.
With the following, you can override all elements' properties having said class.
myitems = document.getElementsByClassName("itemColor") // HTMLCollection
[].forEach.call(myitems, function(subitem){
subitem.style.color = "blue";
}
);
console.log(myitem.style) to see all attributes you can change.
Related
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>
This question already has answers here:
Set object property using reflection
(10 answers)
Closed 8 years ago.
I want to assign value to the property of the object of class. I have taken the list of property names using GetProperties();
PropertyInfo [] props;
props=typeof(Import_Column).GetProperties();
I have created an object
Import_Column myobj=new Import_Column();
I want to do something like
myobj.props[2]=value; //giving me error
How can i do it? is there any different approach?
You need to set the value to the property of the current object instance
string propertyName = "TheNameOfThePropertyToSet";
myobj.GetType().GetProperty(propertyName).SetValue(myobj, value, null);
or in your case you could use
myobj.GetType().GetProperty(props[2].Name).SetValue(myobj, value, null);
There is no documentation in the API doc for the constructors. I would like to understand the purpose/use cases for SvgElement.tag() .
The SvgElement.tag(String tag) constructor creates a new SvgElement for a corresponding tag value.
For example:
var foo = new SvgElement.tag('view');
print(foo is ViewElement); // prints 'true'
would create a new SvgElement specified by the <view> tag.
This means that the above code is the same as:
var bar = new ViewElement();
print(bar is ViewElement); // prints 'true'
See also the tag constructor from the superclass Element.
Use cases for this constructor are places where you get the value of the tag from text and want to generate a new element of that tag value.
You might get the tag from parsing the DOM, or maybe from a different API. The tag constructor is a way to write DOM code in a "Darty" way (with objects and classes) while being able to work with DOM elements via text.
In many cases, it is preferable to create this Element object instead of say, using innerHtml to set the DOM inside of another Element.
Compare:
var someTagName = 'view';
var someDomNode = query('#id');
// BAD
someDomNode.innerHtml = '<$someTagName> ... </$someTagName>';
// GOOD
var myElement = new SvgElement.tag(someTagName);
someDomNode.append(myElement);
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
I'm using Dialog and would like to style all my cells. I have a background image, and in the samples I can see how you can use a StyledStringElement to use that image.
However, in real use some sections use other elements. For example the last element in one section is a RootElement - but it has no BackgroundUri property to set. The same would go for boolean elements.
I found this question - What's the best way to customise all monotouch.dialog TableViewCells to the same style (Background, etc..)? which is a similar question a year and a half back. The UIAppearance styling mentioned does exist for tablecells but does not work with MTDialog. krtrego's answer to this In monotouch.dialog can RootElement be easily styled? question purports to do the job, but no styling occurred when I implemented it.
Is there now any improved way to do this? Implementing my own 'styled' versions of these other control types would be a big effort and looking at the styledstringelement this is beyond my current skill level.
Here's an example of what I'd like to achieve (the shadow below the 'tags' cell, but the element is actually a RootElement with a set of radio options beneath it). Removing the default grey lines etc is easy enough, but putting a subtle shadow on the bottom cell of each section is what I cannot work out.
Many thanks!
PS. With a normal MTDialog screen with cell backgrounds and borders removed, there is a subtle white shadow/line beneath each section as it is. If I could just recolour that I'd be a long way to where I want to be...
Subclassing the element will let you style it via overriding the GetCell method, but that gets pretty tedious. The best solution I have come across is to to make a custom DialogViewController by subclassing it, and overriding the CreateSizingSource method with your own SizingSource and GetCell() methods using the images you want for each scenario of a cell (top, middle, bottom, alone). Its a bit of code and my example wont handle uneven rows, but it is the only solution I have seen that does not modify the MT.D source code.
Here is what you would override in your DialogViewController subclass:
public override Source CreateSizingSource(bool unevenRows)
{
return new CustomSource(unevenRows);
}
Then you would make a custom source class:
public class CustomSource : Source
{
public CustomSource(DialogViewController parent) : base (parent)
{
}
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
var theCell = base.GetCell(tableView, indexPath);
if (RowsInSection(tableView, indexPath.Section) == 1) //use one with top and bottom rounded
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundFull);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundFullActive);
} else if (indexPath.Row == 0) //top only
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundTop);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundTopActive);
} else if (indexPath.Row+1 == RowsInSection(tableView, indexPath.Section)) // bottom only
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundBottom);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundBottomActive);
} else //anything in the middle
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundMiddle);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundMiddleActive);
}
return theCell;
}
}
Theme is just a static class that returns UIImages, similar to the example Field Service app from Xamarin. So here I have made 8 images total. 4 to represent the top, middle, bottom and alone for an element. Each has different rounded corners to appear correct. And then a "highlighted" version of each for when its touched.
The big drawback here is you have to do this for every different styled controller you would need. If you are ok with modifying the MT.D source code, you can get a different solution that will allow you to control it at the Section level here: http://fastchicken.co.nz/2012/05/20/earnest-debrief-visual-styles-in-ios-apps-uiappearence-custom-sections-in-monotouch-dialog/
Which has the same effect, but you only need to subclass Section for each different style, which makes including multiple styles in one Root easier. A pull request was made for this change, but Miguel favored the first solution instead, seen here: https://github.com/migueldeicaza/MonoTouch.Dialog/pull/180