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

data-zoom

3 Answers 130 Views

General Discussions

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

3 Answers, 1 is accepted

answered on 18 Jan 2013, 10:11 AM

Hello,

You can achieve this by having the legend outside of the view (in your html) and adding it to the view once it's shown.

I've maid a sample for you - create a kendo project in Icenium and simply replace the body of the page with the following:

<body>

<div id="view" data-role="view" data-title="Photo viewer" data-zoom="true" data-show="onViewShown">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<div data-role="content">

<img src="http://demos.kendoui.com/content/mobile/shared/faces.jpg" style="display: block" />

</div>

<div id="legend">

The contents of this mobile view are zoomable using pinch/zoom gestures. <br />

To test this, open the Kendo UI demos on a mobile device, which supports multi-touch gestures.

</div>

<style scoped>

#legend {

position: absolute;

width: 200px;

bottom: 50px;

left: 5px;

padding: 20px;

background: black;

color: white;

border: 2px solid white;

-webkit-border-radius: 10px;

-webkit-opacity: 0.5;

}

</style>

<script>

var app = new kendo.mobile.Application(document.body);

function onViewShown() {

// here we move the legend into the view

$("#view .km-content").append("#legend");

}

</script>

</body>

I hope this is helpful for you.

Regards,
Nikolay Tsenkov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Productivity and Design Tools

data-zoom

3 Answers, 1 is accepted