Njinx Njinx - 3 months ago 8
CSS Question

Title tag appearing as text in jQuery 3.0 and up

Ok, this is an issue I just starting having that makes no sense. After I upgraded from jQuery 1.12.4 to jQuery 3.1.0 the content of my title tag has appeared in the top of my website like some sort of banner. Is this a new feature in jQuery 2.0 or 3.0? Whats going on? Anybody have an idea. I will provide my HTML and a picture.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google-site-verification" content="CblMwySM2IuPrn8tTG2nM4O85kLC7tJScMVwWOKDjgw" />
<title>Ben Allen | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/a40bd61650.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="author" content="Ben Allen">
<meta name="description" content="This is the website of Ben Allen. Here you can find all of Ben Allen's work, projects, knowledge, etc.">
<meta name="robots" content="follow">
<meta name="robots" content="index">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://thebenallen.net" />
<meta property="og:site_name" content="TheBenAllen.net" />
<meta title="TheBenAllen.net">
<meta name="og:title" content="TheBenAllen.net" />
<meta name="og:description" content="This is the website of Ben Allen." />
<meta name="og:image" content="/favicons/image.png" />
<meta name="keywords" content="thebenallen, the ben allen, ben allen, thebenallen.net, benallen">
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<script src="plugins/jquery.function-toggle.js"></script>
<script src="plugins/jquery.overlaps.js"></script>
<script src="plugins/jquery.migrate.js"/></script>
</head>

<body>
<div id="background"></div>
<div class="container-fluid">
<nav class=" hidden-lg navbar navbar-default">
<div class="container-fluid no-hide">
<ul class="nav navbar-nav hidden-xs" role="navigation">
<li id="projects"><a style="font-size: 1.3em"><i class="fa fa-code" aria-hidden="true"></i>My Projects</a></li>
<li id="about"><a style="font-size: 1.3em"><i class="fa fa-user" aria-hidden="true"></i>About Me</a></li>
<li id="home"><a style="font-size: 1.6em"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li id="skills"><a style="font-size: 1.3em"><i class="fa fa-paint-brush" aria-hidden="true"></i>My Skills</a></li>
<li id="contact"><a style="font-size: 1.3em"><i class="fa fa-envelope-o" aria-hidden="true"></i>Contact Me</a></li>
</ul>
<ul class="nav navbar-nav visible-xs" role="navigation">
<li><a id="projects" style="font-size: 1em"><i class="fa fa-code" aria-hidden="true"></i></a></li>
<li><a id="about" style="font-size: 1.3em"><i class="fa fa-user" aria-hidden="true"></i></a></li>
<li><a id="home" style="font-size: 1.6em"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a id="skills" style="font-size: 1.3em"><i class="fa fa-paint-brush" aria-hidden="true"></i></a></li>
<li><a id="contact" style="font-size: 1em"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
</ul>
</div>
</nav>
<div id="card-info">
<div class="card text-center" id="home">
<h1 class="text-capitalize heading">ben allen</h1>
<hr>
<h4 class="text-capitalize text">web developer</h4>
</div>
</div>
<div class="arrow-wrapper">
<i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"></i>
<i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"></i>
</div>
<footer id="footer">
<p class="heading">&copy; Ben Allen | All Rights Reserved</p>
</footer>
</div>
<script>
$(document).ready(function() {


// Page Reload on Resize
$(window).resize(function() {
location.reload();
});

// Harambe
$(document).bind('keypress', function(event) {
if(event.which === 72 && event.shiftKey) {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', '/harambe/song.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
}
});

// Arrows
$('.arrow-right').click(function() {
if ($('div#projects').length) {
$('div#projects').animate({'right':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/about.html', function() {
$(this).fadeIn(200);
});
});
}
if ($('div#about').length) {
$('div#about').animate({'right':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/home.html', function() {
$(this).fadeIn(200);
});
});
}
if ($('div#home').length) {
$('div#home').animate({'right':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/skills.html', function() {
$(this).fadeIn(200);
});
});
}
else if ($('div#skills').length) {
$('div#skills').animate({'right':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/contact.html', function() {
$(this).fadeIn(200);
});
});
}
else {
console.log('Error.');
}
});
$('.arrow-left').click(function() {
if ($('div#about').length) {
$('div#about').animate({'left':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/projects.html', function() {
$(this).fadeIn(200);
});
});
}
if ($('div#home').length) {
$('div#home').animate({'left':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/about.html', function() {
$(this).fadeIn(200);
});
});
}
if ($('div#skills').length) {
$('div#skills').animate({'left':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/home.html', function() {
$(this).fadeIn(200);
});
});
}
if ($('div#contact').length) {
$('div#contact').animate({'left':'1000%'},500, function() {
$(this).hide();
$('#card-info').fadeOut(0).load('/ajax/skills.html', function() {
$(this).fadeIn(200);
});
});
}
else {
console.log('Error.');
}
});

// Fade In
$('*:not(body, html, #background)').slideUp(0);
$('.harambe').hide();
$('*').fadeIn(1000);

// Navbar and Card Overlap Prevention
$('nav.navbar').overlaps('div.card-info', function () {
$('div.card-info').css('padding', '10px');
});
// Navigation
$('#projects *').click(function() {
if ($('div#projects').length < 1) {
$('#card-info').fadeOut(0).load('/ajax/projects.html', function() {
$(this).fadeIn(500);
});
}
});
$('#about *').click(function() {
if ($('div#about').length < 1) {
$('#card-info').fadeOut(0).load('/ajax/about.html', function() {
$(this).fadeIn(500);
});
}
});
$('#home *').click(function() {
if ($('div#home').length < 1) {
$('#card-info').fadeOut(0).load('/ajax/home.html', function() {
$(this).fadeIn(500);
});
}
});
$('#skills *').click(function() {
if ($('div#skills').length < 1) {
$('#card-info').fadeOut(0).load('/ajax/skills.html', function() {
$(this).fadeIn(500);
});
}
});
$('#contact *').click(function() {
if ($('div#contact').length < 1) {
$('#card-info').fadeOut(0).load('/ajax/contact.html', function() {
$(this).fadeIn(500);
});
}
});
});
</script>






Picture:
My website

If you need anymore information please feel free to ask. Thanks in advance!

Answer

The problem seems to be coming from your jQuery line $('*').fadeIn(1000);. Changing this to $('*:not(title)').fadeIn(1000); seems to fix the problem for me. Hopefully it will fix it for you as well!

I'm not entirely sure why the title would get affected in that way, but perhaps something changed between the jQuery versions that affects fades.

Comments