Home JavaScript has bugs when I put website onto server, and it doesn't work on internet explorer
Reply: 0

JavaScript has bugs when I put website onto server, and it doesn't work on internet explorer

SideSlaw
1#
SideSlaw Published in 2017-12-07 23:05:58Z

Server problem: I'm working on a website for someone, and my javascript apparently isn't working when it goes live. I have a sliding accordion navigation menu and a popup text box when you click a button in the center of the page. Apparently, when the text box popup is open, the nav bar stops working and becomes completely unclickable. The thing is that this code works fine on my end. It works here and on codepen, but on the actual server, it won't run. I'll be going in personally to address this issue over the weekend (I live an hour away from a computer with access to the web host since it's through my college), but I need ideas on what could be causing this and I was hoping to get some help from you guys. Thanks in advance.

(side note: the server won't accept external jquery files, so although I have a link in the html to jquery, I have the whole jquery file pasted into my js file on the server)

IE problem: There's supposed to be a popup text box when you click a button, but on IE, it's just always popped up there regardless of whether or not you clicked the button.

HTML, CSS, JavaScript:

$(function () {

  $(".item").on("click", function () {
    $(this)
      .next().toggleClass("active");
  });
  
  $("#body").css("min-height", "100%");

  
});


$(document).ready(function() {

  var $overlay = $('<div class="overlay"></div>');
  var $href = $('this').attr('href');
  var $popup = $('.pop-window');

  $('<div class="close">x</div>').appendTo($popup);
  $popup.hide();

  $('a').click(function(e) {
    e.preventDefault();
    $overlay.fadeIn(800).appendTo('body');
    $popup.delay(800).slideDown();
  });

  $overlay.click(function() {
    $overlay.delay(800).fadeOut();
    $popup.slideUp();
  });

  $('.close').click(function() {
    $popup.slideUp();
    $overlay.delay(800).fadeOut();
  });
});
*{
  box-sizing: border-box;
}
body{
  background: #eaeaea;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}

body.background{
	  background-image: url("lab3.jpg");
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-position: center; 
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  color: #333333;
margin: 0 0 100px;
bottom: 1rem;

}




html{
	overflow-x: hidden;
	width:100%;
	min-height:100%;
	position: relative;
	margin:0;


}



.header{
	height:100px;
	width:110%;
	background-color:#3a1f51;
	color:white;
	display: block;
	margin:-10px;
	top:-10px;
	padding:-10px;
	margin-bottom:-20px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	z-index:2;
}

h1{
	margin:0;
	margin-bottom:10px;
	margin-left:40px;
	padding:0;
	position: absolute;
	bottom:0;
	color:#d1d1d1;
	font-family: Roboto, sans-serif;
	letter-spacing: 5px;
	font-size:18;
}



.slidebox{
	top:10px;
	left:-10px;
	float:left;
	display:block;
	background-color:#d2d2d2;
	width:110%;
	height:40px;
	position:relative;
	z-index:1;
	margin:0;
	padding:0px;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

section {
  width: 150%;
  margin: 0px auto;
  margin-left:-15px;
  font-family: Raleway, sans-serif;

}
.item{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;

}

.info{
  font-size: calc(8px + .55vw);
  float: left;
  width:0%;
  height: 40px;
  visibility: hidden;
  font: monospace;
  background-color: #d2d2d2;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition: width ease-out .3s, visibility ease-out .3s;
  white-space: nowrap;
  overflow:hidden;
  padding: 10px 0;
  font-family: Raleway, sans-serif;


}
.info.active{
  visibility: visible;
  width:12%;
  font-family: Raleway, sans-serif;

  
}
.nitem{
  font-size: calc(8px + .55vw);
  width:9%; 
  height: 40px;
  float: left;
  border-right: 4px solid #d2d2d2;
  font: monospace;
  padding: 10px;
  cursor: pointer;
	background-color:#3a1f51;
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-family: Raleway, sans-serif;
  color:#eaeaea;
}

.pop-window {
  width: 60%;
  z-index: 999;
  background: #fff;
  margin: 0 auto;
  border: 2px solid #cdcdcd;
  padding: 20px;
  position: absolute;
  top: 30%;
  left: 20%;  
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;
	background-color: rgba(230,230,230, 0.85);
	padding:1%;
	border-radius:25px;
	padding-top:0.5%;
	padding-bottom:.1%;
}

.overlay {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}



.close {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #000;
  cursor: pointer;
}

.homebutton{
	color: #333;
	font-size: 1.4vw;
	font-family: Raleway, sans-serif;

}

button {
  border: .2vw solid rgba(134, 134, 134, .5);
  padding: 10px 20px;
  background: rgba(134, 134, 134, 0);
  display: block;
  margin: auto;
  position:fixed;
  top:53%;
  left:40%;
  width: calc(20%);
  cursor: pointer;

}

button a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s all;
}

button:hover {
  background: rgba(134, 134, 134, 0.5);
  transition: 0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html >
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <head>



	<script type="text/javascript">
	  <!--
	  if (screen.width <= 800) {
		window.location = "mobile";
	  }
	  //-->
	</script>



  <meta charset="UTF-8">
  <title>Title</title>
		<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
  
  
		<link rel="stylesheet" href="css/style.css">

  
</head>

<body class="background">

   <div class=header>


   
		<h1>Title</h1>
   
   </div>



   
	<div class="slidebox">
	  <section>
	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolded2" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>

	  <div class="item"> header &#8250</div>
	  <div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a> &nbsp; | &nbsp; <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>
	  
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	 
	  <a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
	  </section>
	</div>
  

<div class="back container">
    <a class="spec" href="#"><button><p class="homebutton">Clickable</p></button></a>
</div> 

<div class="pop-window">
    <div class="inner">
        <h2>Body Title</h2>
		<p>Body Text</p>

    </div>
</div>
	
	
</body>

</html>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.320858 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO