swapp class of parent ul on condition?

**samohtwerdna** · Jul 19, 2007 05:30

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

**Raffles** · Jul 19, 2007 07:47

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?

**samohtwerdna** · Jul 19, 2007 08:56

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.

**Raffles** · Jul 19, 2007 09:12

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?

**samohtwerdna** · Jul 19, 2007 10:31

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?

**samohtwerdna** · Jul 19, 2007 12:03

the answer to your question is yes.

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

**Raffles** · Jul 19, 2007 14:05

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.

**samohtwerdna** · Jul 19, 2007 15:23

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?

**samohtwerdna** · Jul 19, 2007 16:10

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">

**samohtwerdna** · Jul 19, 2007 16:38

I tried the above code and it almost works except it changes all the classes to current ??

**Raffles** · Jul 19, 2007 17:24

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>';

**samohtwerdna** · Jul 19, 2007 18:20

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?

**Raffles** · Jul 20, 2007 06:24

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.

**samohtwerdna** · Jul 20, 2007 08:05

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 != 0 || ($totalRows_rsCheckEmpty == 0 && $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 == 0 || !$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.

**Raffles** · Jul 20, 2007 09:39

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.

**samohtwerdna** · Jul 21, 2007 10:50

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 != 0 || ($totalRows_rsCheckEmpty == 0 && $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 == 0 || !$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?

**Raffles** · Jul 22, 2007 06:48

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.

User Tag List

Thread: swapp class of parent ul on condition?

Thread Tools

Display

swapp class of parent ul on condition?

Bookmarks

Bookmarks

Posting Permissions