Develop Reference

Find the other relationship in JavaScript

I have a big function which has many others functions, (But I can't have all those functions because make a wrong with my others scripts) therefore I only need the functions which make the action which I need; recently I was helped to find a function, but I think which miss other function which Hide the content, and show a button that I need. When I run the script works well, but doesn't show a button and too isn't hidden that bar when you return to the initial position. I tested the big script only for know if there is my mistake and elementally yep.
The big script you can find this here and too the example of what I'm trying to do See the code and example
You can take a look of what I'm trying to do on this image and the problem:
See Picture of the problem
My current script is this, works very well, but miss those two details which are into the big script. Please help me.
// JavaScript Document
;
jQuery(document).ready(function () {
"use strict";
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function () {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});

If you want to show button (arrow) you need to add it in your html then you can use this script:
<!-- language: lang-js -->
// JavaScript Document
;
jQuery(document).ready(function() {
"use strict";
jQuery(window).scroll(function() {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function() {
var calScreenWidth = jQuery(window).width();
if (jQuery(this).scrollTop() > 200) {
jQuery('#toTop').stop().css({
opacity: 0.5,
"visibility": "visible"
}).animate({
"visibility": "visible"
}, {
duration: 1000,
easing: "easeOutExpo"
});
} else if (jQuery(this).scrollTop() == 0) {
jQuery('#toTop').stop().css({
opacity: 0,
"visibility": "hidden"
}).animate({
"visibility": "hidden"
}, {
duration: 1500,
easing: "easeOutExpo"
});
}
});
jQuery('#toTop, .hr_totop').on('click', function() {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
});
jQuery(window).scroll(function() {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});
when you scroll up, the bar not hide again ?? i test here with this small script and its hide it when i scroll up

Only execute JS if the screen size is more than 1024px?

I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}

This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})

From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)

First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');

if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.

JavaScript is being triggered before its time, *only on Chrome & IE

I have a gallery of three Grids with images. The grid sizes changes depending on the screen size, and I have achieved that using Media-Query - ie, on desktop the grid's width will be 33% to make three columns view next to each other, and on tablet it will be 50% to make two columns view, and on phone it will be a 100% for each grid making one column view.
The reason I did this is to create a tiled gallery with images of different heights - and if I did it the normal way it will generate White-empty-spaces when floating.
So to fix this problem, and with the help of few members on this website, we have created a JavaScrip function that will MOVE all of the images that are inside Grid3 equally to Grid1 & Grid2 when screen size is tablet, so we get rid of the third grid making a view of fine two columns. Everything is working great!
Now, the problem is - on Chrome & IE - The function is being fired before its time for some reason that I need your help to help me find it! Please try it your self here: [http://90.195.175.51:93/portfolio.html][2]
Slowly on Chrome or IE - (try it on Firefox as well) - try to re-size the window from large to small, you will notice that BEFORE the top header changes to be a responsive Header (which indicate that you are on a small screen) the images have been sent to Grid1 and Grid 2! but a few px before the time. As on the function it says to fire it on <770.
Hope my question is clear enough for you to help me solve this issue which is stopping me from launching my website. Thanks.
Here is the JavaScrip:
//Gallery Grid System//
var testimonial = $(".testimonial, .galleryItem", "#grid3");
(function () {
$(document).ready(GalleryGrid);
$(window).resize(GalleryGrid);
})(jQuery);
function GalleryGrid() {
var grid3 = $('#grid3');
var width = $(window).width();
if (width < 1030 && width > 770) {
var grid1 = $('#grid1');
var grid2 = $('#grid2');
for (var i = 0; i < testimonial.length; i++) {
if (i < testimonial.length / 2) {
grid1.append(testimonial[i]);
} else {
grid2.append(testimonial[i]);
}
}
} else {
grid3.append(testimonial);
}
}
Note: The following is the whole page with all the functions:
$(document).ready(function () {
//Prevent clicking on .active links
$('.active').click(function (a) {
a.preventDefault();
});
//Allow :active on touch screens
document.addEventListener("touchstart", function () {}, true);
//Hide toolbar by default
window.addEventListener('load', function () {
setTimeout(scrollTo, 0, 0, 0);
}, false);
//Scroll-up button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
//StickyBox
$(function () {
$.fn.scrollBottom = function () {
return $(document).height() - this.scrollTop() - this.height();
};
var $StickyBox = $('.detailsBox');
var $window = $(window);
$window.bind("scroll resize", function () {
var gap = $window.height() - $StickyBox.height() - 10;
var footer = 288 - $window.scrollBottom();
var scrollTop = $window.scrollTop();
$StickyBox.css({
top: 'auto',
bottom: 'auto'
});
if ($window.width() <= 770) {
return;
$StickyBox.css({
top: '0',
bottom: 'auto'
});
}
if (scrollTop < 50) {
$StickyBox.css({
bottom: "auto"
});
} else if (footer > gap - 100) {
$StickyBox.css({
top: "auto",
bottom: footer + "px"
});
} else {
$StickyBox.css({
top: 80,
bottom: "auto"
});
}
});
});
//Change items location depending on the width of the screen//
$(function () { //Load Ready
function myFunction() {
var insert = $(window).width() <= 770 ? 'insertBefore' : 'insertAfter';
$('#home-sectionB img')[insert]($('#home-sectionB div'));
$('#home-sectionD img')[insert]($('#home-sectionD div'));
}
myFunction(); //For When Load
$(window).resize(myFunction); //For When Resize
});
//Contact Form//
$(".input").addClass('notSelected');
$(".input").focus(function () {
$(this).addClass('selected');
});
$(".input").focusout(function () {
$(this).removeClass('selected');
});
$(document).ready(function () {
GalleryGrid();
$(window).resize(GalleryGrid);
});
//Gallery Grid System//
var testimonial = $(".testimonial, .galleryItem", "#grid3");
(function () {
$(document).ready(GalleryGrid);
$(window).resize(GalleryGrid);
})(jQuery);
function GalleryGrid() {
var grid3 = $('#grid3');
var width = $(window).width();
if (width < 1030 && width > 770) {
var grid1 = $('#grid1');
var grid2 = $('#grid2');
for (var i = 0; i < testimonial.length; i++) {
if (i < testimonial.length / 2) {
grid1.append(testimonial[i]);
} else {
grid2.append(testimonial[i]);
}
}
} else {
grid3.append(testimonial);
}
}
//Testimonials Animation//
$(".testimonial").hover(function () {
$(".testimonial").addClass('testimonialNotActive');
$(this).removeClass('testimonialNotActive').addClass('testimonialActive');
},
function () {
$(".testimonial").removeClass('testimonialNotActive');
$(this).removeClass('testimonialActive');
});
//Portfolio Gallery Filter//
(function () {
var $portfolioGallerySection = $('#portfolio-sectionB'),
$filterbuttons = $('#portfolio-sectionA a');
$filterbuttons.on('click', function () {
var filter = $(this).data('filter');
$filterbuttons.removeClass('portfolio-sectionAClicked');
$(this).addClass('portfolio-sectionAClicked');
$portfolioGallerySection.attr('class', filter);
$('.galleryItem').removeClass('selectedFilter');
$('.galleryItem.' + filter).addClass('selectedFilter');
});
}());
});

Your problem is that CSS media queries and jQuery's $(window).width() do not always align.
function getCSSWidth() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return e[ a+'Width' ];
}
Use this instead of $(window).width()
modified from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

I think this could solve your problem (but I'm not quite sure)
//Put that before the document ready event
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// Here you call GalleryGrid (replace $(window).resize(GalleryGrid) with that):
$(window).smartresize(GalleryGrid);
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

The reason is your vertical scrollbar. Your content is fixed at width=1030, but when the window size is 1030, the size of the viewport is actually: window size (1030) - vertical scroll bar
Try setting
<body style="overflow:hidden">
You will see that it works correctly when the scrollbar is removed. Or try setting:
<link href="assets/css/tablets-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width : 1045px)"/>
Set max-width:1045px to make up for scrollbar, you will see that it works correctly.
Your javascript should be like this:
var width = $(window).width() + verticalscrollbarWidth;

Adding Media Queries to Javascript

I've got a sticky sidebar going on with this code. But I only want it to affect the .fake-sidebar div when at 768px or below. Could anyone explain how to add media queries to my javascript?
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('.fake-sidebar').offset();
sticky_offset = original_position_offset.top;
$('.fake-sidebar').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('.fake-sidebar').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('.fake-sidebar').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('.fake-sidebar').css('position', 'fixed');
}
});
Any help is appreciated. Thanks in advance!

