Dynamic css not applied in my menu (tiles + spring 3.0)

Question

I am using Spring 3.0 + tiles. I have created the common menu with anchor tag for all the pages and applied the css for the same. I am using Jquery for dynamically changing the css class for the menu when the menu is clicked.

When the menu/link is selected, “selectedTab” css class is to be applied and for all the normal links “tab” css class is to be applied. I am facing the problem that with each request/click on the menu the style class is applied and then after the response it gets unapplied again. That is, the style remains applied between the request and response. But not after the response. The code for menu links is as under:

<div id="menu" class=" mainPageLayout clearFix" style="width:980px;margin:0 auto;">
    <a id="dashboard" class="selectedTab" href="dashboard.html" onclick="return changeCss('dashboard');">
        <span>Dashboard</span>
    </a>

    <a id="projects" class="tab" href="projectscontroller.html" onclick="return changeCss('projects');">
        <span>Projects</span>
    </a>

    <a id="milestones" class="tab" href="milestones.html" onclick="return changeCss('milestones');">
        <span>Milestones</span>
    </a>

    <a id="tasks" class="tab" href="tasks.html" onclick="return changeCss('tasks');">
        <span>Tasks</span>
    </a>

    <a id="discussions" class="tab" href="messages.html" onclick="return changeCss('discussions');">
        <span>Discussions</span>
    </a>

    <a id="reports" class="tab" href="reports.html" onclick="return changeCss('reports');">
        <span>Reports</span>
    </a>

    <a id="history" class="tab" href="projects/history.html" onclick="return changeCss('history');">
        <span>History</span>
    </a>

    <a id="templates" class="tab" style="float: right;" href="projects/users.html" onclick="return changeCss('templates');">
        <span>Project templates</span>
    </a>

    <a id="users" class="tab" style="float: right;" href="projects/projectTemp.html" onclick="return changeCss('users');">
        <span>Users</span>
    </a>
</div>

The Jquery for the same is:

function changeCss(aid) { //alert(aid);

jQuery("#menu a").removeClass("selectedTab");
jQuery("#menu a").addClass("tab");


jQuery("#"+ aid).removeClass("tab");
jQuery("#" + aid).addClass("selectedTab");

}

The Css classes for the menu are:

