We Keep Coding

jQuery innerWidth not working with } else { without doing a page refresh

I have an issue with jQuery not firing on the else statement and I'm pretty sure its pretty simple why it's not but unable to solve it myself due to the lack of my JavaScript knowledge, I'm hoping that someone can tell me the issue.
My jQuery script has two sets of actions, one for above 639px and one set below. It works on the page load but if you reduce the size from 1600px to 600px, the height remains of the element remains the height of the window despite going under 639px it does not change it to height-min: auto.
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
}
}).resize();
});

The min-height declaration does not work because you have a typo: the selectors in your if-else conditions are not the same:
In the if block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
In the else block: $('.nanoContainer, .flexAligner .vegas-container')
A comma is missing from the latter, and without your markup I cannot tell which one is the intended selector.
With regards to the issue with .vegas() not working as it should, that is because you are only initialising the plugin at different breakpoints, but never destroying the other instance. In this case, I refer you to the code: the plugin appears to expose a destroy function, which you can call to destroy the instance when switching between breakpoints, e.g. $selector.vegas('destroy').
Here is a code that might work: no guarantees since you have not provided an MCVE and I am unable to test it:
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
// Set min-height
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
// Create new Vegas instance
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$(".home .intro").vegas('destroy');
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');
// Create new Vegas instance
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$("body.home").vegas('destroy');
}
}).resize();
});

Magnific popup has scroll problems on the iPhone

I'm using the Magnific popup for to show the popup in my site, it's worked well in all browsers and smartphones, however it happened a problem on the iPhone, when I scroll the page with popup open, the "body" scroll together.
This is my jQuery code:
if ($.fn.magnificPopup) {
$('.open-popup').magnificPopup({
type: 'inline',
alignTop: true,
midClick: true,
fixedContentPos: true,
removalDelay: 300,
mainClass: 'modulos-popup fade-popup'
});
$.extend(true, $.magnificPopup.defaults, {
tClose: 'Fechar (Esc)',
tLoading: 'Carregando...'
});
}

yeah I'm facing the same problem seems like the following patch is working for me:
utils.js(useful if you are using the popup in different places)
window.Utils = {
magnificPopupConfiguration: function() {
var startWindowScroll = 0;
return {
beforeOpen: function() {
startWindowScroll = $(window).scrollTop();
$('html').addClass('mfp-helper');
},
close: function() {
$('html').removeClass('mfp-helper');
setTimeout(function(){
$('body').animate({ scrollTop: startWindowScroll }, 0);
}, 0);
}
}
}
}
css:
.mfp-wrap {
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
}
html.mfp-helper {
height: 100%;
body {
overflow: hidden;
height: 100%;
-webkit-transform: translateZ(0);
}
}
Preparing the js:
$(document).ready(function() {
if ($('.open-popup-link').length) {
startWindowScroll = 0;
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true,
fixedContentPos: true,
callbacks: Utils.magnificPopupConfiguration()
});
}
});
html:
<a class="open-popup-link" href="#your-html-content">text link</a>

run animation at the same time not working

So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(

Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position

Accordion inside tinyscrollbar

I have built accordion inside tinyscroll bar div. But the problem is tiny scrollbar is not extending (height) when the accordion menu opens.
Here is my code
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: 'slow'
});
FIDDLE

you need to call $('#scrollbar1').tinyscrollbar_update(); once the accordion has finished its animation, like so:
fiddle
$('#test').click(function(){
$('#dialog').show();
$('#scrollbar1').tinyscrollbar();
$('#overlay').show();
});
//Accordion
$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: false,
disableLink: false,
showCount: false,
speed: '400'
});
$("#accordion-3").on("click", function() {
window.setTimeout( function() {
$('#scrollbar1').tinyscrollbar_update();
} , 400 );
});
I don't think dcAccordion has any sort of callback feature, so you're stuck with setTimeout

jQuery UI modal dialog overlay fade out

Is it possible to apply a fade out effect on the jQuery UI modal dialog box overlay? The issue is that the overlay div is destroyed when the modal dialog box is closed preventing any kind of animation. This is the code I have that would work if the overlay div was not destroyed on close.
$("#edit-dialog-box").dialog(
{
autoOpen: false,
modal: true,
width: "30em",
show: "fade",
hide: "fade",
open: function()
{
$(".ui-widget-overlay").hide().fadeIn();
},
close: function()
{
$(".ui-widget-overlay").fadeOut();
}
});

Demo: http://jsfiddle.net/276Ft/2/
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
$('.ui-icon-closethick').bind('click.close', function () {
$('.ui-widget-overlay').fadeOut(function () {
$('.ui-icon-closethick').unbind('click.close');
$('.ui-icon-closethick').trigger('click');
});
return false;
});
}
});
​

I advise not to bind the fadeOut of the overlay to the “closethick” close event.
This solution will work in all cases, for example if you use a “Cancel” button, or if the dialog closes itself after doing anything else due to other buttons:
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
},
beforeClose: function(event, ui){
// Wait for the overlay to be faded out to try to close it again
if($('.ui-widget-overlay').is(":visible")){
$('.ui-widget-overlay').fadeOut(function(){
$('.ui-widget-overlay').hide();
$('.ui-icon-closethick').trigger('click');
});
return false; // Avoid closing
}
}
});