Navigation with rollovers

Hi,
I have the nice task to evalute the Portal of the 9iAS v2.
We have a nice web which should be ported to the Portal.
I have there a nice Navigation Bar with rollovers.
How can I build this navigation? I can use "Page Links" from the items to build a navigation with links.
But I want to use images.
My questions:
1. Are there any build in features to do images with links - rollovers with links
and if not - how can I do this.
2. when I use Page Links I can find the right page just by name - how can I do this when
I have to enter this manually?
thanks a lot,
michael

Here's the bad news - letting a graphics application write the HTML for a production site is not a viable method. The tables produced are completely rigid and will break unexpectedly as you build your page and add content (thereby changing the 'shape' of the original layout plan). Please read this to see why that's the case -
http://www.apptools.com/rants/spans.php
The spans are what create "gaps" unexpectedly as the table tries to maintain its shape. I believe the only way to fix this is to not use that FW HTML at all.

Similar Messages

HELLLPPP ! I have a table for navigation with rollovers that breaks apart in explorer 8

Its happy as can be in every other browser !
In explorer 8 there is also a gap above the table I cant get rid of.
The main problem iss the gaps around some of the buttons.
I think I am about to lose my freaking mind
www.thedamourmethod.com/test
www.thedamourmethod.com/test/interview.html (here I inserted a new table no roll overs / no form code still same problem )
@charset "UTF-8";
/* CSS Document */
body {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center;
    background-color: #bc7c32;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-image: url(index/bg_tile3.jpg);
    background-repeat: repeat-x;
.twoColFixRtHdr #container {
    width: 780px;
    text-align: left;
    background-repeat: no-repeat;
    background-image: url(faq/faq_bg);
    background-color: #cf974e;
    margin-top: 65px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    background-position: left bottom;
.twoColFixRtHdr #containerfaq {
    width: 780px;
    text-align: left;
    background-repeat: no-repeat;
    margin-top: 65px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    background-position: left bottom;
    background-color: #efd8b9;
    background-image: url(faq/lighter_bg_sm.jpg);
.twoColFixRtHdr #containerabout {
    width: 780px;
    text-align: left;
    background-repeat: no-repeat;
    margin-top: 65px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    background-position: left bottom;
    background-color: #efd8b9;
    background-image: url(how_it_works/how_it_works.jpg);
    overflow: hidden
.twoColFixRtHdr #containerinterview {
    width: 780px;
    text-align: left;
    background-repeat: no-repeat;
    margin-top: 65px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    background-position: left bottom;
    background-color: #efd8b9;
    overflow: hidden
.twoColFixRtHdr #containerhome {
    width: 780px;
    text-align: left;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-image: url(index/main_page_bg.jpg);
    background-color: #a86028;
    margin-top: 65px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 0px;
    overflow: hidden
.twoColFixRtHdr #header {
      /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    background-color: #a8814c;
.twoColFixRtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 220px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
.twoColFixRtHdr #sidebar1faq {
    float: right; /* since this element is floated, a width must be given */
    width: 220px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
.twoColFixRtHdr #mainContent {
    margin-top: 0;
    margin-right: 250px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 20px;
.twoColFixRtHdr #mainContentfaq {
    margin-top: 0;
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 20px;
.twoColFixRtHdr #mainContent_homepage {
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    background-image: none;
.main_pics {
    float: left;
.paypal {
    float: none;
    margin-bottom: 10px;
    text-align: center;
    padding: 0px;
    margin-right: 0px;
    margin-left: 100px;
    margin-top: 0px;
#interview {
    float: none;
    margin-bottom: 10px;
    padding-right: 0px;
    text-align: center;
    padding-top: 10px;
.order_now {
    float: none;
    background-color: #cc9452;
    margin-bottom: 10px;
.twoColFixRtHdr #footer {
    padding: 0 10px 0 20px;
.twoColFixRtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    text-align: left;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.twoColFixRtHdr #sidebar_home {
    float: right; /* since this element is floated, a width must be given */
    width: 250px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 15px;
    padding-left: 10px;
.twoColFixRtHdr #header2 {
    background-color: #a8814c;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;
.twoColFixRtHdr #footer_main {
    width: 780px;
    text-align: left;
h4 {
    color: #3D0331;
    font-size: 115%;
</style>[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif][if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]

Here's the bad news - letting a graphics application write the HTML for a production site is not a viable method. The tables produced are completely rigid and will break unexpectedly as you build your page and add content (thereby changing the 'shape' of the original layout plan). Please read this to see why that's the case -
http://www.apptools.com/rants/spans.php
The spans are what create "gaps" unexpectedly as the table tries to maintain its shape. I believe the only way to fix this is to not use that FW HTML at all.

Layers with rollovers

I am creating a organizational chart with rollovers that
contain a picture and contact information. When I rollover a
person's area on the chart, their info pops up in a rollover box.
But since it is a org chart, the people's names need to be close
together so I end up getting someone's area in front of a rollover.
If I select move to front for the other rollover, then someone
elses info gets blocked. Is there a way to keep the rollovers on
top of the document and have the chart always behind the rollovers
so no one gets their info blocked?

Don't use the show/hide at all. Use SetText of Layer to write
the required
content into a single layer.
Or - if you don't quite get that, just use PVII's AutoLayer
extension which
will show one and hide all the rest automatically.
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JesseLY" <[email protected]> wrote in
message
news:f61nbm$9sn$[email protected]..
> Creating a series of thumnails on a page which, when
clicked on, will
> bring up
> full size image in one spot and relevant text in
another. I'm using Show /
> Hide
> Layers to do this. I've got it all working fine except
stumbling on one
> thing.
> Probably obvious.
>
> The question I have is how to make the currently showing
layers go away
> when
> the user clicks on another thumbnail. If I was using
onMouseover and
> onMouseout
> then that would be simple. But I can't figure out how to
automatically
> make the
> layers currently showing go back to being hidden when
another thumbnail is
> clicked. What I get instead is the new layers appearing
on top of the old
> ones
> and making a mess.
>
> Probably an obvious solution, but my brain is not
getting it at the
> moment.
> Suggestions?
>
> Thanks...
>
> -Jesse
>
>
>

Best approach -Tabs based ADF Tree left side navigation with Dynamic Regions with out UI Shell

Hi,
Somebody can help for the best approach to implement the following requirement.
Req: When the user select the ADF Tree left side navigation menu, each menu will open as multiple tabs(Dynamic Tabs) in right side content area with out UI Shell Template.
I completed the
Step-1: From the Model project, I can able to render ADF Tree in the using view and view links. I can get the adf tree which is having 3 menu items. Each menu item having 2 sub menu's.
I took each menu item as one(1) taskflow, each taskflow will have two(2) fragments.
Total I have 3 task flows as Menu Items and 6 fragments for sub menu's.
Step-2: My question is How do I implement Tab based the ADF tree navigation (left side area to dynamic regions in content area) through dynamic regions? Please provide the steps in view layers.

Than ks for your response.
This is working fine for ADF Tree navigation with dynamic regions if the taskflow having only one fragment. if the taskflow having more than one fragments, this will not work. The following conditions are always satisfies one page fragment of either "employees" or "departments" task flow. If the "employees" task flow have 2 page fragments, it's not work even you pass parameters through routers.
public TaskFlowId getDynamicTaskFlowId() {
if (currentTaskFlowID == null ||
currentTaskFlowID.equalsIgnoreCase(“employees”)) {
return TaskFlowId.parse(employeetaskFlowId);
if (currentTaskFlowID != null &&
currentTaskFlowID.equalsIgnoreCase(“departments”)) {
return TaskFlowId.parse(departmetaskFlowId);
return TaskFlowId.parse(employeetaskFlowId);
My question is "Same use case with Dynamic Tabs" when the user click on any adf tree node.

Using Spry Vertical Navigation with Templates-Need to indicate current page

Using Spry Vertical Navigation with the Dreamweaver templates. Using editable attributes etc., the current page mennu item does not seem to be changing. How do you indicate the. current page.

Persistent Page Indicator on Site Wide CSS Menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

JTable's Cell navigation with TAB

Dear ALL
I have face one problem in JTable's cell navigation with TAB. The problem as describe bellow.
I have two columns NAME and ADDRESS. Set focus on ADDRESS column's first cell. now if i am press tab key then focus controll comes on second cell which is the ADDRESS column. At the end of row controll comes on first row second column that means focus on ADDRESS column's first cell.
Please give me some hints.
Thanks in advance.
Amit

Your description doesn't make any sense (to me at least) so I don't know what your problem is or what you are asking to be changed.
The normal tab order is Left to Right, Top to Bottom. So if the focus is at the top/left normal tabbing would be:
Row 0, Column 0 (name 0)
Row 0 Column 1 (address 0)
Row 1, Column0 (name 1)
Row 1, Column 1 (address 1)
Row 2, Column 0 (name 2)
Row 2, Column 1 (address 2)
Your question seems to imply that your tab from address to addreass, which doesn't make sense.
"Set focus on ADDRESS column's first cell. now if i am press tab key then focus controll comes on second cell which is the ADDRESS "

Any Security Problems with Navigation with Short URLs?

Hi ,
I want to use Navigation with Short URLs for my users to access the portal. But if the users give that Short URLs to other non-users , will the URL open?
I will give the role for the users only. Non-users will not have particular role.
Are these Navigation with Short URLs are safe to use?
Advise me.

Hi,
The iview have "EveryOne Role" and "Super Admin Role".
The portal will not allow any "anonymous" users, because it needs atleast "EveryOne Role" for the access.
Will this create any problem.
I think the "EveryOne Role" is there for the user, if the iview1 assigned for role1 but still in the permissions of iview1 have the "Everyonerole" , it is allowing user to access this right?
Then I need to remove the EveryOne Role from the permissions.
Regards
Kiran

Page navigation with SelectOneRadio

Is it possible to do page navigation with just selectOneRadio choice and without link or command button?
<h:form id="form1" styleClass="form">
               <h:selectOneRadio disabledClass="selectOneRadio_Disabled"
                    enabledClass="selectOneRadio_Enabled" id="radio1"
                    styleClass="selectOneRadio" layout="pageDirection"
                    value="#{Main.selectedValue}"
                    valueChangeListener="#{Main.handleRadio1ValueChange}"
                    immediate="true" onclick="submit()">
                    <f:selectItem itemValue="page1" itemLabel="page1" />
                    <f:selectItem itemValue="page2" itemLabel="page2" />
                    <f:selectItem itemValue="page3" itemLabel="page3" />
               </h:selectOneRadio>
               <br>
          </h:form>
     public String handleRadio1ValueChange(ValueChangeEvent valueChangedEvent) {
          String s = (String)valueChangedEvent.getNewValue().toString();
          return s;
And faces-config:
<navigation-rule>
          <from-view-id>/main.jsp</from-view-id>
          <navigation-case>
               <from-action>#{Main.handleRadio1ValueChange}</from-action>
               <from-outcome>page1</from-outcome>
               <to-view-id>/page1.jsp</to-view-id>
          </navigation-case>
     </navigation-rule>

I hope u figured out a solution for this post already. But, if not u can try this. It worked for me.
In the change listener method, add these few lines for redirecting the control to required page.
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
facesContext.responseComplete();
HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
try {
response.sendRedirect("abc.jspx");
} catch (Exception e) {
e.printStackTrace();
Regards, Hari.

Horizontal Navigation with Dropdown Menu

Hello!
I am trying to put together a site with Horizontal navigation with items in the dropdown. I built my plan with main pages and child pages, and added my horizontal navigation on the Master page, but when I go to preview, I don't see any of my dropdown (child) pages. Is there any way to fix this? (I've attached a screenshot, hopefully this will help clarify)......

Hello,
Please click on the tiny white Arrow in the blue circle which comes up at the top right of the Menu. And there change the Menu type from Top Level pages to All pages.
Note : Child pages on the same level in Plan view are listed vertically in a Horizontal Menu.
Regards,
Sachin

Cross Site collections navigation with publishing feature enabled into sharepoint 2010??

Hi,
Is it possible to cross site collection navigation in share point 2010 with publishing feature enabled? Right now we have a site collection with all the departmental sites within it. We are trying to create separate site collection with separate content
database for each department for better management. But problem with Global navigation as OOB does not provide cross site collection navigation functionality, So looking for multiple site collections or navigation for more than one site collection under single
umbrella. i was able to get the cross site collection navigation in my development env without publishing feature enabled using below link. But problem with production environment, as all the site collections and sites are publishing feature enabled. how i
am gonna do cross site navigation with publishing feature enabled?
http://www.itsolutionbraindumps.com/2011/10/sharepoint-2010-cross-site-collection.html
Any link or suggest will be greatly appreciated !

Hi,
According to your description, my understanding is that you want to create cross site collections navigation with publishing feature enabled in SharePoint 2010.
Publishing sites (sites with publishing infrastructure) have their own navigation API, and it is much more complicated task to preserve cross-publishing sites navigation.
We need to implement our own custom navigation provider.
Please refer to the link below about the cross site collections navigation with publishing feature enabled:
http://sadomovalex.blogspot.com/2010/12/cross-site-and-cross-site-collection.html
Best regards.
Thanks
Victoria Xia
TechNet Community Support

Error on page when navigating with in webdynpro applications

Hi All,
I have developed 5 different webdynpro applications. I need to navigate between these webdynpro applications. I am handling the navigation with in the webdynpro applications.
The problem is after some time ( after navigating to the second or third level) when I try to click on the tabs(top level navigation), the JAVA SCRIPT ERROR is coming.
And any other tabs are not coming.
ERROR is: 'Error on page'
ERROR Description is:'Problems with the web page might prevent it from being displayed properly or functioned properly'
Any suggestions are appreciated.
Thanks & Regards,
Seshu

Hi !,
Please can you tell me what to do if you DO NOT want to destroy the source application when navigating away from it?
For example... Webdynpro App #1 calls Webdynpro App #2,
Webdynpro App #1 will always stay visible and available to the user in there toolbar in the portal. However after I click "Go" to trigger the navigation to Webdynpro App #2, then the next time I hit "Go", Webdynpro Application was destroyed out of memory I believe.

Navigation Bar with Rollovers inside to extend all the way across x-axis

I have a dreamweaver cs4 question. I need to have a navigation bar, that lines up with a background image that DOES not move when scaling the webpages in and out. The images must have rollovers, is there a way to either insert a repeating x-axis image and placing text on top and adding a script element to make the text rollover links?
All I need is a navigation bar with rollover links in the middle that extends all the way to the sides of the page regardless of browers or screen size.
Currently I have a divtag with rollover images and a background image that has the same image as the divtag so it looks like the navbar goes all the way across, but when I zoom in and out the background image or the div tag moves just by 1 pixel making them not lined up. example here: its more evident in google chrome http://www.olympicvalleycapital.com/about.html.
Please help! this is killing me and I dont have much scripting experience so I am trying to do this using the UI elements.
Or is there a way to prevent the background image from resizing when zooming in and out, like a fixed or absolute dynamic to apply to the background?

If you quit using position absolute for a basic layout, you will be amply rewarded.
Going through many of the posts with a similar topic you will find out why.
Gramps

Templates with rollovers

I have rollovers in my nav, with the corresponding button
being in the highlighted position when you're on that page. Because
one button is going to be "highlighted" on each page, I don't see
how I can use a template for the navigation. Does anyone know if
this is possible???
Thanks!

Sure, it's possible, and it's easy to do with CSS or with
javascript.
With CSS you would have a little stylesheet embedded in the
head of each
page that allows you to set the down state for any given
button (each button
would have a unique id - for example -
<a href="foo.html" id="button1">...<a
href="bar.html" id="button2">
and then your stylesheet would have this -
a#button1 { styles }
on one page, and on another this -
a#button2 { styles }
See how that works?
With javascript, put this in script tags in the head of the
document -
function P7_downImage() {
var g7="<imagename>"
// replace <imagename> with the HTML name
var g7url="<pathname>"
// replace <pathname> with the path and filename to the
image
if ((g7=MM_findObj(g7))!=null) {g7.src=g7url;}
and this on the <body> tag
onload="P7_downImage()"
Then on each page you would need to make two edits:
Set g7 to the *name* of the button (not the file name but the
HTML name -
e.g., "productsbutt"), and g7url to the pathname to the
button (e.g.,
"images/nav/button3.gif"), and bada bing, bada boom!
There is an excellent tutorial here -
http://www.projectseven.com/support/answers.asp?id=126
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jmldesign" <[email protected]> wrote in
message
news:ef1g46$eq5$[email protected]..
>I have rollovers in my nav, with the corresponding button
being in the
> highlighted position when you're on that page. Because
one button is going
> to
> be "highlighted" on each page, I don't see how I can use
a template for
> the
> navigation. Does anyone know if this is possible???
>
> Thanks!
>

PDF Portfolio Navigator with horizontal tab layout

Hello, Experts
         I am trying to create a PDF Portfolios with horizontal tab layout structure;
         several .NET libraries allowed me to create PDF files with thumbnail layout, but, in order to populate a horizontal tab
         layout, it seems, I would need to create a custom PDF navigator and import it into PDF Portfolio prior to inserting PDF file components ?
        preinstalled navigators look great, but I just need a simple horizontal tab view, where each tab only contains file's name and nothing else;
         buy clicking on each tab - corresponding file would be activated in the viewer
       is there any library of predesigned navigators that I can use ?
        is there any way to extract navigator from one and import it into another PDF portfolio ?
       would I need to use Flash or can this be done via .NET ?
Best Regards,
-Alex

tried to install Portfolio SDK
can't see the Navigator project wizard in Flex Builder ( 4.6 )
The plugins have been extracted to:
C:\Program Files\Adobe\Adobe Flash Builder 4.6\eclipse\plugins
The NavigatorSupport folder has been extracted to:
C:\Program Files\Adobe\Adobe Flash Builder 4.6\eclipse and ( just in case ) to
C:\Program Files\Adobe\Adobe Flash Builder 4.6\

Creating arrow navigation with a photo gallery

I am in the process of creating my own phtoography website. I created all the pages in Photoshop, sliced them and am now using dreamweaver to add interactivity.
The class I took showed us how to make remote rollover images with small thumbnails that you can rollover that make the large version of the image appear on the same page.
I have decided not to do that but instead use arrows and the number of the photo in the series as the navigation.
Now that I am actually creating the page in DW I am realizing I don't really know how to do what I want...and can't figure out how to word a question to google an answer.
This is a photo of part of my page...
I want the user to be able to hit the arrow on the left or right and cycle through the images.
Hit the left arrow and it goes to image 9/10 [image 9 of 10 images in the series], also the numbers in the center would change.
Hit the right arrow and it goes back to image 1/10.
I am hoping this is possible. Any help or links to tutorials on this would be GREATLY appreciated!
Thanks.

Welcome Alex -
Any picture you display on your site can be saved to the visitor's computer.
If you ZIP each gallery, a simple link to the zipped archive will offer the visitor
an option to save to their computer.

Navigation with rollovers

Similar Messages

Maybe you are looking for