I am trying to create a chat webpage using Python Flask as a backend. I want to align messages that are received and sent recently to be aligned in the bottom and when new ones arrive that msg should move up and new ones should be placed in that place. How to do that? I have read similar questions but couldn't understand how to implement it for my needs.
My chat page structure is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="{{
url_for('static', filename = 'static/css/jquery/jquery.js')
}
}
">\x3C/script>')
</script>
<script type=text/javascript>
$SCRIPT_ROOT = {
{
request.script_root | tojson | safe
}
};
$(function() {
$('#send_btn').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/serve_msg', {
msg: $('input[name="msg"]').val(),
}, function(data) {
var msg = document.createElement('div');
msg.className = 'msg';
msg.innerHTML = '<img src="" alt="You"><p id="send_msg"> document.getElementById("msg").value </p><span class="time-left">11:00</span>';
document.getElementById('msg_box').appendChild(msg);
$('#send_msg').text($('input[name="msg"]').val())
$("#reply").text(data.reply);
});
return false;
});
});
</script>
<!--<link rel="stylesheet" href="webi/templates/style.css">-->
<style type="text/css">
body {
background-color: #2a4982;
}
.container {
border: 2px solid #dedede;
background-color: #555555;
border-radius: 5px;
align-self: center;
padding-bottom: 3%;
margin-top: 4%;
margin-left: 16%;
margin-right: 10%;
}
.chatbox {
border: 2px solid #dedede;
background-color: #cac6f1;
border-radius: 5px;
align-self: center;
padding-bottom: 6%;
margin-left: 15%;
margin-right: 15%;
}
.main_heading {
font-weight: bolder;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
color: #2981bc;
-webkit-text-stroke: 1px cornsilk;
padding-top: -8%;
padding-bottom: -8%;
}
.text_input_area {
margin-top: 1%;
margin-bottom: -1%;
}
.msg_box {
position: relative;
background: rgb(22, 29, 34);
/*padding-bottom: 50%;*/
height: 450px;
width: 770px;
overflow: scroll;
}
.msg_input {
width: 85%;
padding-bottom: 3%;
}
.msg_sent {}
.msg_recieved {}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #999;
}
.msg {
position: relative;
;
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
height: 40px;
width: fit-content;
margin: 15px 0;
bottom: 0px;
}
/* Darker chat container */
.msg_recieved {
border-color: #ccc;
background-color: #ddd;
}
/* Clear floats */
.container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
</style>
<title>AVE - WEB INTERFACE</title>
</head>
<body>
<div class="container" align="center">
<p class="main_heading"> AVE - AI Virtual Entity</p>
<div class="chatbox">
chatbox
<div class="msg_box">
<div class="msg msg_recieved">
<img src="" alt="Ave">
<p id="reply">Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" name="msg" id="msg" class="form-control" placeholder="Type your message here!" aria-label="input_area" aria-describedby="send_btn">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="send_btn" onclick="display_send_msg">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sorry for the bad code! I am new to this whole idea. There may be lots of errors. Sorry for that
Let say you have a basic markup structure like
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
<!-- new messages are appended here -->
</main>
Using Flexbox you could place them in reverse order so every new message is visible on top of the page
main {
display: flex;
flex-flow: column-reverse nowrap;
}
Then via Javascript, once you appended the new message you need to scroll the main element via scrollTo(0, 0); The scroll could even be improved via CSS with scroll-behavior: smooth;
Here below a snippet that simulates a new message every 5s:
var messageArea = document.getElementById('msgs');
messageArea.scrollTo(0, 0);
setInterval(() => {
/* create a new message element */
var msgEl = document.createElement('div');
/* create a string with the message */
var msgText = 'Message #' + messageArea.children.length;
/* set the textContent of the element with the message */
msgEl.textContent = msgText;
/* append the new message in the container of the messages */
messageArea.appendChild(msgEl);
/* finally scroll the message area to (0, 0) coords. */
messageArea.scrollTo(0, 0);
}, 5000)
main {
height: 100vh;
display: flex;
overflow: auto;
padding: 1em .5em;
flex-flow: column-reverse nowrap;
scroll-behavior: smooth;
}
div {
border: 1px #ccc solid;
border-radius: 10px;
padding: 1em;
margin-top: 1.5em;
width:60%;
align-self: flex-start;
}
div:nth-child(2n) {
align-self: flex-end;
}
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
</main>
The best thing would be to just normally append new message to the messages div and use JavaScript/jQuery to scroll to bottom of that div.
jQuery:
$('.messages').scrollTop($('.messages').height())
Related
I am trying to make a quiz app. The question buttons seem to have a vertical orientation, whereas I want them in a horizontal configuration. I am not sure where I might be doing the mistake. I have set the display-inline-block and it still does not seem to work. I have tried changing the orientation of my screen as well. I tried making an array of a number of blocks, but that too didn't seem to work.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(2700, 2700, $('#progressBar'));
body {
background-color: lightblue;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
/* Create two unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
.left {
width: 75%;
height: 100%;
}
.right {
width: 25%;
height: 100%;
display: flex;
flex-flow: row wrap;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px 20px;
text-align: center;
text-decoration: none;
font-size: 18px;
margin: 2px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script src="scripts.js">
</script>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column right" style="background-color:#bbb;">
<div>
<p>
<h2>Questions</h2>
</p>
</div>
<div>
<button class="button">1</button>
</div>
<div>
<button class="button">2</button>
</div>
<div>
<button class="button">3</button>
</div>
<div>
<button class="button">4</button>
</div>
<div>
<button class="button">5</button>
</div>
</div>
</div>
</body>
</html>
you want the element in question's css property display to be grid or flex.
flex is easier to work with and better generally for most things.
display:flex;
flex-flow: row nowrap;
here is a link to mdn docs that go over flex stylings:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
A part of a webpage i am designing consists of several div elements placed side by side. Each one contains an image. I want to summon a drop-down menu when the user's mouse enters the div. However, testing it with a simple "print hello" function didn't yield the results i was expecting.
At this point, the images are placed properly, and their size is adjusted just like i specified. However, the cursor is not pointerand the function test doesn't run when the mouse enters the div. I've had this problem with click events in the past and i always tried to find a way around it. Can someone explain why it won't work?
Here's the html
#container {
background-color: black;
border-radius: 20px;
display: inline-block;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
}
#icon {
background-color: burlywood;
border-radius: inherit;
border-radius: 20px;
}
#menu a {
font-size: 30px;
font-family: "Arial";
color: white;
text-decoration: none;
margin-left: 50px;
}
#flag {
width: 50px;
height: 50px;
}
#menu a:hover {
color: #e55d00;
}
body {
height: 2000px;
background-image: url("background.jpg");
}
#btt {
bottom: 0;
color: white;
position: fixed;
text-decoration: none;
}
#contain {
display: inline-block;
height: 1000px;
width: 100%;
max-width: 100%;
position: absolute;
}
#sidemenu {
width: 0;
height: 100%;
z-index: 1;
background-color: black;
transition: width 1s;
padding-top: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
}
#sidemenu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
#sidemenu a:hover {
color: red;
}
#language {
margin-left: 250%;
}
#title a {
color: #e55d00;
text-decoration: none;
}
#title {
font-size: 50px;
text-align: center;
border-radius: 20px;
display: inline-block;
padding: 10px;
}
#projects {
margin-top: 200px;
}
#current {
width: 210px;
height: 200px;
cursor: pointer;
}
#current img {
width: inherit;
height: inherit;
}
#progress {
margin-left: 200px;
width: 210px;
height: 200px;
cursor: pointer;
}
#progress img {
width: inherit;
height: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects</title>
<link type="text/css" rel="stylesheet" href="projects.css">
</head>
<body>
<div id="container">
<table>
<tr>
<td>
<div id="icon">
<img src="img.png">
</div>
</td>
<td>
<div id="title" title="Home">
Electrocats
</div>
<div id="menu">
News
Projects
About Us
menu item 4
</div>
</td>
<td>
<div id="language">
<a href="#" title="Translate to Greek">
<img id="flag" src="Greece-icon.png">
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="contain">
<div id="sidemenu" onmouseleave="hideMenu()">
contact
Films
</div>
</div>
<!-- here is the code with the problem -->
<div id="projects">
<table>
<tr>
<td>
<div id="current" onmouseenter="test">
<img src="high-voltage.png">
</div>
</td>
<td>
<div id="progress" onmouseenter="test">
<img src="engineering1.jpg">
</div>
</td>
</tr>
</table>
</div>
<a id="btt" href="#top">Back to top</a>
<script>
function summonMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "400px";
}
function hideMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "0";
}
function test() {
console.log("hello");
}
</script>
</body>
</html>
Hello See the below Fiddle Here I did this using alert but you can do the same using console.log Hope It helps you .
Div Hover Fiddle
also Added a fiddle with a dropdown list visible on mouse enter event what are you trying to made i guess so .
dropdown Fiddle
In the end, setting the position of the div that contains the images to absolutesolved the issue. I've yet to understand why, but i believe it has something to do with the z-index values specified in the css file. I would really appreciate it if someone could explain why the issue was solver this way.
I am designing a stat board for a call center and I am having trouble getting 2 elements to size up correctly. I have used an automatic text resizer called FitText(link below). I have gotten every other element to work with FitText except the 100% and 100 listed in the code. I cannot figure out why the 100% and the 100 just stay so small compared to the sizes of the divs they are contained in. Both containers are 100% width. I have played around with hundreds of CSS combinations to no avail. Any help will be greatly appreciated. Via the requests below, here is the JSFiddle link.
http://jsfiddle.net/neggly/57tVW/
CSS
#wrap {
position: absolute;
height:100%;
width:100%;
margin:0 auto;
background-color: black;
}
#statuscolorwrap
{
background-color: aqua;
float: left;
width: 1%;
height: 100%;
}
#numberwrap
{
background-color: #ff0;
float: left;
width: 20%;
height: 100%;
}
#announcementwrap
{
background-color: coral;
float: left;
width: 79%;
height: 100%;
}
#queuewrapper
{
height:40%;
width:100%;
float: top;
background-color: darkorchid;
}
#queuecolors
{
height:40%;
width:100%;
float: top;
background-color: cadetblue;
}
#queuepercentage
{
height: 50%;
width: 100%;
float: top;
background-color: chartreuse;
}
#queueholding
{
height: 50%;
width: 100%;
float: bottom;
background-color: crimson;
}
#topcolor
{
height: 50%;
width: 100%;
float: top;
background-color: darkseagreen;
}
#bottomcolor
{
height: 50%;
width: 100%;
float: bottom;
background-color: moccasin;
}
#datetimewrapper
{
width:100%;
height:5%;
float: top;
background-color: deepskyblue;
}
#messages
{
width: 100%;
height: 60%;
float: top;
background-color: darkorchid;
overflow-y: auto;
}
.messagewrapper
{
width: 100%;
height: 100px;
float:top;
background-color: azure;
}
.messageimportance
{
float:left;
width: 5%;
height: 100%;
background-color: darkslategrey;
}
.messagesubject
{
float:left;
width: 95%;
height: 100%;
background-color: blanchedalmond;
}
h1
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h2
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h3
{
font: Helvetica, sans-serif;
font-weight: bold;
margin:0;
padding:0;
text-align: center;
}
#anpicturewrap
{
float:top;
width:100%;
height:45%;
background-color: darkcyan;
}
#antextwrap
{
float:top;
width:100%;
height:50%;
background-color: darkkhaki;
overflow-y: auto;
}
img
{
max-width: 100%;
max-height: 100%;
display:block;
margin:auto;
}
h4
{
font: Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
#text
{
width: auto;
margin-left: 40px;
margin-right:40px;
margin-bottom: 30px;
}
.subjecttext
{
height: 100%;
width:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
HTML
<html>
<head>
<title>Virginia Summary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="base.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="numberwrap">
<div id="queuewrapper">
<div id="queuepercentage">
<div class="subjecttext">
<h1 id="fittext1">1</h1>
</div>
</div>
<div id="queueholding">
<h1 id="fittext2">100</h1>
</div>
</div>
<div id="messages">
<div class="messagewrapper">
<div class="messagesubject">
<div class="subjecttext">
<h2 id="fittext3">Enter Subject here</h2>
</div>
</div>
<div class="messageimportance">
</div>
</div>
</div>
</div>
<div id ="statuscolorwrap">
<div id="queuecolors">
<div id="topcolor">
</div>
<div id="bottomcolor">
</div>
</div>
</div>
<div id="announcementwrap">
<div id="datetimewrapper">
<h3 id="fittext4">12/12/2014 18:00</h3>
</div>
<div id="anpicturewrap">
<img src="images/pic.jpg" alt=""/>
</div>
<div id="antextwrap">
<div id="text">
<h4 id="fittext5">sample text</h4>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("h1").fitText(1);
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.2);
$("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
$("#fittext5").fitText(1.2);
</script>
</body>
</html>
https://github.com/davatron5000/FitText.js
Default margins on headings and some of the margins you have set are causing some of the alignment issues. If you switched some of that to padding, and used box-sizing:border-box; on some of those divs, it would make things a bit easier to style:
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
In the JS fiddle example, it doesn't look the Javascript to resize the text is actually being called on anything. When I turn on JQuery in the fiddle and then actually call the text-resize stuff on your elements it does work to resize the elements.
$(document).ready( function(){
jQuery("#fittext1").fitText(.2);
jQuery("#fittext2").fitText(.3);
jQuery("#fittext3").fitText(.6);
jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
jQuery("#fittext5").fitText(1.2);
});
Edit: I updated some of your CSS so it worked the way you might have expected it to. I moved normalize to the top of your CSS, since it should be the first thing added. You will probably want to add some space and things in some of the boxes, but since I added the border-box, you can just do this with padding on the percentage sized elements.
http://jsfiddle.net/57tVW/2/
So I am currently trying to create a webpage, where the user can toggle between KMZ (there will be 8) files (which depict colour coded maps of Canada made in GIS then converted to KMZ). What I would like this website to look like can be seen at www.mapathy.ca, but with the toggle option on there! This is where I am having issues, I can find similar questions where there is code options for making a toggle for these KMZ layers, but I am unable to in put them into my existing html file. Whenever I try to I seem to make the GoogleEarth window that is currently there disappear altogether. I am going to include my entire HTML as it stands currently. I appreciate any insight very much!!
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<title>Mapathy</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<style>
/* normalize.css 2011-06-23T00:50 UTC //github.com/jonathantneal/normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}html{cursor:default;font-size:100%;overflow-y:scroll;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,form,input,button,select,textarea{font-size:100%;margin:0}a,a:active,a:hover{outline:none}a:focus{outline:thin dotted}abbr{_border-bottom:expression(this.title ? '1px dotted':'none')}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#FF0;color:#000}pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small,sub,sup{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}nav ul{list-style:none}audio[controls],canvas,video{display:inline-block;*display:inline}audio{display:none;_display:expression(this.controls ? 'inline':'none');*zoom:1}audio[controls]{display:inline-block}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){ overflow:hidden}legend{*margin-left:-7px}button,input,select,textarea{vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;_overflow:expression(this.type == 'button|reset|submit' ? 'visible':'')}button,input[type="button"],input[type="reset"],input[type="submit"]{overflow:visible;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
body {
color: #151412;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 50px;
}
h2{
font-size: 36px;
}
p {
line-height: 1.4;
}
img.profile1 {
border: 1px solid #4C4B47;
width: 200px;
height:200px;
border-radius: 50%;
padding: 5px;
}
img.GE2008 {
border: 3px solid #4C4B47;
width: 800px;
height: 600px;
}
img.favourite {
border: 2px solid #4C4B47;
width: 200px;
height: 200px;
border-radius: 50%;
padding: 5px;
margin: 15px;
}
img.logo {
margin: 0 auto;
display: block;
}
section.banner {
padding-top: 100px;
padding-bottom: 100px;
background-image: url('images/tweed.png');
text-align: center;
}
section.banner h1 {
font-size: 45px;
text-transform: uppercase;
padding: 2px;
}
section.banner h2 {
padding-top: 10px;
}
script.map {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
border: 300px solid #4C4B47;
width: 600px;
height: 400px;
}
section.about {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
section.moreinfo {
background-image: #000;
float: center;
overflow: hidden;
text-align: center;
}
script.map {
text-align: center;
}
section.about h2 {
text-align: center;
}
section.contact {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.social {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.favourites {
background-image: #000;
overflow: hidden;
text-align: center;
}
section.box {
padding: 50px 100px;
}
section.banner {
background-attachment: fixed;
}
h1, h2, h3, h4, p {
font-family: 'News Cycle', sans-serif;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
border-bottom: 1px solid #434A5C;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu li {
display: inline-block;
padding: 20px 35px;
}
.menu a {
text-decoration: none;
color: #333333;
text-transform: uppercase;
font-weight: bold;
font-family: 'News Cycle', sans-serif;
}
</style>
</head>
<body>
<ul class="menu">
<li>About</li>
<li>More Information</li>
<li>Contact</li>
<li>Favourites</li>
</ul>
<section class= "banner">
<h1>Mapathy</h1>
<h2>A re-conceptualization of the declining voter turnout rates in Canada</h2>
</section>
<div class="map" id="map3d"></div>
<script class="map" type="text/javascript">
var ge;
google.load("earth", "1", {"other_params":"sensor=false"});
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
addKmlFromUrl('https://sites.google.com/site/mapathy2/kmz-files/1988eqintkmz.kmz?attredirects=0&d=1');
}
function addKmlFromUrl(kmlUrl) {
var link = ge.createLink('');
link.setHref(kmlUrl);
var networkLink = ge.createNetworkLink('');
networkLink.setLink(link);
networkLink.setFlyToView(true);
ge.getFeatures().appendChild(networkLink);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<section id= "about" class= "about box">
<h2>About this project</h2>
<p>The following maps depict the declining voter turnout rate being witnessed in Canada. Voter turnout refers to the percentage of eligible voters who cast a ballot in an election. Areas marked white (1.00), are where 54% or less of eligible voters cast a ballot, areas marked grey (2.00), are where between 55-74% of eligible voters cast a ballot, and areas marked black (3.00), are where 75% or more eligible voters cast a ballot. </p>
</section>
<section id= "moreinfo" class= "moreinfo box">
<h3>More Information</h3>
Elections Canada Official Information for Voters
<p>for more information on the voting process & ways to vote in Canada</p>
Elections Canada Past Elections
<p>to learn more about historical voter turnout rates.</p>
</section>
<section id= "contact" class= "contact box">
<h4>Contact Owner</h4>
<img src="images/profile1.png" class="profile1">
</section>
<section class= "social box">
<img src="images/twitter.png">
<img src="images/linkedin.png">
<p>Note: This webpage is part of a final Master's Research project for the Communication and Culture program at Ryerson University. All Rights Reserved.</p>
</section>
<section id="favourites" class= "favourites box">
<h4>My Favourite Things</h4>
<img src="images/empirebiscuit.jpg" class="favourite">
<img src="images/candy.jpg" class="favourite">
<img src="images/algonquin.jpg" class="favourite">
</section>
</body>
</html>
If you are using KML files that are pre-made and do not change in real time it is much easier to use fetchKML to toggle ON and OFF rather than use networkLink (as you are doing)
look at this Google demo
https://code.google.com/apis/ajax/playground/#fetch_kml_(interactive,_checkboxes)