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

18
votes

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.

8
javajquerytilesspring-3dynamic-css
You're asking why using JavaScript to style your menu only works for the current request and not on the new page? – Quaternion
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
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
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
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

8 Answers

2
votes
<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.

1
votes

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.

1
votes

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.
1
votes
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");
 })
});
1
votes
   $(document).on("click", "#message", function(event) {

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

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;
}
1
votes
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");
    }
   });
});
1
votes
 $(function(){
    $("#menu a").on("click",function(){
      var ths = $(this);
      if($('#test').hasClass("selectedTab")){ths.removeClass("selectedTab").addClass("tab");}
      else{ths.removeClass("tab").addClass("selectedTab");}
    });
 });