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.

$('#chatTab').click(animateChat);
$('#timelineTab').click(animateTimeline);
$('#rollTab').click(animateTheTable);

//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: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

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 make a floated element take the entire width of its parent

    how to center a div without width?

    How to draw rotated element as backgorund in HTML

    How to detect CSS is turned off with PHP?

    How can I ensure that text is inside rounded div?

    How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How to show a div behind navigation on rollover

    How does this site hide the iframe scrollbar?

    How do I position divs inside header?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How to “zoom”/“scale” in div's content with css or jquery?

    How to make a div align with a specific td on the page?

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How to detect redraw rate (fps) of a css animation?

    How to Style Unique CSS Navigation Menu

    How to set style for n-th td in a table using css

    How to create e-commerce website [closed]

    How to select a div with nth-child()?

    How to define the css :hover state in a jQuery selector?

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

    How to put border bottom only on last-child of dropdown menu

    How to automatically compile LESS into CSS on the server?

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How to overlap two SVG vectors without using inline SVG?

    Why does an absolutely positioned child expand container height and how to prevent this?

    How can I determine the background image URL of a div via JavaScript?

    How to fade in a specific CSS property

    How to isolate text in a

    tag to bold without changing the format of remaining paragraph

    how to style margins between items in a
    list?