AndroidNewbie AndroidNewbie - 4 months ago 14
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) {
$('#overlay').removeClass('hidden');
var info_window = new InfoWindow();
var key = $(this).attr('id');
info_window.$.appendTo('#overlay');
info_window.addService(services[key]);
$('.info-window').removeClass('hidden');
});

var $window = $('.info-window');
$(document).mouseup(function (e) {
if(!$window.is(e.target) && $window.has(e.target).length === 0) {
$('#overlay').addClass('hidden');
}
});
});

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){
_headers.push(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.$titles.appendTo(self.$);
self.$headers.appendTo(self.$);
self.$contents.appendTo(self.$);

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

$title.appendTo(self.$titles);
$header.appendTo(self.$headers);
$content.appendTo(self.$contents);

$header.on('click', function() {
self.$contents.find('p').each(function() {
$(this).removeClass('active');
$content.addClass('active');
});
});
}

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');
managementService.setHeaders('');
managementService.setContent('');
services['management'] = managementService;

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



return services;
}
}


css:
.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;
}


html:

<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>
</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.

Answer

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.