Position 2 headers in the middle of 2 panel


Position 2 headers in the middle of 2 panel



I have this code below that consists of 2 panels and 2 header what i'm trying to accomplish is to put the total fruits header in the middle of the left panel and the other header on the right. But whenever i try to put them in the centre it just messes up the whole thing is there a correct way to do this because i'm not sure how to go about it any suggestion would be greatly appreciated.


total fruits




var redpill = {};
var greenpill = {};
var randompill = {};


var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon','Apple', 'Cherry', 'Strawberry', 'Pomegranate'];

var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);

$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);

var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}

function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');

});
});

$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');

});
}
redraw();
listener();


.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}
.randompill:after {
content: "02B";
float: left;
width: 16px;
}
.new-green-fruit:after {
content: "292B";
float: left;
width: 16px;
}

.redpill {
background-color: Pink;
cursor: default;
}

.greenpill {
background-color: SpringGreen;
cursor: default;
}

.randompill {
background-color: LightBlue;
cursor: pointer;
}

.class {
font-family: Open Sans;
}

.center {
display: flex;
justify-content: center;
}

.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.top {
margin-bottom: 20px
}

h3 {
font-weight: normal;
}

.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}

.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}

.top {
margin-bottom: 30px;
}
#leftpanel{
float:left;
width:calc(50% - 5px);
background-color:#f2f2f2;"
}
#rightpanel{
float:right;
width:calc(50% - 5px);
background-color:#f2f2f2;"
}
.container{
display: table;
max-height: 100%;
width: 50%;
background-color:white;
margin-left: auto;
margin-right: auto;
margin-top:25px;
}


<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />

</head>

<body>
<div class="container">

<h3 class="class center">Total Fruits</h3>
<div id=leftpanel>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
</div>

<h3 class="class center">Random Fruits</h3>
<div id="rightpanel">
<div id="suggestid" class="randomclass wrappingflexbox top"></div>

</div>
</div>



</body>
</html>




1 Answer
1



I adjusted your HTML a bit as to fit the requirements.



You need a container to center header & panel. It's easier if you wrap header into left & right panel.




var redpill = {};
var greenpill = {};
var randompill = {};


var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Apple', 'Cherry', 'Strawberry', 'Pomegranate'];

var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
var combineString = '';
$.each(redpill[key], function(index) {
combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
});
$('.combineclass').html(combineString);

$.each(greenpill[key2], function(index) {
combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
});
$('.combineclass').html(combineString);

var randomString = '';
$.each(randompill[key3], function(index) {
randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
});
$('.randomclass').html(randomString);
}

function listener() {
$(document).ready(function() {
$(document).on("click", "#suggestid div", function() {
data = this.innerHTML;
$(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
var element = $(this).detach();
$('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');

});
});

$('body').on('click', 'div.new-green-fruit', function() {
data2 = this.innerHTML;
$(this).detach();
var element2 = $(this).detach();
$('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');

});
}
redraw();
listener();


.pilldiv {
padding: 8px 15px;
text-align: center;
font-size: 15px;
border-radius: 25px;
color: Black;
margin: 2px;
}

.randompill:after {
content: "02B";
float: left;
width: 16px;
}

.new-green-fruit:after {
content: "292B";
float: left;
width: 16px;
}

.redpill {
background-color: Pink;
cursor: default;
}

.greenpill {
background-color: SpringGreen;
cursor: default;
}

.randompill {
background-color: LightBlue;
cursor: pointer;
}

.class {
font-family: Open Sans;
}

.center {
display: flex;
justify-content: center;
}

.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #f2f2f2;
}

.top {
margin-bottom: 20px
}

h3 {
font-weight: normal;
}

.panel {
display: table;
height: 100%;
width: 85%;
background-color: white;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}

.new-green-fruit {
background-color: LightBlue;
cursor: pointer;
}

.top {
margin-bottom: 30px;
}

#leftpanel {
flex-basis: calc(50% - 5px);

}

#rightpanel {
flex-basis: calc(50% - 5px);
}

.container {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-flow: row nowrap;
max-height: 100%;
width: 50%;
background-color: white;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}


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


<div id=leftpanel>
<h3 class="class center">Total Fruits</h3>
<div id="currentid" class="combineclass wrappingflexbox top"></div>
</div>


<div id="rightpanel">
<h3 class="class center">Random Fruits</h3>
<div id="suggestid" class="randomclass wrappingflexbox top"></div>

</div>
</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

List of Kim Possible characters

Image
From left to right: Wade (on monitor screen), Dr. James Timothy Possible, Mrs. Dr. Ann Possible, Ron, Rufus, Kim Possible, Shego, Dr. Drakken, Monkey Fist, Señor Senior Sr., Adrena Lynn, and Señor Senior Jr. This is a list of characters appearing in the animated series Kim Possible . Team Possible Kim Possible Main article: Kim Possible (character) Voiced by: Christy Carlson Romano and Dakota Fanning (Preschool Kim; Kim Possible: A Sitch In Time ) Kimberly Ann “Kim” Possible is a crime fighter and high school cheerleading captain who saves the world on a regular basis while dealing with the normal challenges of being a teenager, such as winning cheer competitions, turning in her homework on time, and maintaining a love life. Her name is a play on the word “impossible.” Kim has known Ron Stoppable, her sidekick for most missions, since preschool. She has also completed missions with Wade, Monique, her brothers, and even her mother. In season four, Kim and Ron end up developing romanti
Read more

Audio Livestreaming with Python & Flask

Audio Livestreaming with Python & Flask I'm currently strugling with my implementation of a simple live streaming web application using Python and Flask. It seems that I'm not able to stream my live recorded audio from the servers microphone input to the webpage. server.py from flask import Flask, render_template, Response import cv2 import framework import pyaudio import audio_processing as audioRec FORMAT = pyaudio.paInt16 CHANNELS = 1 RATE = 44100 CHUNK = 1024 audio = pyaudio.PyAudio() app = Flask(__name__) @app.route('/') def index(): """Video streaming home page.""" return render_template('index.html') # Stream routing @app.route('/video_feed') def video_feed(): """Video streaming route. Put this in the src attribute of an img tag.""" return Response(generateVideo(), mimetype='multipart/x-mixed-replace; boundary=frame') @app.route("/audio
Read more

NSwag: Generate C# Client from multiple Versions of an API

Image
NSwag: Generate C# Client from multiple Versions of an API We are versioning our API and generating the Swagger specification using Swashbuckle in ASP.NET Core 1.1. We can generate two API docs based on those JSON specification files: <!-- language: c# --> services.AddSwaggerGen(setupAction => { setupAction.SwaggerDoc("0.1", new Info { Title = "Api", Version = "0.1", Description = "API v0.1" }); setupAction.SwaggerDoc("0.2", new Info { Title = "Api", Version = "0.2", Description = "API v0.2" }); // more configuration omitted } We are including all actions in both spec files, unless it is mapped to a specific version using the [MapToApiVersion] and ApiExplorerSettings(GroupName ="<version>")] attributes. Methods belonging to an older version only are also decorated with the [Obsolete] attribute: [MapToApiVersion] ApiExplorerSettings(GroupName ="<version>&quo
Read more