I have the following code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"
xml:lang="en" lang="en">
<body>
<wicket:panel>
<div wicket:id="serviceListContainer">
<table>
<tr wicket:id="serviceListView">
<td>
<span wicket:id="service.name"></span>
</td>
<td>
<span wicket:id="service.state"></span> <!-- I WANT TO COLOR THIS PART IN RED! -->
</td>
</tr>
</table>
</div>
</wicket:panel>
</body>
</html>
How can I change the color of the output text that will replace "service.state"? I tried with <font color="red"> but it didn't make any difference.
Thanks!
Other answers have indicated how you can add the style="..." attribute in the HTML template. If, on the other hand, that you do not wish to do this statically (say, you need to calculate the color and then add it to the component), you should add an AttributeModifier to the Component1.
Example (untested):
Label l = new Label("service.state", ...);
IModel<String> colorModel = new AbstractReadOnlyModel<String>() {
public String getObject() {
return "color: red;"; // Dummy example
}
}; // Some model, holding a string representation of a CSS style attribute (e.g., "color: ...;") based on some date and/or calculation
l.add(new AttributeModifier("style", true, colorModel);
You could even use a SimpleAttributeModifier if you don't need the pull-based model:
Label l = new Label("service.state", ...);
String styleAttr = "color: red;";
l.add(new SimpleAttributeModifier("style", styleAttr));
1) Provided that setRenderBodyOnly(true) has not been called. That would remove the wrapping <span> element from the output.
From W3Schools:
The <font> tag is deprecated in HTML 4, and removed from HTML5.
The World Wide Web Consortium (W3C) has removed the tag from
its recommendations. In HTML 4, style sheets (CSS) should be used
to define the layout and display properties for many HTML elements.
Use styles, even if it is inline styling, instead:
<span style="color:red">this is red text</span>
If you're using Wicket you'll want to make sure you're not using setRenderBodyOnly(true) on the Component with id service.state, as this would strip the <span> tag with the style.
<span wicket:id="service.state" style="color:red"></span>
or better is to use proper css classes
Related
Hello. First of all, sorry for eventual English mistakes, since I'm Brazilian:
I have a ecommerce based on magento 1.9.2.2, and the company that hosts it does not allow the user to access the server files (header, body, footer, etc). You can only edit the website via css and html external scripts.
So there's this div:
<p class="old-price">
<span class="price-label">De:</span>
<span class="price" id="old-price-1046">
R$2.500,00 </span>
</p>
<p class="special-price">
**<span class="price-label">Preço Promocional</span>**
<span class="price" id="product-price-1046">
R$2.299,90 </span>
</p>
Which I just need to replace the text "Preço Promocional" (within the "price-label" class) for "Por:"
So far I've tried:
document.getElementsByClassName('price-label').innerHTML = 'Por:';
javascript:document.getElementsByClassName('price-label').innerHTML = 'Por:';
javascript:void(document.getElementsByClassName('price-label').innerHTML = 'Por:');
Thanks for any help in advance...
getElementsByClassName returns a collection and not a single element. In your example you have two elements with the same class name, you'd access the first one with the index 0 and the second one with the index 1.
<p class="old-price">
<span class="price-label">De:</span>
<span class="price" id="old-price-1046">R$2.500,00</span>
</p>
<p class="special-price">
<span class="price-label">Preço Promocional</span>
<span class="price" id="product-price-1046">R$2.299,90</span>
</p>
<script>
document.getElementsByClassName('price-label')[1].innerHTML = "Por:";
</script>
This code will change the second one that says "Preço Promocional" for "Por:"
//EDIT
Now that I've seen the full page, in javascript you could achieve this with:
<script>
document.querySelectorAll('.special-price .price-label').forEach(function(node) {
node.innerHTML = 'Por: ';
});
</script>
This will target all elements with the class price-label inside elements with the class special-price, loop through each and change their contents. This will change the main, related and recommended products as long as it's put after they are created.
As a preferred alternative, try using the following css:
<style>
.special-price .price-label {
display:none !important;
}
.special-price::before {
content: 'Por: ';
}
</style>
This should hide the content and then prepend the text on the parent and doesn't required to be placed at the end to work.
// EDIT (To address new information added in the comments for this answer)
In order to avoid changing the homepage, you can use the :not() css' pseudo-class (info here) to exclude those instances of special-price that are found within the homepage. I searched for and id or class that was unique to the homepage (found the class cms-home on the body tag for the homepage) so I'm using that to both exclude and target the different price-labels. I also changed the font-size to match the original one:
<style>
// this targets price-label that's NOT in the homepage
body:not(.cms-home) .special-price .price-label {
display:none !important;
}
body:not(.cms-home) .special-price::before {
content: 'Por: ';
font-size:15px;
}
// this targets price-label on the homepage
.cms-home .special-price .price-label {
display:none !important;
}
</style>
If I understood correctly, on the homepage you're simply hiding the text, while on the other pages you're replacing it with "Por: ", this should do it (hopefully) unless there's another special case I'm unaware of.
Try this
<script>
$('.special-price .price-label').text('Por:');
</script>
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
<! DOCTYPE html>
<html>
<head>Sample</head>
<body>
<div class="panelBody">
<div class=panel-section></div>
<div class=panel-section style="display:block"></div>
</div>
</body>
</html>
In given Snippet there are two elements with same class. I have to select the element which does not having style attribute.If i tried to search with panel-section class its giving ambiguity error.So how to select div element which does not having style attribute.i.e
<div class=panel-section></div>
Try this:
//div[#class='panelBody']/div[not(#style)]
Explanation: First find the div with class panelBody, then find child div elements in the panelBody div which doesn't contain #style attribute.
Use findElements method if there are more than one div element without #style attribute, otherwise findElement() method would suffice.
Since there are more than one elements with same class name, you need to use Selenium's driver.findElements() method. I have tried getting this element, but I wonder if it is clickable. Only element can actually be useful here is text Sample.
Check below code. Let me know if it is similar to what you are looking for.
List<WebElement> linksize=null;
String links[]=null;
linksize = driver.findElements(By.cssSelector("div[class=panel-section]"));
int linksCount = linksize.size();
links= new String[linksCount];
for(int i=0;i<linksCount;i++)
{
links[i] = linksize.get(i).getAttribute("style");
if(links[i].isEmpty())
{
System.out.println("I am div without style");
linksize.get(i).click();
}
}
Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.
How can I include a non-breaking space ( ) within a Razor helper method? Here's the helper in question:
#helper RenderClipResult(Clip clip, IList<string> searchTerms)
{
<div class="result">
<!-- other clip stuff -->
#if (clip.ThirdPartyMaterials != null && clip.ThirdPartyMaterials.Count > 0)
{
<p>
<span class="heading">Third Party Material</span><br/>
#foreach (var material in clip.ThirdPartyMaterials)
{
#AddElement("Description", material.Description, searchTerms) #AddElement("Cost", material.Cost, searchTerms)
<br />
}
</p>
}
</div>
}
AddElement is another custom helper. The output I'm looking for is something like this:
Third Party Material
first entry
second entry
third entry
I could wrap the AddElement line in a span tag for styling but it's another html tag and css rule, just to indent some text by a single character width. Might have to go that way as Razor is not able to parse the space
Add #: before your non-breaking space html code
The second option is to use construction: #Html.Raw(" ") . This also can be user with multiplied nbsp-signs, so you can put result of the string builder to RAW function.