Solved

setting image for current link state

Posted on 2011-02-10
30
1,006 Views
Last Modified: 2013-11-19
Hello again,

My goal is to set an image state based on it begin selected to display the current content.  I'm not able to figure out the necessary code to keep the image link appearing as active to visitors.

Everything works as designed until line 44 in the CSS.

Corrections, examples, advice and direction would be greatly appreciated.  When answering, please consider I'm  new to CSS and javascript.

my markup:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Wed, 09 Feb 2011 02:03:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
&#9;<link type="text/css" rel="stylesheet" href="style.css">
    <title>button test 2</title>
&#9;
&#9;<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
//--></script>

        <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  
  <body id="page1">
<br /> 
<div 
   id="maincontent3" 
   style="margin-top: 20px; 
          padding:10px; 
          text-align:left">
&#9;Original text for main content 3
</div>
<ul id=navigation>
&#9;<li><a class="home" href="javascript:ReplaceContentInContainer('maincontent3','Thanks for icon 1')" title"home"></a></li>
&#9;<li><a class="about" href="javascript:ReplaceContentInContainer('maincontent3','Thanks for icon 2')" title"about"></a></li>
&#9;<li><a class="contact" href="javascript:ReplaceContentInContainer('maincontent3','Thanks for icon 3')" title"contact"></a></li>
&#9;<!-- end of ul id=navigation --></ul>
  </body>
</html>

Open in new window


My CSS
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */



body { background-color: #FFFFFF }

/* navigation */
#navigation {width: 102px; height:129; margin: 0 auto; }

ul#navigation { list-style: none; }
              ul#navigation li {display: block;} 
                     ul#navigation li a { 
                            text-indent: -9999px;
                            display: block;
                            width: 102px;
                            height: 129px;
                            align: left;
                            /*float: left; */
                            }
ul#navigation li a.home {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
                            }
                            
ul#navigation li a.about {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
              }
              
ul#navigation li a.contact {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
              }
              
ul#navigation li a.home:hover, 
ul#navigation li a.about:hover, 
ul#navigation li a.contact:hover 
{
    width:102px;
    background-position: center right;
   }           
              
#navigation li a.home {width:102px; background-position: center right; } #page1 #navigation li a.home a,
#navigation li a.about{width:102px; background-position: center right; } #page1 #navigation li a.about a,
#navigation li a.contact{width:102px; background-position: center right; } #page1 #navigation li a.contact a,

Open in new window

0
Comment
Question by:johnm07
  • 15
  • 13
30 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I'll take another look from my computer later. In the mean time PLEASE change href="javascript:
To
href="#" onclick="
And add
;return false
after the thanks for x');return false"
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I cannot see the links at all. - I guess I need to add an image.

I will look later this evening
0
 

Author Comment

by:johnm07
Comment Utility
I tested this change on line 40 (see below) as you outlined but it does not result in the icon appearing as active.

<li><a class="home" href="#" onclick="ReplaceContentInContainer('maincontent','Thanks for icon 1')" return"false"></a></li>

Open in new window

0
 

Author Comment

by:johnm07
Comment Utility
here is my image if it helps. my 2 states image
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I'll take a look later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
NOW I understand what you wanted.

This code works, but once I have programmatically changed the background position, the hover stops working.

I will try to see if I can manipulate the visited/active state instead
PS: Your CSS does not seem complete
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Wed, 09 Feb 2011 02:03:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>button test 2</title>
	
<script type="text/javascript"><!--
var saveLink = null;	
function ReplaceContentInContainer(link,id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;
  if (saveLink) saveLink.style.backgroundPosition="center left";
  link.style.backgroundPosition="center right";
  saveLink=link;
  link.blur(); // remove the border
  return false
}
//--></script>

        <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  
  <body id="page1">
<br /> 
<div 
   id="maincontent3" 
   style="margin-top: 20px; 
          padding:10px; 
          text-align:left">
	Original text for main content 3
</div>
<ul id=navigation>
	<li><a class="home" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 1')" title"home"></a></li>
	<li><a class="about" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 2')" title"about"></a></li>
	<li><a class="contact" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 3')" title"contact"></a></li>
	<!-- end of ul id=navigation --></ul>
  </body>
</html>

Open in new window

0
 

Author Comment

by:johnm07
Comment Utility
When you say "PS: Your CSS does not seem complete" are you refering to the issue I am requesting assistence with or are you looking at someting else in the CSS code?

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Did not look at the question but what you pasted here stops before it is finished it is truncated after a comma
#navigation li a.home {width:102px; background-position: center right; } #page1 #navigation li a.home a,
#navigation li a.about{width:102px; background-position: center right; } #page1 #navigation li a.about a,
#navigation li a.contact{width:102px; background-position: center right; } #page1 #navigation li a.contact a,

The above does not look right

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Anyway a change of class name onclick should be better I'll look again later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
This is harder than I expected with the styles you have defined...

