Javascript - change text automatically every 10 secodns

Pastupe · ‎11-29-2013

Hi,
I need help please. Im beginner in javascript and I learn everething from beginning.

I created UI page.
Result is that UI page display several records each to other (kb query - gliderecord ).
I would like to display every record separately one by one changing every 10 seconds.
See example on screen that now they display all one behind another ....
Is there any change to use javascript to show my variable 1 per 10 seconds which I call $[jvar_inc_link] ?

I would like to learn this how to create code to show results from $[jvar_inc_link] every 10 seconds ..

thanks to all
Petr

Kostya · ‎12-02-2013

Hi,

try to upload to jQuery library to the instance and include it on the top of your script. And use safe mode of the jQuery (noConflict).
Then replace $ with jQuery.

Good luck!

Kind regards

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya

Kostya · ‎12-02-2013

To your script: 1) the script include from external ressource may be blocked, so you don't have jQuery. You can upload the script to the instance and reference to it.
2) Use safe mode and jQuery instead of $
3) setInterval is beeing executed before your DIVs are loaded, place the <script> part at the end of the code.</script>

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya

Pastupe · ‎12-02-2013

It sounds it is more complicated then I was thinking.

To create UI page and that function setTimeout what I have done in previous attached file, is there any other way how to create simmilar UI page showing items one by one every 5 seconds ?

Im not so deep in javascript even in HTML, but want to learn it.
Thank you for proposal.
Petr

Kostya · ‎12-02-2013

Try this one.. Replace {YOUR_INSTANCE} and {THE_SYS_ID_OF_THE_ATTACHED_JQUERY_LIB}
You have to upload the jQuery file to your instance, copy the sys_id and place it in the code.



<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
div.news-message {
height: 14px;
padding: 10px;
font: 13px Tahoma;
}

.nodisplay {
display: none;
}

.left {
float: left;
}

element.style {
display: none;
}

element.style {
display: block;
}
.active {
display: visible;
}


</style>
  <!-- include JavaScript components  -->
  <script></script>

  <!-- JavaScript functions  -->
  <script>
    jQuery.noConflict();

    jQuery( document ).ready(function() {
     setInterval(function(){

//get the active news
var active = jQuery('.wiki-news').children('.active');

active.removeClass('active').fadeOut('slow', function(){

if(jQuery(this).next().attr('data-type') == "news"){

jQuery(this).next('.news-message').addClass('active').fadeIn('slow');

}
else{

//alert('first');

jQuery('.news-message').first().addClass('active').fadeIn('fast');

}

})

}, 100);
    });
  </script>

  <body>
<div class="wiki-news">

<div class="news-header left">News  Tips </div>

<div class="news-message left active" data-type="news" style="display: block;">10000</div>


<div class="news-message nodisplay left" data-type="news" style="display: none;">20000</div>

<div class="news-message nodisplay left" data-type="news" style="display: none;">30000</div>

</div>
  </body>

</j:jelly>

Hit the Thumb Icon and/or mark as Correct, if my answer was correct. So you help others to see correct responses and I get fame 🙂

Cheers,
Kostya

Pastupe · ‎12-02-2013

Konstantin, I have replaced instance name + added sys_id of that global UIs cript (jquery library) - i have found this as UI script in our instance
Code is now as in attached file, but only first number is shown and others not.

Do i do still something wrong ?

Petr