Solved

setting image for current link state

Posted on 2011-02-10
30
1,009 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
ID: 34868401
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
ID: 34871974
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
ID: 34876105
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

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

Expert Comment

by:Michel Plungjan
ID: 34877048
I'll take a look later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34877253
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
ID: 34884558
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
ID: 34885627
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
ID: 34885634
Anyway a change of class name onclick should be better I'll look again later
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34885967
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
ID: 34891135
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
ID: 34891208
I resolved the Firefox layout display problem so thats now a non issue.
0
 

Author Comment

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

Expert Comment

by:Michel Plungjan
ID: 34903802
Please post the latest css
0
 

Author Comment

by:johnm07
ID: 34908903
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
ID: 34908961
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
ID: 34909054
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
ID: 34911672
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
ID: 34911726
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
ID: 34913564
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
ID: 34919268
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
ID: 34919413
Sure. Jusdt hide and shiw divs instead of changing innerhtml. Ill show you later
0
 

Author Comment

by:johnm07
ID: 34920490
Great, again very much appreciated!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34923445
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
ID: 34923793
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
ID: 35031567
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
ID: 35032928
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
ID: 35033801
Or have one class for them all and use class="classname"
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

808 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