add content to marquee every

Question

how can i update content in marquee every 20 second using javascript?
i mean , in the first 20 seconds he reads the first object , on second 40 reads the second object and so on .. , without updating the page , mean update it automatically
this is the javascript function :

    function read () {
  $.getJSON("jsons/jobs.json", function(json) {
  Thejobs = json;
  for(var k in Thejobs.Studies){
     $('#boxContent').append('<br>'+"position: "+Thejobs.Studies[k].position+
     '<br>'+"Academy: "+Thejobs.Studies[k].academy+'<br>'+"address: "
     +Thejobs.Studies[k].address+'<br>'+"Description: "+Thejobs.Studies[k].jobDescription)
     $('#boxContent').append("<br>_____________________");
     }}); }

this is my json file :

   {"Studies": {
    "jobID1": {
        "position": "student position",
        "academy": "Haifa University",
        "address": "haifa,isreal",
        "jobDescription": "Big data"
    },
    "jobID2": {
        "position": "Research 1",
        "academy": "saarland University",
        "address": "saarbrucken , germany",
        "jobDescription": "Electronic engineer"
    },
    "jobID3": {
        "position": "Studie 1",
        "academy": "Technion",
        "address": "haifa,isreal",
        "jobDescription": "Speed of internet"
    },
    "jobID4": {
        "position": "Studie 2",
        "academy": "Technion",
        "address": "USA ,los angeles",
        "jobDescription": "analysis data "
    }
}

}

html file :

  <marquee direction="up" scrollamount="2">
  <p id="boxContent"></p>
   </marquee>

i've tried this but didn't work:

<script>
var myVar = setInterval(joobs(), 20000);
var ii=0;
function joobs(){
  $.getJSON("jsons/jobs.json", function(json) {
   Thejobs = json;
     $('#boxContent').append('<br>'+"position: 
   "+Thejobs.Studies[ii].position+
    '<br>'+"Academy: "+Thejobs.Studies[ii].academy+'<br>'+"address: "
    +Thejobs.Studies[ii].address+'<br>'+"Description: 
  "+Thejobs.Studies[ii].jobDescription)
    $('#boxContent').append("<br>_____________________");
   });
     ii=ii+1; 
      </script>

Don't use marquee, its obsolete and deprecated - https://stackoverflow.com/questions/4423618/marquee-html-tag-usage-replacment AND https://en.wikipedia.org/wiki/Marquee_element — Calvin Nunes, Jan 04 '18 at 17:24
If you intend to iterate through the JSON every 20 seconds `setInterval` might work. Try it out and see if it does what you need. — Nope, Jan 04 '18 at 17:25
Where does the `Studies` come from? it's not present in your sample json. — omid.n, Jan 04 '18 at 17:25
@reeena11 https://developer.mozilla.org/pl/docs/Web/API/Window/setInterval and your iterators will move outside of the interval I assume. — Nope, Jan 04 '18 at 17:30
@reeena11 it's possible to keep using, it's just not correct by the rules of W3C, but here is it https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative — Calvin Nunes, Jan 04 '18 at 17:34
@Nope i've edited the post, see the solution but doesn't work! — reeena11, Jan 04 '18 at 17:42

Kallmanation · Answer 1 · 2018-01-04T21:50:01.293

I couldn't resist making this abomination.

If you need to do something at a regular interval, use setInterval. Which has the signature setInterval(callback_function, interval_in_milliseconds); Just put your function to change the value of the marquee as the callback and set the interval to 20000 to delay for 20 seconds. Your function will be called every 20 seconds like in my following example.

var values = ["Marquees", "shall", "never", "die.", "Long", "live", "the", "marquee!"];
var iterator = 1;
var colorator = 0;
function updateMarquee() { 
  document.getElementById('boxContent').innerHTML = values[iterator];
  iterator = (iterator + 1) % values.length;
  console.log("updateMarquee() has been called");
  
  return function() {
    console.log("updateMarquee() return value was called instead of the function");
  };
}

setInterval(updateMarquee, 1000);
setInterval(updateMarquee(), 10000);

<marquee direction="right" scrollamount="10" behavior="alternate">
  <p id="boxContent">Marquees</p>
</marquee>

Update: In regard to user78403's answer, I've updated my code snippet to show the difference between calling the function itself in a setInterval and calling a functions return value. In the example you will see updateMarquee() has been called logged every second because of the line setInterval(updateMarquee, 1000);. But you will also see updateMarquee() return value was called instead of the function logged every 10 seconds because of the line setInterval(updateMarquee(), 10000);

P.S. Don't use a marquee. Having anything automatically moving, playing, changing on a website might have been mind-blowing 20 years ago, but now its just annoying and users will look down on your site for it. You should just have a static list of your job offerings that users can read through at their own pace.

user78403 · Answer 2 · 2018-01-05T20:43:58.047

I corrected a few syntax errors in your code. I'll explain the most important things I've done:

setInterval(joobs(), 20000) -> setInterval(joobs, 20000): You have to pass the method itself as argument. Else the method will be called and its return value will be executed every 20 seconds.
Thejobs.Studies[ii] -> Thejobs.Studies["jobID" + ii]: Give the property name as index. Passing a number doesn't work. It is also necessary to initialize ii with 1 instead of 0 because of the JSON file's property names.
I also added some missing brackets.

HTML and JSON aren't changed. So it all looks like this:

var myVar = setInterval(joobs, 20000);
var ii=1;
function joobs() {
    $.getJSON("jsons/jobs.json", function (json) {
        var Thejobs = json;
        $('#boxContent').append('<br>' + "position:" +
            Thejobs.Studies["jobID" + ii].position +
            '<br>' +
            "Academy: " +
            Thejobs.Studies["jobID" + ii].academy +
            '<br>' +
            "address: " +
            Thejobs.Studies["jobID" + ii].address +
            '<br>' +
            "Description:" +
            Thejobs.Studies["jobID" + ii].jobDescription);
        $('#boxContent').append("<br>_____________________");
    });
    ii = ii + 1;
}

> You have to pass the method itself as argument. Else the method will be called and its return value will be executed every 20 seconds. - That is really OPs mistake here, and a confusing one if you don't know what's going on. That is an excellent explanation. — Kallmanation, Jan 04 '18 at 21:26

add content to marquee every

2 Answers2