Question

Introduction:

I have a repeater with linkbuttons, and when I click on some button, I want it and only it to become transparent, and that the rest of the buttons wouldn’t change.

D-Tails:

I have a Repeater of LinkButtons:

<div style="position: relative">
<asp:Repeater runat="server" ID="repStatuses" 
        onitemdatabound="repStatuses_ItemDataBound"
        onitemcommand="repStatuses_ItemCommand">
  <ItemTemplate>
        <div id="divLinkBtn" style="display:inline"><asp:LinkButton ID="linkBtnStatuses" runat="server" CommandName="ShowText" 
            CommandArgument='<%# Eval("Priority") + ";" + Eval("LevelID") + ";" + Eval("ID") %>'
            OnClientClick='<%# "MyFunc(" + Eval("Priority") + ");" %>'>
            <div runat="server" id="divSts" class="fontAriel" ></div>
        </asp:LinkButton></div>
  </ItemTemplate>
    </asp:Repeater>
</div>

The LinkButtons fade in on Page_Load using the following Jquery function.
Here’s the Page_Load and the jquery code:

Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    SetPageTitle();

    if (!Page.IsPostBack)
    {
        LoadStatusesAndButtons();

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBarWithFadeIN();</script>", false);
    }

    else
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>LoadBar();</script>", false);

}

Jquery

function LoadBarWithFadeIN() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(2500);
        $(this).delay(1000);
    });
});

}

function LoadBar() {
$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(0);

    });
});

}

When I click on some LinkButton, it becomes Transparent.
I found that this code makes only the first linkButtons transparent:

  $(document).ready(function () {
  $('#divLinkBtn').click(function () {
      alert('divlinkbutton presed');
      $(this).css({ 'opacity': 0.4 });
  });
});

THE PROBLEM IS that the button becomes transparent for a second and then the page loads the LoadBar() function and the transparency dissapears.
Another thing is that this function does not handle the rest of the buttons.

Now what I need is that this LinkButton should stay transparent until I click on some other linkbutton.

I was thinking of a way to load all the unclicked buttons as is and somehow load the specific clicked button with the trancparency but I can’t find a way of doing this due to lack of coding experience.

Sorry for the “short” post 🙂

Any help’d be much appreciated!!!!!

Answer 1

After a good night sleep, here’s a simple (not the most elegant though) solution:

 protected void repStatuses_ItemCommand(object source, RepeaterCommandEventArgs e)
{
   SetAsOriginal();

    //Get the linkbutton that was clicked
    LinkButton lnkBtnClicked = e.CommandSource as LinkButton;       //e- is the object of the repeater. CommandSource- is the clicked
    if (lnkBtnClicked != null)
    {
        SetOpacity(lnkBtnClicked, "0.4");
    }

private void SetAsOriginal()
{
    foreach (RepeaterItem item in repStatuses.Items)
    {
        LinkButton btn = item.FindControl("linkBtnStatuses") as LinkButton;
        SetOpacity(btn, "1.0");
    }
}

private void SetOpacity(LinkButton linkButton, string opacityValue)         //SET THE OPACITY TO THE SPECIFIC linkbutton 
{
    linkButton.Style.Add("opacity", opacityValue);
}

The thing is, that the answer above was very good and working, but did not answer my demand.. I needed to set only the clicked button as transparent and the rest of the buttons are to be set back to original.

So I’ve decided to specify the solution for those who might encounter with similar issue.

thank you everyone.

P.s: special thanks to @Lukasz M