Anchor Cycler / Dropdown to import school class data periodically

Question

SO,

I\'ve been working on some html/javascript/css recently to create an online table for my students to view details, scores and various bits of information but I\'ve

Answer 1

Update 13/11/2013 @ 12:09 GMT
Just because you have done an entire edit to your post I just did the same! no need those data!
however I have answered a lot of your questions that you are asking already!
LATEST: http://jsfiddle.net/sijav/pwv7u/1/

• I have done it simply, Just use the blow code: (It's minified!)

  $("#PreviousClass").click(function(){if(currentClass>1){currentClass--;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass);}});
  $("#NextClass").click(function(){if(currentClass<6){currentClass++;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass);}});
  

Also you need to set Next Class and Previous class ID to the proper one and remove href!

• you need to remove overflow: auto; from container class! and then replace $("#container") with $("body") in scroll left /right button! so:

  #container {
  margin: 0 auto;
  /*overflow: auto;*/
  padding: 80px 0;
  width: 100%;
  }
  

  and:

  $("a.def").click(function () {
          $('body').animate({
              "scrollLeft": "-=204"
          }, 200);
  });
  
  $("a.abc").click(function () {
      $("body").animate({
              "scrollLeft": "+=204"
          }, 200);
  });
  

• It is because you just put that under the footer1! of you bring it to forward it will appear correctly, also why not put a semy transparent black background? background: rgba(0, 0, 0, 0.58);

• I'm not seeing any issue on that after that changes mentioned above!

• Good Idea ... let's see...:

• Again I have already give you the code of how to ajax twice! and again you no need to put those in json format! html format will be quite great for what you want to do! just save them as class1.html, class2.html, class3.html, etc. and get the proper html and insert the table instead the current one in container! the code would be:

  $.ajax({
  url: "class1.html", //this can be anything! better to use a variable like "class"+currentClass
  dataType: "HTML",
  error: function(){alert("Error on communicate to server"}, //what to do on error
  success: function(html){$("#container").html(html)}, //replace the container on success
  });
  

Simple right? you can put http://fiddle.jshell.net/pwv7u/show/ in url to test and see what will happen?!

• why not put those options in a html file and get it like i mention above?!
• well, I have told you enough on above,
• the $("#container").html(SomeHtmlString) will change the whole container with current one
• you can have ... (wait for it) ... setInterval(functionThatIncludeAjaxName,milisecond) (I have told you before)
• you can get all data from them and append what you want with '+' and then $("container").html(TheAppendedHTMLString)
• you can have something like this => http://jsfiddle.net/sijav/WJ8Js/
• One thing, for mobile view, you can use some api that scale the whole webpage according to body width! it's very useful on tablet and mobile devices.
  
  

Good luck and feel free to ask if you couldn't understands my answer properly or just have a new questions.