Smooth silky text scrolling

answered 2014-04-16 14:07:59 +0800

cyiannoulis
1201 ● 10

Here is a simple example using a plugin from this site:

<?page title="Marquee Demo" contentType="text/html;charset=UTF-8"?>
<zk>
<script type='text/javascript' src='https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js'></script>

<script type="text/javascript"><![CDATA[

 zk.afterMount(function() {
    $('$marquee').marquee();
 });

]]></script>

<window title="Marquee Demo" border="normal">

    <vlayout>
      <div align="center">
        <div id="marquee" style="width: 300px; overflow: hidden; border: 1px solid #ccc;">
           <label value="This is a marquee" />
        </div>
      </div>        
    </vlayout>

</window>
</zk>

Hope that helps. Costas

answered 2014-04-26 08:51:06 +0800

cyiannoulis
1201 ● 10

The div's size does not affect the behavior of the plugin. All plugins are customizable in some extent. So i would suggest to have a look at the creator's site: http://aamirafridi.com/jquery/jquery-marquee-plugin. It's all in there.

If you are in a hurry here is a sample changing the marquee's speed and direction:

<script type="text/javascript"><![CDATA[

 zk.afterMount(function() {

     $('$marquee').marquee({
         // set the speed in milliseconds
         duration: 10000,
         // set the delay time before start
         delayBeforeStart: 0,
         // set the direction
         direction: "right",
         // effect of continues flow
         duplicated: false
     });
});

]]></script>

Hope that helps. Costas

answered 2016-03-01 11:22:53 +0800

napule77
15 ● 3

updated 2016-03-09 01:58:15 +0800

cor3000
6280 ● 2 ● 7

I have this error in IE and Chrome :

GRAVE: [Desktop z_2gd:/index.zul] client error: Failed to mount: $(...).marquee is not a function

Here my code :

<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>

<window title="About" border="normal"  closable="true" width="300px" height="250px" apply="net.tmesrl.classes.AboutViewCtrl">
<script src="./script/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./script/jquery.marquee.min.js"><![CDATA[

 zk.afterMount(function() {
    $('$marquee').marquee({
            direction: "right"
    });
 });
 zk.afterMount(function() {
        $('$marquee2').marquee();
     });
 zk.afterMount(function() {
        $('$marquee3').marquee({
            direction: "right"
    });
     });
]]></script>
<vlayout>
    <div align="center">
    <div id="marquee" style="width: 250px; overflow: hidden; border: 1px solid #ccc;">
    <image id="imgGarby" src="./images/rsz_logo_garby.png"></image>
    </div>
    </div>
</vlayout>
<separator></separator>
<vlayout>
    <div align="center">
    <div id="marquee2" style=" width: 250px;  overflow: hidden;  border: 1px solid #ccc;  background: #ccc;">
    <label id="lblAbout" value=""></label>
    </div>
    </div>
</vlayout>
<separator></separator>
<vlayout>
    <div align="center">
    <div id="marquee3" style=" width: 250px;  overflow: hidden;  border: 1px solid #ccc;  background: #ccc;">
    <label id="lblAbout2" value=""></label>
    </div>
    </div>
</vlayout>
<separator></separator>
<vlayout>
    <div align="center">
    <button id="btnclose" label="Chiudi"></button>
    </div>
</vlayout>

</window>

</zk>

>

answered 2016-03-09 02:06:45 +0800

cor3000
6280 ● 2 ● 7

Hi napule77,

I tried your example with a few minor changes on zk fiddle, and it just works:

http://zkfiddle.org/sample/qjh7h/1-marquee-example

Robert

answered 2016-03-01 23:05:05 +0800

Darksu
1991 ● 1 ● 4

Hello napule77,

Please remove the second time you are using jquery.

Best Regards,

Darksu