We Keep Coding

How to insert div after other div with if else condition

I want to move div after another div, if outer div's width is less then 800
$(function() {
if ($('.main').width() < "800 px") {
$(".one").insertBefore($(".two"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" style="overflow: hidden; border:solid 1px red; text-align: right; ">
<div class="two" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:500px;">buttons</div>
<div class="one" style="background-color: #ccc; margin: 2px; padding: 10px; float: right; width:300px;">dropdown</div>
</div>

jQuery doesn't understand the string "800 px", it requires just the number 800.
Also, like others mentioned, try to keep your styles in css and not inline if you're using classes, it's easier to follow along with the code and edit the code in the future.
$(function() {
if ($('.main').outerWidth(true) < 800) {
$(".one").insertBefore($(".two"));
}
});
.main {
overflow: hidden;
border: solid 1px red;
text-align: right;
}
.two {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 500px;
}
.one {
background-color: #ccc;
margin: 2px;
padding: 10px;
float: right;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="two">buttons</div>
<div class="one">dropdown</div>
</div>

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}​
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.

JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

How to Change Navigation Bar Background with Scroll?

I'm new to web-developing. For one of my projects, I want to change the navigation bar's background when the user scrolls.
I want it to look like exactly this:
https://www.nlogic.co/understanding-vlan-hopping-attacks/
Here's my code:
nav .row {
margin-right: 0px;
}
nav {
border: 2px ridge #999;
position: fixed;
}
nav li {
float: left;
list-style: none;
padding: 20px 30px;
}
nav a {
color: white;
font-size: 20px;
}
.btn button {
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover {
border: 2px solid white;
border-radius: 10px;
}
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About
</li>
<li>Contact
</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
I am not good at jQuery. In fact, I only know the basics of Javascript. I will be Very Very Grateful if someone can help me here.

Try this :
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
height: 1500px;
}
nav .row{
margin-right: 0px;
}
nav{
border: 2px ridge #999;
position:absolute;
}
nav li{
float: left;
list-style: none;
padding: 20px 30px;
}
nav a{
color:white;
font-size: 20px;
}
.btn button{
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover{
border: 2px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About</li>
<li>Contact</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
</script>
</body>
</html>

try this. change the sizes as your need. refer this example and implement it for your project.try below working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
margin: 0;
padding: 0;
}
div.navbar{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
</style>
<body>
<div class="navbar"></div>
</body>
<script type="text/javascript">
$(window).scroll(function(){
var thescroll = $('body').scrollTop();
//alert(thescroll);
//in here, get the scroll position, if it is greater than you navbar height then change the color or whatever.
if (thescroll > 80)
{
$("div.navbar").css({"background-color":"pink"});
}
else
{
$("div.navbar").css({"background-color":"black"});
}
});
</script>
</html>

Javascript - bring up infobox on click image

I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.

I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>

Button inside a box with css,html and javascript

Hey guys i have maded an outerbox which contains an innerbox .The code is
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>
the css file
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
This works fine..
But what i need is that i want to display a simple button inside the inner box.I have tried some javascript code but it dint worked out.
Hope you guys can help me ..P:S ..i dont need a jquery solution..Thanks

Is this what you are looking for?
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
<div id="boxed">
<div id="anotherbox">
<input type="button" value="inside" />
</div>
</div>

You can achieve this using a button, as follows:
The HTML:
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
#boxed:hover #anotherbox > button {
width: 16px;
padding: 30px;
border: 5px solid gray;
margin: 0;
visibility: visible;
cursor:pointer;
}
<div id="boxed">
<div id="anotherbox">
<button>Button</button>
</div>
</div>