About design and nearby

How to Add ‘active’ class to menu tab in ASP.NET MVC

Posted: November 10th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 3 Comments »

Every time you are working on application it’s a must to have the basic functionality to highlight selected menu item. In HTML it’s not a problem to add certain class to the navigation tab to highlight current page menu tab:

  1. <li class="selected"><a href="#">Home</a></li>

In MVC project you can dynamically set the active list item, based on the view that is being called. In other words, when the user is looking at the home page, the following HTML should be created:

  1. <ul>
  2. <li class="selected"><a href="#">Home</a></li>
  3. <li><a href="#">Services</a></li>                                
  4. </ul>

There are two ways to solve the issue even:

1. To do the above, I created MVC HTML helper class, containing method to apply my CSS class according to some conditions (MenuHelper.cs):

  1. using System;
  2. using System.Web.Mvc;
  3. using System.Web.Mvc.Html;
  4.  
  5. namespace YourWebApplication.Helpers
  6. {
  7.     /// <summary>
  8.     ///  Menu current active item helper class.
  9.     /// </summary>
  10.     public static class MenuHelper
  11.     {
  12.         /// <summary>
  13.         /// Determines whether the specified controller is selected.
  14.         /// </summary>
  15.         /// <param name="html"/>The HTML.
  16.         /// <param name="controller"/>The controller.
  17.         /// <param name="action"/>The action.
  18.         /// <returns></returns>
  19.         public static string IsSelected(this HtmlHelper html, string controller = null, string action = null)
  20.         {
  21.             const string cssClass = "selected";
  22.             var currentAction = (string)html.ViewContext.RouteData.Values["action"];
  23.             var currentController = (string)html.ViewContext.RouteData.Values["controller"];
  24.  
  25.             if (String.IsNullOrEmpty(controller))
  26.                 controller = currentController;
  27.  
  28.             if (String.IsNullOrEmpty(action))
  29.                 action = currentAction;
  30.  
  31.             return controller == currentController && action == currentAction ?
  32.                 cssClass : String.Empty;
  33.         }
  34.     }
  35. }

Read the rest of this entry »

Share Button

Submitting Form: PHP header(Location: …)

Posted: June 11th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , | No Comments »

Once I got a weird trouble with submitting contact form.

My website was powered by WordPress and the contact form was placed at the default page (single page design), so I want the form to submit to the page itself that the form is on.

Read the rest of this entry »

Share Button

How to Add an Anchor Link to WordPress pagination

Posted: May 7th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

There are a few ways to setup WordPress pagination, or ‘paged’ links. I do prefer to work with paginate_links because of set of its arguments, which could be customized according to your needs.

Pagination with anchor link

Read the rest of this entry »

Share Button

WordPress Pagination: How to Make it Work

Posted: May 6th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Function next_posts_link/ previous_posts_link prints a link to the next/ previous set of posts within the current query. It default usage is

  1. <?php next_posts_link(); ?>
  2. <?php previous_posts_link(); ?>

And usually you work with the pagination such way:

  1. <?php if (have_posts()) : ?>
  2. <?php while (have_posts()) : the_post(); ?>
  3. <?php the_content(); ?>
  4. <?php endwhile; ?>
  5. <?php next_posts_link('&laquo; Older Entries') ?>
  6. <?php previous_posts_link('Newer Entries &raquo;') ?>
  7. <?php else : ?>
  8. <p>Page 404</p>
  9. <?php endif; ?>

wordpress pagination

The tricky part comes if you need to print certain number of posts and keep the pagination.

Read the rest of this entry »

Share Button

Responsive Tables

Posted: April 16th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

As for my mind, tables are not to be used for layout. I do use tables are for lists of data. And at the age of responsive design they have to support responsibility.

Solution #1:
For the last time I work a lot with Bootstrap. There are a lot of pre-ready solutions, which help to save my time. Bootstrap framework proposes it’s own variant of responsive tables – you should wrap ‘table’ into ‘div’ element with .table-responsive class:

  1. <div class='table-responsive'>
  2.   <table class='table'>
  3.     …
  4.   </table>
  5. </div>

Horizontal scroll appears at the bottom of the table on small devices.
You can find an alive example as Variant 1.
Read the rest of this entry »

Share Button

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now