Is it possible in CSS (only) to hide some text of a string?
I know there these attribute-selectores like:
[att^=val] – the “begins with” selector
But for instance, having this:
<div class="some_random_text">
This is a default text
</div>
I want to (display: none) only a certain substring - in thise case "default". I know how to do it with JS, but I'm looking for a CSS-solution only (if there is any).
Even though I guess it isn't possible to manipulate the DOM via CSS, which would be neccessary to have something like:
this is a <span class="hideThis">default</span> text
why would you need this and where does it occur?
For instance in a CMS (in my case OXID). You can add a title to a specific payment-method. Here I have
paypal
paypal (provider1)
paypal (another dude)
I want to have only PayPal visible in the frontend. The other PayPal-Paymenttypes have to remain however. Naming them all PayPal just leads to confusion.
there is the content-property. Is it somehow managable with that?
Again, no JS :-)
To answer your question - no, it's not possible using only CSS.
You can;
Edit the HTML as you suggested
this is a <.span class="hideThis">default<.span > text
Use JS to alter the elements innerHTML value
Use a pre-processing language (like PHP or ASP, whatever you are able to use) to reduce the string to a substring.
Sorry if that's not the answer you wanted, but those are your options.
It it not possible. The only thing that can actually modify the inside text is the content property. Assuming something changes in your dom, you can have rules like:
.some_random_text:after {
content: "This is a text";
}
other_select .some_random_text:after {
content: "This is a default text";
}
But sincerely, I don't get the point, as JS and consors are made for that.
It's not possible, here's the documentation on selectors: https://www.w3.org/TR/css3-selectors/#selectors
Related
New to this, bare with me please.
I've started having fun with HTML code doing offline documents. I just found out that I could easily change my font, in the head, by adding this:
<style type=text/css>
mkf { font-family:'Courier'; color:red; }
</style>
Then, as I go to add code to , every time I want to change the font of a select group of word with the addition of the color red, I just need to type
<mkf>words here</mkf>
Wonderful! It saves me so much time. But then I got to wonder, what if I wanted to add a link to a word. For example, instead of typing all of this out:
<mkf>Example1</mkf>
I would simply be able to parse whatever text I inputted between, let's say,
<linkandfont>Example1</linkandfont>,
which would basically create a link to the file "to_do_list.pdf".
I've tried to find a name or term for this so that I can study and learn more, but I have not found it yet.
Thank you.
Why are you not using classes instead? These achieve the same thing. For example;
<style>
.mkf {
font-family:'Courier';
color:red;
}
</style>
<div class="mkf">test</div>
However, to properly answer your question, what you want is ABSOLUTELY possible in HTML5 and CSS3. And I've used such methods in certain projects of mine (just know this isn't entirely Kocher or conventional).
mkf {
font-family:'Courier';
color:red;
}
<mkf>this is working</mkf>
As for making <linkToSomething>Click Here</linkToSomething> not as easy. You would definitely need JavaScript etc to handle all that. You won't achieve it in CSS and HTML alone.
You cannot. Only way to create a link in HTML is by typing description. You could also shorten by using JavaScript but that's not HTML.
The way you changed the color in head is part of styling or CSS, so you could give a class to a tag like <a class='redlink' href='.. and define that class in head like you did with mkf : .redlink {color:red} or if you want all your links to be red then you could give color to a in head style: a {color:red;}
By typing <mkf> in body I guess you created custom tag which is not part of standard HTML tags, more proper way would be using class to a standard tag like div or p.
I'm trying to remove text (with a specific class) from MT:EntryBody. More specifically, I'm trying to remove headers from my summary pages.
On this page, http://www.taconic.com/taconic-insights/microbiome-and-germ-free/, in the middle of the first entry there is text that says "Defining Rodent Health Standards". This makes no sense in the summary (because I'm stripping HTML - obviously). SO I want to just remove this line from the summary. I tried using a tag as well as a CSS hidden class but I can't get this to work properly.
Thoughts?
To clarify, you want to remove this in the entry body?
<h3 class="hidden">Defining Rodent Health Standards</h3>
Then, before stripping HTML, you need to use a regexp to catch and remove those blocs. Then, you can remove HTML.
See https://movabletype.org/documentation/appendices/modifiers/regex-replace.html
The easiest thing you could do is to replace:
<$mt:EntryBody$>
With:
<$mt:EntryBody replace="Defining Rodent Health Standards",""$>
Glad to answer also other questions that you might have!
In a website, is there any way of changing text attribute of keyword, like product name, in an entire website without using any kind of html tags wrapped around those instances? I may require to define those keywords in server side environment or there may be a server side script in which I may need to define. Or can we use client side Javascript like some jquery plugin?
You can use Javascript on the client side to achieve this.
Drawing from this answer the following is a simple example:
Sample Jsfiddle
JS:
$('*').contents().each(function(){
if(this.nodeType === 3) {
$(this).replaceWith(this.wholeText.replace(/target/g, 'replaced'));
}
});
HTML:
<h1>target</h1>
<p>Here it is: <span>target</span> and target</p>
How can I update the text fields with HTML? I have a page with some textfields, and I need to update these fields at a specific time. I used the value property to display the default values, but how can I change the values later?
Thank you
I am forcing a JavaScript answer, since there is no way it can be done with only HTML.
Snippet:
<input type="text" id="textboxid" />
<script type="text/javascript">
var txtBox = document.getElementById("textboxid");
txtBox.value = "new value";
</script>
You need to use javascript in order to achieve this. I recommend jQuery, as it prevents most cross-browser "quirks" and "gotchas". Specifically, you're looking for http://api.jquery.com/html/ or http://api.jquery.com/val/.
JSFiddle: http://jsfiddle.net/dEUH5/
First of all, at the very least, HTML is used for Mark-Up, CSS is for styling, and JavaScript is for functionality. I suggest that if you want to add functionality and interactivity to your website, you look up how to use JavaScript. This will allow you to add the functionality you wish for your textbox, as you wished.
You can't do this with HTML, you could with PHP.
I'm sure someone will type out the code, but go to: http://uk.php.net/.
This question is way to broad too.
I was recently corrected, and according to the HTML4 DTD, it is legitimate to use a fieldset outside of a form:
http://www.w3.org/TR/html401/sgml/dtd.html#block
Previously I had not known this, and wonder if anyone can think of a legitimate use case for doing so. I feel like using one to decorate would be frowned upon by most designers. So is there a legitimate use case, or can you link to a site where this has been found appropriate and used as such?
I used a field set to decorate sections when printing documents. For example an invoice might have a Bill To and a Ship To, and drawing the frame around them with the legend text embeded in the frame can look really slick.
I think its more than legit to use it for decoration. Its simple and elegant and with the use of tag its pretty nice.
Check w3schools example out
I don't think there is a legitimate case to semantically have a fieldset outside a form element, since a fieldset is a set of (input) fields - the clue's in the name! If you have input fields, you will likely always have a form, even if you're not posting back to the server.
I have occasionally used from a presentational aspect, because the fieldset+legend combo is impossible to replicate exactly in CSS, specifically, the broken line behind the legend.
It is acceptable to use all form field control outside of a form element, including fieldset.
This is appropriate wherever you have fields that only talk to JavaScript, instead of ever being submitted back as to the server side.
(This didn't originally used to work in Netscape 4, but that's hardly a concern this century...)
Well, using it to decorate can be frowned upon by designers AND be legitimate, so there is a legitimate use case.
A form is simply a container for the fields you wish to submit via post back. Most regular site pages may not even have one. That said, using a fieldset as a styling tag is legitimate and has nothing at all to do with whether a form tag exists or not.
You can use a fieldset to wrap multiple form controls that you need to disable together:
<fieldset disabled>
<input type="text" placeholder="disableable input" />
<button type="button">Some action that needs to be disabled</button>
<button type="button">Some other action</button>
</fieldset>