How to navigate divs in a custom built single page app? [closed]

Tags: javascript,jquery,html,css,ajax

Problem :

I'm not sure how JS frameworks work as far as single page app functionality. I've got a pseudo single page app, with no framework. I have 3 tabs that will toggle visibility for 3 different hidden div's on the same page.

So far I've been able to hide two and display one on click to allow the page to "navigate" without changing pages. I'm running into some complications, however, because I'd like to run some ajax calls to keep the data on my div's updated when visible. I'd also like to be able to pass which page I want visible in the URL for links, etc.

Basically I'm wondering what the best way is to identify what "screen" is visible, so I know what ajax calls to make, but I'd prefer if I didn't have to check the css on the element for visibility for these types of things. Can this be done with anchor href's in the url? I could use URL variables, but again I don't want to reload the page, and I could probably make a JS variable to look at and change as I click my tabs, but I wouldn't really be able to pass this in the url.

Here is some code. The app is for a dice game, to add some context. The three tabs are simple empty divs with background images that sit on the left hand side of my screen for nav.


//opens and closes chat box
function animateChat () {
    $('#stats').fadeOut('slow', function(){$('#chat').delay(800).fadeIn('slow');});
    $('#theTable').fadeOut('slow', function(){$('#chat').delay(800).fadeIn('slow');});

//opens and closes timeline box
function animateTimeline () {
    $('#chat').fadeOut('slow', function(){$('#stats').delay(800).fadeIn('slow');});
    $('#theTable').fadeOut('slow', function(){$('#stats').delay(800).fadeIn('slow');});

//opens and closes the roll table
function animateTheTable(){
    $('#stats').fadeOut('slow', function(){$('#theTable').delay(800).fadeIn('slow');});
    $('#chat').fadeOut('slow', function(){$('#theTable').delay(800).fadeIn('slow');});

Solution :

This is a very open ended question so the answer depends on how far you want the app to go.

If your page will only ever have a few UI elements and only one layer of navigation, you are probably better off doing it with straight Jquery and avoiding extra complication.

Jquery can handle URL tracking by getting window.location on page load and performing your animations above. Read about handling URLs with JavaScript here:

But keep in mind that this only works in modern browsers. Old versions will not handle dynamic URL changes well.

To save having to set up all the logic to check the URL you could use a location framework like history.js or Jquery Address.

If you intend the game to become very complex with multiple screens and some kind of database, go with Angular Back or another JS framework. This will handle all your routing and animations, including URL tracking plus heaps of other features you may or may not need down the track. The learning curve is steep but once you are there you can make ANYTHING.

Be careful though, it's easy to jump in headfirst and use the whizz-bang frameworks and ending up spending weeks doing something you could have barreled out in a few days with straight JS, CSS and HTML. Complexity kills completion.

    CSS Howto..

    How to position two blocks side by side with CSS

    How can I align a button at the bottom of a div?

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How to vertically center in yui-pure-css?

    How to access to a CSS file in HTML?

    how to remove the css overflow:hidden of jquery dialog

    How to truncate paragragh lines in css [duplicate]

    how to make smooth css transition

    How to add bold text with CSS? [duplicate]

    How to animate a fixed div with jQuery without page scrollbar resetting to top

    How remove striped rows in JavaFX 8 TableView

    How to style diff implementation for PHP with CSS

    How to position a css radial gradient to the top left responsively?

    How to set font style light?

    How can I place html text on top of a canvas flot chart?

    Font not showing properly in HTML page

    How to hide CSS background images that use !important

    MeteorJs: how to add multiple js and css file based on templates.?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to keep an element fixed top within another element?

    Show a
  • line like is hovered
  • How to select “label for=list[]” in CSS?

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How to add font awesome in CSS

    How to trigger onClick event properly

    How to change color of footer? (Materialize)

    How to vertically align and stretch content using CSS flexbox

    How do I differentiate between two different images in the same class in my CSS file

    How to prevent Twitter Bootstrap changing margins as width of page is extended