RadRotator fails to resize properly when browser window is resized

I'm currently attempting to adjust the size of this control when the browser is resized. I searched through forums for a solution before posting my question. I came across a JavaScript function (unfortunately, it's not working).

    <script type="text/javascript">

window.onresize = function()    
{    
    var rotatorElement = document.getElementById("ContentPlaceHolder1_RadRotator1" + "_Div");    
    rotatorElement.RadResize(); 
}

</script>

Error: RadResize is showing as Null or undefined.

Thank you in advance for any assistance you can provide.

c#javascriptasp.nettelerik

Answer №1

Hello Arnaud, To fix your issue, simply include the following script in your aspx page:

script type="text/javascript">
window.onresize = function()
{
var rotatorElement = document.getElementById("<%= RadRotator1.ClientID %>" + "_Div");
rotatorElement.RadResize();
}
</script>

Answer №2

Hello Arnaud! You can easily meet your objective by setting a fixed layout for the table.

Below is a snippet of sample code:

<form id="form1" runat="server">  
    <table border="1" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">  
        <tr> 
            <td style="width: 100%">  
                <radR:RadRotator ID="RadRotator1" runat="server" TransitionType="Scroll" ContentFile="http://rss.msnbc.msn.com/id/3033655/device/rss/rss.xml" DataMember="item" Height="130px" Width="100%">  
                    <FrameTemplate> 
                        <div class="NewsList">  
                            <p> 
                                <strong><a href="<%# DataBinder.Eval(Container.DataItem,"link") %>" target="_blank">  
                                    <%# DataBinder.Eval(Container.DataItem,"title") %> 
                                </a></strong>  
                                <br /> 
                                <%# DataBinder.Eval(Container.DataItem,"pubDate") %> 
                            </p> 
                            <p> 
                                <%# DataBinder.Eval(Container.DataItem,"description") %> 
                            </p> 
                        </div> 
                    </FrameTemplate> 
                </radR:RadRotator> 
            </td> 
        </tr> 
    </table> 

    <script language="Javascript" type="text/javascript">  
    <!--  
    var RadRotator1=<%= RadRotator1.ClientID %>;  
    window.onresize=function() {  
        var rotatorElement = document.getElementById("<%= RadRotator1.ClientID %>" + "_Div");  
        rotatorElement.RadResize();  
    };  
    //--> 
    </script> 

</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing data from one component to another in Vue: A database perspective

I'm struggling to pass the id of a clicked button from MovieTable.vue to the WatchedForm.vue component. The WatchedForm.vue component is responsible for updating the data in the database based on the provided id, which corresponds to the Movie_id in t ...

javascriptdatabasevue.jsvue-component

Conceal specific elements within jQuery depending on the selected option

I am currently working on a filtering tool that utilizes a select element. The functionality I am aiming for is that when an option is selected from the drop-down menu, only the corresponding div below should be displayed while hiding the others. To achie ...

javascriptjqueryhtmlcss

How can I show a title when redirecting a URL in VUE JS?

My current setup includes a navigation drawer component that changes the title based on the user's route. For example, when navigating to the home page (e.g. "/"), the title updates to "Home", and when navigating to the profile page (e.g. /profile), t ...

javascriptvue.jsvuejs2

Transforming control of execution seamlessly between two interactive functions in nodejs

Two functions are used to take input from the CLI using process.stdin. The issue arises when one function is done taking input, as a similar function is called. However, while the control shifts to the second function, the first function continues executin ...

javascriptnode.jsprocesssynchronous

Using computed properties with v-for - a comprehensive guide

In a current project, I have a component in which I am using v-for to iterate over a draggable JS component. <div v-for="(val, index) in rows" :key="index"><draggable></draggable/></div> The property rows in my ...

javascriptarraysvue.jsvuejs2v-for

Introducing the innovative Icon Collapsable JQuery - a versatile tool that

I'm looking to set custom icons for the JQuery Collapsable view without having to make changes to the default JQuery CSS and .JS files. You can take a look at my starting point on jsFiddle here: http://jsfiddle.net/jakechasan/M7LLU/ Although I' ...

javascriptjqueryhtmlcss

styled(MyComponent) will display MyComponent as is, without any extra styling applied

