Solved

CSS tabs with iframe in coldfusion

Posted on 2011-02-13
14
594 Views
Last Modified: 2012-06-21
I have an iframe on a page for which the code is below.  The CSS indicates that the selected <li> should change its style and become a different color, etc.  I need to figure out how to make the selected link the id="selected" style.

Any help is appreciated.
<div id="header">
<ul>
	<li id="selected"><a href="news.cfm" target="tabIframe1">Bulletin</a></li>
	<li><a href="contactus.cfm" target="tabIframe1">Photos</a></li>
	<li><a href="calendar.cfm" target="tabIframe1">Other</a></li>
</ul>
</div>

  <div id="content">
    <iframe class="tabContent" name="tabIframe1" src="news.cfm" marginheight="0" marginwidth="0" frameborder="0" height="240px"></iframe>
  </div>

Open in new window

0
Comment
Question by:Eduski
  • 7
  • 5
  • 2
14 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34885487
i guess it is just saying that if you have to give it a different color to show that this is selected amongst other options

check this
http://www.webdesignforums.net/threads/rollover-menu-in-css-how-to-define-selected-state.14421/
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34888292
> I need to figure out how to make the selected link the id="selected" style.

Are you asking how to make the link <a> tag use the same style as the "selected" style?


<li id="selected"><a href="news.cfm" target="tabIframe1">Bulletin</a></li>

If so, there are a couple different ways.

First in the CSS definition, you can add "a" to the style..

<style>
#selected { color:red }
</style>


becomes..

<style>
#selected, #selected a { color:red }
</style>

That may be the easiest way.  You can also give it a different style using this..

<style>
#selected {background-color:blue}  --- style of the tab
#selected a { color:red; font-weight:bold; } --- style of the link
</style>
0
 
LVL 3

Author Comment

by:Eduski
ID: 34893022
thanks for that, but I want when someone clicks on the other link, for that link to have the id="selected" attributes -- any way to do that?
0
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.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 34893375
i have suggested you a link in my first reply just for that requirement only.
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34893576
>  but I want when someone clicks on the other link, for that link to have the id="selected" attributes -- any way to do that?

Oh, that's different.

You don't want to use the style of an ID, an ID must be unique to an object to to move the style by ID means moving the ID which you can't do.

So first, you want to create a style by class.   In the example below, two classes are used "active" and "normal"

.active {color:red}
.normal {color:black}

You can make the styles whatever you want of course.

Then give each <div> (tab) a unique ID, in this case Tab1, 2 and 3

When someone clicks the link, take the "active" class name away from the active div and put it on the style to become active.

Using this:  tabObj.className='active';

The variable:  var activeTab = 'Tab1';   remembers the active tab it can be changed back to normal when removed.


var activeTab = 'Tab1';
function closeTab(instance) {
  var tabObj = document.getElementById(activeTab);
  if (tabObj) {
      tabObj.className='normal';
      activeTab = '';
     }
  return true;
}

function changeTab(tabName) {
  var tabObj = document.getElementById(tabName);
  if (!tabObj) { return false; }
  closeTab();
  tabObj.className='active';
  activeTab=tabName; /* remember tab name of newly active tab */
  return true;
}

<div id="header">
  <ul>
	<li id="Tab1"><a href="news.cfm"      onClick="changeTab('Tab1');" target="tabIframe1">Bulletin</a></li>
	<li id="Tab2"><a href="contactus.cfm" onClick="changeTab('Tab2');" target="tabIframe1">Photos</a></li>
	<li id="Tab3"><a href="calendar.cfm"  onClick="changeTab('Tab3');" target="tabIframe1">Other</a></li>
  </ul>
</div>

Open in new window

0
 
LVL 3

Author Comment

by:Eduski
ID: 34893808
Thanks, I know i'm close but its still not working, the css and code are below.

#header a {
      text-decoration: none;
      display: block;
      width: 100px;
      padding: 0 0em;
      font-weight: bold;
      color: black;
      border-bottom: 0.5em solid #000;
}

