Solved

CSS tabs with iframe in coldfusion

Posted on 2011-02-13
14
591 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
This video teaches users how to migrate an existing Wordpress website to a new domain.

757 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

20 Experts available now in Live!

Get 1:1 Help Now