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

Auto Resize image in radwindow

9 Answers 50 Views
Window
This is a migrated thread and some comments may be shown as answers.
gozcelik
Top achievements
Rank 1
gozcelik asked on 19 Aug 2014, 11:38 AM
Hi,
I have some photos which are large as 3000px X 4000px.
When I open one of them in my ie or chrome browser, the browser set it's size to browser size automatically. Bu when I open that photo in a radwindow (and resize radwindow), windows shows scrollbars. Is there any way to set image size to its parent container(radwindow).

I used this code to open a photo in a radwindow. (sender is a imagebutton).

        function OpenWindow(sender) {
            var link = sender.src;
            var wnd = window.radopen(link, null);
            wnd.set_status("");
            wnd.setSize(400, 400);
            return false;
        }

The Result is in the attachment. I want to shrink image automatically to its parent size.

Many thanks.

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 20 Aug 2014, 06:37 AM
Hi,

Please try the below sample code snippet which works fine at my end.

ASPX:
<asp:ImageButton ID="imgbtnBigImage" runat="server" ImageUrl="~/Images/index122.jpg"
    OnClientClick="OpenWindow(this); return false;" />
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/index11.jpeg"
    OnClientClick="OpenWindow(this); return false;" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientAutoSizeEnd="OnClientAutoSizeEnd">
</telerik:RadWindowManager>

JavaScript:
function OpenWindow(sender) {
    var link = sender.src;
    var wnd = window.radopen(link, null);
}
function OnClientAutoSizeEnd(sender, args) {
    var win = $find("<%=RadWindowManager1.ClientID%>");
    win.autoSize(true);
}

Thanks,
Shinu.
0
gozcelik
Top achievements
Rank 1
answered on 20 Aug 2014, 08:18 AM
Hi Shinu,
Thanks for your reply. But It's not working for me:(
First of all, "OnClientAutoSizeEnd" script isn't running after my "wnd.setSize(400, 400);" command. It's running only if I resize window manually with my cursor.
Even "OnClientAutoSizeEnd" script run, window won't change its content size. If my image is 3000x4000px and my windows is 400x400px, I want to show image as 400x400px in window. I mean windows must not change its size belong to image size, must show image belong to window size.
Thanks.
0
gozcelik
Top achievements
Rank 1
answered on 20 Aug 2014, 08:44 AM
I found an example, but I don't know how:
Click this link http://demos.telerik.com/aspnet-ajax/window/examples/radopen/defaultcs.aspx 
And press "Open RadWindow" button. microsoft site will be open. When you change size of windows, you can see that images change their size. Xbox image for example. See attachment pls.
0
Accepted
Marin Bratanov
Telerik team
answered on 20 Aug 2014, 08:44 AM

Hi,

Making an HTML element get the size of its parent is done with CSS where the elements are located, for example, the following markup will make the images in this content page fit the window they are in (be it RadWindow or the browser window):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        html, body, form, img.img100percent
        {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <img class="img100percent" src="images/some-image.png" alt="" />
    </form>
</body>
</html>



Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
gozcelik
Top achievements
Rank 1
answered on 20 Aug 2014, 10:06 AM
Hi Marin,
It works:) Thanks to all.

I have an other problem. I used wnd.set_status(""); command in script. But as you can see in my attachment, status bar shows the page URL. How can I disable it?
0
Shinu
Top achievements
Rank 1
answered on 20 Aug 2014, 10:23 AM
Hi,

Please do the following modification in your JavaScript.

JavaScript:
function OpenWindow(sender) {
    var link = sender.src;
    var wnd = window.radopen(link, null);
    setTimeout(function () {
        wnd.set_status("");
    }, 0);
}

Thanks,
Shinu.
0
gozcelik
Top achievements
Rank 1
answered on 20 Aug 2014, 10:54 AM
Hi Shuni,
I is not working unfortunately:(

My script is:

function OpenWindow(sender) {
    var link = sender.src;
    link = "ShowPicture.aspx?o=" + link;
    var wnd = window.radopen(link, null,400,400);
 
    setTimeout(function () {
        wnd.set_status("");
    }, 0);
    return false;
}
0
Accepted
Marin Bratanov
Telerik team
answered on 20 Aug 2014, 11:10 AM

Hi guys,

The status is the URL of the loaded page and is populated in the OnClientPageLoad event of the RadWindow, so this is where you need to set it to an empty string to remove it.

The easier option is to simply set the VisibleStatusbar property to false so you do not have the status bar at all.


Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
gozcelik
Top achievements
Rank 1
answered on 20 Aug 2014, 12:39 PM
Hi,
I looked for a "EnableStatusbar" property. Apparently I missed "VisibleStatusbar".

Thank to all.
Tags
Window
Asked by
gozcelik
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
gozcelik
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or