Develop Reference

Embed this externally made form into my website

I am working on this website where I want to add a form which opens once you press the login button. The form was created using an online form builder which provides an embed code for embedding into your website. I have provided the embed code along with the html/css for my website.
The HTML:
<div id="mySidenav" class="sidenav">
×
About
Contact
Help
</div>
<!-- <div id="main">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
-->
<div class="header">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<div class="header-right">
<a class="active" href="#home">Login</a>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
</script>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: dodgerblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 40px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
margin-right: 30px;
}
#main {
transition: margin-left .3s;
padding: 20px;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: dodgerblue;
padding: 25px 20px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
embed code for the form:
<a name="form691431825" id="formAnchor691431825"></a>
<script type="text/javascript" src="https://fs3.formsite.com/include/form/embedManager.js?691431825"></script><script type="text/javascript">
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});</script>

First of all you need to rephrase the text of your post as you only make remarks without asking any question, having people to guess what it is you need.
Assuming you need a trigger to open your login window, here's what I did to make it work:
Modify the script with EmbedManager.embed(..); and put it inside a function called openLogin()
function openLogin() {
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});
}
Now you have a javascript function you can use to open your login screen. Once you have choosen an element (a,button,div,etc) you want to use as the trigger add propertiesname="form691431825" id="formAnchor691431825" onclick="javascript:openLogin()", remove the original a-element and your are good to go.
The result does not look too pretty, leaving you with the next fun puzzle to chew on...

Side menu disappears when you hover over the text inside it

So my problem is that the side menu closes when you hover over the text inside it... The "About" text works properly but the other three don't... I tried different solutions but I can't figure out what's the cause for it. The menu is supposed to open when you hover over the 3 lines, and stay open while you're hovering over it. Please help
function openNav() {
document.getElementById("sidenav").style.width = "250px";
document.getElementById("menubtn").style.color = "transparent";
document.getElementById("menubtn").style.transition = "0.2s";
document.body.style.backgroundColor = "#a5a5a5";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
document.getElementById("menubtn").style.color = "#ffffff";
document.getElementById("menubtn").style.transition = "0.6s";
document.body.style.backgroundColor = "#ffffff";
}
body {
margin: 0;
padding: 0;
transition: background-color 0.5s;
}
.navbarheader {
height: 80px;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #1f1f1f;
}
.menubtn {
margin: 14px 0px 0px 23px;
padding: 0px;
font-size: 37px;
transform: scale(1, 0.8);
float: left;
color: #ffffff;
background-color: #1f1f1f;
border: none;
}
.sidenav {
height: 100%;
width: 0px;
position: fixed;
background-color: #1f1f1f;
transition-property: width;
transition-duration: 0.5s;
}
.sidenav a {
margin: 0px;
padding: 10px 0px 10px 25px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
overflow: hidden;
display: block;
}
.sidenav a:hover {
color: #a5a5a5;
}
<body>
<div class="navbarheader">
<div><button id="menubtn" class="menubtn" onMouseover="openNav()">☰</button></div>
</div>
<div id="sidenav" class="sidenav" onMouseout="closeNav()">
<a style="padding-top: 20px" href="#">About</a>
Services
Clients
Contact
</div>
</body>

Your issue is that the onmouseout event is firing when you mouse out of one of the children. Use onmouseleave instead as it doesn't bubble. See this related post. It really isn't good practice to use inline handlers though. You should instead use the addEventListener() method. It would look like this:
document.getElementById("sidenav").addEventListener("mouseleave", function(event){
closeNav();
});

Perhaps a CSS approach, rather than a JS approach.
For example, consider removing all JS code. Then, set CSS as following:
.sidenav {
visibility: hidden;
}
.sidenav:hover {
visibility: visible;
display: block;
}

How can I close menu after click outside menu?

I want to make hiding sidebar menu which will be opened whenuser click button. After that when user click outside menu - menu will be closed. How can I make this function in this case?
JsFiddle
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>

