I'm working on a discount item, and I'm trying to show both the original price and the new price. I want the original price to be crossed-out and faded. I already have the line-through, but I can't figure out a text fading style. Does CSS have anything like that?
Thanks!
Here's my asp code:
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You can use opacity for that. Its value could be between 0 and 1, like opacity: 0.5.
<div ID="OriginalPrice" class="pricing-price">
<span class="price-unit">$</span><asp:Label style="text-decoration: line-through;opacity: 0.5;" ID="lblOrigPrice" runat="server">This is a test</asp:Label><span class="price-tenure">/mo</span>
</div>
You may want to very the value slightly in order to get what you want.
Related
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
I have the following type of element,
<td class="x-btn-mc">
<em id="ext-gen141" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"/>
<span>Legacy CaseMon</span>
</button>
</em>
</td>
In this I am unable to select exact co-ordinates of drop down arrow,
And the xpath for all the list of options are also same( <//*[#id='ext-gen141']> )
Only thing varies is Span (Say I have to select "Cases",then span value becomes <Span>Cases</Span>)
Can anyone please help me choosing the different value
Thanks..
I'm using the small module Link Badges to display a badge with the amount of flagged nodes next to a link to the View in question. It works great and I've styled the badge to my needs. This is the current HTML code:
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-menu_badges_execute_view">0</span>
</span>
</a>
Now, I'd like to display the badge a little bit differently (other colors etc.) when the value is 0. I thought about doing this by adding a new CSS class link-badge-zero to the value.
<a class="menu__link menu__link link-badge-wrapper">
<span class="link-badge-text">My View</span>
<span class="link-badge-badge-wrapper">
<span class="link-badge link-badge-zero link-badge-menu_badges_execute_view">0</span>
</span>
</a>
How can I achieve this?
If you just want to add a class if the value inside your span is "0", give this a try
JQuery:
if($(".link-badge").text() == "0"){
$(".link-badge").addClass("link-badge-zero");
}
Here is a fiddle
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I have the tag
<span class="block" style="width:12px;height:17px"> tttt ttt ttttt</span>
I want to highlight only . How can I do it using only CSS?
Well there is no such way to select the space, but if for some reason you really want to do it then, you can try something like this:
<span class="block" style="width:12px;height:17px"><span style="background-color:#F00;"> </span>tttt<span style="background-color:#F00;"> </span>ttt ttttt</span>
Put the within a span like
<span style="background-color:#F00;"> </span>
You can't do this with only CSS; you will need to wrap each non-breaking space in a span and give that span a background color. Wikipedia does this in their article for example:
In Unicode, it is encoded as <span class="nowrap">U+00A0</span> <span class="unicode" style="background:lightblue"> </span> <span class="smallcaps" style="font-variant:small-caps;">no-break space</span>