#header a:hover {
      color: #333;
      border-color: #333;
}

#header a.selected {
      color: #a41f4a;
      border-color: #a41f4a;
}
<script type="text/javascript">
var activeTab = 'Tab1';
function closeTab(instance) {
  var tabObj = document.getElementById(activeTab);
  if (tabObj) {
      tabObj.className='';
      activeTab = '';
     }
  return true;
}

function changeTab(tabName) {
  var tabObj = document.getElementById(tabName);
  if (!tabObj) { return false; }
  closeTab();
  tabObj.className='selected';
  activeTab=tabName; /* remember tab name of newly active tab */
  return true;
}
</script>

<div id="header">
<ul>
	<li id="Tab1"><a href="news.cfm" target="tabIframe1">Bulletin</a></li>
	<li id="Tab2"><a href="contactus.cfm" target="tabIframe1">Photos</a></li>
	<li id="Tab3"><a href="calendar.cfm" target="tabIframe1">Other</a></li>
</ul>
</div>

  <div id="content">
    <iframe class="tabContent" name="tabIframe1" src="news.cfm" marginheight="0" marginwidth="0" frameborder="0" height="240px"></iframe>
  </div>

Open in new window

0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34893834
> but it's still not working

what isn't working?

- the style "selected" does not appear on tab 1 when the page first loads
- clicking a link does not change the color
- the color changes on the tab, but the old tab remains
- I get a js error when clicking a link
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34893838
lol, you never call changeTab()

 :)
0
 
LVL 3

Author Comment

by:Eduski
ID: 34893839
- the style "selected" does not appear on tab 1 when the page first loads
- clicking a link does not change the color

sorry...
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34893843
and to activate tab1 on first page, you have to give it the class style

<li id="Tab1"><a href="news.cfm" class="selected" target="tabIframe1">Bulletin</a></li>

0
 
LVL 3

Author Comment

by:Eduski
ID: 34893849
ok those things are fixed... now it wont change the color of the tab when i click it (sorry for the bonehead mistake)

<script type="text/javascript">
var activeTab = 'Tab1';
function closeTab(instance) {
  var tabObj = document.getElementById(activeTab);
  if (tabObj) {
      tabObj.className='';
      activeTab = '';
     }
  return true;
}

function changeTab(tabName) {
  var tabObj = document.getElementById(tabName);
  if (!tabObj) { return false; }
  closeTab();
  tabObj.className='selected';
  activeTab=tabName; /* remember tab name of newly active tab */
  return true;
}
</script>

<div id="header">
<ul>
      <li id="Tab1"><a href="news.cfm" onClick="changeTab('Tab1');" target="tabIframe1" class="selected">Bulletin</a></li>
      <li id="Tab2"><a href="contactus.cfm" onClick="changeTab('Tab2');" target="tabIframe1">Photos</a></li>
      <li id="Tab3"><a href="calendar.cfm" onClick="changeTab('Tab3');" target="tabIframe1">Other</a></li>
</ul>
</div>

  <div id="content">
    <iframe class="tabContent" name="tabIframe1" src="news.cfm" marginheight="0" marginwidth="0" frameborder="0" height="240px"></iframe>
  </div>
0
 
LVL 39

Accepted Solution

by:
gdemaria earned 500 total points
ID: 34893861
I had assumed that your "selected" style would be on the <li>, this definition is putting it onto the anchor (link) instead

#header a.selected {
      color: #a41f4a;
      border-color: #a41f4a;
}

can you change it to ..

#header .selected a {
      color: #a41f4a;
      border-color: #a41f4a;
}


<li id="Tab1" class="selected">


If you don't want to do that, then you need to move the ID="Tab1" from the <li> to the <a>

make sense?
0
 
LVL 3

Author Closing Comment

by:Eduski
ID: 34893873
you have been exceedingly patient, thank you!
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34893891

awesome, glad its working!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

828 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