Current page indicator w/ DWCS5 templates and Spry

Tried making an id of durrent state, added the rule to spry.css, and did the editable atrribute for the nav. Put in current, and nothing happened on the page I wanted the current ling highlighted.
Also saw info. about the sprydomutilities, but I need more info on that if that.
Tried defining a body and link class for each menu item. Grouped all of them on stylesheet. Again, did the editable atrribute feature, nad still nothing.

Have a look here http://forums.adobe.com/thread/837560?tstart=0
Gramps

Similar Messages

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
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

How to embed a HTML Page in a Web Template and display it

Hi All
Can you please share ideas how I can embed a HTML page in a web template and how I can make it displayed as a popup when a button is pressed.
Also, how do I call a HTML page stored in Portal KM from the press of a button in the web template.
Your help is greatly appreciated.
Thanks
Karen

Using C# or javascript to authenticate the user to AD to read the property directly will be very difficult. Creating a custom user profile property and adding a sync from AD to that property is definitely the easiest way to do what you are describing.
Once its in User Profiles there are lots of samples on how to add it to the page.
Paul Stork SharePoint Server MVP
Principal Architect: Blue Chip Consulting Group
Blog: http://dontpapanic.com/blog
Twitter: Follow @pstork
Please remember to mark your question as "answered" if this solves your problem.

Highlight "current" page in CSS Dreamweaver TEMPLATE

I have created 2 navigation bars (in my header) using an unordered list styled with CSS in a Dreamweaver Template that I created. Here is that template (in the template- the "Beads" link is styled as the current page): http://www.bfranklincrafts.com/Templates/MainTemplateM.dwt
I don't want the navbars to be editable in the pages that will be created from this template, so I was NOT planning on putting the navbars in editable regions. But now I'm realizing that if I don't put the navbars in editable regions, I won't be able to go in each link in my navbars to put the "current" style for each page.
The idea of the template is wonderful because it allows us to create one template and from that template we can make changes that would be past down to all the pages that were created using this template. But if I have to put the navbars in editable regions, it means that if I have to make changes to the navbars, I'll have to go to each individual page to make those changes.
I really want to show the "current" page that visitors are on, can anyone help!!!
Liolee

Hi,
sorry to bring up an old post but I am having issues with this myself and hope you can help?
I have coded my site as per your example but still no luck.
It is an .asp site. and my menu looks like this:
<ul id="nav">
    <li><a id="home" href="http://www.ampso.co.uk/index.asp"><img src="/images/nav1_gray.jpg" width="84" data-srcover="/images/nav1_full.jpg"></a></li>
    <li><a id="tech" href="http://www.ampso.co.uk/page/88/Technical.asp#.USOIoqWduS0"><img src="/images/nav4_gray.jpg" width="102" data-srcover="/images/nav4_full.jpg" class="wrap_right"></a></li>
    <li><a id="construction" href="http://www.ampso.co.uk/page/89/Construction.asp#.USOQLqWduS0"><img src="/images/nav5_gray.jpg" width="170" data-srcover="/images/nav5_full.jpg" class="wrap_right"></a></li>
    <li><a id="medical" href="http://www.ampso.co.uk/page/87/Medical.asp#.USOUeaWduS0"><img src="/images/nav3_gray.jpg" width="88" data-srcover="/images/nav3_full.jpg" class="wrap_right"></a></li>
    <li><a id="media" href="http://www.ampso.co.uk/page/90/Media.asp#.USOWQKWduS0"><img src="/images/nav6_gray.jpg" width="88" data-srcover="/images/nav6_full.jpg" class="wrap_right"></a></li>
    <li><a id="logistics" href="http://www.ampso.co.uk/page/91/Logistics.asp#.USOXdqWduS0"><img src="/images/nav7_gray.jpg" width="100" data-srcover="/images/nav7_full.jpg" class="wrap_right"></a></li>
    <li><a id="allsectors" href="http://www.paycoservices.co.uk/page/86/All-Sectors.htm"><img src="/images/nav2_gray.jpg" width="120" data-srcover="/images/nav2_full.jpg" class="wrap_right"></li>
    <li><a id="contact" href="http://www.ampso.co.uk/page/205/Welcome-to-Payco.asp#.USObtaWduS0"><img src="/images/nav9_gray.jpg" width="120" data-srcover="/images/nav9_full.jpg" class="wrap_right"></a></li>
</ul>
Now the issue arises with adding the code to the pages themselves. For example, if I go to the 'tech' page. I have no editable regions like I would with a html template (even though my main menu is in a top menu template which applies to each page) so I'm not sure exactly where to put the css code.
Currently the top section of my 'tech' page looks like this:
<%
Bodystyle = "style='background:url(/images/bg-further-technical.jpg) center 0px no-repeat;'"
%>

