Solved

Instantiate animation object

Posted on 2015-01-23
12
17 Views
Last Modified: 2016-04-23
Hi, I have been struggling with this code for some time:

JSBin link

What it does is to create multiple pie timers that will start when clicked.
The problem is when I start a timer and change to another page and back again the timer resets, I know that I somehow need to instantiate the timer with some id but since I have limited knowledge of javascript I can't figure it out, how to make it work.
If you guys have any ideia on where to start or how can I accomplish this task, I would be very thankful :)
If you need more information please just ask.

Best regards.
0
Comment
Question by:claire89
  • 3
  • 3
  • 2
  • +1
12 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40566563
Hi,
could you please explain what you mean with "change to another page"?
What is your final requirement?
Thanks.
Rainer
0
 

Author Comment

by:claire89
ID: 40566674
I'm using this code on a jquery mobile application, the problem is not demonstrated on the code I provided, the problem appears when I start a timer and with the timer still on, I change to another view, come back and the timer has reseted.
I know that I have to save the instance of the timer object somewhere so that the timer will still run even after I leave the "view".

The requirement is that I can start like 2 or 3 timers, leave the current timer "view", come back and the timers are still rolling.

I hope it helped to clarify :)
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40566734
Hi,
OK that make some things more clear.
IMHO you would need to use some kind of local storage (if this is an app) or cookie, to both store the timer id as well as the timer start time and use that for instantiation.
HTH
Rainer
0
 

Author Comment

by:claire89
ID: 40570376
Thanks for the answer, but how do I local storage this specific object, any ideia?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 22

Expert Comment

by:ambience
ID: 40575405
The timer would not keep running in the background when you navigate out of the page, this is how its supposed to be. The only way I can think of is to have a parent page with an IFRAME, the timer runs in the parent page and children pages are navigated in the iframe. I have used this technique to periodically load a sub-page in an iframe.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40575601
I agree with ambience,  any and ALL javascript is abandoned, stop executing, no functions or variables from JS exist once the web page is closed.  This is JS the functioning you need to continue -
        data.timer = setInterval(function (o) {
If you leave that page, this will no longer exist, much less keep running.

Also, if you do an invisible "parent" page, then place an iframe in it to show (display) your many pages, you can place the Javascript in the parent page with the -
    data.timer = setInterval(function (o) {
BUT you will need to greatly change the way your timer works! You have code like this -
       $this.find('.percent').html(Math.round(secs) + '')

the $this variable used here WILL NOT EXIST, after you leave the timer page, but more than that, it WILL NOT EXIST, even if you show the timer page again, as Javascript or Jquery can not relate any page references like $this  to another page load, even if it is the same page address.
0
 

Author Comment

by:claire89
ID: 40577213
Thanks for the answers,  I know what is the problem now but since I'm a beginner with javascript can you elaborate more on the "data.timer = setInterval(function (o) {", Slick812.

Thanks in Advance.
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40577853
OK, But if you are a "beginner with javascript", then my references in the following statements, may not mean much to you? ?
You should Know that the JS (not jquery) function -  setInterval( ) starts an interval timer, that repeats every so many microseconds, until you call -  clearInterval( ) .

your javascript has a JS class function as -
    function pietimer(obj) {
which handles the animation and timer sequences for the <li> (round pie timer) created with this code -
    "<li><a><div class='timera' onclick='$(this).addClass(\"timer\");runTimer(this);'>0</div></a></li>"

I can tell that you did NOT Write the  function pietimer(obj) {  , and maybe not Any of the javascript you show in the JSBin link, where I review the JS, since you are a beginner. You maybe should get the author of that -
      function pietimer(obj) {
to explain it to you, I do not have time.

I will say, that the onclick in the added <li> runs this function -   runTimer(this);  AND the "this" in it, will be your PROBLEM in translating this page functioning to a page out, page in , code rewrite.
Your JS has several lines like -
    $this.find('.percent').html
and the Object here as $this , IS the  "this" from function - runTimer(this);, which is the <li> that was added.
if you drop this page with the created <li>, then the javascript as -
     $this.find('.percent').html
CAN NOT WORK, since there no longer is any $this (a reference to the destroyed <li>), it's non-existent.

Do not go by what I say , Please, use your own judgement, BUT this whole thing of page change and back, makes No sense with a 5 second timer.  But even if you increase the time to 15 minutes, I think that changing pages, and try and show another timer page with the OLD original timers from a parent page javascript, would be a great challenge for an Experienced JS developer. You should not expect the experts here you write all of your javascript and debug your project. We are suppose to Help you do changes to the code you write to make it work.
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 500 total points
ID: 40577958
Just what I think I would do -
These days, because of the "mobil" smartphone access of almost all page hits, web pages use less of the OLD "change the web page" but the newer top of <div> "tab" touch, to change the display in the <div> beneath to NEW page info, I would place these pie timers on a display div in the "tab" changer, and instead of going to another page, you touch another "tab" on top and change the display <div> to show the other page information, BUT you just HIDE the timer <div> and they all keep working, with no change in your current pie timer JS. and if they touch the timer "tab" it will UN-HIDE the timer <div> , and they can see the pies workin.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now