Exploring the world of JS frameworks and single page app functionality is a bit of a mystery to me. Currently, I have a pseudo single page app set up without any specific framework in place. The setup involves 3 tabs that toggle visibility for 3 different hidden divs on the same page.
Initially, I managed to hide two divs and display one when clicked to simulate navigation within the page. However, I am facing challenges as I want to incorporate ajax calls to update the data in the visible div dynamically. Additionally, I would like to have the ability to indicate which "screen" should be active in the URL for linking purposes.
I'm wondering about the most efficient way to determine the active "screen" so I can make the relevant ajax calls without having to rely on checking CSS for element visibility. Is it possible to achieve this using anchor href's in the URL? While URL variables could work, I aim to avoid page reloads. Another option could involve creating a JavaScript variable to track tab clicks, but passing this information through the URL might not be feasible.
The context of my code relates to a dice game application, with the three tabs serving as navigation elements situated on the left side of the screen. Below is a snippet of the code:
$('#chatTab').click(animateChat);
$('#timelineTab').click(animateTimeline);
$('#rollTab').click(animateTheTable);
// Function to toggle chat box
function animateChat () {
$('#stats').fadeOut('slow', function(){$('#chat').delay(800).fadeIn('slow');});
$('#theTable').fadeOut('slow', function(){$('#chat').delay(800).fadeIn('slow');});
}
// Function to toggle timeline box
function animateTimeline () {
$('#chat').fadeOut('slow', function(){$('#stats').delay(800).fadeIn('slow');});
$('#theTable').fadeOut('slow', function(){$('#stats').delay(800).fadeIn('slow');});
}
// Function to toggle roll table
function animateTheTable(){
$('#stats').fadeOut('slow', function(){$('#theTable').delay(800).fadeIn('slow');});
$('#chat').fadeOut('slow', function(){$('#theTable').delay(800).fadeIn('slow');});
}