Highlight current menu item whose page is displayed in an iFrame

Greetings,
Looking for the Holy Grail here...
So the parent page has static menu and an iframe which then loads in a specific pages as the user clicks on the menu items (which are ul li tags).
I would like to be able to highlight a menu item based on the page content being displayed in an iframe. It seems to be quite difficult to do for this style of page load using iframe method. I know it would be easier using php, but I can only use iframe (long story).
When page 1 is displayed in the iframe, I would like for the corresponding menu item to be highlighted.
I'm hoping the answer is out there somewhere as iframe has been around forever. If you would like to see my code, I'm happy to provide this.
Thanks!

Sure, here you go...
1. Add this code between your <head> tags:
<script type="text/javascript">
    function offclass(id)
    {document.getElementById(id).className = 'class_off';}
    function onclass(id)
    {document.getElementById(id).className = 'class_on';}
</script>
2. In your css, create your on and off styles (I used <a> you can use <li> the same way)...
a.class_on {
    color:blue;
a.class_off {
    color:red;
3. Add id's (individual to each link), classes (set to the off class you make) and onclick events (one to turn the link on and several to turn off the others) to your links...
<a id="link1" class="class_off" href="http://www.apple.com" target="mr_jones" onclick="onclass('link1'); offclass('link2'); offclass('link3');">Link 1</a>
<a id="link2" class="class_off" href="http://www.adobe.com" target="mr_jones" onclick="onclass('link2'); offclass('link1'); offclass('link3');">Link 2</a>
<a id="link3" class="class_off" href="http://www.foxnews.com" target="mr_jones" onclick="onclass('link3'); offclass('link1'); offclass('link2');">Link 3</a>
4. Give your iframe the name used for your target and a base "on page load source" (I used a # so it's blank on load)...
<iframe id="mr_jones" name="mr_jones" width="420" height="315" src="#" frameborder="0"></iframe>
That's it. As you increase the number of links, you just need to make sure you have an offclass for each new one added in to turn those off when you click.

Similar Messages

IBE: Items Per Page for Display profile at Responsibility level

Hi,
we would like to have different number of items per page for different sites. We thought we would achieve it by setting profile "IBE: Items Per Page for Display" at the responsibility level and have unique responsibilities to access different sites.
However, I saw that by default profile "IBE: Items Per Page for Display" is not visible at the responsibility level. Can I alter it to be visible at responsibility level in the profile definition and then set it at the responsibility level?
Kindly help.
Regards
Harsha.

I tried to change at SERV level and still the profile never gets updated. Kindly help.

Current menu item

Dear members,
(Forms 6i c/s)
Is there a way to get the name of the current menu item ?
I want to disable a menu item just after it was chosen (in a generic way), so the user can't call the same program twice.
Since each item calls the same procedure, I want to put a set_menu_item_property there, but I need the name of the item that is currently executing this procedure.
Thanks for your help.

We are currently looking at this enhancement request:
BUG:3199920
Regards
Grant Ronald
Forms Product Management

Why is there a separate menu item for "Page setup" when there is already a tab for it in the "Print..." menu?

I just can't see the point of having the same options in two places! The "Page Setup" tab from the "Print..." menu item has more options, relating to printer features, whereas the "Page Setup" dialogue box is basic and looks to me to be a little 'shoddy'. I'd have thought it would be a good idea to have the 'better' set of features available, but from it's own menu item, rather than a tab. And no duplicated controls!!

Firefox on Windows doesn't have Page Setup in the Print dialog, it is in the Print Preview window.
That isn't the only menu item that appears in multiple places. '''View Page Info''' is in the Tools menu (on Windows) and in the Contextual menu. '''Bookmark this Page''' is in the Bookmarks menu and the Contextual menu, along with the Tab Context menu.

MENU item selection does not display drop down in ITS enabled transaction

Hello,
We are experiencing a strange behavior between two portal env.
1. DEV.
For example we have transaction MM01 display in the Portal via ITS (integrated). The end user can select the Menu Tab and the System Tab and the drop downs appear as expected.
2. Prod
Same scenario as above. Only this time, end user is unable to select the button. The Menu and System Tab dont appear greyed out but selecting it does not display the drop down.
Material, Edit GoTo Defaults are some of the links under the Menu tab for MM01.
Very confusing. And this is the behavior in Prod for all transactions. Any ideas on why this is happening would be greatly appreciated.
The architectural difference is that DEV has no Web Dispatcher versus Prod has the Web Dispatcher.
We are on EP 7.0
Many thanks.
Regards,
Sunil

Thanks. Now, I realise this may cause dismay to some, but I have now solved the problem, and just wanted to share my experience with those even less savvy than myself. In Dreamweaver, the Spry css styles are arranged with little or no hint as to which style controls what. I found that there is a rule in the sub-menu styles that controls the little graphic arrows which indicate that there are dropdown subs under the tabs. I had removed these arrows to make way for my background images. However, the rules that control their positioning by percentage were still there, causing my images to display incorrectly. Of course, there was no way anyone could have spotted this and helped me as the fault was in the external spry css file, not the page code. So many thanks to vw2ureg for looking anyway. Regarding the page code, which you have flagged up, would you mind elaborating on what you see wrong here? I'm none the wiser. Many thanks again.

Keeping main menu widget highlighted when you have all pages below this open. Its only staying highlighted for the main page

I have a main menu widget that says 'Services' then below that a group of pages thats relate to this - I want the word 'Services' to stay highlighted when Im on each page but it only is for the main one.

This is the default behavior as the one which is active will only be highlighted. Menu item is linked with page url , so if the page url is used in browser then active state will highlight that menu item.
Thanks,
Sanjit

Page menu item link not fully responding

Can you have a look at my site at http://www.impossibleimports.com and tell me why some of the navigation isn't working correctly?
The main point for concern is when you have selected the Fren Tubo menu item, and then need to navigate elsewhere from that part of the site? It seems that only part of the menu items respond as you hover over them. I'm a bit stuck?!
Thanks.

Hummm? This is a challenge!
Your issue is duplicated when I visit your site.
Positioning the cursor just to the left of the errant links seems to work. ?? Strange!
I looked at the code in Dreamweaver Design view:
The only thing that seems strange is that they are out of order - CSS should cure that..
Then I looked at it in Dreamweaver View In Browser mode:
Obviously it's a list only because I don't have the CSS code.
Then I did an HTML insert using Muse:
Almost same as above
The Source Code shows nearly the same:
What I would try:
In Muse Design mode I would remove ALL links and all anchor tags.
Then I would highlight the menu items again - being VERY sure I have all the text of each item [but ONLY the text] highlighted then re-link.
I would do ONE item at a time -testing each as I go.
The only other thought I have is to try repositioning the anchors a little bit.

Restrict Number of Display Items Per Page

Dear all,
Can you guys please kindly advise me on how to restrict the number of items(eg. 10 items per page) being display in a JSP page, and leave the remaining items that is not being display to other pages, maybe page 2 or page 3 depending on the number of items from the search result?
Thanks alot.
Warmest regards,
Keng Yiam

Word of advice ... don't post your messages multiple times because noone will answer you.
roughly;
number of results / 10 = number of pages to view all results
then loop 10 times over the result set. use the cursor of ResultSet

Page now displays incorrectly

I have inserted the Spry menu bar in my webpage and now it
seems that the page doesn't display as it should in IE7 (Firefox is
ok).
You can see from the
screenshot
that there is now an ugly black gap between 2 rows in my table (on
2 of the 3 columns only).
This is the CSS of my page stylesheet:
.textgallerymenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-variant: normal;
letter-spacing: normal;
text-align: left;
color: #BFCCFF;
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0033FF;
line-height: 100%;
font-weight: normal;
.textprofilo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #002BD9;
text-align: left;
height: 350px;
.texttecnica {
font-size: 9px;
line-height: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #002BD9;
font-variant: normal;
text-align: left;
.table {
row-height: 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
line-height: 22px;
color: #002BD9;
.pictable {
height: 350px;
.bgpic {
background-image: url(Images/Flowers01.jpg);
height: 350px;
.table a:link img {
filter: alpha(opacity=50)!important;
-khtml-opacity: 0.50;
-moz-opacity: 0.50;
-o-opacity: 0.50;
opacity: 0.50;
border: 1px solid #DFE1F2;
.table a:visited img {
filter: alpha(opacity=100)!important;
-khtml-opacity: 1.00;
-moz-opacity: 1.00;
-o-opacity: 1.00;
opacity: 1.00;
border: 1px solid #025692;
.table a:hover img {
filter: alpha(opacity=100) !important;
-khtml-opacity: 1.00;
-moz-opacity: 1.00;
-o-opacity: 1.00;
opacity: 1.00;
border: 1px solid #673F53;
.table a:active img {
filter: alpha(opacity=100) !important;
-khtml-opacity: 1.00;
-moz-opacity: 1.00;
-o-opacity: 1.00;
opacity: 1.00;
border: 1px solid #025692;
text-decoration: none;
.topsentence {
line-height: 20%;
vertical-align: text-bottom;
.firsttable {
border: 1px solid #0033ff;
height: 400px
.bottomtable {
table-height: 50px;
.bgpicpanorama {
background-image: url(Images/Landscape_01.jpg);
height: 350px
.bgpicBellydancer {
background-image: url(Images/BellyDancers_01.jpg);
height: 350px
.bgpicSmoke {
background-image: url(Images/Smoke_01.jpg);
height: 350px
.bgpicImage {
background-image: url(Images/Fruits-_01.jpg);
height: 350px
.bgpicLandscape {
background-image: url(Images/Panorama_01.jpg);
height: 350px
.bgpicDoor {
background-image: url(Images/Door-_01.jpg);
height: 350px
.bgpicTree {
background-image: url(Images/Villa-small_01.jpg);
height: 350px
.bgpicFireworks {
background-image: url(Images/Fireworks_01.jpg);
height: 350px
.bgpichand {
background-image: url(Images/gallery.jpg);
height: 350px
.bgpicAnimals {
background-image: url(Images/Swan.jpg);
height: 350px
.bgpicMusic {
background-image: url(Images/Music.jpg);
height: 350px
.bgpicTravel {
background-image: url(Images/Travel.jpg);
height: 350px
.bgpicPeople {
background-image: url(Images/People.jpg);
height: 350px
.bgpicLights {
background-image: url(Images/Light.jpg);
height: 350px
.previousnext {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 40px;
vertical-align: middle;
.rightframetable {
border: 1px none #0033ff;
height: 35px
#Flora td {
left: 150px;
top: 115px;
#flower {
margin-left: -100px;
position: absolute;
left: 257px;
width: 100px;
height: 100px;
top: 120px;
z-index: 1;
visibility: hidden;
And this is the style sheet for the menu bar:
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
background: transparent;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive{
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
/* overlapping of the submenu-flyout menu -
0% aligns it at exactly the same position as the parent;
101% positions the submenu/flyout it on the right edge of the
parent */
ul.MenuBarVertical ul {
margin: 0% 0 0 101%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 9em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible {
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li {
width: 9em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Parent menu container has borders on all sides */
ul.MenuBarVertical {
border: 0px solid #732121;
/* outside border on the flyouts */
ul.MenuBarVertical ul{
border: 0px solid #732121;
/* Styling for parent menu item */
ul.MenuBarVertical a {
display: block;
cursor: pointer;
background: transparent;
padding: 0.2em 0.75em;
color: #002BD9;
text-decoration: none;
border-bottom: 0px solid #EBEBEB;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus {
background: transparent;
color: #4066FF;
padding: 0.2em 0.75em;
/* Menu items that are open with submenus */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
{ background: transparent;
color: #4066FF;
CHANGING COLOR ON SUB MENUS - WE NEED TO CREATE DESCENDANT
SELECTORS AND
APPLY THE CLASS TO THE TOP LEVEL LI THAT TRIGGERS THE
SUBMENU/FLYOUT
#MenuBar1 .flyout a {
background: transparent;
padding: 0.2em 0.75em;
#MenuBar1 .flyout ul a {
background: transparent;
padding: 0.2em 0.75em;
#MenuBar1 .flyout a:hover {
background:#666666; /*background color set as the same as
the bg color on the main menu item */
padding: 0.2em 0.75em;
#MenuBar1 .flyout ul a:hover {/* color of the hover on the
submenu / flyout */
background: transparent;
padding: 0.2em 0.75em;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu
and are set to use a background image positioned on the far
left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu {
background-image:
url(file:///C|/Documents%20and%20Settings/Lisas/Local%20Settings/Temporary%20Internet%20F iles/Content.IE5/images/SpryMenuBarRightHover.gif);
/* used the same as the hover - so it was a white arrow */
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover
and are set to use a "hover" background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover {
background-image:
url(file:///C|/Documents%20and%20Settings/Lisas/Local%20Settings/Temporary%20Internet%20F iles/Content.IE5/images/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
padding: 0.2em 0.75em;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: transparent;
Does anybody know how I can fix this?
Thanking you in anticipation.
Lisa

Hello RDWilderman and mburwell,
It can get fixed by going to compatibility view settings and
REMOVING msn.com from the list.
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

Max Menu Items Reached in Step Type Palettes

Hi,
I am seeing a greyed out text in some of my step type palettes 'Max Menu Items Reached' which is probably derived from the Resource string SEQ_MAXIMUM_MENU_ITEMS_REACHED.
What defines the maximum number of menu items in the type palettes and can it be changed.
Regards
Ray Farmer

Ray,
The maximum number of menu items for TestStand 2.0.1 is set to be 256. This is pre-defined and cannot be changed. The message "'Max Menu Items Reached" should be displayed once you have inserted 256 menu items.
Hope that helps!
Shannon Rariden
Applications Engineer
National Instruments

Finding which menu item has been clicked

Does oracle forms have anyway of knowing which menu item has been clicked.
I have a security structure set up where menu items are made visible depending on their name, which in turn is based on the individual forms that a particular user can access.
I would like to write a generic method for all menu items where it uses the name of the clicked menu item to perform a query, the result could be used to open a new form.
So is there a build in or some 'secret source' which tells me the name or gives me the id of a clicked menu item?
Message was edited by:
gazbarber

Not entirely sure what you mean, are you sugesting i have a generic method with a switch statment and uses the input paramter to decide what to do?
It's not really what i'm after, rather I already have the name of the menu item in the database, the same table also contains the module filename that clicking the button should go to.
So the idea would be somthing like
declare
begin
select module name into new form from secutity table where menu item = :system.current menu item;
open_form(new form);
end;
:sysem.current menu item is the missing ingreadiant.
My menu has many items in the hundreds i think so even the generic switch staement would be pretty tedious and i want changes in the database to be felt system wide as they are else where in my system.
Thanks for you help and i hope this explains my question better.
Regards,
Gareth
Message was edited by:
gazbarber

Apple menu item link broken

I installed a new hd today on my G4 933 Quicksilver. I did not have my installation disks handy, having moved and they're packed away somewhere, so I used disk utility to initialize the hd then restored the image of the old hd to the new.
After remembering to change jumpers, set new hd as startup disk, unmount old disk and whatnot, the new drive appears to be working beautifully, except that the link from the Apple Menu to System Preferences is broken. Can someone tell me how to repair it without my installation disks? I know there's a simple unix command, but it's been a while since I've been under the hood and I can't some up with it.
Many thanks in advance,
Heather
Quicksilver G4 933 Mac OS X (10.3)

Hummm? This is a challenge!
Your issue is duplicated when I visit your site.
Positioning the cursor just to the left of the errant links seems to work. ?? Strange!
I looked at the code in Dreamweaver Design view:
The only thing that seems strange is that they are out of order - CSS should cure that..
Then I looked at it in Dreamweaver View In Browser mode:
Obviously it's a list only because I don't have the CSS code.
Then I did an HTML insert using Muse:
Almost same as above
The Source Code shows nearly the same:
What I would try:
In Muse Design mode I would remove ALL links and all anchor tags.
Then I would highlight the menu items again - being VERY sure I have all the text of each item [but ONLY the text] highlighted then re-link.
I would do ONE item at a time -testing each as I go.
The only other thought I have is to try repositioning the anchors a little bit.

Flash menu that highlights the selected item when changing page?

Hi all,
I'm trying to create a menu in flash that will highlight the
current
selected menu item when selecting a specific page.
Example menu:
- home
- products
- product 1
- product 2
- product 3
- contacts
- email
- form
Imagine you have a link in a page that opens the contact >
email page.
Is there a way to get the flash menu to highlight the
"contacts > email"
item when displaying this page?
Something similar to this
http://tinyurl.com/5c9993
Is there an application that can do this easily?
Thanks in advance for any idea.
Tony

here is a link to a rar file i just updated for ya.
it is a flash movie and 2 web pages. showing how u can send
variables to flash with java script.
http://www.wholesalegranitedist.com/home/tutorials/jsquery.rar
if you can't get this file let me know i will just post it
here.
you will have to change the menu depending on which variable
u send. to flash. it can change on which page you visit;). ask more
questions if you need to. or private message me.

How to make menu-item of current page appear in a different font color?

Hi,
My menu-bar works just fine. Hovering the links I get the text to take display the desired color. Now I want the menu-item of the selected page to show a third color.
With live-code enabled in Dreamweaver CS6, I can see the following code being generated by the Dynamic menu:
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><div id="cat_549633_divs"><ul id="nav_549633"><li class="selected"><a href="/home.html">Home</a></li><li><a href="/leistungen.html">Leistungen</a></li><li><a href="/uhrenservice.html">Uhrenservice</a></li><li><a href="/versteigerungen.html">Versteigerungen</a></li><li><a href="/diamanten.html">Diamanten</a></li><li><a href="/ueber_uns.html">Über uns</a></li><li><a href="/kontakt.html">Kontakt</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_549633');</script>
The class .selected is being created in the first list-item (home) as this is the current page.
And here is my CSS:
#nav_549633 {
          float: right;
          list-style-type: none;
          padding-top: 5px;
#nav_549633 li {
          float: left;
          text-align: left;
#nav_549633 li a {
          color:white;
          text-decoration: none;
          margin: 0 27px 0 0;
          font-size: 13px;
          text-transform: uppercase;
#nav_549633 li a:hover {
          color: yellow;
.selected {
          color: green;
The font color green does not appear. It is still white.
In order to see if the class is "working" I tried some other attributes, that DO work!
.selected {
color: green;
padding: 20px
background-color: blue;
In this case, the item appears as a blue box with 20px-padding, just as expected - but the font-color is still white.
Can anyone help me?
Regards,
Herman

Hi Mario,
Here's the link to my site:
http://grootaartseuronics.businesscatalyst.com/index.html
I have found a solution myself for 2 of the 3 questions i had:
I have deleted/changed this div: #nav_1371057 li li
And created a few new ones:
#nav_1371057 li li a, #nav_1371057 li li a:visited (To control the link en visited link colors in the sub-menu other than the root-menu)
#nav_1371057 li li a:hover (to control the hover in the sub-menu other than the root-menu if nessesary)
#nav_1371057 li li.selected a (to control the selected link and let the link change color or bolder like in my case)
Here are the CSS styles I used:
#nav_1371057 li li.selected a { /*Dit veranderd de dikte (bold) van de geselecteerde link in het submenu, dus de pagina waar je bent*/
font-weight:bolder;
#nav_1371057 li li a, #nav_1371057 li li a:visited{
background: #006;
color:#ffffff;
#nav_1371057 li li a:hover{
background: #999;
color:#ffffff;
Only thing i can't figure out is how I can change/control the color of the arrow which is black now. And i want to make it blue.
Thanks,
Frank

I just downloaded Firefox 4 and it does NOT look like it is supposed to look - My menu items are not in a single button, etc... as displayed in Step 2 of getting to know your browser on the welcome page for Mozilla Firefox 4. Can anyone help?

This webpage [http://example.com http://www.mozilla.com/en-US/firefox/central/ ]shows what Firefox 4 should look like. My Firefox 4 does not have the menu items grouped and I have no app tab. All in all, my Firefox 4 is not what it should be... does anyone know why this might be and how I should go about fixing it? thanks :)

To get the new UI you need to hide the menu bar. To do that in the View menu select Toolbars, then click on the "Menu Bar" entry.
If you need access to the menus you can press either Alt or F10 to temporarily display them.

Highlight current menu item whose page is displayed in an iFrame

Similar Messages

Maybe you are looking for