Click here to Skip to main content
15,938,218 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
--scenario

i have made a custom page ...and displaying the gridview...

--the page numbers are displayed using the link button..I am using repeater to bind the link button ..so that these link button will be displayed as page number when page renders.

--aspx page

XML
</asp:GridView>
        <br />
        <asp:Repeater ID="RepeaterForPaging" runat="server">
            <ItemTemplate>
                <asp:LinkButton ID="lnkbtnPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                    Enabled='<%# Eval("Enabled") %>' OnClick="Page_Changed_click">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:Repeater>



--so i was trying this. when i move my mouse over the page number. it will higlight with silver color.


XML
<style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .selected
        {
            background-color: #A1DCF2;
        }
        .hover
        {
            background-color: Silver;
        }
    </style>



---

C#
<script type="text/javascript">
      $(document).ready(function(){

           $('[id*=lnkbtnPage]').mouseover(function(){

            $(this).addclass("hover");

            });

      $('[id*=lnkbtnPage]').mouseout(function(){

      $(this).removeClass("hover");

   });

   });


But this is not working. when i move my mouse on the page numbers. I get error on page.
Please help. Where i am doing wrong ?
Posted
Updated 22-Sep-13 4:11am
v2
Comments
Sampath Lokuge 22-Sep-13 10:12am    
What's your error ? Can you share with us ?

There are two problems.

First, there is no such CSS pseudo-class as "selected". Please see:
http://www.w3.org/TR/selectors/#pseudo-classes[^].

See also: http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements[^].

The author of the answer referenced above explains the situation and suggests using "checked" which would work for some elements (read this answer), but this is the second problem: the elements like pages or page numbers are not a control elements, so they don't have any properties like selection of checked.

So, you can follow the advice in Solution 1 and detect mouse put over the element. But I have a better advice: don't try to highlight page number at all. Good style of design principles dictate that we should not add any behaviors which don't have clear purpose. How highlighting of the page numbers can help readability and navigation? Think about it. They would only distract the user from reading the valuable content.

Usually, elements should be highlighted to attract the attention of the user to some functionality. They say the user: "click me". This is not your case. When the use clicks the page number, nothing happens, it will only confuse the user.

—SA
 
Share this answer
 
v2
You can try like below.
Give a class attribute for your link button is as below:

XML
<ItemTemplate>
                <asp:LinkButton ID="lnkbtnPage" class="clsLinkBtn" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                    Enabled='<%# Eval("Enabled") %>' OnClick="Page_Changed_click">
                </asp:LinkButton>
            </ItemTemplate>


Then call your jQuery events are as below:

$(document).ready(function(){

           $('.clsLinkBtn').mouseover(function(){

            $(this).addclass("hover");

            }).mouseout(function(){

               $(this).removeClass("hover");

           });


I hope this will help to you.
 
Share this answer
 
Comments
Sergey Alexandrovich Kryukov 22-Sep-13 11:09am    
I voted 4.
Please see my answer where I explain why not using "selected" and the problem itself and give, I think, better advice.
—SA
Sampath Lokuge 22-Sep-13 11:33am    
@SA, Thanks. Even though he put 'selected' class with his css,He didn't use it with the above scenario (only 'hover' has been used). So My strong feeling is the problem with the way he used id selector.
Sergey Alexandrovich Kryukov 22-Sep-13 12:04pm    
I am sure that not trying to highlight pages is much better approach, please see my answer.
—SA
Sampath Lokuge 22-Sep-13 12:13pm    
@SA,According to my understanding, he's not going to highlight the whole page.He just try to highlight the page number on the grid, when the user points the mouse on it. Plz correct me If I'm wrong.
Sergey Alexandrovich Kryukov 22-Sep-13 12:18pm    
Ah, you are right. As a token of appreciation for pointing out my mistake, I up-voted your answer from 4 to 5. I'll adjust my answer accordingly, which won't make it much different though...
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900