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]...
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]....
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:
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.
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...
I am attempting to make a menu that has a background image that changeswhen you rollover or click a menuitem. I've got the hover effect working fine with CSS, but am trying to implement the click event via jquery with the following:
CSS:
div.SustainResourcesMenuTabs
{ background-image: url('/images/departments/commdev/sustainability/menu_tab.jpg');
}[code]....
My process is to reset the entire menu to the inactive state, then switch on the active state for the item that was clicked. Eventually, the item that was clicked will display its corresponding body section as well. I've tried using the CSS pseudo-class "active", but since the entire div is the link, that is unavailable. I've also tried multiple variations of addClass/removeClass, toggleClass, and setAttribute/removeAttributebut nothing hasworked so far.
I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class
Code:
<div id="menu">
<ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li>
<li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li>
<li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li>
</ul>
</div>
[Code]...
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...
adding a class to an active li. I'm working in drupal, and the system adds a .active class to the DOM of whatever li class was last selected.In my .js file I added the following:
$('document').ready(function(){
var tabActive = $('#tabs-tabset ul.primary li.active a');
tabActive.addClass('tabknotch')
});
This works perfectly...for the first tab. when I navigate to the next tab the class does not change. I thought maybe there's a variable in the dom that is causing the class to not move, so I tried narrowing the div that it looks for and tried this:
$('document').ready(function(){
var tabActive = $('li.active a');
tabActive.addClass('tabknotch')
});
This achieved the exact same results...so there's obviously something I'm missing, but don't know what it is. If it's any help, here are two examples of the generated DOM that occurs when clicking on the active li. The first example is the div that has the class added, and the second is a div that does not have anything added. <li class="overview ui-tabs-selected active first tabknotch"><a href="#overview"><span class="tab">Overview</span></a></li> (this is the active tab where the jQuery succesfully adds the "tabknotch" class)<li class="features ui-tabs-selected active"><a href="#features"><span class="tab">Features</span></a></li> (this is the active tab that does not have the class added when clicked. When this li is active knotchtab remains on the other li that no longer has the .active class attributed)
I have a single page website and I would like to add an .active class to my links when I reach a certain point on the page (this will be done by unique div or section id's). The classes are currently empty, so I would need to be able to remove and replace the .active class accordingly.
Here is my html:
<
nav
id="main-nav">
[code]....
Having a navigation menu desighned in photoshop, how can I use jquery to add a active state class to my css which can use the same hover style for active menu?
Here is the HTML code:
<ul id="nav">
<li id="list1"><a href="#"><span>Home</span></a></li>
<li id="list2"><a href="#"><span>About Us</span></a></li>
<li id="list3"><a href="#"><span>Projects</span></a></li>
[Code]....
So basically I have this menu, the only problem I have is that I would like the colour of the text depending on which the 'LavaLamp' Image is when loading up to be red. For example when loading up this website (my url to the menu) [URL] I would like the text 'Home' to show red, since it is the active tab on page load.
View 1 Replies View RelatedI have this script where if users click on a link it will show that particular link in a slideUp, slideDown effect. For example There are two links and Two divs.Both Divs are hidden to start. If the user clicks link 1, Div 1 will appear. If the user clicks link2 Div 1 will close and Div 2 will appear. how do I add a active state when the user clicks on each particular link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
xmlns
="http://www.w3.org/1999/xhtml"
[code]....
I have a web page wich has several list like this one:
So several ul's list wich are inside severals divs of class <div class="languages_cont" >
I need to make active the first <a> of each one this ul's and it need to be done in Js (when i say active i mean the <a> text will become bolded, so right now i've been trying using a each but no luck yet, it only selects the first it encounters.
I'm trying to add .active class to a menu, based on the URI. It works with URL's like: /, /products, /about, /contact but not anymore when you go to /products/some-product.I know what's wrong, but I can't find a working solution. I've tried a regex, but that didn't work either...
The code:
$(function() {
var path = location.pathname;
if (path) {
[code]....
I am working on the project that will be only one page and the menu will link to the same page. The problem is that i can't add active class to the menu the same we did in the normal linked pages. For example, in css we can see .about .menu ul li .active a { color:#black} . This means the menu will be in black when the user is in the about page. I can't do like this in one page scroll menu as there is only one menu. Are there any ways to let the menu change (add active class)when i scroll to some specific part of the page?
View 3 Replies View RelatedI would like to get an active menu but when my page reload i loose the class.
With a button it works fine but not when the page reload with a href it only works when i add a #.
I'm using the cycle plug-in with an existing nav bar (2 buttons). It functions correctly -- but for some reason -- I can't get the corresponding nav button to change CSS class and show as highlighted.
jQuery:
$(document).ready(function() {
$('#slideShow').cycle({
fx: 'fade',
[Code]....
I'm using superfish for a drop down hover menu. It works perfect except I would like the sub menus to remain visible when one of the <a> tag from the menu has class="active". Here is a quick overview of the menu html:
<ul class="primary-links">
<li>
<a href="main">item parent 1</a>
<ul>
[Code]....
If the current page is main -- class='active' is automatically added to the A tag (with Drupal). If you are currently in page2, the class='active' is added to the A tag of the sub-menu. Now, how can I get the sub menu to be always displayed -- regardless of superfish, either when item parent 1 A tag is set as class='active'of the item child A tag is set as class='active'.
I have a link as such:
[Code]...
In a nutshell, I need to set add/remove a class called 'active' to/from a link that is clicked within a DIV. So if the link has the class 'active' already assigned I need to remove it and vice versa however the issue I am having is that I have to double click the link in order for it to work!!
I'm trying to make a tabbed navigation system, but I don't know how to set the class to active when it is clicked so that it displays differently.
<body>
<div id='tabs'>
<ul>
<li><a href='#'>Link1</a></li>
[Code]....
I have some problems with assigning a class to my included navagation menu. I would like to give the last clicked menu item a active class so I can style it but i have no clue how that works with javascript. as you can see i have three files two pages which included the same menu. Now I would like to set the first page to active because it would be the page the would start. but then when someone clicks the second page it should become inactive and set the active class to the secone link.
[Code]...
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.
I have three links that call three functions that change a div. Now, I want to change links color when active. I made this so:
var act = "";
function doActive(obj){
obj.className='active';
if(act != undefined && obj != act){
act.className = 'off';
[Code]...
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
My HTML:
Code:
<ul class="tabs">
<li>Tab1</li>
<li>Tab2</li>
[Code]....
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2)
I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
Code:
page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work.
getting all the header text:jQuery("#accordion h3").text();how do you get the active index? and how do you use that index to get the active header?how do you get the header text for the active header?
View 1 Replies View Related