We Keep Coding

jquery waypoints and .scroll() conflict

Here's my JS code:
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var opacity = ((height - scrollTop) / height);
var scale = ((height - (scrollTop/10)) / height);
console.log(opacity);
if(opacity>=0.05){
$.each(links, function( i, link ) {
$(link).css({
'opacity': opacity,
});
})} else {
$(link).css({
'opacity': 0.05
});
}
if(scale>=0.9){
$('#index').css({
'transform': 'scale('+scale+')'
});
} else {
$('#index').css({
'transform': 'scale(0.9)'
});
}
});
$( document ).ready(function() {
$('#aboutContent').waypoint(function(direction) {
alert('hit!');
});
});
The .scroll() function works exactly as I want it but the waypoint doesn't at all. If however, I remove the .scroll() function the waypoint works as it should. Can anyone spot what could be causing the issue? I can't find any know conflicts between .scroll() and waypoints. Here's a JSFiddle: https://jsfiddle.net/zocdvefx/ If you remove the .scroll() function the waypoint should work.
Thanks!
Jamie

In your fiddle the issue is in this if-else block:
if (opacity >= 0.05) {
$.each(links, function(i, link) {
$(link).css({
'opacity': opacity,
});
})
} else {
$(link).css({ // <-- link is no longer in scope and is undefined
'opacity': 0.05
});
}
Changing link to links in the line I highlighted above will resolve your issue.
For future reference always check your browser's developer console (usually F12) when you're running into an issue. As soon as I opened it in your jsfiddle it immediately started telling me what the issue was: ReferenceError: link is not defined.

Run jQuery script on window resize

I have a bit of script that will run various functions on a window resize,
$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);
function resizeFrame(){
// various scripts //
}
This works absolutely fine, and the scripts I run in there work also. I then have a separate script that sets the height of various divs on document load, which also works just fine.
var h = 0,
target = $('.home #content .items-row .item article');
target.each(function(){
if (h < $(this).height()){
h = $(this).height();
}
});
target.each(function () {
$(this).css("height", h + 'px');
});
$('.testimonials .items-row').each(function () {
$('.span4 article', this).css('height',
Math.max.apply( Math,
$.map($('.span4 article', this), function(x) {
return $(x).height();
})
)
);
});
However when i try to combine the two, my divs will resize once on load, but not again on window resize. This is how i have combined the two,
function articleResize(){
var h = 0,
target = $('.home #content .items-row .item article');
target.each(function(){
if (h < $(this).height()){
h = $(this).height();
}
});
target.each(function () {
$(this).css("height", h + 'px');
});
$('.testimonials .items-row').each(function () {
$('.span4 article', this).css('height',
Math.max.apply( Math,
$.map($('.span4 article', this), function(x) {
return $(x).height();
})
)
);
});
}
$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);
function resizeFrame(){
articleResize();
}
If anyone has any clues it would be greatly appreciated.
EDIT
as background here is the resizeFrame in its entirety,
function resizeFrame(){
var screenWidth = $(window).width();
function phoneEnable(){
$('#MainNav ul.nav').prependTo('.sidr-inner').addClass('nav-list nav-collapse');
$('#MainSocial ul.roundIcons').prependTo('.sidr-inner');
};
function phoneDisable(){
$('#sidr ul.nav').prependTo('#MainNav').removeClass('nav-list nav-collapse');
$('#sidr ul.roundIcons').prependTo('#MainSocial');
}
if (screenWidth >= 980){
phoneDisable();
} else{
phoneEnable();
};
var highestBox = 0;
$('.blog-featured .item article', this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$('.blog-featured .item article',this).height(highestBox);
articleResize();
};

Your load event was not firing in the samples I tried.
Instead of your current event registration try this:
JSFiddle: http://jsfiddle.net/j9SR5/1/
// jQuery DOM ready shortcut event handler (with locally scoped $)
jQuery(function($){
// Register for window resize
$(window).resize(resizeFrame);
// Do initial resize
resizeFrame();
});
Update: http://jsfiddle.net/TrueBlueAussie/j9SR5/5/
You are setting a fixed height, so the next time you resize the height is as specified previous (and will not change). The new JSFiddle resets the heights to their natural state first.
// Revert to height based on content
target.each(function () {
$(this).css("height", '');
});

jQuery is just wrapping the standard resize DOM event, eg.
window.onresize = function(event) {
...
};
jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ,

jQuery Highlight Nav links on scroll not working

I'm extremely new to JavaScript so I apologize in advance. I'm trying to create a one page html document for a school project using a list of links for navigation that change when the anchor is scrolled to. I've tried various different methods found on Jfiddle and through stackoverflow. This is the method I am trying now: http://jsfiddle.net/m2zQE/
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
$(document).ready(function () {
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function (e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
});
// Set up content an array of locations
$('#nav').find('a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);
});
// Animate menu scroll to content
$('#nav').find('a').click(function () {
var sel = this,
newTop = Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function () {
window.location.hash = $(sel).attr('href');
});
return false;
});
// adjust side menu
$(window).scroll(function () {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function (i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
$('#nav li')
.removeClass('selected')
.eq(i).addClass('selected');
}
});
});
});
I'm still not having any luck. I've already searched to see if I could debug the problem and have tried changing the order of the code as well as the order of calling jquery.
Here is a link to the site: https://googledrive.com/host/0BwvPQbnPrz_LMlZDeGlFY2Yydmc/index.html
I used html5boilerplate as a starting point.Thank you in advance.

