Highlight Active Page On Navigation System When Navigation Is Being Included With SSI?

Apr 18, 2010

I am not terribly familiar with Javascript but i am looking forward to learning, and currently the problem I am facing is this:I have an a file being included to an .shtml document, that serves as my navigation, the code is like this:

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>

[code]....

View 12 Replies


ADVERTISEMENT

Jquery :: Keep Active Page Highlighted In Navigation Menu On Rollover

Oct 25, 2011

I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...

Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);

// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>

<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>

WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.

View 9 Replies View Related

JQuery :: Script Doubling Div - Tab Navigation System?

Apr 30, 2009

In a website that I am developing, I have a tab navigation system and I tried to dynamic load the #content of each page in the #content div of the main page withe the next script and next html:

But when I run the script it doubling the #content div.

View 1 Replies View Related

Spry To Create Accordion Navigation System

Oct 11, 2010

I'm trying to use spry to create an accordion navigation system. At the moment I have just inserted it using dreamweaver, and I have been able to change the look of it through CSS. However, I would like the panels to only open as large as their contents, rather than a fixed height, if you understand what I mean. I read through the adobe help and it says:"The accordion also supports variable height panels. To turn this support on, pass a useFixedPanelHeights: false option to the accordion's constructor.Pass a useFixedPanelHeights:false option as follows:[code]But I've got no idea where abouts to put this code, or if I have to name something Acc7. Could someone explain what this means?(Edit - I tried pasting the code in my head tags, and changed the id of my div surrounding the accordion to Acc7 - this just seemed to expand all of the panels and now nothing is working)

View 1 Replies View Related

Active State For Navigation Bar In Website

Jul 26, 2009

I'm quite new to web design and Javascript in particular. How to resolve a problem with the navigation bar in a website I am currently working on. The navigation bar has 3 main categories and there is an 'active' state so the page currently viewed is shown as grey underline text in the navigation bar. The thing is, I also have sub-categories that are not included in the navigation bar but I'd like to make it so the sub-category page currently being viewed makes the main category to which it is attached showing as 'active' in the navigation bar.

This is the structure of my site:
index.html
contact.thml
illustration
index.html
illustrationproject1.html
illustrationproject2.html
illustrationproject3.html
photography
index.html
photography1.html
photography2.html

So for example, if I'm in illustrationproject1.html, the Illustration tab in the navigation bar should be on the active state. This is the code I have so far:
Navigation Bar:
[CODE]
<ul id="nav">
<li class="nav_item"><a href="illustration/index.html">Illustration</a></li>
<li class="nav_item"><a href="photography/index.html">Photography</a></li>
<li class="nav_item"><a href="design/index.html">Design</a></li>
<li class="nav_item"><a href="stories/index.html">Stories</a></li>
<li class="nav_item"><a href="profile.html" title="Profile">Profile</a></li>
<li class="nav_item"><a href="contact.html" title="Contact">Contact</a></li>
<li class="nav_item"><a href="links.html" title="Links">Links</a></li>
</ul>
[ICODE]

This is the Javscript for the active state:
[CODE]
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}}}
[ICODE]

So this code is working but I'm just not sure how to apply it to the subcategories as well. I can see what I should do, write some "if" statement but I don't enough of Javascript yet for this...

View 2 Replies View Related

JQuery - Active Navigation With Class?

Dec 18, 2010

I am attempting to set it so that upon clicking a link within this Joomla site (from the navigation menu), the link will become bold. I have already implemented CSS for ".active" and set the "LI" class to 'active' to the first class.

I have done a search for the JQuery code to do this, but each example that I tried did not work at all. The class remained to be on the first link, home.

[Code]...

View 1 Replies View Related

Navigation List - Highlight Name That Was Chosen

Dec 20, 2011

I have a navigation that has a list of employee name. And I used up and down key to see the names and I click enter key to view the data of that employee. Now, I want to have a color the name when I press the up and down key and also I want to be highlight or the color will stay in the the name that I choose after I press the enter key..Is it possible?is it using CSS? or javascript?How?

