Steven Universe Steven Universe - 4 months ago 40
CSS Question

JQuery Works in Preview but not Live on Tumblr

I haven't been able to find an answer that works. There was one that I found with a similar-ish issue but following the solution didn't seem to work.

I'm attempting to make the background of my header change when the page is scrolled down far enough. It works just fine in the preview on Tumblr, however when I go to the live page it doesn't work.

Here's an image demonstrating what I'm trying to accomplish.

Here's my HTML:

<div class="titlor"><a href="/">Don<i>'</i>t Hug Me I<i>'</i>m Scared</a></div>


... My CSS:

.titlor {
font: normal normal bold 40px/40px 'Dhmis', cursive;
height:auto; width:100%;
background:transparent center/cover;
border-bottom:5px solid transparent;
position:fixed;
top:0; left:0;
text-transform:uppercase;
letter-spacing:1.5px;
text-align:center;
padding:10px;
z-index:100;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.titlor a {
color:white!important;
-webkit-transition: all 0.2s ease-in-out!important;
-moz-transition: all 0.2s ease-in-out!important;
-ms-transition: all 0.2s ease-in-out!important;
-o-transition: all 0.2s ease-in-out!important;
transition: all 0.2s ease-in-out!important;
}

.titlor i {
margin-left:-5px;
margin-right:7px;
color:white!important;
}

.titlor i:hover {
color:white!important;
}

.titlor.active {
background:#7acdc7 url('http://i.imgur.com/x3l1mP1.png') center/cover;
border-bottom:5px solid white;
}


... And my JQuery code. This was placed just above the closing tag.

<script>
$(document).ready(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 25) {
$(".titlor").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".titlor").removeClass("active");
}
});
});
</script>


Keep in mind I don't know much about JQuery and JS, I'm still just learning. I found this code off of here; I didn't type it out myself.

Thank you for any help. :]

Almost forgot, here's the blog I'm trying to do this on.

Answer

Your loading jquery multiple times,

Change this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

To that:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

As your using .live() somewhere on your page which I don't think is in 3.1.0

Then at the bottom remove the other

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>