You can react on a click on the entire document element and find out whether the target is located within your menu:
document.documentElement.addEventListener("click", function(e){
if (e.button != 1) // left mouse
return; // anything else => do nothing
var target = e.target;
var navItem = document.getElementById("mySidenav");
do{
if (target == navItem)
return; // clicked within "mySidenav" => do nothing
target = target.parentNode;
}
while(target != null);
// react here
closeNav(); // must be implemented somewhere
});
It is desirable not to react at all if you detect that the click was indeed fired within your menu because otherwise you might close the menu before the click gets bubbled to the item => no menu item click detected.

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
document.addEventListener('mousedown',function(event){
var side_dom = document.getElementById("mySidenav")
if(side_dom.style.width == '250px'){
if(!side_dom.contains(event.target)){
document.getElementById("mySidenav").style.width = "0";
}
}
})
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</s
</body>

Cannot fully scroll down in side panel in an html example from w3school

I created an example:
jsfiffle
exactly identical to this one in w3schools:
w3schools sidenav_push
except that mine has more anchor tags in the side panel.
Why scrolling to the very bottom of the left pane is not possible?
At some point I saw a difference in that behavior when you scroll down using the bar or with the mouse wheel, so please try both. i tried in Chrome and Firefox.
Html:
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>..</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

The main issue is that the padding-top property pushes the content down, but overflow only limits to height.
If you want to the padding to compute with the 100% height, you have to modify the box-sizing.
.sidenav {
box-sizing: border-box;
}
Answer based on: CSS padding overrides overflow?
Working JSFiddle: https://jsfiddle.net/wcfwLxtx/2/

Add this to your CSS.
.sideNav {
overflow: auto;
}
That should do it.

The issue is related to the padding-top. Eliminating it will enable the entire content to be displayed.
Here's an example https://jsfiddle.net/kzpjmmf2/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
}

you just need to reduce the padding
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
here is a working example
https://codepen.io/anon/pen/EXXaKN

Sidebar navigation toggle with single button

I have implemented the following sidebar navigation into a simple admin. I've got it working and moved to the right side. I would like to have it appear and disappear using a single button rather than a separate close and open button. I tried modifying the JS with an onToggle function that if isOpen was null, it would open the panel and then set isOpen to true and then the next time it ran, it would delete isOpen. I'm very new at JS and this failed so I thought I'd ask here. How do I get this puppy appearing and disappearing with a single button?
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Thank you kindly.

<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60px;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<script>
function openNav() {
var e = document.getElementById("mySidenav");
if (e.style.width == '250px')
{
e.style.width = '0px';
}
else
{
e.style.width = '250px';
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
This is the same code with little modifications in the openNav() method. For triggering the sideNavbar with a button, it needs to be visible before and after triggering the sideNavBar. So i have moved the view button to the top and i have modified the top property of sidenav to keep the trigger button visible even after activation
You can view this in action here: https://jsfiddle.net/ngohrvk1/

I know the question is tagged with JavaScript and you probably don't want to change the markup or add new elements. But if you could, here's a pure CSS solution that works.
body {
margin: 0;
}
.sidebar-toggle {
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding: 10px;
background: red;
color: white;
}
#sidebar-toggle-input {
display: none;
}
#sidebar-toggle-input+label:before {
content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
content: "❌"
}
.sidebar {
position: fixed;
width: 200px;
transition: 0.3s;
background: blue;
height: 100vh;
top: 0;
left: 0;
transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
transform: none;
}
<input type="checkbox" id="sidebar-toggle-input" />
<label class="sidebar-toggle" for="sidebar-toggle-input"></label>
<div class="sidebar"></div>

This code will help you out, I have created a function and saving data-isshown attribute on the element, to get whether the element is shown or not, we can decide this on the basis of the width as well but this is more generic approach
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
Whole code would look like this
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>