<div id="further-banner" style="background:url(/images/technical-icon.png) 811px 9px no-repeat; ">
<h1>Payco Technical <span>It's your industry so why not do it your way?</span></h1>
<p><b>You are here:</b>
<a href="/index.asp">Home</a> /
<a href='Payco-Technical.asp'>Payco Technical</a> /
</p>
</div>
Now do I paste the css code into here? Or would it help if you saw my whole 'tech' page so you can see the rest?
Any help would be greatly appreciated.
Thanks

Templates and Spry pathname problem

I have created a template that uses a Spry menu bar. Among
the code it inserts is the following:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
That is, it addresses the folder SpryAssets in the site root.
However, few of instances of the template are in the site root, but
in subdirectories of it. So browsers don't find the files. I need
to insert symlinks SpryAssets -> ../SpryAssets all over my site.
Could this be fixed please?

Just make your image links all root relative, e.g.,
{imgDown:"/SpryAssets/SpryMenuBarDownHover.gif",
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"LP15" <[email protected]> wrote in message
news:flincf$7mq$[email protected]..
>I have created a template that uses a Spry menu bar.
Among the code it
>inserts
> is the following:
>
> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
> {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
> imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
>
> That is, it addresses the folder SpryAssets in the site
root. However, few
> of
> instances of the template are in the site root, but in
subdirectories of
> it. So
> browsers don't find the files. I need to insert symlinks
SpryAssets ->
> ../SpryAssets all over my site. Could this be fixed
please?
>

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Navigation item in page template makes postback reload current page first

Hi,
in Jdeveloper 11g we have a page template for our app, which includes navigation items.
Looking at server log it seems that when a navigationItem is clicked, the current page loads first, is processed and only then redirects to the target page. The problem of course is performance impact, I guess this takes a page to load almost twice as slow as it needs to.
Is there any way to change the behavior so that navigationItem immediately redirects to the target page?
Regards
Jernej

Hi,
The Lifecycle will always process the current page, that's part of the JSF specification. I suggest you do some reading on JSF http://jcp.org/aboutJava/communityprocess/final/jsr252/index.html. There's two ways to reduce the amount of nodes evaluated by the Lifecycle implementation though, make your navigationItem partialSubmit="true" and/or immediate="true".
Regards,
~ Simon

Disabling the current page link?

I have a nav bar. I want the current link (whatever page you
are on) to be disabled and to be "pushed in" (my active link
color). Is there anyway to do this with ONE css page or template? I
could manually change each page but I would have to edit all the
pages if I change it again.

> THat didn't bother me, but it
> wouldn't let me change it in other pages.
Are you using MODIFY | Template Properties to change it?
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
==================
"firmana" <[email protected]> wrote in
message
news:egnvsd$j8e$[email protected]..
>
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
>
> Read #7 and see what the guy says. I tried making the
body tag editable
> (by
> Modify --> Templates --> make attribute ediatble),
but it makes me insert
> a new
> tag inside. WHen I tried it with the ID tag, it came out
with
> id="(@@Template@@)" or something like that. THat didn't
bother me, but it
> wouldn't let me change it in other pages.
>

How do I programmatically reference the current page in 902?

Hello,
How do I programmatically reference the current page in 902?
The Portal Smart Text option for Current Page is not flexible enough, and I wish to create my own custom greeting using PL/SQL.
Cheers,
John

hi,
If you are developing a PLSQL Portlet, then you do have a way for getting the page URL.
The page URL can be obtained from the record, portlet_runtime_record. There is a filed page_urlavailable with portlet_runtime_record.
The portlet_runtime_record is passed as a argument to the show_portlet procedure.
--Sriram

Dreamweaver templates and video aaargh.

I've designed a general template for my website and put in a
general editable region for the content. I've created pages based
on this template and find I can add text or images to the content
area but not video. It says it has to edit the main template code
and won't go any further.
So, I noticed that it's trying to put a bit of script
checking for the flash player version into the page, so I copied
and pasted this bit of script into the template and tried just
pasting the relevant code to load the video flv in my actual page
but it doesn't play anything. All a bit tedious and long winded. I
thought the idea of templates was to enable a single point of
defining page layout and that one could creating pages based on
this with anything you wanted in, but they seem a bit limited. Is
this true? Am I wasting my time or can someone point me in the
right direction?.
cheers

Here's the problem. When you enable that check for Flash
version, DW tries
to write it into the body tag of the child page. That is
impossible since
you cannot write into the body tag of a Template child page.
The simple
solution is to NOT check for Flash version. That will work.
If you MUST check for Flash version, then you would need to
make a dummy,
non-Template controlled page, insert your Flash there. Copy
the code placed
between <body> and </body> into the editable
region of your child page, and
copy the call to the Flash check into a new editable region
that you place
immediately above the </body> tag in the Template page
(and allow to
propagate to all child pages. You would then place this call
in script tags
into that editable region.
But first, tell us which DW you are using, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"little liz" <[email protected]> wrote in
message
news:[email protected]...
>
>
> I've designed a general template for my website and put
in a general
> editable
> region for the content. I've created pages based on this
template and find
> I
> can add text or images to the content area but not
video. It says it has
> to
> edit the main template code and won't go any further.
>
> So, I noticed that it's trying to put a bit of script
checking for the
> flash
> player version into the page, so I copied and pasted
this bit of script
> into
> the template and tried just pasting the relevant code to
load the video
> flv in
> my actual page but it doesn't play anything. All a bit
tedious and long
> winded.
> I thought the idea of templates was to enable a single
point of defining
> page
> layout and that one could creating pages based on this
with anything you
> wanted
> in, but they seem a bit limited. Is this true? Am I
wasting my time or
> can
> someone point me in the right direction?.
>
> cheers
>
>
>

Current Time Indicator Question

There is a grey area following behind the current time indicator everywhere it goes, and animation presets will move along, how do I change this problem

What is the problem? The grey area around the current-time indicator merely indicates the shutter angle and shutter phase of motion blur:
After Effects Help | Assorted animation tools

Working with Templates and Automatic Code Changes

I am working in DW CS6.
I am creating a new page based on a template and when DW creates the new page, it is automatically changing the paths to the links to .css and .js files. These changes are breaking the template. Is there a way to keep the auto-changes from occurring?
BTW - All the pages were created with a different template and I was able to modify the pages and apply this template to those pages without a problem. All is beautiful.
Original Code in the Template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Information Technology (IT): (DADS)</title>

<link href="../assets/coo.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../assets/sform.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="../assets/jquery-1-fontresizer.js"></script>
<script src="../assets/jquery-fontresizer.js" type="text/javascript"></script>
<script type="text/javascript" src="../p7epm/p7EPMscripts.js"></script>
<link href="../p7tmm/p7TMM02.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../p7tmm/p7TMMscripts.js"></script>
<link href="../p7epm/epm52/p7EPM52p2.css" rel="stylesheet" type="text/css" media="all" />
Code once I create a page using the template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Information Technology (IT): (DADS)</title>

<link href="file://ausimo225/devDADSView/coo/ITnew/assets/coo.css" rel="stylesheet" type="text/css" media="screen" />
<link href="file://ausimo225/devDADSView/coo/ITnew/assets/sform.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="file://ausimo225/devDADSView/coo/ITnew/assets/jquery-1-fontresizer.js"></script>
<script src="file://ausimo225/devDADSView/coo/ITnew/assets/jquery-fontresizer.js" type="text/javascript"></script>
<script type="text/javascript" src="file://ausimo225/devDADSView/coo/ITnew/p7epm/p7EPMscripts.js"></script>
<link href="file://ausimo225/devDADSView/coo/ITnew/p7tmm/p7TMM02.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="file://ausimo225/devDADSView/coo/ITnew/p7tmm/p7TMMscripts.js"></script>
<link href="file://ausimo225/devDADSView/coo/ITnew/p7epm/epm52/p7EPM52p2.css" rel="stylesheet" type="text/css" media="all" />

Always set site links to "Document" unless you NEED "Site Root". If you don't know whether you need them, then you don't need them. When you understand that you need them and why you need them, then you can use "Site Root"!
Good advice.
N

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

Spry menu bar lost current page code

I sure can use your help.
On this site http://www.evtn.com/ I created a drop down menu that originally had the
current-linked page in a blue background like the one that is now permanently
sitting on the HOME page link. But it stopped working.
I want this to work:
ul.MenuBarHorizontal a.current {
    color: #F4F4F4;
    background-color: #8FC8D1;
Do you know how I can straighten this out without starting all over again?
I would also like to have a visited-link-page coded in a separate color if possible as well and don't know how to code it with the java script and spry.css (horizontalmenubar.css)
I'll send more code of html and spry - whatever you need.
I've read older posts on this and tried different things but nothing has changed.
ul.MenuBarHorizontal a:hover works so I don't know why the content won't
Thank you!

Add the following to each page, or to your template
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"current");
Spry.Utils.addLoadListener(InitPage);
</script>
making sure that you do have SpryDOMUtils.js in the SpryAssets folder.
Because the above place a class of current in the list item, you will need to change the selctor to and add
ul.MenuBarHorizontal li.current a {
    color: #F4F4F4;
    background-color: #8FC8D1;
Gramps

How do I show what menu title is active, e.g. current page, in spry navigation?

How do I show what menu title is active, e.g. current page, in spry navigation?
See website http://dorsay-easton-indian-law.com/index.html
I want to have Home menu title have a different color when on index.html and so on. I keep using the term "active" for that, and "hover" for mouseover. Is that correct? And what do I need to do so that my menu displays an indication of which page is the current one?

The CSS pseudo-classes in order are:
a = any link
a:link = an unvisited link (normal state)
a:visited = a link after it has been visited
a:hover = on mouseover
a:active = on click
a:focus = reached with tab key
See persistent page indicator on 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

Current page indicator w/ DWCS5 templates and Spry

Similar Messages

Maybe you are looking for