I am new to jQuery, AJAX, etc and will be the first to admit I am over my head. I would be very appreciative of any help you can offer.
I am building a web app that will run on iPads. I am having trouble with links within the pages. I know now that
'a href' will not work, as it takes the user outside of the app, to Safari.
My main navigation works, but on one page I want to have images that link to new pages.
I've been trying
<a data-file= tags, but they are not working.
This is what my navigation code looks like
$('nav a').on('click', function(){
$('nav a').removeClass('selected');
$(this).addClass('selected');
changePage( $(this).attr('data-file') );
});
$('nav a:nth-child(1)').trigger('click');
$('.banner_logo').on('click', function(){
$('nav a:nth-child(1)').trigger('click');
});
That is working. And I have a change page function set up that looks like this:
function changePage (fileName){
$('.content_container').animate({opacity:0}, 500, function(){
$('.content_loading_container').load('assets/content/'+fileName, function(){
$('.content_container').delay(250).animate({opacity:1},500);
});
if(fileName =='home.html?v=1'){
$('.page').addClass('home');
}else{
$('.page').removeClass('home');
}
if( fileName == 'services.html?v=1'){
$('.content_container').addClass('services');
}else{
$('.content_container') .removeClass('services');
}
});
}
QUESTION: How do I make images on a page link to new pages while staying within my 'web app' and not opening in safari?
Any help would be very much appreciated. Thank you so much for your time. Please let me know if any other information would help.