You can add the event on window resize, or on document ready, depending of what you want:
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$('.fake-sidebar').css('position', 'relative');
}
else {
$('.fake-sidebar').css('position', 'fixed');
}
});

jQuery visible selector not working

trying to use :visible and it's not working.
neither $('.landscape:visible') or $('.landscape').filter(':visible')
My goal is to make a variable of whatever the visible landscape picture is, grab it's height, then apply that to the portrait images for consistency.
For testing purposes , the third navigation button, #w, is set to write what that height is using variable vincent.
test site: http://brantley.dhut.ch/
JavaScript:
(function($){
$.respond = function(callback) {
var element = $('#main');
$('.z').hide();
$(document).ready(function() {
dimensions();
});
$(window).load(function() {
dimensions();
$('#load').fadeOut('fast', function() {
$('.z:first').fadeIn('slow');
$('footer').fadeIn('slow');
});
});
$(window).resize(function() {
dimensions();
});
//Adjust image size
function dimensions() {
return element.each(function() {
var i = $('.z', element);
$(i).each(function(){
var browserWidth = $(window).width();
var imgRatio = $(this).width() / $(this).height()
var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
var browserRatio = browserWidth / availableHeight
var zzz = $('.z').height();
/* resize functions
$(this).height(availableHeight).width('auto');
$(this).width(browserWidth - 40).height('auto');
*/
/* image sizing logic */
if (imgRatio >= 1) {
$(this).addClass('landscape');
}
var vincent = $('.landscape').filter(':visible').height();
if (browserRatio >= imgRatio) {
if (availableHeight <= 312) {
/* Landscape */
$('body').css('background', 'yellow');
$(this).width(browserWidth - 40).height('auto');
} else {
$(this).height(availableHeight).width('auto');
$('body').css('background', 'green');
}
} else {
if (availableHeight <= 312) {
/* Portrait */
$('body').css('background', 'yellow');
$(this).height(200).width('auto');
} else {
$(this).width(browserWidth - 40).height('auto');
$('body').css('background', 'blue');
}
}
/* horizontally center content */
$(this).css('margin-left', (browserWidth - $(this).width())/2);
$('#w').text(vincent);
});
return false;
});
};
//callback();
};
})(jQuery);

Try if ($('.landscape').is(':visible')){}