highlight the page numbers using jquery

Question

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 22-Sep-13 2:33am

anurag19289

Updated 22-Sep-13 4:11am

Sampath Lokuge

v2

Add a Solution

Comments

Sampath Lokuge 22-Sep-13 10:12am

What's your error ? Can you share with us ?

2 solutions

Solution 1

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.

Posted 22-Sep-13 4:20am

Sampath Lokuge

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

Sampath Lokuge 22-Sep-13 12:20pm

@SA,OK sure.No Problem :)

Sergey Alexandrovich Kryukov 22-Sep-13 12:23pm

I added the paragraph to my answer explaining why highlighting of the page numbers would be bad.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-09-22T05:08:00

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