Search code examples
htmlzk

HTML5 attribute for ZK

I have some html5 written which i need to re-implement for a ZK6 application.

I am struggling with the data-* attribute.

For example

 <div class="caption lft"
                                 data-x="140"
                                 data-y="60"
                                 data-speed="900"
                                 data-start="800"
                                 data-easing="Sine.easeOut"> <h:img id="tp-mainImgSlide-02" src="img/slider/pic1.png" alt=""/> 
                                 </div>

I get the error 

Cause: Method setData-x not found for class org.zkoss.zul.Div

Has anyone encountered this issue with HTML5 in ZK 6 and do you know how to resolve?

Solution

  • You might want to use a h:div with h being the namespace for html, the same way you did for img:

     <h:div class="caption lft" data-x="140" data-y="60" data-speed="900" data-start="800" data-easing="Sine.easeOut"> 
     <h:img id="tp-mainImgSlide-02" src="img/slider/pic1.png" alt=""/> 
 </div>

    the html div is not the same as the zul one.