CSS fix for webgrid's pager method using Razor and MVC3

Question

I am using MVC3 with Razor, for display a grid I am using a WebGrid, and for paging for this very grid I am using the following code.

My problem : The paging-buttons should keep the same size both when they are selected/clicked and when they are not selected/clicked.

I am having some css problems, I have used CSS and javascript to achieve a design which my client wanted I have replicated it at this fiddle link http://fiddle.jshell.net/Z5L4g/

Razor Code

@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 15, firstText: "<<", lastText: ">>", previousText: "<", nextText: ">")

My CSS Code body { font-family: Calibri; background-color: #D8D8D8; margin-top: 0px; text-decoration:none; }

    #footer:not([href]) {
    letter-spacing: 0px;
    }

    #footer {
    text-align: center;
    margin-top: 10px;
    }

    .pagingCss {
    font-size: 13px;
    }

    .whiteBox {
    background-color: 
    white;
    color: 
    black;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none;
    margin-top: 10px;
    letter-spacing: 0px;
    }

    .blackBox {
    background-color: 
    black;
    color: 
    white;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none;
    margin-top: 10px;
    letter-spacing: 0px;
    }

    .pagingCss a {
    font-size: 13px;
    color: white;
    text-decoration:none;
    }

Javascript Code I have used

    var keywords = ['>>', '<<', '<', '>'];

    function linklabels() {

        var footerDiv = document.getElementById('footer');
        var oldLinks = footerDiv.getElementsByTagName('A');

        var oldLinksCount = oldLinks.length;
        var keywordsCount = keywords.length;

        for (var i = 0; i < oldLinks.length; i++) {

            if (oldLinks[i].firstChild.nodeValue == '>>' || oldLinks[i].firstChild.nodeValue == '<<' || oldLinks[i].firstChild.nodeValue == '>' || oldLinks[i].firstChild.nodeValue == '<') {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "whiteBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }
            else {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "blackBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }

        } // end of for

        //  footer

    }
    window.onload = linklabels; 

Here is how my HTML is render after using the above code

and the code is rendered as html is below

<div id="footer" class="pagingCss">

<a href="/CompanySearch/Home/Results?page=1">
    <span class="whiteBox">&lt;&lt;</span>
</a>

<a href="/CompanySearch/Home/Results?page=5">
    <span class="whiteBox">&lt;</span>
</a>

<a href="/CompanySearch/Home/Results?page=1">
    <span class="blackBox">1</span>
</a>

<a href="/CompanySearch/Home/Results?page=2">
    <span class="blackBox">2</span>
</a>

<a href="/CompanySearch/Home/Results?page=3">
    <span class="blackBox">3</span>
</a>

<a href="/CompanySearch/Home/Results?page=4">
    <span class="blackBox">4</span>
</a> 

<a href="/CompanySearch/Home/Results?page=5">
    <span class="blackBox">5</span>
</a>

6 <a href="/CompanySearch/Home/Results?page=7">
<span class="blackBox">7</span>
</a>

<a href="/CompanySearch/Home/Results?page=8">
    <span class="blackBox">8</span>
</a>

<a href="/CompanySearch/Home/Results?page=9">
    <span class="blackBox">9</span>
</a> 

<a href="/CompanySearch/Home/Results?page=10">
    <span class="blackBox">10</span>
</a> 

<a href="/CompanySearch/Home/Results?page=7">
    <span class="whiteBox">&gt;</span>
</a> 

<a href="/CompanySearch/Home/Results?page=10">
    <span class="whiteBox">&gt;&gt;</span>
</a>
    </div>​

I know there has to be really easy some way or trick to do this, which I just cannot find... please help me out on this.

Saltigrade

Answer 1

As I said in the comments,

don't try to heal the symptoms. In your case a CSS fix won't do the trick because there is no selector for text nodes.

a quick jquery fix would to the trick though:

$(function() {  
 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='selectedBox' />");       
});   

This will wrap your lone text element with a span with class selectedBox for which you have to add some css. You can see it in action here.

UPDATE here is a complete solution This also replaces your linklabels javascript code:

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

$(function() {  
 $("#footer a").contents().wrap("<span class='blackBox' />");
 $("#footer").find("a span").each(function(){
    var val = $.trim($(this).text());
    if (!isNumber(val))
       $(this).attr('class', 'whiteBox');      
  });    

 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='whiteBox' />");       
}); 

Rude

I tried this, the jquery surrounds each page link with this new span class ='selectedBox' I am not very well verse will jquery could you help me out on this again :) – Saltigrade

Answer 2

The selected number is displayed without a wrapping element, so it´s rendered inline.

Try wrapping it in a span tag like this: http://jsfiddle.net/Z5L4g/2/

I have wrapped the selected number in a span with class selected, which shares the same rules as the blackbox class, except having transparent background and black text color.

I wouldn't say it´s a CSS problem, but a markup problem. The selected page indicator doesn't get any width or height and can't be styled as it is just text.

Suggestion: either change the markup, or split the innerHTML of the #footer with javascript and work from there. I would go with the first option.

Crosswise

No, the html cannot be modified just like that, its a result of the razor paging code and the javascript that is run, I was able to surround the links (a tags) with div, but since the selected page number does not have a link around it I was not able to surround it with a div, can you suggest a different method ? – Saltigrade

@yasser you're trying to heal the symptoms, not the disease – Rude

It was hardly worth a vote down as your question didn't state that the solution had to be pure CSS. There is no really easy some way or trick to do what you want to do, so I agree with whosrdaddy - fix the rendered code instead. – Crosswise

@Stoffe, firstly vote down mean : This answer is not useful and only because I didnt find the answer useful I down voted it and regarding the solution to be pure CSS, read the question again it says "CSS fix for..." Hope this answers all your off-topic queries mate ! – Saltigrade

@Yasser: upvoted your downvote as he has a point (and he needs the rep, give him a break) – Rude

Firstly thanks for the answers, and yes I am taking back my downvote :) – Saltigrade