Here is the script to change className. Now we need someone skilled enough with CSS to clean your non-optimal css and make my script work ;)

Please note I changed your links from
<a class="home" href="javascript:ReplaceContentInContainer('maincontent3','Thanks for icon 1')" title"home">Home</a>
to

<a class="home" href="#" onClick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 1')" title"home">Home</a>

which is how to do these things
<script type="text/javascript"><!--
/* Script to change the className of a clicked link and reset a previously clicked link 
  each link needs  
  onClick="return ReplaceContentInContainer(this,'maincontent3','text to show')"
*/
var saveLink = null;	
function ReplaceContentInContainer(link,id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;
  if (saveLink) {
    saveLink.className = saveLink.className.replace(/ clicked/,"");
  }    
  link.className+=" clicked"
  saveLink=link;
  link.blur(); // remove the border
  return false
}
//--></script>

Open in new window

0
 

Author Comment

by:johnm07
Comment Utility
Thanks for working on this, here is the current state...
I test the edited script and what I see is the same result as my original script. One item to note is when testing in FireFox the page layout is now completely altered. Testing in IE the layout still looks fine. Not sure what is now causing the layout to become altered in FF but I'll attempt tofind what in the new code may have caused the layout problem.  

As far is presenting the appearance of an active state button, you feel the CSS now needs to be altered to reflect your edited script?  Are you able to show the button in an active state in you environment?
- John
0
 

Author Comment

by:johnm07
Comment Utility
I resolved the Firefox layout display problem so thats now a non issue.
0
 

Author Comment

by:johnm07
Comment Utility
I raised the points to 500 seeing this is more complex then originally thought.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Please post the latest css
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:johnm07
Comment Utility
The script edited in post ID 34877253 created the selected or current button appearance I was seeking but as mentioned it lost the hover effect

The script edited in post ID 34885967 returned the hover effect but we lost the desired appearance of a selected or currently selected button.

Here is the current CSS.

/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */



body { background-color: #FFFFFF }

/* navigation */
#navigation {width: 102px; height:129; margin: 0 auto; }

ul#navigation { list-style: none; }
              ul#navigation li {display: block;} 
                     ul#navigation li a { 
                            text-indent: -9999px;
                            display: block;
                            width: 102px;
                            height: 129px;
                            align: left;
                            /*float: left; */
                            }
ul#navigation li a.home {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
                            }
                            
ul#navigation li a.about {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
              }
              
ul#navigation li a.contact {
              width: 102px;
              background: url("phoneicon.png") no-repeat scroll center left;
              }
              
ul#navigation li a.home:hover, 
ul#navigation li a.about:hover, 
ul#navigation li a.contact:hover 
{
    width:102px;
    background-position: center right;
   }           
              
#navigation li a.home {width:102px; background-position: center right; } #page1 #navigation li a.home a,
#navigation li a.about{width:102px; background-position: center right; } #page1 #navigation li a.about a,
#navigation li a.contact{width:102px; background-position: center right; } #page1 #navigation li a.contact a,

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
That CSS is STILL not valid CSS.

Can't you see the last 3 lines are not right?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Here - this is the minimum needed
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Wed, 09 Feb 2011 02:03:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
   body { background-color: #FFFFFF }

/* navigation */
#navigation {width: 102px; height:129; margin: 0 auto; }

ul#navigation { list-style: none; }
              ul#navigation li {display: block;} 
                     ul#navigation li a { 
                            text-indent: -9999px;
                            display: block;
                            width: 102px;
                            height: 129px;
                            align: left;
                            /*float: left; */
                            }
ul#navigation li a.home {
              width: 102px;
}
                            
ul#navigation li a.about {
              width: 102px;
              }
              
ul#navigation li a.contact {
              width: 102px;
              }
              
ul#navigation li a.home:hover, 
ul#navigation li a.about:hover, 
ul#navigation li a.contact:hover 
{
    background-position: center right;
   }           
 
    .normal { background: url("phoneicon.png") no-repeat scroll center left; }
    .clicked { background: url("phoneicon.png") no-repeat scroll center right;}
    </style>
    <title>button test 2</title>
	
<script type="text/javascript"><!--
var saveLink = null;	
function ReplaceContentInContainer(link,id,content) {
  var container = document.getElementById(id);
  container.innerHTML = content;
  if (saveLink) saveLink.className=saveLink.className.replace(/ clicked/," normal");
  link.className = link.className.replace(/ normal/," clicked");
  saveLink=link;
  link.blur(); // remove the border
  return false
}
//--></script>
</head>
<body id="page1">
<br /> 
<div 
   id="maincontent3" 
   style="margin-top: 20px; 
          padding:10px; 
          text-align:left">
	Original text for main content 3
</div>
<ul id=navigation>
	<li><a class="home normal" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 1')" title"home"></a></li>
	<li><a class="about normal" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 2')" title"about"></a></li>
	<li><a class="contact normal" href="#" onCLick="return ReplaceContentInContainer(this,'maincontent3','Thanks for icon 3')" title"contact"></a></li>
	<!-- end of ul id=navigation --></ul>
  </body>
