Solved

CSS tabs with iframe in coldfusion

Posted on 2011-02-13
14
596 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: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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ebay messages api 6 43
PHP Web Development 6 71
type of website 13 54
MSDeploy "The underlying connection was closed: The connection closed unexpectedly" 1 8
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 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