JQuery :: Make A Conditional Function For A Menu So The Current Link Does Another Roll Over?
Nov 1, 2010
I'm trying to build a menu with an animation color and my problem is that the funtion is apply to all the links in the menu but ideally I would like to apply to all elements less the one with the id current.
at the moment I just created two functions but still apply both of them to the current link.
Here is the code:
<script type="text/javascript">
// font color animation
$(".second a").hover(function() {
$(this).animate({ color: "#00aadd" }, 400);
I am trying to make a navigation menu that when a link is clicked, loads content into a hidden div, then shows the hidden div, then changed the class of the list item. If the same link is clicked again the class reverts back to what it was before and then the content div becomes hidden.
I have inherited some code that changes the behavior or menu links with submenus to open the submenu but I need it to both open the submenu and go to the link location.
Here is the code: $('#leftNav #menu li a').click( function() { $('#leftNav #menu li a').removeClass('selectedAccordion'); $(this).addClass('selectedAccordion'); $('#leftNav #menu ul.currentnav li a').removeClass('selectedAccordion'); $('#leftNav #menu li ul li a').removeClass('selectedAccordion'); //$(this).parent('li').addClass('selectedAccordion'); var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))){ return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { if(checkElement.parent().parent().parent().is(':visible')) { checkElement.slideDown('normal'); return false; } $('#leftNav #menu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; }}
How do I put back the behavior to open the submenu AND go to the link location? I found I could add location.href = $(this).attr('href'); and go to the correct, but then the submenus slideUp and are hidden again. I can't figure out why changing the page closes the menus.
I know how to make a ROLL OVER MENU, but the problem is the image is loading from the server side.
What i want is to put all the images into memory of computer of the client so that when the client hover the mouse the images is not fetch from the server but from on the client side.
I'm new to jQuery, but learning fast, and loving the new functionality!I'm using a Flash upload component that all works fine, and once it's complete (file uploaded) it calls function.I'm running the Flash upload in a modal (nyroModal - very cool!). The link below does what I need it to do - navigate to a new page and re-size the modal:<a href="test2.aspx#blabla" class="nyroModal">Ajax Filtering Content #test</a>What I need to work out is how to make the JS function above work in the same way as this link. I know very little JS, but I think the 'class="nyroModal" needs to be part of the link in the function some how??
I'm having trouble using the stop() function. I'm trying to make a dynamic menu using jquery library. This menu is now working pretty correctly but I can't manage the problem of multiple queued animations. My menu is made in two parts. The first one contains buttons. When they're hovered over, the second level of the menu appears just underneath. But when several buttons of the first menu are hovered over, I can't stop the second level to appear and disappear anarchically. Here is an example of code of the second menu :
I have made a javascript image viewer where there are thumbnails at the top and when you click on them the bigger image below the row of thumbnail image changes accordingMy question is, how do i make the larger image become a hyperlink to the corresponding page it represents. Alternatively, it would not be a problem if a caption could be displayed below which i could make into a hyperlink.Here is my script .js file
function img1click() {document.IMG.src="imagelibrary/dazzlebig.jpg";} function img2click() {document.IMG.src="imagelibrary/gunshotbig.jpg"} function img3click() {document.IMG.src="imagelibrary/searoombig.jpg"}
I am writing a Javascript to sort and write out some stuff. PHP is not an option so I need to get this script working.
The problem arises when I want to make a link to the next page. (i.e. Like the link in Google for the next 10 results)
I have <a href=# onclick=FUNCTION(VALUES)> written dynamically by the script.
It is written onto the document correctly, but the problem is, when the link is clicked, some seemingly random values are passed to the function.
When you run the code, the first alert will show all the values that a were passed to the function. The second and third will show what was written to the document.
If you try clicking the next button after the code loads, the values that result will be unusual.
I want to use an image map for something unique. The image would have about 10 to 15 (religious) symbols. When the user clicks on a particular symbol it will search the site for a few strings relating to that symbol. For example: Symbol 1 would be a cross when clicked it search the site for "christ, crucifix, christianity". I am sure I can make the image map but how do I make the image map call a function instead of a link.
I would like to include drop-down navigation links on my home page that connect to other pages on my website. No problem there. The problem is that some of the other pages contain a series of div elements that are hidden (display:none) until activated by javascript enabled links on the page. Clicking those links changes some of the page's content (within a div) .. almost like a "new" page. [URL]. Here's my question: Is there any way to create menu links on my home page that will open the "concert.html" page AND display the appropriate div content at the same time? For example: on the home page, a menu link under "Concert" that opens that page and automatically displays the "Rock Symphonies" section?
Here are the related HTML div elements on the "concert.html" page: <div id="page1">concept content</div> <div id="page2" style="display:none;">rock symphonies content</div> <div id="page3" style="display:none;">general program content</div> <div id="page4" style="display:none;">ticket price content</div> <div id="page5" style="display:none;">concert committee content</div>
Here are the corresponding js-enabled links: <li><a href="javascript:page(1,5);" id="tag1">Concept</a></li> <li><a href="javascript:page(2,5);" id="tag2">Rock Symphonies</a></li> <li><a href="javascript:page(3,5);" id="tag3">General Program</a></li> <li><a href="javascript:page(4,5);" id="tag4">Ticket Prices</a></li> <li><a href="javascript:page(5,5);" id="tag5">Concert Committee</a></li>
And here's the javascript I'm using: (scripts/generator.js) function page(id,all) {for (i=1; i<=all; i++) { if (i==id) { document.getElementById('page'+i).style.display="inline"; document.getElementById('tag'+i).style.fontWeight="normal"; document.getElementById('tag'+i).style.color="#FFF"; } else { document.getElementById('page'+i).style.display="none"; document.getElementById('tag'+i).style.fontWeight="normal"; document.getElementById('tag'+i).style.color="#a4bfed";} }}
I cannot determine how to make an input required only on the conditional value of another input. My unsuccessful code snippet is (as a rules item):
where aboutOthers is a textarea required if the value of Others is > 0. Does this simple task require something more? I can not find any simple rules condition syntax anywhere I have looked.
how to make the menu items a fixed width in a horizontal Superfish menu . I've tried mucking about with the CSS but no luck so far. I'm sure it's easy, but I can't seem to work it out.
I want to make a menu (not drop down) which will be of 100% width and height just like ipod drill menu. Can anybody know about such sliding menu and drilling down to each item..? how to change this one to achieve my preferences. I want: menu options (not in a drop down) slides left into subcatogaries on each item click (like windows media center menu)....
In the menu in this page I have four different methods (you can see them in the <script> tag on the pages) of indicating the current page in a menu. I downloaded these from various web pages after Googling "jQuery highlight current page".None of the methods works. Is there something wrong with my selectors? Can anyone see why none of them are working?
Umm, this is a tricky one to add a descriptive title for!
Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.
I've got this script which effectively should change the clicked link's opacity to full and its siblings' opacity to 0.6. The only part that works though is the changing the text color to black. Here's the script:
Currently using jQuery's function loadContent(elementSelector, sourceURL) { $(""+elementSelector+"").load(""+sourceURL+""); } and href="javascript:loadContent('#content', 'page/home.html');"
to load some remote content into the main container. The problems is: i'm unable to find any working solution to highlight the current, active menu item (build as an <ul> and styled with external css), considering the main page isn't reloading - especially when i'm in no way able to understand JS at all.Would any of you have any idea how to mark the current menu item marked as active untill another one is chosen - and then repeat the function?
I'm trying to get Superfish menus working on a new site I'm building, but have run into a problem. I have used the feature of setting a class on the current menu item so that it will be highlighted (highlit?). The trouble is that if the menu item has a submenu this submenu is displaying already opened when you hit the page.
I've set the menus up with the following options: $('ul#nav').superfish({ hoverClass: 'sfHover', pathClass: 'current', pathLevels: 1, delay: 800, animation: {opacity:'show'}, speed: 'normal', autoArrows: true, dropShadows: true, disableHI: false });
This is a snippet of the menu code just for completeness, although it's pretty generic: <ul id="nav"> <li><a href="index.html">Home</a></li> <li class="current"><a href="agenda.html">Agenda</a> <ul> <li><a href="stream_busdev.html">Business Development Stream</a></li> <li><a href="stream_techsupp.html">Technical and Support Stream</a></li> <li><a href="stream_partners.html">Partners Stream</a></li> <li><a href="stream_paytrain.html">Payroll and Training Stream</a></li> </ul></li> ... more menu items in here ... </ul>
I've also attached a screengrab, in case it helps, since the site isn't live yet. So I guess what I'm asking is: is there a way to have the current parent menu item marked as current without it automatically opening the submenu?
I'd like to be able to get Superfish to expand the entire menu and show the current active link in pathlevel 2. I'm using the nav-bar style and it seems that only pathlevel 1 is visible:
