Develop Reference

Responsive Mobile Menu

I have a function that applies a class to the html element and also detects if a drop down has been clicked below the width of 900px.
When I resize the browser from desktop view to below 900px I find occasionally that the dropdown class "active-hit" doesn't get applied - meaning that the menu won't open. Any ideas why this might be? I have to reload the page to make it work in mobile view.
// Add Mobile View Class to HTML ELEMENT below 900px
(function($) {
var $window = $(window),
$html = $('html');
$dropdown = $('.dropdown-nav > a');
function resize() {
if ($window.width() < 900) {
$dropdown.on('click', function(e){
$(this).parent().toggleClass('active-hit');
e.preventDefault();
e.stopPropagation();
});
return $html.addClass('mobile-view');
} else {
$html.removeClass('mobile-view');
$dropdown.parent().removeClass('active-hit');
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);

As I mentioned in a comment, window resize will not trigger your function, but if You want to do so in testing purposes then you can try to use this:
$(window).resize(function() {
resize();
});
And here is working fiddle for you

Get div height befor the div content is fully loaded

I've got a button, that when I click executes a js code. Like this.
jQuery( ".button" ).on('click', function(){
var page = jQuery(this).attr('data-href');//Get data-href with permalink.
jQuery('#ajax_div').load(page,
function(){
var newHeight = jQuery('#content_loaded').height()+200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({'height': newHeight + 'px'});
});
});
The first time it loads the page works wrong, but after have the images, etc, in cache it works ok. How can I wait that the content is fully rendered to execute the height calc?
All of this without use delay functions and with out use a plugin. There is a function like $(windows).ready().
I'm using wordpress, and with jquery load() it gets the height before the image is fully render and the height is less than the real height of the content in the div.
Thanks.

You could check that all images added are loaded using following snippet:
jQuery(".button").on('click', function () {
var page = jQuery(this).attr('data-href'); //Get data-href with permalink.
jQuery('#ajax_div').load(page, function () {
var $self = $(this),
$contentImages = $(this).find('img');
$contentImages.one('load', function () {
$(this).addClass('loaded');
if ($self.find('img.loaded').length === $contentImages.length) {
var newHeight = jQuery('#content_loaded').height() + 200;
var el = jQuery('#div_containing_ajax_div_and_content_loaded');
el.css({
'height': newHeight + 'px'
});
}
}).each(function () {
if (this.complete) $(this).triggerHandler('load');
});
});
});

maybe I should say that you have 2 ways to do that .. one I'm not tested it and another I tested it
1st: untested way .promise().done();
jQuery('#ajax_div').load(page).promise().done(function(){
// var newHeight ......
});
2nd: tested way in .load callback function loop through images and check if loaded or not using Image.error(function() {});
$('img').each(function(){
var Image = $(this);
var GetSrc = $(this).attr('src');
Image.error(function() {
// newHeight ......
});
});
DEMO

Accordion looping on resize

I have a menu that is hidden in an accordion when viewing on screens less than 600px.
On screens larger than 600px the menu is visible.
jsfiddle- http://jsfiddle.net/ashatron/zbzqoz2f/
it works ok, but when i resize the window to be greater than 600px, then go back to less than 600px then press view sitemap it loops the animation multiple times.
I think its running the function for every resize event, which is queing up the accordion and then looping it. But I'm not sure how best to order the syntax to get it to work.
Any help would be appreciated!
footernavmenufn = function() {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
// console.log('hmmm');
return false;
}).next().hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
$(document).ready(function () {
footernavmenufn();
});
$(window).resize(function(){
footernavmenufn();
//console.log('OMG-WHY-YOU-NO-WORK');
});

The issue is that everytime window is resized and the condition is met, you're binding a new click event handler, so after a while there'll be multiple event handlers causing chaos. Ideally your code should be something like
$(document).ready(function () {
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
console.log('hmmm');
return false;
});
$(window).resize(footernavmenufn);
footernavmenufn(); // or $(window).trigger("resize");
});
footernavmenufn = function () {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
Updated Fiddle

Why do you have this code? Crazy one. Remove it:
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
return false;
}

move the click declaration into the $(document).ready function.
at the moment everytime you resize the page that click function is being added again - so the repeat is once per page resize.
forked jsfiddle with change

whats wrong with this code? im trying to change the height of each section to the height of window

whats wrong with this code? im trying to change the height of each section to the height of window.
function setsize()
{
var w=$(window).width();
var h=$(window).height();
var sections = new Array("home","about","skills");
for (var i=0;i<3;i++)
{
var element = document.getElementById(sections[i]);
$(element).height(h);
}
}
$(window).ready(function() {
setsize();
});
$(window).resize(function() {
setsize();
});
here is sample of the markup:
<section id="#home">
<h1>..................</h1>
</header>

Seems like a strange way to do that ?
$(window).on('resize load', function() {
$('#home, #about, #skills').height( $(this).height() );
});
You have to update the variables when the window changes size, i.e. inside the resize function
EDIT:
You'll also need a DOM ready handler, and window.onload isn't always triggered when doing it that way, so just do the same thing on DOM ready, like so :
$(function() {
$('#home, #about, #skills').height( $(window).height() );
$(window).on('resize', function() {
$('#home, #about, #skills').height( $(this).height() );
});
});
FIDDLE

Make scrollTop to always check

I'm doing a scrollTop jQuery function, and it is working very nice, see it below:
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
});
});
However, if the user have his scrollTop, in that case, higher than 1225, and the script isn't fully loaded, the function will not happen, just if he scroll the page again. Isn't there a way to make the scrollTop to always check, not just if the user Scrolls the page?
Thanks a lot in Advance.

Yes, trigger the event yourself.
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
}).triggerHandler("scroll");
});