Cześć.
Tak jak w pytaniu, czemu javascript nie działa na mojej stronie na IE.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<section id="header">
<div class="container">
<nav>
<div class="desktop-navigation">
<span class="logo">MAJKI DESIGN</span>
<div class="menu">
<ul>
<li><a href="about.html">O Mnie</a></li>
<li><a href="#serivces" class="service-btn">Oferta</a></li>
<li><a href="contact.php">Kontakt</a></li>
</ul>
</div>
</div>
<div class="mobile-navigation">
<div class="hamburger">
<img src="illustration/undraw_hamburger.png" alt="mobile-menu" />
</div>
<div class="sidebar-menu">
<div class="sidebar-overlay"></div>
<div class="sidebar">
<div class="sidebar-title">
<div class="profile-image">
<img src="illustration/Face.png" alt="My Face" />
</div>
<div>
<h4>Majki Design</h4>
<p>Strony Wizytówki</p>
</div>
</div>
<a href="#">
<div class="sidebar-item">
<p>
<i class="material-icons">
person_pin
</i>
O Mnie
</p>
</div>
</a>
<a href="#serivces" class="service-btn">
<div class="sidebar-item">
<p>
<i class="material-icons">
web
</i>
Oferta
</p>
</div>
</a>
<a href="contact.html">
<div class="sidebar-item">
<p>
<i class="material-icons">
perm_phone_msg
</i>
Kontakt
</p>
</div>
</a>
</div>
</div>
</div>
</nav>
<div class="main-content">
<div class="main-title">
<h1>
Witaj, jestem
<span class="txt-type" data-wait="3000" data-words='["Designerem", "Programistą", "Twórcą"]'></span>
</h1>
<p>
możesz zamówić u mnie stronę która <br />wyróżni cię na tle
konkurencji
</p>
<div class="main-buttons">
<div class="button">
<a href="#serivces" class="btn main-btn-first service-btn">Zaczynajmy</a>
</div>
<div class="button">
<a href="contact.php" class="btn main-btn-second">Kontakt
<i class="material-icons">
phone
</i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="serivces" class="services">
<div class="service-cards container">
<div class="service-card service-card-one">
<div class="service-card-image"></div>
<div class="service-card-content">
<a href="#">
<h2>Design Strony</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent non bibendum enim. Nullam tellus sem, laoreet at purus
nec, lobortis semper neque. Pellentesque bibendum.
</p>
<div class="arrow-btn">
<p>
Czytaj Dalej
<i class="material-icons">
arrow_forward
</i>
</p>
</div>
</a>
</div>
</div>
<div class="service-card service-card-two">
<div class="service-card-image"></div>
<div class="service-card-content">
<a href="#">
<h2>Kodowanie Strony</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent non bibendum enim. Nullam tellus sem, laoreet at purus
nec, lobortis semper neque. Pellentesque bibendum.
</p>
<div class="arrow-btn">
<p>
Czytaj Dalej
<i class="material-icons">
arrow_forward
</i>
</p>
</div>
</a>
</div>
</div>
<div class="service-card service-card-three">
<div class="service-card-image"></div>
<div class="service-card-content">
<a href="#">
<h2>Pozycjonowanie Strony</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent non bibendum enim. Nullam tellus sem, laoreet at purus
nec, lobortis semper neque. Pellentesque bibendum.
</p>
<div class="arrow-btn">
<p>
Czytaj Dalej
<i class="material-icons">
arrow_forward
</i>
</p>
</div>
</a>
</div>
</div>
<div class="service-card service-card-four">
<div class="service-card-image"></div>
<div class="service-card-content">
<a href="#">
<h2>CMS Wordpress</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent non bibendum enim. Nullam tellus sem, laoreet at purus
nec, lobortis semper neque. Pellentesque bibendum.
</p>
<div class="arrow-btn">
<p>
Czytaj Dalej
<i class="material-icons">
arrow_forward
</i>
</p>
</div>
</a>
</div>
</div>
</div>
</section>
<footer class="container">
<div>
<h3>Nawigacja</h3>
<p><a href="#">O Mnie</a></p>
<p><a href="#serivces" class="footer-btn">Oferta</a></p>
<p><a href="contact.html">Kontakt</a></p>
</div>
<div>
<h3>Kontakt</h3>
<p>tel: 123 456 789</p>
<p>mail: biuro@majkidesign.pl</p>
</div>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
$(function () {
// Smooth Scrolling
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
//contact form
$('.input').focus(function () {
$(this).parent().addClass("focus");
}).blur(function () {
if ($(this).val() === '') {
$(this).parent().removeClass('focus');
}
})
//ajax
$('.btn-contact').click(function (event) {
event.preventDefault();
$.ajax({
dataType: 'JSON',
url: 'sendmail.php',
type: 'POST',
data: $('.contact-form').serialize(),
beforeSend: function (xhr) {
$('.btn-contact').html('wyślij');
},
success: function (response) {
if (response) {
console.log(response);
if (response['signal'] == 'ok') {
$('.inputBox').removeClass('focus');
$('.inputText').css('color', 'black');
$('#submit-btn').html('wysłano');
$('input, textarea').val(function () {
return this.defaultValue;
});
}
else {
$('.inputText').css('color', '#D50000');
}
}
},
error: function () {
$('.inputText').css('color', '#D50000');
},
complete: function () {
$('#submit-btn').html('wyślij');
}
});
});
});
//SideBar Menu
let SideBar = function () {
const menu = document.querySelector(".sidebar-menu");
const hamburger = document.querySelector(".hamburger");
const overlay = document.querySelector(".sidebar-overlay");
let sidebarLinks = document.querySelectorAll(".sidebar a");
let links = sidebarLinks.length;
for (let i = 0; i < links; i++) {
sidebarLinks[i].addEventListener("click", function () {
menu.classList.remove("active");
});
}
hamburger.addEventListener("click", function () {
menu.classList.add("active");
});
overlay.addEventListener("click", function () {
menu.classList.remove("active");
});
sidebarLinks.addEventListener("click", function () {
menu.classList.remove("active");
});
};
//TypeWriter
class TypeWriter {
constructor(txtElement, words, wait = 3000) {
this.txtElement = txtElement;
this.words = words;
this.txt = "";
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
}
type() {
const current = this.wordIndex % this.words.length;
const fullTxt = this.words[current];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
let typeSpeed = 300;
if (this.isDeleting) {
typeSpeed /= 2;
}
if (!this.isDeleting && this.txt === fullTxt) {
typeSpeed = this.wait;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === "") {
this.isDeleting = false;
this.wordIndex++;
typeSpeed = 500;
}
setTimeout(() => this.type(), typeSpeed);
}
}
document.addEventListener("DOMContentLoaded", init);
function init() {
const txtElement = document.querySelector(".txt-type");
const words = JSON.parse(txtElement.getAttribute("data-words"));
const wait = txtElement.getAttribute("data-wait");
new TypeWriter(txtElement, words, wait);
}
SideBar();
