Develop Reference

Changing display none to block using Javascript and polymer

How to change display from none to block using JavaScript/Polymer.
I tried many things but I can't figure out why it is not working.
My current code:
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<dom-module id="navigatie-element">
<template>
<style type="text/css">
#header {
height: 50px;
background-color: #D8434A;
margin-left: -8px;
margin-top: -8px;
margin-bottom: 9px;
border-bottom: 2px solid white;
}
#header img {
margin-top: 2px;
margin-left: 10px;
width: 218px;
height: 46px;
}
#navbar {
background-color: #D8434A;
width: 214px;
height: 100%;
position: fixed;
margin-left: -8px;
margin-top: -8px;
}
#navbar ul {
margin-left: -40px;
margin-top: -33px;
}
#navbar ul li {
display: absolute;
width: 200px;
height: 40px;
margin-top: 6px;
padding-top: 8px;
}
#navbar ul li a {
text-decoration: none;
display: block;
background-color: white;
color: white;
position: absolute;
width: 200;
background-color: #D8434A;
text-align: left;
padding-left: 10px;
border-bottom: 2px solid white;
border-right: 4px solid orange;
line-height: 50px;
}
#navbar ul li a:hover{
background-color: #FFFA75;
}
#navbar ul li img {
height: 30px;
width: 30px;
margin-right: 10px;
margin-bottom: -9px;
}
#input-field label{
position: relative;
left: 500px;
top: 100px;
}
#input-field paper-input{
position: relative;
left: 520px;
top: 90px;
}
#input-field paper-button{
position: relative;
left: 550px;
top: 90px;
}
#input-field h1{
position: relative;
left: 635px;
top: 50px;
}
#input-field2{
display: none;
}
#input-field2 label{
position: relative;
left: 500px;
top: 100px;
}
#input-field2 paper-input{
position: relative;
left: 520px;
top: 90px;
}
#input-field2 paper-button{
position: relative;
left: 550px;
top: 90px;
}
</style>
<div id="header">
<img src="afbeeldingen/header_naam.png">
</div>
<div id="navbar">
<ul>
<li><img src="afbeeldingen/menu_bestellen.png">Bestellen</li>
<li><img src="afbeeldingen/menu_bestellingen.png">Bestellingen</li>
<li><img src="afbeeldingen/menu_serveren.png">Serveren</li>
<li><img src="afbeeldingen/menu_afrekenen.png">Afrekenen</li>
</u>
</div>
<div id="input-field">
<h1>Afrekenen</h1>
<table>
<tr>
<td><label>Tafelnummer:</label></td>
<td><paper-input class="test" label=""></paper-input></td>
<td><paper-button on-click="bevestigen" raised>Bevestigen</paper-button></td>
</tr>
</table>
</div>
<div id="input-field2">
<table>
<tr>
<td><label>Betaalmethode:</label></td>
<td><paper-button on-click="contant" raised>Contant</paper-button></td>
<td><paper-button on-click="pin" raised>PIN</paper-button></td>
</tr>
</table>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'navigatie-element',
bevestigen: function() {
if (document.getElementById("input-field2").style.display == "block")
{
document.getElementById('input-field2').style.display = 'none';
}
else
{
document.getElementById('input-field2').style.display = 'block';
}
}
});
class NavigatieElement extends Polymer.Element{
static get is() { return 'navigatie-element';}
}
window.customElements.define(NavigatieElement.is, NavigatieElement);
</script>
If I add alert("test"); for example inside the script tag it's working well, so there is nothing wrong with the button.
The problem is the JavaScript I have added to it.
I want to display the div after clicking on bevestigen
It should change from block to none

You should read about the concepts of Shadow DOM, for example on the Polymer site, here.
The important thing to note here is that you are inside your element called navigatie-element, you can't use the document as a "scope" to query elements in (or in fact you could, but you would query in the top level document, not inside your element).
From what I understand you are interested in your local shadow DOM, so you could try to replace
if (document.getElementById("input-field2").style.display == "block")
{
document.getElementById('input-field2').style.display = 'none';
}
else
{
document.getElementById('input-field2').style.display = 'block';
}
with:
if (this.shadowRoot.getElementById("input-field2").style.display == "block")
{
this.shadowRoot.getElementById('input-field2').style.display = 'none';
}
else
{
this.shadowRoot.getElementById('input-field2').style.display = 'block';
}

On click scroll not working on fixed divs

I am trying to scrollTop my left side div but due to some reason, it is not working.
So the following is my CSS, HTML and jquery code. I had tried many things but was failed. Now if you please help me to solve this, then it will be great.
$('#leftside').click(function(e) {
$("html, body").animate({
scrollTop: 0
}, 600);
e.preventDefault();
});
html,
body {
height: 100% !important;
}
body {
background-color: #ffffff;
font-weight: 400;
font-size: .79em;
line-height: 1.6em;
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', sans-serif;
color: #000;
height: auto;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow-x: hidden;
padding-top: 39px;
box-sizing: border-box;
}
#leftside {
width: 240px;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 5px;
background-color: #364150;
position: relative;
}
#rightside {
position: fixed;
height: 100%;
width: 100%;
padding-bottom: 50px;
top: 39px;
right: 0;
left: 239px;
background-color: #fff;
}
.right-content {
overflow: auto;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
..... head code
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
nav..... code
</nav>
<div id="content-wrapper">
<div id="leftside">
<ul class="page-sidebar-menu">
<li>....</li>
<li>....</li>
</ul>
</div>
<div id="rightside">
<div class="right-content">
Right side content
</div>
</div>
</div>
Would you please help me why the above is not working or what wrong I am doing.

You use jQuery, but forget to add your code within document ready:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
... //your codes come here
});
</script>
And if you don't like jQuery use this as Event Handler:
document.getElementById("yourid").addEventListener("click", function( event ) ...

You are trying to scroll the main body/html in your code, change "html, body" to "#leftside".
$('#leftside').click(function(e){
$("#leftside").animate({ scrollTop: 0 }, 600);
});
You should also set the overflow of the left div to 'scroll':
#leftside {
width: 240px;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 5px;
background-color: #364150;
position: relative;
overflow: scroll;
}

onmouseenter event wont work on div element

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.

Header Text appearing outside of its Div (Mozilla firefox). No issue with chrome/IE

The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:

From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}

Text Will Not Fill Up Div

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/