Here is my code:
Code:
<script>
window.onload = function() {
// function() {
var ul = document.getElementById('searchpayroll');
var links = ul.getElementsByTagName('a');
var i = 0;
document.onkeyup = function(e){
//function(e){
e = window.event || e; .....

View 8 Replies View Related

Highlight Navigation Using Location - Pathname

Jan 10, 2010

I'm attempting to get a nav system in place that will highlight the current nav item based on full path. The <li> of the menu item matching the current page should have the class "selected" attached to it. I'm just having zero joy and I've been at it all weekend.

[Code]...

View 2 Replies View Related

JQuery :: Keyboard Navigation - Active Link Goes To First Element Of Unordered List

Aug 11, 2011

I am trying to develop a jquery based keyboard navigation for my new project.....

My code:

But the problem i face is that when my active link goes to first element of unordered list and then i press up arrow key, then i lose track of my active link...

View 3 Replies View Related

JQuery :: Class Toggle Navigation - Implement A Minimal Navigation Bar

Nov 2, 2009

I'm trying to implement a minimal navigation bar using jQuery's toggleClass() function but can't seem to get it working.

It's the .img_selector div at the bottom of the page:[url]

I want to toggle the 'active' class for each <a> when it's selected, to indicate which image is showing, so after calling jQuery, in the <head> I've got:

Then the links, which also include the showPic function:

View 4 Replies View Related

JQuery :: Create An Own Horizontal Navigation And So The Navigation Is A Nested?

Feb 6, 2011

I want to create an own horizontal navigation and so the navigation is a nested list like

<ul id="mymenu">
<li>entry1
<ul class="abc">

[code]....

View 3 Replies View Related

Tween - Navigation System That When Rolled Over Uses A Tween To Change The Size Of The Button

May 23, 2010

I have a navigation system that when rolled over uses a tween to change the size of the button. I need a way to know when the tween has ended.

View 3 Replies View Related

JQuery :: Navigation And Sub Navigation Plugin?

Aug 8, 2009

<div>
</div><div>I did some navigation menu and sub menu using jquery ,</div><div>
</div><div>like ;</div><div>
</div><div>Menu1 </div><div> Sub menu1(some.php)</div><div> Sub menu2(some1.php)</div><div>

[Code]..

View 1 Replies View Related

Keyboard Navigation Dropdown Menu - Add Support For Keyboard Navigation?

Jan 19, 2009

Ive been working on a site with a dropdown menu. its styled with css and animated with java i would like to add support for keyboard navigation.

var DDSPEED = 5;
var DDTIMER = 5;
main function to handle the mouse events [code].....

View 1 Replies View Related

JQuery :: Cookie Plugin To Remember The State Of A Navigation Menu From Page To Page

May 19, 2011

I'm trying to use the cookie plugin to remember the state of a navigation menu from page to page. Here is the snippet of code from towards the top of my page where I am including the jquery files and cookie plugin. The second part of the sample tries to determine whether the cookie exists.

[Code]....

View 1 Replies View Related

Show Sidebar Navigation On Only One Page?

Apr 20, 2011

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?>
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>

[Code].....

how I can clean it up a bit, since there is stuff in there I don't think I need. I would like it to only be "Nyheder", under this there shall be (as now) a list of post, shown by which month they where made.

View 3 Replies View Related

Navigation To A Page After A Date Has Passed

Nov 24, 2005

How do you make a code that will navigate to a page, after a specific date.
Eg: Before December 25 I want a page in my site to 'redirect' to lets say 'temp.htm', but after the 25 December has passed, it must go to 'homepage.htm'.

I want to try and use this for easy updating in Dec-Feb when I will have no Internet.

View 3 Replies View Related

Navigation Menu Following Page Scroll

Oct 2, 2010

how to improve a simple javascript code on my web site. The left navigation menu slides down as you scroll the page. It works perfect on the computer I'm using now with IE8, Google Chrome and Firefox on Windows 7. However when I try it on any other computer with IE8 or another browser, when you reach the bottom of the age the menu continues to scroll thereby creating white space.

[Code]...

View 1 Replies View Related

JQuery :: $document.ready() Same Page Navigation?

Dec 14, 2011

I have noticed on a few occasions where I navigate to a page and the document.ready() function gets called and executes. I then push a button on that page which calls a javascript function that does a jquery submit to the same page I am currently on. This time, document.ready() does not get triggered. How do I make this happen the second time, have the stuff I want on page ready be executed? I am using Chrome if that helps.

View 3 Replies View Related

Next / Previous Page Navigation Based On Filename

Mar 26, 2011

I need to put previous/next navigation button images on a lot of slides.If i am on slide 3 I'd like javascript to identify previous button as slide2.html and next button as slide4.html and so on

View 14 Replies View Related

Iframe Css Manipulation When Navigation Target Page?

Sep 13, 2010

I need this iframe for a facebook tab, since they changed the width to 520px. The original page in the iframe is 700px wide, and I've changed a few CSS properties using the frameReady plugin. It's works just fine, but trouble starts, when i'm navigating the target site, the CSS properties I've changed goes back to the original props.

[Code]...

Try clicking any of the 'view on map' links, then you'll see where I'm getting at.

How could I work around this? Can I make it apply the script every time something new loads into the iframe?

View 10 Replies View Related

Use A Frame Inside One Of Div Tag To Link The Page To The Navigation Page?

May 10, 2010

if i have 10 pages and each of the page has the same navigation bar, i don't think duplicating the code again and again in every page is the right solution... what do the pro normally do? i tried to use a frame inside one of my div tag to link the page to the navigation page

[Code]...

View 6 Replies View Related

Ajax :: Looking For Pagination Script To Create Page Navigation?

Jun 13, 2009

Looking for ajax pagination script, to create page navigation.

View 2 Replies View Related

JQuery :: Auto-Selecting Navigation - Add A Class To My Menu For The Page

Sep 12, 2009

I am trying to add a class to my menu for the page it is currently on.

I followed this example: [url]

But I am not able to make it work at all.

Here is my HTML:

To make the nav element highlighted, the list item must have a class of 'hover' like this '<li class="hover">...'

And here is my jQuery:

The script is not applying any CSS to the list elements. I tried different combinations, tried to add a class to the a element by removing parent(), but nothing is triggering.

View 1 Replies View Related

Dynamically Resize A Navigation Div - That Is Present On Every Page - According To Size Of Main Content Div

Apr 29, 2010

I am currently trying to use Javascript to dynamically resize a navigation div (that is present on every page) according to the size of the main content div.

I am currently using the following code;

Code:

This works the first time I go to the site and if I refresh a page. However, if I use my on site navigation to switch between pages the div simply uses the height variable defined within my CSS (this needs to be here for users with JS disabled)

Does anybody have any ideas on what the problem might be. It's as if the script is only executed the first time any page on the site is loaded, but then not again.

View 6 Replies View Related

Script That Gives A Neat Effect On The Navigation And Want To Include A Simple Fading Slideshow On The Same Page?

Jan 11, 2011

I have a JQuery script that gives a neat effect on the navigation and want to include a simple fading slideshow on the same page.Any script I have tried for the slideshow either uses JQuery or Mootools and it conflicts with the navigation script.Can anyone recommend a smooth fading slideshow that wouldn't conflict or suggest how I can get around this. I read a bit about 'no conflict' but don't understand how to implement it.

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved