Radrotator and js script Files

3 posts, 0 answers
  1. DAWN
    DAWN avatar
    2 posts
    Member since:
    Mar 2012

    Posted 04 May 2012 Link to this post

    I have a sharepoint 2007 controltemplate and have created a rotator which works fine as long as it is in the page when I put it in a .js file I can reference the controls but not set the properties. it always returns an error. I have tried several different ways and some things work and some do not. Any help appreciated...I basically took the script attached and removed the script reference and called it rotator.js
  2. DAWN
    DAWN avatar
    2 posts
    Member since:
    Mar 2012

    Posted 04 May 2012 Link to this post

    <script type="text/javascript">
     function GetRotator() {
      return $find("<%=HRdirectRotator.ClientID %>");
     }

     function showItemByIndex(index) {
      // gets reference to the rotator object
      var oRotator = GetRotator();
      //Turn off Rotation
      $find("<%=PlayPause.ClientID %>").set_checked(true);
      // Sets currently shown item by the index passed
      oRotator.set_currentItemIndex(index);
      currentIndex = index;
      var currentItem = $get("<%=lblCurrent.ClientID%>");
      currentItem.innerHTML = currentIndex + 1;
     }

     function OnPlayPauseMouseOver() {
      var spanMessage = $get("spanMouseOver");
      var Checked = $find("<%=PlayPause.ClientID %>").get_checked();
      if (Checked) {
       spanMessage.innerHTML = "Play Slide Show";
      }
      else {
       spanMessage.innerHTML = "Pause Slide Show";
      }

     }
     function OnPlayPauseMouseOut() {
      var spanMessage = $get("spanMouseOver");
      spanMessage.innerHTML = "";
     }
     function OnNextMouseOver() {
      var spanMessage = $get("spanMouseOver");
      spanMessage.innerHTML = "Next Slide";
     }
     function OnNextMouseOut() {
      var spanMessage = $get("spanMouseOver");
      spanMessage.innerHTML = "";
     }
     function OnPrevMouseOver() {
      var spanMessage = $get("spanMouseOver");
      spanMessage.innerHTML = "Previous Slide";
     }
     function OnPrevMouseOut() {
      var spanMessage = $get("spanMouseOver");
      spanMessage.innerHTML = "";
     }

     function itemShown(sender, args) {
      currentIndex = args.get_item().get_index();
      var currentItem = $get("<%=lblCurrent.ClientID%>");
      currentItem.innerHTML = currentIndex + 1;

     }
     function clientItemShowing(sender, args) {

      showBannerNextItem();
     }

     function onSelectedIndexChanged(sender, eventArgs) {
      var selectedItem = eventArgs.get_item();
      showItemByIndex(selectedItem.get_index());
     }

     function showNextItem(button, args) {
      $find("<%=PlayPause.ClientID %>").set_checked(true);
      var rotator = GetRotator();
      //var spanLastAction = $get("spanLastAction");
      if (args.get_commandName() == "Right") {
       direction = Telerik.Web.UI.RotatorScrollDirection.Up;
       //spanLastAction.innerHTML = "Next";
      }
      rotator.showNext(direction);
     }
     function showPreviousItem(button, args) {
      $find("<%=PlayPause.ClientID %>").set_checked(true);
      var rotator = GetRotator();
      //var spanLastAction = $get("spanLastAction");
      if (args.get_commandName() == "Left") {
       direction = Telerik.Web.UI.RotatorScrollDirection.Down;
       //spanLastAction.innerHTML = "Previous";
      }
      rotator.showNext(direction);
     }

     function startRotator(rotator) {
      var direction = Telerik.Web.UI.RotatorScrollDirection.Up;
      //var spanLastAction = $get("spanLastAction");
      //spanLastAction.innerHTML = "Carousel is Playing...";
      if (!rotator.autoIntervalID) {
       rotator.autoIntervalID = window.setInterval(function() {
        rotator.showNext(direction);
       }, rotator.get_frameDuration());
      }
     }

     function stopRotator(rotator) {
      if (rotator.autoIntervalID) {
       window.clearInterval(rotator.autoIntervalID);
       rotator.autoIntervalID = null;
      }
     }

     function OnClientCheckedChanged(button, args) {
      var rotator = GetRotator();
      //var spanLastAction = $get("spanLastAction");

      if (args.get_checked()) {

       stopRotator(rotator);
       //spanLastAction.innerHTML = "Carousel is Paused...Press Play to continue..";
      }
      else {

       startRotator(rotator);
      }
     }
    </script>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 09 May 2012 Link to this post

    Hello Dawn,

    Are you sure that the RadRotator control is successfully referenced, before using its methods? Please debug your page and check if the variable that holds the client-side object of the RadRotator is null. Note that if you directly move the provided script in an external JavaScript file, the ClientIDs that are used for referencing the RadControls on the page will not be accessible and the method $find will return null. You should pass the IDs as parameters on the page that calls the JavaScript functions from the external file in order to use them in the methods' declarations.

    It is also possible that the client-side object of the RadRotator is not yet created when you are referencing it. To check if this is the case, try obtaining a reference in the body of the ASP.NET AJAX pageLoad() function.

    If you are still having difficulties after examining the suggestions, please open a support ticket and send a fully runnable sample that isolates the issue so that I can inspect it locally and provide a more to the point answer.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top