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]....
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 list of thumbnails that are created dynamically from a database which have an transparency state when the thumbnail is in the active state (ie when someone clicks on it)I wondered is there anyway that the first one could be set to active by default when the page initially loads. My code is below:
<script language="JavaScript" type="application/javascript">
<!--
function setMainImage(imageId) {
[code]....
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.I also like to avoid the inline JavaScript.
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...
At the link below I've built the nav using CSS (see code below). How do I make the 'on' state stay active on each specific page? (i.e the 'about us' rollover image stays active on the 'about us' page)
[URL]
CSS:
/* -----------begin nav layout styles-------------- */
#navigation {
width: 455px;
height: 116px;
[Code].....
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]...
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]....
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 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 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 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 RelatedI used the code from the following article...[URL]
$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover',
[code]...
why does the rolled over image's src return to the original value when the user rolls back off it?
I found this script for a navigation fade-in/fade-out and I want to modify it so it'll only trigger the fade-in/fade-out functions of the span class is NOT set to active. Here is the javascript:
Code:
$(function() {
$("#nav ul#menu li span.active").css("opacity","1");
$("#nav ul#menu li span.active").hover("opacity","1");[code].....
It's the part of the code beneath the comment CONDITIONALS BELOW that I want to be able to only trigger it if span is not set to class .active.
I'm not a programmer .here is the code I found a while ago.
<!-- SUBMENU ROLLOVER SCRIPT -->
<script type="text/javascript">
window.onload=function () { setStyles(); }; [code]....
OK so all I need is to know how to set a list item to be class="active" by default. I tried setting it to "active" but the script must reset them all to "notactive".