Solved

CSS tabs with iframe in coldfusion

Posted on 2011-02-13
14
593 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
DevOps Toolchain Recommendations

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

 
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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Where can I find... 1 34
show form submit button based on jquery sum 5 31
Change Background Color of Website 5 19
Add shadow behind div 5 14
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

831 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