Search jQuery

jQuery Forum

if/else conditional problems

in Using jQuery • 9 years ago

Hey guys and gals,

Does anyone know why my conditional is not working on the sub-pages? The desktop version works fine (when you click on the nav links, it brings up the index page, animates, then takes you to the linked page), but the tablet and phone versions are not supposed to animate, but go straight to the page?

To my eye everything looks fine? HELP!

http://www.mindhandle.com/umc/connect.php

Since the jQuery is minified, here is the code for the sub-pages:

$(document).ready(function() {

var button = $('nav ul').children().find('a');

if (document.width <= 768) {

$.ajax(button.click(function() {

$(this).abort();

}));

} else {

$.ajax(button.click(function(e){

e.preventDefault();

var linkLocation = this.href;

var pos = $(this).data('pos');

$('html').load("index.php", function(data){

$(this).find('div.bg img, div nav ul#mainNav').animate(pos, 500);

cache: false,

$('html').delay(900).fadeOut(1500, function redirect(){

location = linkLocation;

});

}));

$(window).on('pageshow',function(){

$("div.bg img, div nav ul#mainNav, body").removeAttr('style');

});

}

});

Casey Baggz

Replies(6)

rminde

Re: if/else conditional problems

9 years ago

what do you think will you get here?

if (document.width <= 768)

it's allways "undefined"

try

if ($(document).width() <= 768)...

caseybaggz

Re: if/else conditional problems

9 years ago

Thanks for the response! Still a no. :/ Check the link. If you look at it on a tablet, works fine! But, if you look at a tablet sized window on your desktop, not fine. Any more ideas? Thanks for the help BTW!

http://mindhandle.com/umc/index.php

Casey Baggz

$(document).ready(function() {
var button = $('nav ul').children().find('a');
if ($(document).width() > 768) {
$.ajax(button.click(function(e){
e.preventDefault();
var linkLocation = this.href;
var pos = $(this).data('pos');
$('html').load("index.php", function(data){
$(this).find('div.bg img, div nav ul#mainNav').animate(pos, 500);
cache: false,
$('html').delay(900).fadeOut(1500, function redirect(){
location = linkLocation;
});
});
}));
$(window).on('pageshow',function(){
$("div.bg img, div nav ul#mainNav, body").removeAttr('style');
});
} else {
$.ajax(button.click(function() {
$(this).abort();
}));
}
});

kbwood.au

Re: if/else conditional problems

9 years ago

Why are you wrapping the button click setup in $.ajax calls? The ajax function doesn't work this way.

There is no abort function in jQuery. You should not do anything for the tablet size - the default action is to go to the linked URL anyway.

$(function() { // Shorthand for $(document).ready(function() {
if ($(document).width() > 768) {
$('nav ul a').click(function(e) {
e.preventDefault();
var linkLocation = this.href;
var pos = $(this).data('pos');
$('html').load('index.php', function(data) {
$(this).find('div.bg img, #mainNav').animate(pos, 500);
$('html').delay(900).fadeOut(1500, function() {
location = linkLocation;
});
});
}));
$(window).on('pageshow', function() {
$('div.bg img, #mainNav, body').removeAttr('style');
});
}
});

caseybaggz

Re: if/else conditional problems

9 years ago

Hey kbwood,

Thanks so much for pitching in. Honestly, I'm still new to jQuery and I don't really get as much opportunities to use it as I would like, so that explains the bad syntax. My bad. :/

So, I just uploaded the newest version of the site, and for some reason, if you bring your screen down to the tablet size and click on a link - the first time, it still pulls the index page, but every time after, the code works correctly.

Likewise, if you bring the window back to desktop size, it kills the index load for the first time clicking on the link, but every time after, works correctly.

Ideas? Thanks so much for the explanation with your code. Learning something new each time!

http://mindhandle.com/umc/

Casey Baggz

kbwood.au

Re: if/else conditional problems

9 years ago

It sounds like you need to add a resize callback that executes the same code when the size changes. Something like this:

$(function() { // Shorthand for $(document).ready(function() {
$(window).resize(configurePage).resize(); // Define and trigger immediately
function configurePage() {
if ($(document).width() > 768) {
$('nav ul a').on('click.nav', function(e) {
e.preventDefault();
var linkLocation = this.href;
var pos = $(this).data('pos');
$('html').load('index.php', function(data) {
$(this).find('div.bg img, #mainNav').animate(pos, 500);
$('html').delay(900).fadeOut(1500, function() {
location = linkLocation;
});
});
}));
$(window).on('pageshow.nav', function() {
$('div.bg img, #mainNav, body').removeAttr('style');
});
}
else { // Remove added functionality
$('nav ul a').off('click.nav');
$(window).off('pageshow.nav');
}
}
});

caseybaggz

Re: if/else conditional problems

9 years ago

This is so interesting! So we are almost there! When you bring the window down to the tablet size, works flawlessly. But, now, when you bring it back to desktop from tablet, the first time you click on a link is still funky?

New link:

http://mindhandle.com/umc/index.php

So is the 'click.nav' saying: on click with an element that has a class of nav? Getting such a good learning experience with this. Thanks so much again!

Casey Baggz

Top Reply

Response title

Attachments

jQuery Forum

if/else conditional problems

Replies(6)

Re: if/else conditional problems

Re: if/else conditional problems

Re: if/else conditional problems

Re: if/else conditional problems

Re: if/else conditional problems

Re: if/else conditional problems

Statistics

Tags

Actions