?
Solved

How do I set pseudo class of an anchor tag as active through javascript.

Posted on 2009-07-02
5
Medium Priority
?
298 Views
Last Modified: 2012-05-07
I have declared following style in my jsp.

<style type="text/css">
      a.anchorCSS:link, a.anchorCSS:visited {
        display: inline;
        width: 2em;  
        padding: 0.2em;
        line-height: 1.4;
        background-color: #ff0000;
        border: 1px solid white;
        color: #ffffff;
        text-decoration: none;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      font-weight: bold;
}

a.anchorCSS:hover {
       background-color: #1998F9;
       color: #fff;
       font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      font-weight: bold;
}

a.anchorCSS:active {
      background-color: #035C9C;
       color: #ffff;
       font-family: Arial, Helvetica, sans-serif;
      font-size: 9pt;
      font-weight: bold;
}
     
      </style>

I am implementing pagination wherein page numbers are displayed as links with above CSS.
But after page numbers are displayed I want to mark the first page as active by default. In subsequent clicks the corresponding page numbers should be active.

I tried the following but its not working.

document.getElementById("1").className='anchorCSS:active';
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	a.anchorCSS:link, a.anchorCSS:visited {
 	 display: inline;
 	 width: 2em;  
 	 padding: 0.2em;
  	line-height: 1.4;
  	background-color: #ff0000;
  	border: 1px solid white;
  	color: #ffffff;
  	text-decoration: none;
 	 text-align: center;
  	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
}
 
a.anchorCSS:hover {
 	background-color: #1998F9;
 	color: #fff;
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
}
 
a.anchorCSS:active {
	background-color: #035C9C;
 	color: #ffff;
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
}
	
	</style>
  </head>
  
  
 
  
  <script type="text/javascript">
function performPostSelection(totalRecords,pageSize,currentPage,pageAction){
 
	
	var pattern = /\d/g;
	
	if(pageAction=='F'){
		pagination(totalRecords,pageSize,currentPage);
		
			
	}
	if(pageAction=='P'){
		pagination(totalRecords,pageSize,currentPage);
		
	}
	if(pattern.test(pageAction)){
		
				
	}
	if(pageAction=='N'){
		pagination(totalRecords,pageSize,currentPage);
		
	}
	if(pageAction=='L'){
		pagination(totalRecords,pageSize,currentPage);
		
	}
}
 
