How to add styling to output text?

Question

Following code swaps the text after 5 second to some other text, which is implemented using JavaScript. I want to make the output text ( "outputtext1" and "outputtext2") look bigger like a heading, having orange color, and center aligned. How to do that?

The swapping of text works perfectly, there's no problem in the JavaScript code.

<html>
  <head>
    <style>
      div.textContent {
        display: none
      }

    </style>

    <div id="textMessage"></div>
    <div class="textContent">
      <h2>"outputtext1"</h2></span>
    </div>
    <div class="textContent">
      <h2>"outputtext2"</h2></span>
    </div>

    <script>
      var cnt = 0,
        texts = [];

      // save the texts in an array for re-use
      $(".textContent").each(function() {
        texts[cnt++] = $(this).text();
      });

      function slide() {
        if (cnt >= texts.length) cnt = 0;
        $('#textMessage').html(texts[cnt++]);
        $('#textMessage')
          .fadeIn('slow').animate({
            opacity: 1.0
          }, 5000).fadeOut('slow',
            function() {
              return slide()
            }
          );
      }
      slide()
    </script>
</html>

Please check this link:-http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript — Razia sultana, Nov 09 '16 at 14:11
Ofcourse : I tried to add css, but when I run it, it doesn't work. ( @Velimir ) — Jay Akbari Pixmercy, Nov 09 '16 at 15:11

score 0 · Answer 1 · answered Nov 09 '16 at 13:58

0

You can set some style thanks to simple css :

.textContent h2 {
  color:orange;
  text-align:center
  font-size: 40px; /* you can increase this value*/;
}

Becareful though because your HTML semantic seems incorrect :

<div class="textContent" ><h2>"outputtext1"</h2></div>

Notice the removal of the < span> tag. Notice also that this is very very simple use case of CSS, so if you need more about it, you better have a look at some documentation such as Mozilla one.

Hope this helped

answered Nov 09 '16 at 13:58

Cr3aHal0

809
4
11

With that display: none removed in that css , though it works but not on the text that is swapping. To get better idea , look at this : http://jsfiddle.net/KepBX/117/ – Jay Akbari Pixmercy Nov 09 '16 at 15:23

score 0 · Answer 2 · answered Nov 09 '16 at 13:59

var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
  texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()

.textContent {
  display:none;
}

#textMessage {
  font-size: 2em;
  color: orange;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>

Perfect. I was applying CSS to ".textContent" instead of "#textMessage". Works : http://jsfiddle.net/KepBX/118/ — Jay Akbari Pixmercy, Nov 09 '16 at 15:27

score 0 · Answer 3 · answered Nov 09 '16 at 13:59

0

You would want to edit the class, something like this:

<style>
div.textContent { color:orange;font-size:20px;display:none }
</style>

Just a suggestion, but you probably don't need to have so much nesting here:

<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>

Something like this would probably work better:

<h2 class="textContent">"outputtext1"</h2>
<h2 class="textContent">"outputtext2"</h2>

answered Nov 09 '16 at 13:59

raphael75

2,982
4
29
44

I had already tried this. but it doesn't work like that. Look : http://jsfiddle.net/KepBX/116/ – Jay Akbari Pixmercy Nov 09 '16 at 15:15
Try this - is this what you're looking for? http://jsfiddle.net/5L4dng2t/ – raphael75 Nov 09 '16 at 15:32

score 0 · Answer 4 · answered Nov 09 '16 at 14:03

var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
  texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html("<h1>"+texts[cnt++]+"</h1>");
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()

#textMessage {
  text-align: center;
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

<div class="textContent"><h2>outputtext1</h2></span> </div>
<div class="textContent"><h2>outputtext2</h2></span> </div>

There are 3 steps to your solution - Codepen here

1) Remove the unwanted "" from <h2>"outputtext1"</h2>. Keep it <h2>outputtext1</h2>

2) Centering & color can be done via CSS

#textMessage {
  text-align: center;
  color: orange;
}

3) Now the heading, you need to make a small change to your javascript -- $('#textMessage').html("<h1>"+texts[cnt++]+"</h1>");

function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html("<h1>"+texts[cnt++]+"</h1>"); //changed
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}

Saurav Rastogi · Answer 5 · 2016-11-09T15:32:38.467

You need to apply CSS to #textMessage, like:

#textMessage {
  font-size: 38px;
  font-weight: bold;
  color: orange;
}

var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
  texts[cnt++]=$(this).text();
});

function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()

#textMessage {
  font-size: 38px;
  font-weight: bold;
  color: orange;
}

body {
  padding: 20px;
}

.textContent {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textMessage"></div>

<div class="textContent" ><h2>"outputtext1"</h2></span> </div>
<div class="textContent" ><h2>"outputtext2"</h2></span> </div>

Hope this helps!

div.textContent { display: none } Is must. you forgot that, otherwise, perfect. Helped. — Jay Akbari Pixmercy, Nov 09 '16 at 15:31
@JayAkbariPixmercy Updated my answer, please have a look, if this answer helped you, you may accept it. — Saurav Rastogi, Nov 09 '16 at 15:33

How to add styling to output text?

5 Answers5