Don't have much time to look into your code, but when I input the line
Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height())
into the console of developer tools, it return NaN.
So I guess the problem is you don't have your scrollTop correctly set.
I suggest you give each element an id and try:
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
or if you insist not giving id,
$('html, body').animate({
scrollTop: $("#container-fulid:nth-child(2)").offset().top
}, 2000);
but notice that this is not working on all browser as the nth-child selector is a CSS3 selector.
Or, if you know how to correctly use other's work, you may try to use bootstrap 3.0, where there is already a function named scrollspy included, which do exactly the thing you are doing.
http://getbootstrap.com/javascript/#scrollspy

Scroll when div content is outside viewport

I've got a simple piece of code like this
http://jsfiddle.net/QTa2c/
and all I want is, when user click on some of the last elements in list to show the content,
$('a.showMeThis').click(function() {
$(this).next('.content').slideToggle('fast', function() {
// there's go all the magic
});
});
and it goes outside the viewport (partly or completely) - scroll of the height of div, so he can see all of the content.
I was looking a lot for some logic for this, playing around with position().top, window.innerHeight and more, but it never goes in the way I want…
Hope you guys will help me, take care and have a nice day!

Use .animate() and .offset()
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
$('html,body').animate({
scrollTop: $this.offset().top
}, 'slow');
});
});
Fiddle Demo
Updated after OP's comment
Updated Fiddle Demo
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
if ($this.position()) {
if ($this.position().top + $this.height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight)) {
$('html,body').animate({
scrollTop: $this.position().top - (window.innerHeight || document.documentElement.clientHeight) + $this.height() + 15 + $this.next('.content').height()
}, 100);
}
}
});
});

With condition it looks like this: http://jsfiddle.net/QTa2c/1/
if ($(this).parent().offset().top + $(this).height() > window.innerHeight + $(window).scrollTop())
{
var a = $(this)
$('html,body').animate({scrollTop: $(a).parent().offset().top})
}
I think, this code is enough to understand the logic =)
UPD: note, that you should insert return false; into .click event to prevent jumping to # anchor.

Click event stops working

I wish someone could help me, I'm a little bit irked about this problem since I've been resolving other issues with this scroll behavior that I'm trying to implement on this site... as you see my sub-menu (on the left) follows the window position as you scroll or you can click any option on the sub-menu wich will trigger an animation, well what seems to be the problem is that everytime I click a second time it won't work, until I re-click it, it will work...
Here's my code
Variables
var startDistance = 210;
var $scrollingDiv = $("#sub-menu");
var position = $("#footer").position();
var height = $("#sub-menu").height();
var pos = position.top - (height + 460);
This is to differ between users and animation scroll
$("body,html").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
if($(window).scrollTop() > startDistance && $(window).scrollTop() < pos) {
$scrollingDiv.stop().animate({
paddingTop: ($(window).scrollTop() - 75) + "px"
}, 'slow');
}
if($(window).scrollTop() == 0) {
$scrollingDiv.stop().animate({
paddingTop: 0
}, 'slow');
}
}
});
Click behavior
$("#sub-menu ul li a").live('click', function(ev) {
var $anchor = $(this);
console.log($anchor.attr('href'));
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo', function() {
$scrollingDiv.stop().animate({
paddingTop: ($($anchor.attr('href')).offset().top - 556) + "px"
}, 'slow');
});
event.preventDefault();
});
It might be the silliest thing but I've been watching my screen for last hour w/o being able to realize what's going on.
Edit: I'm posting my scroll code behavior too because I feel that It might be a global problem and not only related to my click code
Thank you in advance!

[22:00:25.137] ReferenceError: event is not defined # http://altivamedia.com/pruebas/romulos/wp/wp-content/themes/romulos/_/js/functions.js:45
You've accidentally wrote event instead of ev:
});
event.preventDefault();
});
Since event hasn't been defined a ReferenceError gets thrown. Simply use the correct variable:
});
ev.preventDefault();
});
Remark
In order to find such errors on your own use your browser's error console.