CODEWITHSUNDEEP
jquerycss
MarksCode
MarksCode

Reputation: 8604

Make headers appear on different lines

I'm trying to add a div with the text 'Achievement Unlocked' appear on a webpage with the 2 words being on separate lines. I've tried numerous things but they keep appearing on the same line.

My code looks as such:

var award = document.createElement('div');  // Holds text
var text = document.createElement('h3');    // contains 'Achievement'
var text2 = document.createElement('h3');   // contains 'Unlocked'
$(text).text('Achievement').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-cell',
    'font-size':'150%'
});
$(text2).text('Unlocked!').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-cell',
    'font-size':'150%'
});
$(award).css({
    'height':'200px',
    'width':'200px',
    'background-color':'#cce6ff',
    'position':'fixed',
    'bottom':'20%',
    'left':'50%',
    'transform':'translate(-50%, 0%)',
    'border':'5px solid #004080',
    'border-radius':'100%',
    'display':'table'
}).fadeIn(500);
$(award).append(text, text2);

Has anyone got an idea of how I can make them on separate lines one after the other in the middle of the div?

Upvotes: 0

Views: 26

Answers (2)

Ahmed Salama
Ahmed Salama

Reputation: 2825

Just add this line document.body.appendChild(award);

https://jsfiddle.net/ytkkbnp1/2/

 var award = document.createElement('div');  // Holds text
var text = document.createElement('h3');    // contains 'Achievement'
var text2 = document.createElement('h3');   // contains 'Unlocked'
$(text).text('Achievement').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'bottom',
    'display':'table-cell',
    'font-size':'150%'
});
$(text2).text('Unlocked!').css({
    'color':'#660029',
    'text-align':'center',
    'vertical-align':'middle',
    'display':'table-row',
    'font-size':'150%'
});
$(award).css({
    'height':'200px',
    'width':'200px',
    'background-color':'#cce6ff',
    'position':'fixed',
    'bottom':'20%',
    'left':'50%',
    'transform':'translate(-50%, 0%)',
    'border':'5px solid #004080',
    'border-radius':'100%',
    'display':'table'
})
document.body.appendChild(award);
$(award).append(text, text2);

Upvotes: 1

hsh
hsh

Reputation: 1855

use these styles instead to make theme under each other

$(text).text('Achievement').css({
        'color': '#660029',
        'text-align': 'center',
        'vertical-align': 'bottom',
        'display': 'table-cell',
        'font-size': '150%'
    });
    $(text2).text('Unlocked!').css({
        'color': '#660029',
        'text-align': 'center',
        'vertical-align': 'middle',
        'display': 'table-row',
        'font-size': '150%'
    });

JSFiddle

Upvotes: 1

Related Questions