AndroidNewbie AndroidNewbie - 6 months ago 25
jQuery Question

h4 headers on same line

I have an info-window popping up on click on a div called "service-icon". I am building these info-windows dynamically using mostly javascript. Currently, I am appending header elements using the service.getHeaders() method I created. What I want to do is append a bunch of h4 headers into the col-xs-6 div, but have each be separate elements and take up the entire width of the col-xs-6 div. So I guess my question is, what would be the best way to implement the addition of multiple elements in a div? Here is all the code I have for the part I am talking about:

$(document).ready(function () {
var $icons = $('.service-icon');
var $services = $('.service');

var services = ServiceFactory.makeServices();

/*Adds service to info-window when service-icon is clicked*/
$('.service-icon').on('click', function (e) {
var info_window = new InfoWindow();
var key = $(this).attr('id');

var $window = $('.info-window');
$(document).mouseup(function (e) {
if(!$ && $window.has( === 0) {

function Service() {
var _title;
var _content;
var _headers = [];

this.getTitle = function() { return _title; }
this.getHeaders = function() { return _headers; }
this.getContent = function() { return _content; }

this.setTitle = function(title) {
_title = title;
this.setHeaders = function(header){
this.setContent = function(content) {
_content = content;

function InfoWindow() {
var self = this;

self.$ = $('<div class="row info-window"></div>');
self.$titles = $('<div class="titles"></div>');
self.$headers = $('<div class="col-xs-6 info-headers"></div>');
self.$contents = $('<div class="col-xs-6 info-contents"></div>');


self.addService = function(service) {
var $title = $('<h3>'+ service.getTitle() + '</h3>');
var $header = $('<h4>'+service.getHeaders() +'</h4>' + '<br>');
var $content = $('<p>'+service.getContent() +'</p>');


$header.on('click', function() {
self.$contents.find('p').each(function() {

var ServiceFactory = {
makeServices: function() {
var services = [];

var technologyService = new Service();
technologyService.setTitle('Technology Services');
technologyService.setHeaders('here 1');
technologyService.setHeaders('here 2');
technologyService.setContent('right side');
services['technology'] = technologyService;

var managementService = new Service();
managementService.setTitle('Management Services');
services['management'] = managementService;

var HRConsulting = new Service();
HRConsulting.setTitle('HR Consulting');
services['HRconsulting'] = HRConsulting;

return services;

.active {
color: rgba(255,28,28,.8) !important;

.overlay-dark {
background-color: rgba(0,0,0,.9);
position: fixed;
z-index: 5;
height: 100vh;
width: 100vw;

.info-window {
background-color: rgba(32,32,32,1);
border: 3px solid rgba(199,36,55,.8);
margin: 0 auto;
width: 75%;
height: 70vh;
margin: 15vh 0% 0% 12.5vw;
padding: 16px;
position: fixed;
overflow-y: auto;

.info-window h3 {
padding: 4px;
margin: 0;
color: white;
font-size: 24px;
letter-spacing: 1px;
font-family: 'Roboto';

.info-window h3 {
color: white;
border-bottom: 1px solid rgba(199,36,55,.8);
font-size: 24px;
letter-spacing: 1px;
font-family: 'Roboto';
margin-top: 16px;
width: 25vw;

.title {
border-bottom: 1px solid red;


<div class="row services" style="background-color: rgba(0,0,0,.8);">
<div class="col-xs-12 col-sm-12 col-md-12 overlay-dark hidden" id="overlay"></div>

I want 'here 1' and 'here 2' to be on different lines.
Here is what the end result is:

Thank you in advance! I know it's a lot to look at.


I would recommend changing this line:

var $header = $('<h4>'+service.getHeaders() +'</h4>' + '<br>');

to this:

var $header = $('<h4>' + service.getHeaders().join('</h4><h4>') + '</h4>');

It looks like you're just shoving the whole array into one h4 when you really want to put each item in the _headers array into its' own h4. Making the above change will create an h4 for each item in the array.