Tag Archives: id

Javascript Trick: Add a class or ID to an HTML element on hover

Posted on November 11, 2012 by
2 comments

Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):

<script>

	$('#menu li').hover (
	function(){ $('.top-nav').addClass('active')},
	function() {$('.top-nav').removeClass('active')}
	)
</script>
Categories: CSS, HTML, Javascript | Tags: , , , , ,

Concrete5: How to display a page’s unique ID

Posted on May 4, 2012 by
1 comment

Here is the line of code I use to display a page’s unique ID.

<?php echo $c->getCollectionID() ?>

This is really useful for styling individual pages.

Categories: Concrete5, PHP | Tags: , , , ,

How to add a unique class to each li item in Concrete5 autonav menu

Posted on January 3, 2012 by
1 comment

First, copy and paste this code into a blank text file:

<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   echo("<ul class=\"nav\">");

   $nh = Loader::helper('navigation');

   $isFirst = true;
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {

         $target = $ni->getTarget();
         if ($target != '') {
            $target = 'target="' . $target . '"';
         }

         if ($ni->isActive($c) || strpos($c->getCollectionPath(), $_c->getCollectionPath()) === 0) {
            $navSelected='nav-selected';
         } else {
            $navSelected = '';
         }

         $pageLink = false;

         if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }

         if (!$pageLink) {
            $pageLink = $ni->getURL();
         }

         if ($isFirst) $isFirstClass = 'first';
         else $isFirstClass = '';

         echo '<li id="'.$navSelected.'" class="item'.$_c->getCollectionID().' '.$isFirstClass.'">';

         if ($c->getCollectionID() == $_c->getCollectionID()) {
            echo('<a class="nav-selected" href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<a href="' . $pageLink . '"  ' . $target . '>' . $ni->getName() . '</a>');
         }   

         echo('</li>');
         $isFirst = false;
      }
   }

   echo('</ul>');

Save this file as new-nav.php or whatever you want it to be called. Upload this template to your concrete/blocks/autonav/templates.

Now, in your template file, use this block of code to call the new menu:

<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->displayPages = 'top';
$nav->controller->orderBy = 'display_asc';
$nav->controller->displaySubPages = 'all';  
 $nav->render('templates/new_nav');                 

Note: make sure that you use the correct name of your new template in the code above.

Or, if you are adding or editing an autonav block from the front end of the site, simply select the “New nav” custom template and apply it to the block.

Let me know if you run into any questions or have any issues with this.

Categories: Concrete5, PHP | Tags: , , , , , , , ,