Hello, my name is Irving Armenta, i am a Graphic designer and i am trying to make my first webpage, since coding is not my forte, i am looking for an answer in here, i appreciate any remark or comment, in order to fix this:
This is the link to my Site:
http://irvingtesting.byethost5.com/
It's a test site, in a free server, my issue is
"simple";
in google chrome, my page works completely fine, it appends the class ".active" to the "li" in the navigation bar which is a .
The class is added when it hits the window top;
The problem happens in Firefox and IE11, (Up to date versions 2015)
It seems like the #divs don't hit completely the top, it's like 1 pixel difference, so the ".active" class doesn't work, it doesn't get active, unless you manually scroll down that "1 pixel" Therefore, affecting the navigation of the site; These are the assets on my site, all that i am using for the multiple functions:
i am using "Skeleton"
http://getskeleton.com/ as my responsive boiler plate, this is my first time doing this, i want a responsive site.
The site is pretty simple as you may see, just 3 sections i have in mind, some introduction to myself, my work and a contact section.
I got many Jquery Plugins working on the site, a loader which is just like a huge div infront of the site, some hacks with jquery and stuff.
I am using this:
http://webpop.github.io/jquery.pin/ for the pinned navigation bar.
I am using this:
http://scrollme.nckprsn.com/ for the fade in animation of the content div in "Portfolio"
now i have these Scripts on the footer:
This is what makes the Smooth Scrolling:
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('body,html').animate({
scrollTop: target.offset().top
}, 1200);
return false;
}
}
});
});
</script>
This is what adds the class ".active" to the "li" :
<script type="text/javascript">
$(document).ready(function(){
var aChildren = $("nav li").children();
var aArray = [];
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
}
$(window).scroll(function(){
var windowPos = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPosid = $(theID);
if (!divPosid.length) {
return;
}
var divPos = divPosid.offset().top;
var divHeight = $(theID).outerHeight();
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
if(windowPos + windowHeight == docHeight) {
if (!$("nav li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
$("nav li:last-child a").addClass("nav-active");
}
}
});
});
</script>
This is the origin of the script above:
http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation
Thank you very much for your attention.