a.selectedTab:hover, .studioTopNavigationPanel .contentSection .navigationBox a .selectedTab:active { background-color: #B8D9ED; background-image: url("../images/tab_selected_bg.png"); background-position: center top; background-repeat: repeat-x; color: #333333; cursor: pointer; display: block; float: left; font-size: 14px; margin-right: 3px; padding: 5px 12px; text-decoration: none; }

.studioTopNavigationPanel .contentSection .navigationBox a.tab, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.tab:active 
{
    background-color: #ECF3F7;
    background-image: url("../images/tab_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}



.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
{
    background-color: #B8D9ED;
    background-image: url("../images/tab_selected_bg.png");
    background-position: center top;
    background-repeat: repeat-x;
    color: #333333;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 3px;
    padding: 5px 12px;
    text-decoration: none;
}

Please tell where I am wrong and provide appropriate solution for the same as soon as possible.

You're asking why using JavaScript to style your menu only works for the current request and not on the new page? — Quaternion, Apr 02 '13 at 17:02
Yes, With tiles, when i click on a menu, the entire page requested is loaded which even loads menu.jsp. So between the request and response the effect gets applied but not after the requested page is displayed. — Amee Mehta, Apr 03 '13 at 03:27
When you press the f5 key, the page is reloaded (a new request) and your JavaScript programs will start from scratch. It's the same for every new request, it may be possible to get around this by using client side persistence but with multiple browser windows (something a lot of users will do, there would be nasty aggravating side effects). You need to solve the issue server side. But a client side JS solution isn't particularly great. When you generate the HTML you could just put a "selected" html class on the element ... then using JS you could do something sensible. — Quaternion, Apr 03 '13 at 04:52
Once you decide on how you want to set that html class we can help you, also provide some code when doing so (server side). — Quaternion, Apr 03 '13 at 04:55
Yes I have done the same. I have applied the class SelectedTab to the menu that remains selected when the page is loaded first time (in my case dashboard remains selected). All other menus are given the class "tab". Then with the above given jquery code I am changing the class of the menu. — Amee Mehta, Apr 03 '13 at 05:29
Ican see the css effect applied just for 2-3 seconds between the request and the response. It goes off after the response. — Amee Mehta, Apr 03 '13 at 05:30
... you click the effect takes place... a request is made to the server it takes sometime to get the new page ready, it sends the data back removing your changes. Don't use JS for persistent effects. — Quaternion, Apr 03 '13 at 05:42
That's exactly what is happening. But Then Please do suggest an appropriate solution for this......What should I use according to you????? — Amee Mehta, Apr 03 '13 at 05:45
Hard to say, I know struts2 not Spring-mvc but I do know Tiles. If you are using tiles version 3 you can use various expression languages (MVEL, EL, I my case OGNL) to assist in menu construction. Wild cards/RegEx can also be used in the tiles expressions. In the JSP there must be a way to determine what action was called so you could use conditional logic when assembling your menu. There are a lot of ways but they're all server side. — Quaternion, Apr 03 '13 at 15:20
Ok.. Thanks a lot for your suggestion. Will try to implement the same in my project.... !!!! Thanks for the help..!!! — Amee Mehta, Apr 04 '13 at 03:59

score 2 · Answer 1 · answered Jan 07 '14 at 12:27

<html>
<head>
<style type="text/css">
 .about_normal
 {
   background-color:red;
   color:blue;
 }
 .about_active
 {
   background-color:black;
   color:green;
 }
</style>
<script type="text/javascript">
var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'about_normal';
divSelected = x;
x.className = 'about_active';
}
</script>
</head>
<body>
 <ul>
  <li class="about_normal" id="t1"><a href="#1" onclick="SelectOrUnSelect(t1)">Our Mission</a></li>
  <li class="about_normal" id="t2"><a href="#2" onclick="SelectOrUnSelect(t2)">Company Info</a></li>
  <li class="about_normal" id="t3"><a href="#3" onclick="SelectOrUnSelect(t3)">All Services</a></li>
  <li class="about_normal" id="t4"><a href="#4" onclick="SelectOrUnSelect(t4)">Press</a></li>
  <li class="about_normal" id="t5"><a href="#5" onclick="SelectOrUnSelect(t5)">Careers</a></li>
 </ul>
</body>
</html>

Try it simply. It will work only you have to change the styling whatever you require. Its working.

score 1 · Answer 2 · answered Apr 09 '13 at 14:00

1

I also think that a server-side menu construction, applying selectedTab to the current concerned element is the best solution, as exposed by Quaternion.

But if you really don't manage to do it, you can also (carefull... dirt) parse the document.location.href in js to know on which page you are, and then apply the selectedTab class to the right element.

answered Apr 09 '13 at 14:00

Robin Leboeuf

2,096
1
13
14

why do you say parsing location.href is dirty? – Michał Rybak Oct 14 '13 at 16:17
I don't say parsing location.href is dirty, I say, doing it in this context is not the best way to solve the problem. It's much more efficient to build the entire menu on server side than building it without any classes, and then after dislaying it on client side, observe url, parse it to determine on which page you are, and then apply classes to style menu elements. (IMO :)) – Robin Leboeuf Oct 14 '13 at 17:26

score 1 · Answer 3 · answered Oct 20 '13 at 01:48

Perhaps you could try something like this:

var urlProjectsController = 'http://yourdomain.com/projectscontroller.html';
var urlMilestones = 'http://yourdomain.com/milestones.html';
if (window.location.href == urlProjectsController ){
  jQuery("#projects").removeClass("tab");
  jQuery("#projects").addClass("selectedTab");
}else if (window.location.href == urlMilestones ){
  jQuery("#milestones").removeClass("tab");
  jQuery("#milestones").addClass("selectedTab");
}
......
......
and so on for the remaining links.

score 1 · Answer 4 · answered Oct 24 '13 at 04:52

1

jQuery(function(){
  jQuery("#menu a").on("click",function(){
    jQuery("#menu a").removeClass("selectedTab");
    jQuery("#menu a").addClass("tab");
    jQuery(this).removeClass("tab");
    jQuery(this).addClass("selectedTab");
 })
});

answered Oct 24 '13 at 04:52

Dinesh

2,744
1
12
12

score 1 · Answer 5 · answered Oct 30 '13 at 11:04

1

   $(document).on("click", "#message", function(event) {

    $('.chat-type-msg').css('background-color','#FAFAFA');
    $('.chat-type-msg').css('color','#535353');
   });

answered Oct 30 '13 at 11:04

Amol Navsupe

172
1
11

score 1 · Answer 6 · answered Nov 04 '13 at 07:07

Try this

.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:visited, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:hover, 
.studioTopNavigationPanel .contentSection .navigationBox a.selectedTab:active 
{
background-color: #B8D9ED !important;
background-image: url("../images/tab_selected_bg.png");
background-position: center top;
background-repeat: repeat-x;
color: #333333!important;
cursor: pointer;
display: block;
float: left;
font-size: 14px;
margin-right: 3px;
padding: 5px 12px;
text-decoration: none;
}

Manoj Saini · Answer 7 · 2013-12-31T13:29:09.393

1

jQuery(function(){
  jQuery("#menu a").on("click",function(){
    if($('#test').attr('class')=="selectedTab")
      jQuery("#menu a").removeClass("selectedTab");
      jQuery("#menu a").addClass("tab");
   }
   else{ jQuery(this).removeClass("tab");
     jQuery(this).addClass("selectedTab");
    }
   });
});

edited Dec 31 '13 at 13:29

answered Dec 31 '13 at 13:22

Manoj Saini

339
2
8

score 1 · Answer 8 · answered Feb 27 '14 at 05:38

1

 $(function(){
    $("#menu a").on("click",function(){
      var ths = $(this);
      if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
      else{ths.removeClass("tab").addClass("selectedTab");}
    });
 });

answered Feb 27 '14 at 05:38

Tony

11
1

Dynamic css not applied in my menu (tiles + spring 3.0)

8 Answers8