Rotator bug with fb/gp1/twitter!?

2 posts, 0 answers
  1. Alin
    Alin avatar
    26 posts
    Member since:
    Mar 2011

    Posted 14 Oct 2011 Link to this post

    Hello Telerik Team

    I have a rotator which shows photos, and below each photo I have like buttons for facebook, gplus and twitter. When the first photo shows up, the links are there and seem to be ok, but when I click(or mouseover) the rotators buttons, the links just disappear. Can you spot the error or give me an idea please? Thx a lot! The code I use is this:
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
                <telerik:RadRotator runat="server" ID="RadRotator1" Skin="Black" RotatorType="Buttons"
                    DataSourceID="ObjectDataSource2" Width="850px" Height="520px" ScrollDirection="Right,Left "
                    SlideShowAnimation-Type="Fade" EnableAjaxSkinRendering="true" WrapFrames="true"
                    OnClientItemShown="ItemShown_handler" OnItemClick="RadRotator1_ItemClick" OnItemDataBound="RadRotator1_ItemDataBound">
                            <%#SetInitialIndex(Container) %>
                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ResizeMode="Fit" DataValue='<%#Eval("Data") %>'
                                 Style="padding-left: 5px;
                                padding-right: 5px;" />
                            <asp:Label runat="server" ID="lblTinyURL" Visible="true" ToolTip='<%#Eval("TinyURL") %>'
                                ForeColor="Black" Font-Size="XX-Small"></asp:Label>
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="LoadingPanel1"
            <script src="//" type="text/javascript"></script>
                        <div id="fbDiv">
                        <div id="gp1Div">
                        <div id="twitterDiv">
            <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                <script type="text/javascript">
                    function ItemShown_handler(sender, args) {
                        var ItemIndex = sender.get_currentItem().get_index();
                        // Get the wraper element ;
                        var wrapper = getWrapperElement(args.get_item());
                        // Find an asp control
                        var aspLabelLink_InsideTemplate = findAspControl("lblLink", wrapper);
                        var aspLabelTinyUrl_InsideTemplate = findAspControl("lblTinyURL", wrapper);
                        var fb = aspLabelTinyUrl_InsideTemplate.outerHTML;
                        var gp1 = aspLabelTinyUrl_InsideTemplate.outerHTML;
                        var twitter = aspLabelTinyUrl_InsideTemplate.outerHTML;
                        if (fb.length > 0 && fb.indexOf("title=") > -1)
                            fb = fb.substring(fb.indexOf("title=") + 6, fb.indexOf("></SPAN>"));
                        if (gp1.length > 0 && gp1.indexOf("title=") > -1)
                            gp1 = gp1.substring(gp1.indexOf("title=") + 6, gp1.indexOf("></SPAN>"));
                        if (twitter.length > 0 && twitter.indexOf("title=") > -1)
                            twitter = twitter.substring(twitter.indexOf("title=") + 6, twitter.indexOf("></SPAN>"));
                        //var fbDiv = findHtmlElement("fbDiv", wrapper);
                        fbDiv.innerHTML = "<div class=\"fb-like\" data-href=\"" + fb + "\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-colorscheme=\"dark\"></div>";
                        //var gp1Div = findHtmlElement("gp1Div", wrapper);
                        gp1Div.innerHTML = "<div class=\"g-plusone\" data-href=\"" + gp1 + "\"></div><span itemprop=\"description\"></span>";
                        //var twitterDiv = findHtmlElement("twitterDiv", wrapper);
                        var firstPartUrl = "<a href=\"\" class=\"twitter-share-button\" data-url=\"" + twitter;
                        var restOfUrl1 = "\" data-text=\"Nice!!!\" data-count=\"horizontal\">Tweet</a>";
                        twitterDiv.innerHTML = firstPartUrl + restOfUrl1;
                        //$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(ItemIndex);
                    function findHtmlElement(id, wrapperElement) {
                        // Get the image ;
                        var image = $get(id, wrapperElement);
                        return image;
                    function findAspControl(id, wrapperElement) {
                        // Get the control ;
                        var control = $get( + "_" + id, wrapperElement);
                        return control;
                    function getWrapperElement(rotatorItem) {
                        var itemElem = rotatorItem.get_element();
                        var wrapper = itemElem.firstChild;
                        return wrapper;
  2. Alin
    Alin avatar
    26 posts
    Member since:
    Mar 2011

    Posted 14 Oct 2011 Link to this post

    Never mind, I solved it :)

    The fb and gplus buttons are asynch, so generating them with javascript each time the rotator item changes is not a good idea.
    I just put the like buttons(with all the necessary code) in the respective divs when the page loads, and then, using javascript, change the link they point to, every time the rotator item changes, and it works.
    Hope this helps.
Back to Top