This is a migrated thread and some comments may be shown as answers.

Tile Effect not working on firefox and ie

10 Answers 145 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Gaetano
Top achievements
Rank 1
Gaetano asked on 29 Jan 2013, 09:31 AM
Hi guys,
I developing a website using tile effect to achieve a kinda of win8-like style.

I followed the example on kendo effect page and my tiles works pretty well on chrome..
the issue is that on other browser, when the tile slides to show its "back", the front is still visible...
I checked my code with the one from kendo and it seems the same...

this is my generalized javascript function to append a new tile

var rawDiv = $("<div>").append
(
     $("<div>").attr("id", idDiv).addClass("boxSlider " + other class).append (
             $("<span>").addClass("cover"),
             $("<span>").addClass("description")
     )
 )
  
return rawDiv.html();
while this is my css 
.boxSlider {
    display: inline-table;
    margin: 5px;
    overflow: hidden;
    position: relative;
}
 
    .boxSlider .cover {
        width: 100%;
        height: 100%;
        line-height: 100px;
        position: absolute;
        text-align: center;
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
    }
 
        .boxSlider .cover .bsFooter {
            width: 100%;
            font-size: 14px;
            line-height: 15px;
            bottom: 10px;
            margin: 0;
            position: absolute;
            text-transform: uppercase;
            font-weight: normal;
        }
 
    .boxSlider .description {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        font-size: 12px;
        color: #fff;
        overflow-y: auto;
    }
 
        .boxSlider .description span {
            display: block;
        }
 
        .boxSlider .description p {
            margin-left: 10px;
            max-width: 280px;
            min-width: 240px;
            float: left;
        }
and this is the effect

BoxSliderAnimation: function () {
        $(".boxSlider").hover(
           function (e) {
               var div = $(e.currentTarget);
               kendo.fx(div.find(".description").css("display", "block")).tile("left", div.find(".cover")).play();
           },
 
          function (e) {
              var div = $(e.currentTarget);
              kendo.fx(div.find(".description")).tile("left", div.find(".cover")).reverse();
          });
    },
I attached an image to show this behavior.

Thanks to all





10 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 31 Jan 2013, 08:54 AM
Hi Fabio,

Thank you for getting in touch with us.

I can confirm that the problem occurs in latest version of Firefox. We will log this as a bug and try to address it as soon as possible. Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 31 Jan 2013, 09:28 AM
Hi Alexander, 

I'm confused..If the issue is on the latest version of firefox, I should not be able to see this page correctly 
http://demos.kendoui.com/web/fx/tile.html (while I actually see it working fine)

and, by the way, I have the same issue with IE 9.

Thanks
Fabio
0
Alexander Valchev
Telerik team
answered on 01 Feb 2013, 03:37 PM
Hello Fabio,

I was able to reproduce problem with the demos only with Firefox 18.0.1.
Here is a screen cast: http://screencast.com/t/M7qPV7r8F

On IE however, the effect seems to work as expected. Could you please check the screen cast and let me know what I am missing? Is it possible to send me a short video taken from your PC?

Best regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 04 Feb 2013, 09:10 AM
Hi Alexander,
Here the video from my pc..

the video shows the effect running on:
1) chrome - latest version
2) firefox - latest version
3) IE - 9 

if you need any other detail, let me know!

thank!
0
Alexander Valchev
Telerik team
answered on 04 Feb 2013, 12:34 PM
Hello Fabio,

I am afraid that the attachment did not make it through. Could you please re-send the video. Note that the allowed extensions: zip, rar, ace, jpg, gif, css, png

In case you cannot attach the file (even after archiving it) please consider uploading it somewhere (YouTube, DropBox, etc) and providing a link. Thank you in advance.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 04 Feb 2013, 02:37 PM
ops sorry...
I probably miss out the link... here it is:

http://www.screencast.com/t/AWQ2jzeXMJ

Thanks
0
Alexander Valchev
Telerik team
answered on 06 Feb 2013, 01:29 PM
Hello Fabio,

I cannot reproduce the same problem in this demo with IE 9. As you correctly noted in the first post, your code is identical to the one from the demo page. Could you please provide a small but runnable example (probably in jsBin) which I can examine locally? What KendoUI version do you use? Demo page works with v2012.3.1315 (Q3 SP).

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 06 Feb 2013, 03:37 PM
Hi Alexander,
I'm using Kendo UI v2012.3.1114 (we are not really stuck on this version, it's just we started developing with that one)
The demo page works for me too..

here the sample of my page:

Example

Thanks
Fabio
0
Accepted
Kamen Bundev
Telerik team
answered on 08 Feb 2013, 09:48 AM
Hi Fabio,

The issue in IE is caused by the display: inline-table CSS property - for some reason inline-table stops overflow: hidden from working there. If you make .boxSlider inline-block, everything will work again:


Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 08 Feb 2013, 10:03 AM
Hi Kamen,
Thanks! now it works properly!!
And I just updated firefox to version 18.0.2, and with "inline-block" it works fine!!

thanks again
Fabio

Tags
General Discussions
Asked by
Gaetano
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Gaetano
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or