SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    swapp class of parent ul on condition?

    Hello all,

    I have a horizontal navigation bar with a drop line sub nav. I have a little javascript that highlights the <a> block element based on the current page - so if I have
    PHP Code:
    <ul class="adminnav one"><li><a href="#"><b>Secure Access</b></a>
    <ul class="sub"><li><a href="<?php echo $row_rsSANavBars['LinkURL'?>"></a></li></ul></ul>
    and I want to change the class of the parent ul if the child ul has the active url
    How might I do that with javascript?

    Thanks for any help

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You should decide which <a> to highlight based on which page you're on on the server side. So if you want to highlight the anchor for the current page, with PHP you add a class "active", for instance, to that anchor. Likewise, you should add the class for the parent ul based on this too. If you can do it on the server side, do it on the server side. If you need it to respond to the user's actions, use javascript.

    However, if you really need to use javascript, first we need to know which anchor is the one for the current page. What's this javascript you're using for this?

  3. #3
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sitepoint must have a billion users today - slow as molasses!

    anyway I did change to php for checking my current page:
    PHP Code:
    $page $page basename($_SERVER['SCRIPT_NAME']); 
    and then I query my db
    PHP Code:
    mysql_select_db($database_connection1$connection1);
    $query_rsSANavBars "SELECT * FROM sanavbars WHERE Type = 'SA' AND FlagStatus = 'A' ORDER BY Name";
    $rsSANavBars mysql_query($query_rsSANavBars$connection1) or die(mysql_error());
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars);
    $totalRows_rsSANavBars mysql_num_rows($rsSANavBars); 
    and last add the condition to my class
    PHP Code:
    <ul class="<?php if($row_rsSANavBars['LinkURL'] == $page){echo 'current'; }else{ echo 'adminnav';} ?>
    however, this only works for the first child ul because $row_rsSANavBars['LinkURL']
    somehow I need to loop through each child and check that against the current page??

    php??
    javascript??

    not sure - but any help would be great!
    Thanks for the respounce.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why are you doing this?
    PHP Code:
    $page $page basename($_SERVER['SCRIPT_NAME']);

    //this is more sensible
    $page basename($_SERVER['SCRIPT_NAME']); 
    Well, check the $page against each child link. Surely you're looping through them to add them to the subnav block?

  5. #5
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    opps - $page = $page was simply a copy paste error when posting.

    I tried to loop through like this:
    [PHP]
    <ul class="<?php
    mysql_select_db($database_connection1, $connection1);
    $query_rsSANavBars = "SELECT * FROM sanavbars WHERE Type = 'SA' AND FlagStatus = 'A' ORDER BY Name";
    $rsSANavBars = mysql_query($query_rsSANavBars, $connection1) or die(mysql_error());
    $row_rsSANavBars = mysql_fetch_assoc($rsSANavBars);
    $totalRows_rsSANavBars = mysql_num_rows($rsSANavBars);
    while ($row_rsSANavBars = mysql_fetch_assoc($rsSANavBars))
    {
    if($row_rsSANavBars['LinkURL'] == $page){
    echo 'current';
    }else{
    echo 'adminnav';
    }
    } ?> one"[\PHP]

    but that seems to be gathering the wrong data?
    Last edited by samohtwerdna; Jul 19, 2007 at 11:47.

  6. #6
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the answer to your question is yes.

    I am looping through them - but after I set the parents class?

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In that case you need to build an array of the links first (from the database) and check which one is active. Based on that, you set the class of the parent UL and then you make the list of links with the array you made before.

  8. #8
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok,

    so if I:
    PHP Code:
    $page basename($_SERVER['SCRIPT_NAME']);
    $query_rsSANavBars "SELECT * FROM sanavbars WHERE FlagStatus = 'A' ORDER BY Name";
    $rsSANavBars mysql_query($query_rsSANavBars$connection1) or die(mysql_error());
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars);
    $totalRows_rsSANavBars mysql_num_rows($rsSANavBars);

    $links $row_rsSANavBars['LinkURL'];
    $arrlinks[$links][] = $row[$page]; 
    does that create the array and check which one is active?

  9. #9
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about:
    PHP Code:
    <?php
    $page 
    basename($_SERVER['SCRIPT_NAME']);
    mysql_select_db($database_connection1$connection1);
    $query_rsSANavBars "SELECT * FROM sanavbars WHERE FlagStatus = 'A' ORDER BY Name";
    $rsSANavBars mysql_query($query_rsSANavBars$connection1) or die(mysql_error());
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars);
    $totalRows_rsSANavBars mysql_num_rows($rsSANavBars);

    $links $row_rsSANavBars['LinkURL'];
    $arrlinks[$links][] = $row;

    foreach(
    $arrlinks as $l)
    {
     if(
    $l $page){$c $row_rsSANavBars['Type'];}
    }

     
    ?>
    then,

    PHP Code:
    <ul class="<?php if($c == 'SA'){echo 'current';}else{ echo 'adminnav';}  ?> one">

  10. #10
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the above code and it almost works except it changes all the classes to current ??

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Andrew, I don't think you understand how arrays work. Since you're using mysql_fetch_assoc(), I think the way you're doing it $row_rsSANavBars will be an array of the elements of the first row only. You should use it in a while loop (also you have very complicated variable names):
    PHP Code:
    while ($row mysql_fetch_assoc($rsSANavBars)) {
      
    $linkurls[] = $row['LinkURL']; // add new array element to $linkurls, an array
      
    if ($row['LinkURL'] == $page) {
        
    $currentType $row['Type'];
      }
    }

    // Now, if $currentType is set, then there was a match with $page
    $c $currentType $c 'current' 'adminnav';
    echo 
    '<ul class=\"$c one\">';

    // Now that we've established whether this is a "current" list, cycle through the array
    foreach ($linkurls as $linkurl) {
      echo 
    "<li><a href=\"$linkurl\">Some text</a></li>\n";
    }

    // close the UL
    echo '</ul>'

  12. #12
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to understand arrays better - so thanks for the help.

    The code you posted seems to not return every value in the array. If my sql query is:SELECT * FROM sanavbars WHERE Type = 'SA' AND FlagStatus = 'A' ORDER BY Name

    I get 2 records back

    if :
    SELECT * FROM sanavbars WHERE Type = 'SM' AND FlagStatus = 'A' ORDER BY Name"

    I get 8,

    but for some reason using your code I get 1 record for the first query and 7 for the second etc.

    Also, where you have put "SomeText" I tried to add $row['Name'] but that returned the same Name for each record - shouldn't I be able to pull the Name of the record as I loop through each record?

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Read the manual on mysql_fetch_assoc - it returns an associative array only for the current row. This is why $row['Name'] is the same each time, because in the loop we haven't been doing anything with it. So $row['Name'] will be the Name in the last row from the query.

    But now I see you're putting "WHERE Type = 'SA'" in the query, so there is no point in determining what the type is if you already know what it is!! TO be honest your code doesn't make much sense to me. This might be what you need:
    PHP Code:
    while ($row mysql_fetch_assoc($rsSANavBars)) {
      
    $rows[] = $row['LinkURL']; // add row $rows, an array
      
    if ($row['LinkURL'] == $page) {
        
    $current true;
      }
    }

    // Now, if $current is true, then there was a match with $page
    $c $current $c 'current' 'adminnav';
    echo 
    '<ul class=\"$c one\">';

    // Now that we've established whether this is a "current" list, cycle through the array
    foreach ($rows as $row) {
      echo 
    '<li><a href="' $rows['LinkURL'] . '">' $rows['Name'] . "</a></li>\n";
    }

    // close the UL
    echo '</ul>'
    I have no idea what this "Type" stuff is, so I'm just guessing here.

  14. #14
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffels - sorry for the confusion I have caused!
    Type is just a letter code in my db that tells me which main nav tab the link belongs to (e.g. Type SA = Secure Access main nav, so any links with Type SA should show up under the Secure Access tab)


    I am making progress but still not coming up with the right solution. I have a horizontal nav bar that has drop down navigation - the drop down navigation is populated from my database based on the user the list will be different. Meaning I have 1 table that stores the navigation links (called sanavbars) and another that stores the users (called sauser) and then a 3rd table that stores which links from sanavbars each user has access to.

    Now I want to change the class of the horizontal nav bar which contains the current page (e.g. basename($_SERVER['SCRIPT_NAME'])) in one of its sub navigation links.

    My horizontal nav has 5 tabs.

    right now this is what I have:


    PHP Code:
    <?php
    $page 
    basename($_SERVER['SCRIPT_NAME']);
    $NavBarsExist false;
    mysql_select_db($database_connection1$connection1);
    $query_rsSANavBars "SELECT * FROM sanavbars WHERE Type = 'SA' AND FlagStatus = 'A' ORDER BY Name";
    $rsSANavBars mysql_query($query_rsSANavBars$connection1) or die(mysql_error());
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars);
    $totalRows_rsSANavBars mysql_num_rows($rsSANavBars);

        if (
    $totalRows_rsSANavBars 0) {
        while (
    $row mysql_fetch_assoc($rsSANavBars)) {
                     
    $linkurls[] = $row['LinkURL']; // add new array element to $linkurls, an array
                 
    if ($row['LinkURL'] == $page) {
             
    $currentType $row['Type'];
               }

        }

                 
    // Now, if $currentType is set, then there was a match with $page
                
    if($currentType == 'SA'){$c 'current';}else{$c 'adminnav';}
                 
    //$c = $cl ? $c = 'current' : 'adminnav';
                 
    echo '<ul class="' .$c ' one"><li><a href="#?current=one&amp;sub=none"><b>Secure Access</b><!--[if IE 7]><!--></a><!--<![endif]-->'."\n";
                 echo 
    '<!--[if lte IE 6]><table><tr><td><![endif]-->'."\n";
                 echo 
    '<ul class="sub" id="navlight">'."\n";
            do {
                
    $SANavBarId $row_rsSANavBars['NavBarId'];
                
    mysql_select_db($database_connection1$connection1);
                
    $query_rsSAUserNavBars "SELECT * FROM sausernavbars WHERE SAUserId = '$SAUserId' AND SANavBarId = '$SANavBarId' AND FlagStatus = 'A'";
                
    $rsSAUserNavBars mysql_query($query_rsSAUserNavBars$connection1) or die(mysql_error());
                
    $row_rsSAUserNavBars mysql_fetch_assoc($rsSAUserNavBars);
                
    $totalRows_rsSAUserNavBars mysql_num_rows($rsSAUserNavBars);

                
    // show navbar if user has access to it
                
    if ($totalRows_rsSAUserNavBars != || ($totalRows_rsCheckEmpty == && $row_rsSANavBars['NavBarId'] == '112')) {
                    
    $NavBarsExist true?>
                    <li><a href="<?php echo $row_rsSANavBars['LinkURL'?>" class="blackRed"><?php echo $row_rsSANavBars['Name']; ?></a></li>
    <?php
                
    }
            } while (
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars));
        }
        if (
    $totalRows_rsSANavBars == || !$NavBarsExist)
            echo 
    '<li><a href="#">not available</a></li>'?>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
    for each of the five tabs. The problem with this code is that it only returns one link for the sub nav? I assume that this is because as you point out that fetch_assoc returns only associating row. Should I use fetch_row?

    Any ideas?

    Thanks for the help.

  15. #15
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You are repeating DB queries there. Bad. You only need to do the query once - that's what's got you into this mess in the first place!

    You seem to be randomly copying and pasting things in there without actually giving much thought to what is going on or trying to understand the code.

    Another problem is that you mention "navbars" (plural) but from your description it seems to me there is only one navbar with five items in it, and each one when hovered shows a submenu. Also, you want the submenu containing the link to the current page to have a different class name. Is this right? So the basic structure is like this:

    HTML Code:
    <ul> <!-- horizontal navbar starts here -->
      <li>
        <ul> <!-- dropdown submenu 1 -->
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
        </ul>
      </li>
      <li>
        <ul> <!-- dropdown submenu 2 -->
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
        </ul>
      </li>
      <li>
        <ul> <!-- dropdown submenu 3 -->
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
        </ul>
      </li>
      <li>
        <ul> <!-- dropdown submenu 4 -->
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
          <li><a href="...">Link</a></li>
        </ul>
      </li>
    </ul> <!-- end of horizontal navbar -->
    Also please consider using different variable names. They are horrible and very confusing.

  16. #16
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffels,

    Thanks for the help and the suggestions. The variable names are not mine - the site I am cleaning up from a previous person - and I agree with you.

    Concerning my ul li structure - it differs from the traditional because I have a drop line navigation and I want to be able to control the position of the sub links
    so instead of:
    Code:
    <ul>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>
       <ul> /*etc*/
    I have:
    Code:
    <ul>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
       <ul> /*etc*/
    so that I can have a unique class for each main nav or tab and then position the sublinks accordingly. If there is a better way of doing this I am certainly open to suggestions.

    I now have a working loop array loop:
    PHP Code:
    <?php
              $page 
    basename($_SERVER['SCRIPT_NAME']);
                
    $NavBarsExist false;
                
    mysql_select_db($database_connection1$connection1);
                
    $query_rsSANavBars "SELECT * FROM sanavbars WHERE Type = 'SA' AND FlagStatus = 'A' ORDER BY Name";
                
    $rsSANavBars mysql_query($query_rsSANavBars$connection1) or die(mysql_error());
                
    //$row_rsSANavBars = mysql_fetch_assoc($rsSANavBars);
                
    $totalRows_rsSANavBars mysql_num_rows($rsSANavBars);
                
                    if (
    $totalRows_rsSANavBars 0) {
                    while (
    $row mysql_fetch_assoc($rsSANavBars)) {
                        
    $linkurls[] = $row['LinkURL']; // add new array element to $linkurls, an array
                        
    if ($row['LinkURL'] == $page) {
                         
    $currentType $row['Type'];
                         }
                    
                    }

                 
    // Now, if $currentType is set, then there was a match with $page
                
    if($currentType == 'SA'){$c 'current';}else{$c 'adminnav';}
                 
    //$c = $cl ? $c = 'current' : 'adminnav';
                 
    echo '<ul class="' .$c ' one"><li><a href="'.$page.'?current=one&amp;sub=none"><b>Secure Access</b><!--[if IE 7]><!--></a><!--<![endif]-->'."\n";
                 echo 
    '<!--[if lte IE 6]><table><tr><td><![endif]-->'."\n";
                 echo 
    '<ul class="sub" id="navlight">'."\n";
             
    mysql_data_seek($rsSANavBars,0);
            while (
    $row_rsSANavBars mysql_fetch_assoc($rsSANavBars)) {
                
    $SANavBarId $row_rsSANavBars['NavBarId'];
                
    mysql_select_db($database_connection1$connection1);
                
    $query_rsSAUserNavBars "SELECT * FROM sausernavbars WHERE SAUserId = '$SAUserId' AND SANavBarId = '$SANavBarId' AND FlagStatus = 'A'";
                
    $rsSAUserNavBars mysql_query($query_rsSAUserNavBars$connection1) or die(mysql_error());
                
    $row_rsSAUserNavBars mysql_fetch_assoc($rsSAUserNavBars);
                
    $totalRows_rsSAUserNavBars mysql_num_rows($rsSAUserNavBars);

                
    // show navbar if user has access to it
                
    if ($totalRows_rsSAUserNavBars != || ($totalRows_rsCheckEmpty == && $row_rsSANavBars['NavBarId'] == '112')) {
                    
    $NavBarsExist true?>
                    <li<?php if($row_rsSANavBars['LinkURL'] == $page){echo ' class="current_sub"';} ?>><a href="<?php echo $row_rsSANavBars['LinkURL'?>" class="blackRed"><?php echo $row_rsSANavBars['Name']; ?></a></li>
    <?php
                
    }
            } 
        }
        if (
    $totalRows_rsSANavBars == || !$NavBarsExist)
            echo 
    '<li><a href="#">not available</a></li>'?>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
    <ul class="adminnav two"><li><a href="#?current=one&amp;sub=none"><b>Account Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
    <?php
    does this look better - barring the horrible variable names?

  17. #17
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In that case, that's not the proper markup, because the outer list is no longer a list - it only contains one item! You'd be better off using a div, or a list like I posted. I hope you realise that LI and UL and DIV items are quite similar from a styling point of view. You can just treat them as boxes and apply padding, margin and borders like you would with a DIV.

    My version and yours area actually very similar. So instead of giving the top level ULs different classes, you should give the top-level LI items different classes.


Bookmarks

Posting Permissions

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