</html>

Open in new window

0
 

Author Comment

by:johnm07
Comment Utility
You got it!  

When I set out to create this "active/ current" button option I honestly didn't think it would be as difficult as it has proven to be. I'm just beginning to work in JavaScript and CSS so I don't see the coding mistakes which are blatantly obvious to the experienced.  I will research the code you have provided to gain a clear understating of how your code produces this end result.  

You time, effort and expertise is very much appreciated!

-John
0
 

Author Closing Comment

by:johnm07
Comment Utility
Great patience in help me, I'm new to JavaScript and CSS development.

Stuck with it to see the task through to completion.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
You are welcome. What you tried to do was not THAT hard in principle, I just tried to touch your css as little as possible. When I decided to abandon some of the css and simplify it, my life and the code became easier
0
 

Author Comment

by:johnm07
Comment Utility
Well, thanks again. I do have a followup question if you dont mind.

Can the "new content" used to replace the text in the maincontent div be pulled from another source such as a <P> or <div>? I ask because currently the new content which resides within a portion of javascript is limited by the javascript rules. In other words text beyond a simple sentance does not work well in this configuration.

Thanks
-John    
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Sure. Jusdt hide and shiw divs instead of changing innerhtml. Ill show you later
0
 

Author Comment

by:johnm07
Comment Utility
Great, again very much appreciated!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
No problem. Did not get a chance last night but will post something when I get to a pc in an hour or two
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Here
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Wed, 09 Feb 2011 02:03:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
   body { background-color: #FFFFFF }

/* navigation */
#navigation {width: 102px; height:129; margin: 0 auto; }

ul#navigation { list-style: none; }
              ul#navigation li {display: block;} 
                     ul#navigation li a { 
                            text-indent: -9999px;
                            display: block;
                            width: 102px;
                            height: 129px;
                            align: left;
                            /*float: left; */
                            }
ul#navigation li a.home {
              width: 102px;
}
                            
ul#navigation li a.about {
              width: 102px;
              }
              
ul#navigation li a.contact {
              width: 102px;
              }
              
ul#navigation li a.home:hover, 
ul#navigation li a.about:hover, 
ul#navigation li a.contact:hover 
{
    background-position: center right;
   }           
 
.normal { background: url("phoneicon.png") no-repeat scroll center left; }
.clicked { background: url("phoneicon.png") no-repeat scroll center right;}

.content {
  margin-top: 20px; 
  padding:10px; 
  text-align:left
}    
</style>
    <title>button test 2</title>
	
<script type="text/javascript"><!--
var saveLink = null;
var saveContainer = null;	
function ReplaceContentInContainer(link) {
  var container = document.getElementById(link.id.split('_')[0]); // passing the id, split on _link
  if (saveLink) saveLink.className=saveLink.className.replace(/ clicked/," normal");
  if (saveContainer) saveContainer.style.display='none';  
  link.className = link.className.replace(/ normal/," clicked");
  container.style.display=''; // shows the container
  saveLink=link;
  saveContainer = container;
  link.blur(); // remove the border
  return false
}
//--></script>
</head>
<body id="page1">
<br /> 
<div class="content" id="container1">
	Original text for <b>Home</b>
</div>
<div class="content" id="container2" style="display:none">
	Original text for <b>about</b>
</div>
<div class="content" id="container3" style="display:none">
	Original text for <b>contact</b>
</div>
<ul id=navigation>
	<li><a class="home normal" href="#" onClick="return ReplaceContentInContainer(this)" title"home" id="container1_link"></a></li>
	<li><a class="about normal" href="#" onClick="return ReplaceContentInContainer(this)" title"about" id="container2_link"></a></li>
	<li><a class="contact normal" href="#" onClick="return ReplaceContentInContainer(this)" title"contact" id="container3_link"></a></li>
	<!-- end of ul id=navigation --></ul>
  </body>
</html>

Open in new window

0
 

Author Comment

by:johnm07
Comment Utility
I've been attempting to adjust mplungjan's last code post to fill my need but I'm not able figure out the necessary changes. In mplungjan's above post the script changes the data on multiple targeted div ids which is not my goal. You can see this in action in mplungjan's post in ID: 34909054. Notice all links target the single id="maincontent3  

Again, my need is to change a single targeted div id using multiple links and the links associated content.  

This question is a continuation of this thread but is there a way to add new points to apply to those who can assist.  
0
 

Author Comment

by:johnm07
Comment Utility
Resolved.

I was under the impression that when replacing the content in the primary div, the new content would actually replace the primary content and therefore inherent the primary div's styles from CSS.

I was wrong and found each div id I use to replace content in the primary div also needs to be entered into the CSS for proper formatting of the new content.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Or have one class for them all and use class="classname"
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now