Two React components I have are utilizing styled-components. The first one named Div simply renders a basic div: import React from "react"; import styled from "styled-components"; export default function Div(props) { return <StyledDiv>{props.chil ...

javascriptreactjsstyled-components

What is the best way to change the date format from "yyyy-MM-dd" in a JavaScript file to "dd/MM/yyyy" and "MM/dd/yyyy" formats in an HTML file?

Is there a way to transform the date string "2020-08-02" from a JavaScript file into the formats "08/02/2020" and "02/08/2020" in an html file, without relying on the new Date() function in JavaScript? I would greatly appreciate any assistance with this t ...

javascripthtmlangularjs

if the response from the AJAX request contains

I need to search for a specific word in the response text and then perform some actions based on that, but I am only getting a "true" response from PHP. How can I achieve this functionality? function checkCellNo() { var cellNumber = _("CellNo"). ...

phpjavascriptjqueryajaxresponsetext

`Steps to overcome cross-domain issues when using AJAX`

I am trying to tackle the issue of AJAX cross-domain errors. The specific error message I encounter in Chrome is as follows: XMLHttpRequest cannot load http://'myaddress'/TEST/user/login/testuserid . Request header field Access-Control-Allow-O ...

javascriptjqueryajax

When the page changes or refreshes, the .html() function fails to work

Whenever a new notification arrives, my JavaScript code plays a notification sound as intended. The issue arises because the script is written on the MasterPage, causing the <asp:Label.../> to get cleared upon page refresh or navigation, resulting in ...

javascriptjqueryasp.netajax

Adjust the transparency and viewability of an object loaded from OBJMTL Loader using three.js dat-gui

I have successfully loaded an object using OBJMTLLoader and now I want to be able to manipulate its position, visibility, and opacity using the dat-gui control panel. Although I have been able to move the loaded object following this example, I am having t ...

javascriptthree.js

looping through the multi-dimensional array using v-for

Interested in using v-for and I have encountered a scenario with an object structure as seen here: https://i.sstatic.net/wNguk.png Upon inspecting the dev console, the object looks similar to this: https://i.sstatic.net/jyqth.png My query is about how to ...

javascriptvue.jsgoogle-cloud-firestorequasar-framework

What are the steps for scheduling asynchronous tasks using Promises in Node.js?

As a beginner in Javascript, I am struggling to understand how to execute my functions sequentially. My goal is to use Promises to accomplish this task. I am currently following a tutorial on creating a chat bot for Facebook Messenger. Essentially, I want ...

javascriptnode.jspromisefacebook-messenger

After a postback in JavaScript, the Root Path variable becomes null

I have been attempting to save the Root URL in a JavaScript variable within my _Layout.cshtml like this: <script type="text/javascript> var rootpath = ""; $(document).ready(function () { rootpath = "@VirtualPathUtility.ToAbsolute("~/ ...

javascriptasp.net-mvcasp.net-mvc-4

What are the steps for generating .rdlc documents?

Currently, I am navigating through the process of creating reports in Visual Studio 2010 with the help of the report viewer tool. Since I am just starting out, I am unaware of how to create an RDLC file and utilize it effectively. Could someone explain the ...

c#asp.net

Clearing AsyncStorage in React Native

It has come to my attention that I am spending a significant amount of time debugging redux actions in react-native that are being persisted to AsyncStorage using redux-persist. There are instances where I wish I could simply clear AsyncStorage in order to ...

javascriptreact-nativereduxasyncstorage

Iterating over JSON data to verify the presence of specific information; if not found, display a message indicating its absence. Employing both ng

While looping through a JSON API using *ngFor in Angular, I need to check if each person has a family. If the person has no family, I want to display a message indicating that. Sample JSON data: { "person": [ { "name": "John", "Children ...

javascriptangularloops

Unique validation for mandatory selection on changeSelected

In my Angular HTML code, I have set up a dropdown and two text-boxes. My goal is to create a feature where, if the user selects an option from the 'payable_frequency' dropdown, then either one of the 'payable_commission' fields (min or ...

javascripthtmlangulartypescriptvalidation

Exploring the Benefits of Utilizing Validation Groups in ASP.NET

Having trouble with Validation Group in asp.net c#. After searching for a solution on Google, I still can't figure it out. In this simple ASP.Net form, the TextBox pcs always gets validated even when the value is null or not a number. Here's m ...

c#asp.netrequiredfieldvalidator