Is is possible to select part of a text using just CSS selectors?
For example:
<p id="myparagraph">
Your order id is 7654. Thanks for your order.
</p>
I now I can select text from paragraph via $('#myparagraph').html()
But is it possible to select only the numbers 7654 from that text using just CSS selectors?
I'm not in control of the source HTML, so unfortunately I cannot alter the text.
In this case you have use span tag like this
<p id="myparagraph">
Your order id is <span class="number">7654</span>. Thanks for your order.
</p>
After then you can write your css code by calling the selector like this.
span.number {
color: red;
}
Related
I'm implementing a bootstrap 3 carousel on kentico 9 and need some help with automatically hiding the carousel control (including the circle indicator and the next/previous arrow) if there's only one item left, if possible.
What I've done for the carousel was setting up a new page type for this in which each banner is a page in the content tree under /hero/ folder. Then used 2 repeaters: the first one displays the circle indicator; the second one displays the banner info. All worked well.
Here's how the indicator repeater is set up:
Content before: <ol class="carousel-indicators">
Content after </ol>
Item transformation: <li data-target="#hero-banner" data-slide-to="<%# DataItemIndex%>" class="<%# (DataItemIndex == 0 ? "active" : "" ) %>"></li>
It means the first circle is always there. How to hide it and get rid of the <ol> tags in content before/after?
The next/previous arrows are again in the webpart zone content after, which has this html:
<a class="left carousel-control" href="#hero-banner" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#hero-banner" data-slide="next"><span class="icon-next"></span></a>
</div> <!--/#hero-banner-->
Using content before/after is like hard-coding it onto the page, but I don't know how to make it displayed dynamically and automatically only when we have more than one item. Could you help?
you can use <%# DataItemCount %> One of the [Transformation methods][1]
[1]: https://docs.kentico.com/display/K8/Reference+-+Transformation+methods to determine how many items there are. Then just have the html added in if there is more than one. Something like
<%# If(DataItemCount > 1,'html for more than one item','html for only one') %>
Of course, if you are using the envelope before / after to show arrows, you could also use jquery to determine how many items are there & hide the arrows based off that.
$(function(){
if($(".carousel-indicators li").length == 1){
$(".left.carousel-control").hide();
$(".right.carousel-control").hide();
}
});
I'm trying to customize the form layout of edit/add/del dialogs but the problem is that the height of my custom fields are not following the standard height (from the fields created automatically by jqgrid). Here is an image:
What I want is that the height of td.DataTD from my custom fields 'Responsável' and 'Componente' keep the same as the other fields. Here is the important part of my code:
beforeShowForm: function(form) {
$('#tr_responsavel').html('<td class="CaptionTD">Responsável</td><td class="DataTD"> <table><td><select role="select" id="resp" name="responsavel" size="1" class="FormElement ui-widget-content ui-corner-all"><option role="option" value="1">Usuário</option><option role="option" value="2">Área</option><option role="option" value="3">Grupo</option></select></td><td><input id="inputResponsavel" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
$('#tr_componente').html('<td class="CaptionTD">Componente</td><td class="DataTD"> <table><td><input id="comp" type="text" role="textbox"></td><td> <img src="img/search.png" width="25" height="25"></td></table></td>');
},
Why you replace existing jqGrid fields with another HTML code? Additionally it seems strange to set <table> inside of the field 'Responsável'. How you imagine that jqGrid get the results from such custom fields? Is it not more easy to append or prepend standard input fields of the Add/Edit form with additional information. In the case the standard fields with the standard ids will stay unchanged and you will have less problems. jqGrid will get the information from the fields without any problems. If one uses jQuery UI Autocomplete or jQuery UI Datepicker controls it do that.
If you really need custom field you should follow the documentation and use edittype: "custom". Look at the demo from the answer for more information.
I have a collect task in Sharepoint 2010 with a Enhanced Rich Text box. In the list it shows the p and div tags.
<div class="ExternalClass1458740DC98941C3A3589359A3017AAA"><p>Approved - Rev D</p></div>
This is the field where the text is coming from.
<td width="75%" class="ms-formbody" >
<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="DocCtlAdmin_x0020_Comment1234567" __designer:bind="{ddwrt:DataBind('u',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(#ID)) , '#DocCtlAdmin_x0020_Comment1234567')}"/>
<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="DocCtlAdmin_x0020_Comment1234567" ControlMode="Edit"/>
</td>
Any insight as to why or how to remove would be appreciated
Simple answer is: In your display view add disable-output-escaping="yes" to your XSL statement like so:
xsl:value-of select="#CMImplPlan" disable-output-escaping="yes"
This will remove character output escaping for HTML characters.
Issue is you are using RichHTMLField to get the input from your end users for this field. So sharepoint adds some HTML tag.
but
when you are displaying you are using FormField, which is text based, so it shows all the HTML tags also.
So solution is :
1. Use RichHTMLField for both input and display
2. Use FormField/ Simple textbox for both input and display
3. Write a custom control / control extender to clean all the HTML before outputting it
4. Also a less recommended solution will be to search this tags on page via jQuery and remove them.
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>
When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>