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.
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) {
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.
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>
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.
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.
i am trying to populate a drop down menu from a pop up page. what i have its working on chrome but it does not work on IE and i was wondering if you may be able to know why. Here is my code:
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.
I need to select a class within an element. the class is generated by the code using .addClass. I suspect this is actually really easy and I'm just being stupid,
I found this javascript, but I need to target by class, line 1 below was originally GetElementById
var dyntext = document.getElementsByClassName("tpopdyn"); var body = document.body, steps = 7; function threedee (e) {
[Code]....
I keep getting an error that dyntext is undefined (lines 21-23). First and foremost I just need to get it running - I'm still learning and I don't want to break more than I already have.
im experiencing a problem when using the :nth-child() selector.
I currently have a div that contains multiple divs. These divs have either the class 'labels' or 'labels-alt', I currently use the following code to change add/remove a class to one of these
function mOver1(n) { $('.labels:nth-child('+n+')').toggleClass("labels-hover"); } function mOut1(n) {
I have list of forms generated from SQL database and every single one of them has to have unique id, so how I can select the specific item that is to be manipulated (changing values via php).the $("#submit").click(function())will trigger every submit buttons on the page, so how I can tell it to be "#<randomInteger>" thought of passing the unique value with onClick="myfunction(unique_id)", but don't know how it goes with jQuery.
Using the very basic jqModal example, isn't it supposed to auto size and auto center the modal on the page? I placed a table that was wider than the modal's default settings and it's off the page and does not create scroll bars on the page to see the hidden section of the modal.
The default class is
Now, I know I can change the width of the modal but what about the positioning?
I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:
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:
I have mulitiple 'a' tags with different classes (aclass1, aclass2, aclass(n)) and I have multiple divs, also with consecutive classes (divclass1, divclass2, divclass(n)). Is there a way to select the 'a' tags to match the div based on its number (ie. 'aclass1' with 'divclass1' and aclass2 with divclass2)? For example something like this:
I'm trying to select a class (.home) and an ID (#something) at the same time,
normally I'd use:
$(".home,#something")
but in this instance, the ID is already stored in a variable called "newpage" - I'm trying the following:
$(newpage,".home")
(note, selecting the id on it's own with just$(newpage) does work, so I know the issue isn't with my variable, it's just a matter getting both the class and the variable stored ID selected at the same time)
I want to be able to post to a page, and one of the post values, auto selects one of the values in a drop-down box.So say i post a value 'Red' from a field called 'Colors' to a form, I would like 'Red' to be automatically selected in the 'Colors' select dropdown list.I am working with dropdown lists of many values, so need a way to automate this selection.
I am looking to use JQuery which I am really new to and get my navigation submenus to slideDown when the parent is rolled Over. I have multiple parents and children or sub menus and want them to activate individually but without repeating the JQuery over and over again for each.Obviously the goal is to also slideUp on the mouseOut event.Here is the code that I have so far:
I am working and designing a website, and have put the simple JQuery drop menu from css tricks on my website, but every time i zoom in and out the website using ctrl +&- the site gets smaller or larger however the navigation moves and some bottoms from the menu drop down to the left or right under the first or last buttons, so does anyone know how i can fix and block the menu from moving around using HTML and its own CSS Style page, let me know.
click on the link below to see the demo for the navigation.
