As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I have a paragraph or div.
HTML
<p style="color:red;">Change color randomly</p>
this code will show the
but I want this type of output using CSS any idea
Thanks
You can't do this with pure CSS where it's really random, you'll need some JavaScript for that. I created a little demo that also uses jQuery & it generates different colours each time you reload the page.
HTML
<p>Change color randomly</p>
JavaScript
// Define some colours
var colours = [
"red",
"orange",
"yellow",
"green",
"blue",
"purple"
];
// Retrieve the words
var text = $("p").html().split(" ");
// Empty the elment
$("p").empty();
// Iterate over the words
$.each(text, function(i, word) {
if(i != text.length) {
word += " "; // Add space after word
}
// Get random color
var colourIndex = Math.floor(Math.random() * colours.length);
$("<span>")
.html(word)
.css("color", colours[colourIndex])
.appendTo($("p"));
});
JSFiddle.
There is direct pseudo class to style the first-letter but not the first word, so you need to add any inline elements to get it styled.
Use nth-child with span tag
<p style="color:red;"><span>Change</span> color <span>randomly</span></p>
span:nth-child(1){
color:green
}
span:nth-child(2){
color:violet
}
DEMO
Pure CSS is not possible. You will have to use Javascript to code this feature. Here is a link that probably helps you to get started: http://paulirish.com/2009/random-hex-color-code-snippets/
Below css will do it.
<p style="color:red;"><span style="color:#909">Change</span> color <span style="color:blue">randomly</span></p>
Related
There are situations where the first character is different from first letter.
See this:
<style>.sizer:first-letter { font-size: 50px; }</style>
<span class="sizer">?HI ALL</span>
By using :first-letter pseudo selector the browser seems to take ?H, so it's editing the size of the first 2 characters.
How to set it up CSS to take only the question mark (or anyway the first character whatever it is)?
Like #ChenBr wrote seems that with CSS it's impossible.
So, for whoever is groping in the dark like me the only one way it's JS.
The way with JQuery
$(document).ready(function() {
selector = $(".sizethis");
for (i=0; i<selector.length; i++) {
selector[i].innerHTML = '<span class="yourstyle">'+selector[i].innerHTML.trim().substr(0,1) + '</span>' + selector[i].innerHTML.trim().substr(1,selector[i].innerHTML.trim().length);
//console.log(selector[i].innerHTML);
}
});
This question already has answers here:
How do I style a specific word with CSS in an HTML element?
(4 answers)
CSS "word" selector? [duplicate]
(4 answers)
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
I have an HTML element that contains a list of synonyms. I only want the first 5 synonyms to be displayed.
In the example shown below, can I use CSS to hide everything after and including the 5th comma for each element with the "synonyms" class?
Example:
<div class="synonyms"> talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose </div>
This cannot be done with CSS, but you can use JavaScript to replace the textContent of those elements.
document.querySelectorAll('.synonyms').forEach(d => {
d.textContent = d.textContent.split(", ").slice(0, 5).join(", ");
});
<div class="synonyms"> talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose </div>
This question already has answers here:
Find and replace HTML tags
(3 answers)
Closed 4 years ago.
I need to replace all HTML tags of one kind in a string with another, e.g., replace all <i> tags with <em> tag.
What's the best way to effectively change:
"<p><i>Random stuff here...</i></p>"
to the following?
"<p><em>Random stuff here...</em></p>"
There are millions of such strings, so a solution taking complexity into account would be nice.
You can make use gsub with block
string = "<p><i>Random stuff here...</i></p>"
string.gsub(/(<\/?)i(>)/) { "#{$1}em#{$2}" }
#=> "<p><em>Random stuff here...</em></p>"
Explanation:
Match an i html opening or closing tag and replace it with em
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have this HTML:
<form action="mypage.php" method="post"
onsubmit="return confirm('Are you sure you want to submit this form? Submitting this form has serious consequences and you should definitely think long and hard before doing it.');">
I want to keep my code at or below 80 characters wide. How can I split this up into multiple lines while retaining the exact same functionality?
I'ld create a Javascript section that defines a function that you call from the form:
<script type="text/javascript">
function formSubmit() {
return confirm('Are you sure you want to submit this form? Submitting' +
' this form has serious consequences and you should ' +
'definitely think long and hard before doing it.');
}
</script>
the form:
<form action="mypage.php" method="post" onsubmit="formSubmit()">
This gets your Javascript out of you HTML form and can be clearly broken where you like.
Do as you want. It is not important to the HTML as long as you avoid doing this for blocks like <PRE>. There's lot of tools like HTML Tidy, HTML beautify, HTML format you could google for and try. Or hit ENTER by hand from time to time
EDIT
I seem to not really get the question at first. If you need to split the JS arguments, slice the strings into smaller blocks and then concatenate it back using +, so instead of
alert('long line here');
you cold write:
alert('long ' +
'line ' +
'here');
but it would be better to separate JS from HTML so your onSubmit should calling the function, instead of holding the end JS code.
I would definitely recommend removing the inline Javascript and keeping things separated. You could even go so far as to remove the onsubmit function and just capture the event in your Javascript itself.
You could break up the string and concatonate it again as has been proposed to get a quick solution, but if you would like to style the confirmation box even more, I would suggest looking into something like http://onehackoranother.com/projects/jquery/boxy/ or http://jqueryui.com/dialog/#modal-confirmation for additional solution options.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
As I was writing another switch in Eclipse, I once again came across a rather weird (to me, at least) default indentation, which is applied to 'switch' statements:
switch (i) {
case 1:
...
case n:
...
}
I tend to prefer another way:
switch (i) {
case 1:
...
case n:
...
}
Which way is more readable and eye-pleasing for you? I'm still not hundred percent determined what's best for me, so I'd like to stick to what's best for other people who would read my code.
BTW, you're free to close this question if this is too subjective. :)
According to the "official" Java Code Conventions, it's the first variant (no additional indentation for case).
I prefer the second way as well. But it is more important to stay consistent within a particular application and/or within a particular team than it is to indent one way or the other.
I tend to indent all control structure bodies a single (4space) tab like so:
switch (i)
{
case 1:
...
case n:
...
}
I consider the switch to be the outer control structure and the case directives part of the body(even though they are part of the control structure).
I would then further tab indent each case like so:
switch (i)
{
case 1:
do_something();
case n:
do_something_else();
}
I find this to be the most readable format for the switch case construct.
As jkohlhepp has mentioned conformity to the code style conventions of the project you are working on is the most important thing, if you are working on a project that has none, it is worth developing some.
I use second way:
switch (i) {
case 1:
...
case n:
...
}
The first is the standard switch case indentation.
switch (i) {
case 1:
.... // Here you can write more code in a row than using the second way
break;
case n:
....
break;
default:
....
break;
}
Notice the new inserted line between switch (i) and case 1:
The first method makes logical sense (to me), however I also prefer the second method. I think most of us are conditioned to expect that code inside braces will be indented.