function pagination(totalRecords,pageSize,currentPage){
  	
  	var windowSize = 5;
  	
  	var pageNode = document.getElementById('pageSequence');
  	var childs = pageNode.childNodes;
  	 	
  	// alert('numberOfChilds:'+childs.length);
  	/*
  	for(var j=0;j<childs.length;j++){
  		alert('Removing'+childs[j]);
  		alert('j:'+j);
  		pageNode=document.getElementById('pageSequence');
  		childs = pageNode.childNodes;
 		pageNode.removeChild(childs[j]); */
 		
 		while(childs.length >0){
 			// alert('Removing'+childs[0]);
 			// pageNode = document.getElementById('pageSequence');
 			pageNode.removeChild(childs[0]);
 			pageNode = document.getElementById('pageSequence');
 			childs = pageNode.childNodes;
 		}
 	
  	
  	// var pageNode = document.getElementById('pageSequence');
  	
  	var numberOfPages = Math.ceil(totalRecords/pageSize);
  	
  	
   	// alert('NumberOfPage:'+numberOfPages);
  	if(totalRecords > 0){
  		if(currentPage/windowSize >= 2){
  			var link = document.createElement('a');
  			link.setAttribute('href','javascript:performPostSelection('+(totalRecords)+','+(pageSize)+','+(1)+',\'F\')');
  			link.setAttribute('className','anchorCSS');
  			link.setAttribute('style','font-family: Arial, Helvetica, sans-serif;font-size: 8pt;font-weight: bold;');
  			link.innerHTML=' << ';
  			
  			
  			pageNode.appendChild(link);
  		}
  		if(currentPage/windowSize >= 1){
  			var previousPage=(windowSize*((Math.floor(currentPage/windowSize))-1))+1;
  			// alert('PreviousPage:'+previousPage);
  			var link = document.createElement('a');
  			link.setAttribute('href','javascript:performPostSelection('+(totalRecords)+','+(pageSize)+','+(previousPage)+',\'P\')');
  			link.setAttribute('className','anchorCSS');
  			link.setAttribute('style','font-family: Arial, Helvetica, sans-serif;font-size: 8pt;font-weight: bold;');
  			link.innerHTML=' < ';
  			pageNode.appendChild(link);
  		}
  		for(var i=currentPage;i<=numberOfPages;i++){
  			if(i==(currentPage+windowSize)){
  				break;
  			}
  			var link = document.createElement('a');
  			link.setAttribute('href','javascript:performPostSelection('+(totalRecords)+','+(pageSize)+','+i+','+i+')');
  			link.setAttribute('className','anchorCSS');
  			link.setAttribute('style','font-family: Arial, Helvetica, sans-serif;font-size: 8pt;font-weight: bold;');
  			link.innerHTML=i;
  			link.setAttribute('id',i);
  			pageNode.appendChild(link);
  			
  		} // end of for
  		
  		if((numberOfPages)/(currentPage+windowSize) >= 1){
  			var correction = 1;
  			if((currentPage%windowSize)==0){
  				correction=0;
  			}
  			var nextPage=(windowSize*((Math.floor(currentPage/windowSize))+correction))+1;
  			// alert('NextPage'+nextPage);
  			var link = document.createElement('a');
  			link.setAttribute('href','javascript:performPostSelection('+(totalRecords)+','+(pageSize)+','+(nextPage)+',\'N\')');
  			link.setAttribute('className','anchorCSS');
  			link.innerHTML=' > ';
  			pageNode.appendChild(link);
  		}
  		if((numberOfPages)/(currentPage+windowSize)+1 > 2){
  			var correction = 0;
  			if(((numberOfPages)%windowSize)==0){
  				alert(currentPage);
  				correction=1;
  			}
  			var link = document.createElement('a');
  			var firstWindowRec=currentPage%windowSize;
  			var multiplier=numberOfPages/(currentPage-firstWindowRec);
  			// alert('NumberOfPages:'+numberOfPages);
  			// alert('windowSize:'+windowSize);
  			// var lastWindow=(windowSize*(Math.floor(numberOfPages/windowSize)))+1;
  			var lastWindow=(windowSize*((Math.floor(numberOfPages/windowSize))-correction)+1);
  			// alert('lastWindow:'+lastWindow);
  			link.setAttribute('href','javascript:javascript:performPostSelection('+(totalRecords)+','+(pageSize)+','+(lastWindow)+',\'L\')');
  			link.setAttribute('className','anchorCSS');
  			link.setAttribute('style','font-family: Arial, Helvetica, sans-serif;font-size: 8pt;font-weight: bold;');
  			
  			
  			link.innerHTML=' >> ';
  			pageNode.appendChild(link);
  		}
  	}
  	document.getElementById("3").className='anchorCSS';
  } // end of function
</script>
  
  <body>
  	
    This is my JSP page3.
    <input type = 'button' value='SUBMIT' onclick='pagination(401,20,1)'>
   <!--  textarea scrolling="no" rows="10" cols="10" style="border-width:1px; whiteSpace:pre;">fhidoghoashgioadhgghghfgha
    ghadf;soghasdfioghioafgh</textarea> -->
    <form>
    
    <div id="x" name=x>
    <!--  label id="y" name="y"  onclick='pagination(344,20,1)'/>Check -->
    </div>
    <table border="1px">
      
    <tr>
    <td width="400px" align="center">
    	<div id="pageSequence"></div>
    	</td>
    </tr>
    </table>
    
   
    </form>
  </body>
</html>

Open in new window

0
Comment
Question by:rcx_support
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 80 total points
ID: 24761574
You could modify your css 'a.anchorCSS:active' rule to a grouping rule having a.anchorCSS-active and apply that classname to the link
a.anchorCSS:active, a.anchorCSS-active {
    background-color: #035C9C;
    color: #ffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
}
 
document.getElementById("1").className='anchorCSS-active';

Open in new window

0
 

Author Comment

by:rcx_support
ID: 24761669
I did the same as suggested by you. Thanks for the same.

But as you know I am implementing pagination.
On clicking search, link to first page should be marked active.
But when 2nd link is clicked, then link 2 should be active and 1st link should again fall back to 'link'.
0
 

Author Comment

by:rcx_support
ID: 24761946
Basically what I want is to change the state of anchor elements from link to active and CSS should get automatically selected as per my CSS declaration .

Something like this--

document.getelementByID("").style.backgroung="blue"; as for changing bg color.

document.getelementByID(").style.class.active='true';  // this behaviour I am loooking for.
0
 

Accepted Solution

by:
rcx_support earned 0 total points
ID: 24769784
Thanks Albert for your assistance. I figured out the solution.
I wanted to mark the first anchor tag as active manually  .

This is achieved by setActive() method.

The solution is --

document.getElementById("1").setActive();

 
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24770207
Cool that you found out.
I keep the setActive in mind myself...
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question