?
Solved

Instantiate animation object

Posted on 2015-01-23
12
Medium Priority
?
30 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

 

Author Comment

by:claire89
ID: 40570376
Thanks for the answer, but how do I local storage this specific object, any ideia?
0
 
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 34

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 34

Accepted Solution

by:
Slick812 earned 2000 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 34

Assisted Solution

by:Slick812
Slick812 earned 2000 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

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
Suggested Courses

762 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