?
Solved

CSS tabs with iframe in coldfusion

Posted on 2011-02-13
14
Medium Priority
?
608 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
[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
  • 7
  • 5
  • 2
14 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

718 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