Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts

    highlighting the navigational item one is on

    Hello everyone. This a css code in <head>:

    Code:
    .pagination{
    width: 530px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
    text-align: right;
    background-color: white;
    padding: 5px 10px;
    }
     
    .pagination a{
    padding: 0px 5px;
    text-decoration: none;
    color: #410B38;
    font-weight:bold;
    font-family:Arial;
    background: white;
    }
     
    .pagination a:hover, .pagination a.selected{
    color: white;
    text-decoration: none;
    font-weight:bold;
    font-family:Arial;
    background-color: #410B38;
    }
    for a div with class=pagination (below) which contains the pagination of mysql data display:

    Code:
    <div class="pagination">
    <?php
    $sql = "SELECT COUNT(id) FROM tablename";
    $rs_result = mysql_query($sql,$mysql_connection);
    $row = mysql_fetch_row($rs_result);
    $total_records = $row[0];
    $total_pages = ceil($total_records / 5);
     
    for ($i=1; $i<=$total_pages; $i++) {
    echo "<a href='mysqldatadisplay.php?page=".$i."'>".$i."</a>";
    };
    ?>
    </div>
    I want everytime someone clicks on another number in order to change page, that clicked number to have different style than the other numbers as long as one stays on that page and when one clicks on a different number I want that number to behave in the same way. Someting like highlighting the navigational item that you're on. Thank you very much in advance!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    It's just a matter of adding a class name to the clicked element. The class determines the style (whatever you want). So if you click on one of the related elements, you remove that class from all elements and only add it to the currently clicked one ... done.

    Example: http://jsbin.com/emezur/edit

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    It's just a matter of adding a class name to the clicked element. The class determines the style (whatever you want). So if you click on one of the related elements, you remove that class from all elements and only add it to the currently clicked one ... done.

    Example: http://jsbin.com/emezur/edit
    I am a beginner so I need some help.. How to customize the code you gave? Thank you in advance!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Please show us the final HTML code as seen in your browser. Then I might be able to help you. For sure the PHP part will create this HTML in the end, but I'd need to execute it to see it ... so please provide us with it :-)

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Please show us the final HTML code as seen in your browser. Then I might be able to help you. For sure the PHP part will create this HTML in the end, but I'd need to execute it to see it ... so please provide us with it :-)
    This is the code:
    Code:
        <?php
        if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
        $start_from = ($page-1) * 5;
        $mysql_connection = mysql_connect("host", "user", "password") or die ('Eror: ' .mysql_error());
        $database_myconnection = "database";
        mysql_select_db($database_myconnection,$mysql_connection );
        $sql = "SELECT * FROM tablename ORDER BY id DESC LIMIT $start_from, 5";
        $rs_result = mysql_query ($sql,$mysql_connection);
        while ($row = mysql_fetch_assoc($rs_result)) {
        ?>
    <table width="581">
    <tr>
      <td>
        <div>
        <b><?php echo $row['title']; ?></b>
        </div>
      </td>
     </tr>
     <tr>
      <td>
        <div><?php echo $row["text"];?></div>
      </td>
     </tr>
    </table>
        <?php
        };
        ?>
    </span>
    <div class="pagination">
    <?php
    $sql = "SELECT COUNT(id) FROM tablename";
    $rs_result = mysql_query($sql,$mysql_connection);
    $row = mysql_fetch_row($rs_result);
    $total_records = $row[0];
    $total_pages = ceil($total_records / 5);
      
    for ($i=1; $i<=$total_pages; $i++) {
                echo "<a href='pagination.php?page=".$i."'>".$i."</a>";
    };
    ?>
    and this is the css code I already have in head:

    Code:
    .pagination{
    width: 530px;
    text-align: right;
    background-color: white;
    }
     
    .pagination a{
    color: red;
    background: white;
    }
     
    .pagination a:hover, .pagination a.selected{
    color: white;
    background-color: red;
    }

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    No it is not. It's still PHP. We need the final HTML (as seen in your browser, as I previously mentioned).

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #7
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    No it is not. It's still PHP. We need the final HTML (as seen in your browser, as I previously mentioned).
    You mean this:
    Code:
    <table width="581">
     <tr>
      <td>
        <div><b>Title</b>
        </div>
      </td>
     </tr>
     <tr>
      <td>
        <div>Text</div>
      </td>
     </tr>
     <tr>
      <td>
    <div class="pagination"><a href='pagination.php?page=1'>1</a></div>
      </td>
     </tr>
    </table>
    or what the visitors see?

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    So the pagination only has one page? How does it look like if there is more than one page? This structure is important to help you with applying the previously mentioned "class toggle".

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #9
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    So the pagination only has one page? How does it look like if there is more than one page? This structure is important to help you with applying the previously mentioned "class toggle".
    no the pagination has several pages
    <div class="pagination"><a href='pagination.php?page=1'>1</a></div>
    <div class="pagination"><a href='pagination.php?page=2'>2</a></div>
    <div class="pagination"><a href='pagination.php?page=3'>3</a></div>
    and so on.

    you can see it here:
    http://imm.io/lViF

    but I want hover style to be active as long as I am in that page and not only on hover.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    So with every click on the pagination link you are actually refreshing the full page with a new URL? Then setting the active element is not just a matter of setting classes but rather a matter of reading the page=X query string from the location.href URL and then applying the class to the respective div

    Code:
    window.onload = function() {
       var pagenr = parseInt(window.location.search.match(/(\d+)$/)[1], 10);
       var paginations = document.getElementsByClassName('pagination');
       paginations[pagenr-1].className = "selected";
    }

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #11
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    So with every click on the pagination link you are actually refreshing the full page with a new URL? Then setting the active element is not just a matter of setting classes but rather a matter of reading the page=X query string from the location.href URL and then applying the class to the respective div

    Code:
    window.onload = function() {
       var pagenr = parseInt(window.location.search.match(/(\d+)$/)[1], 10);
       var paginations = document.getElementsByClassName('pagination');
       paginations[pagenr-1].className = "selected";
    }
    It works only for page one and only when I reload it.

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    It should work for every page, given that page=X is the last element of the URL

    On page load (window.onload) it extracts the X from page=X and add the class "selected" to the DIV with class "pagination" and index X-1 (so page=1 will be index 0 which is the first pagination element on the page)

    Do you have an online example?

  • Users who have thanked devnull69 for this post:

    atagrem (04-13-2012)

  • #13
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    It should work for every page, given that page=X is the last element of the URL

    On page load (window.onload) it extracts the X from page=X and add the class "selected" to the DIV with class "pagination" and index X-1 (so page=1 will be index 0 which is the first pagination element on the page)

    Do you have an online example?

    It is a comments script, right? When I click on the link to go to that page where that script is put the url is something like: "www.website.com/comments.php" and when I click on page 2 in order to see more comments url is "www.website.com/comments.php?page=2"...
    I understood what your code does but I have to click on page number 1 to change style.

    What shall I do? Sorry for my ignorance! Thank you very much for your time!
    Last edited by atagrem; 04-13-2012 at 05:09 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •