I created an accordian menu which includes categories, sub categories and sub sub categories. Once you hover(css) on one of the menu options there is a hovering effect. What i would like to achieve now is that once a menu option is chosen that option remains highlighted (:active) until another menu option is chosen.
View 3 Replies
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'm trying to set an option of a drop-down as active, regarding the category. I added the category name for this to the body class="category-XXXX-XXXX". What I need is something like an array to say:
if == category-AAAA-AAAA then option value=1 is selected
if == category-BBBB-BBBB then option value=2 is selected
if == category-CCCC-CCCC then option value=3 is selected
and so on. Unfortunately, I'm getting totally confused where to actually start and how to do that. I know, it is for sure out a line to ask for a finished script, but I'm sure someone can give me a hint, on how to do that.
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 have a navbar numbered 1 thru 6 for a slider. You can see it here. [URL]. Is there a way to have the current navigation number share the rollover state? In other words, if I slide to #4 then the actual navbar #4 displays in a different color until I navigate away from it. I originally thought that this would be a simple CSS thing, but that idea went more towards javascript 'test'. Then I wondered if there might be a plug-in for this sort of thing.
View 11 Replies View RelatedI'm not sure if JS or regular HTML is best for this, but i'm wanting accomplish the same effect as the color box rollover on the site below. I can figure out the rollover but i can't get it to stay. Example, rollover the red box and the headband changes from black to red, roll off and it remains red. [url]
View 4 Replies View RelatedWe are currently re-working a client's website and as I am not a javascript programmer I am having trouble understanding some of the code, and need help understanding why a certain variable in the code remains undefined.
What is happening is that the user is filling in 24 lines of 4 select boxes, in which there must be 1 and only one "m" and 1 and only 1 "l". The code changes the value of the box back to blank if the user has tried to enter >1 of either. The code then should check the line number and count the number of lines, but on debugging I see that the value of variables el and LineNo are undefined. I can't understand why when the function is called, the value "this" is used. i.e CheckLine(this) - this appears to have no value in the html code as far as I can see!
I am using Java(Structs framework) for developing my application.
User enter the values in text box in bottom of the screen.
Then the page is refresh that is Request will send to Application after that the Screen goes to Top. But I want the page where I send the Request...
I have a page that contains PHP and Javascript. I have a table of results, with two grouping stages:
- Month, Year1
- ProjectID1
- Job ID1
- Job ID2
- ProjectID2
- Job ID1
- Month, Year2
- ProjectID3
- Job ID1
- ProjectID4
- Job ID1
The problem is that when the ProjectID row is opened to display the JobID row, then close the Month, Year row, the JobID row remains visible.
Here is the code:
//JAVASCRIPT
Code:
function toggle2(id, obj) {
var matchingElements = new Array();
if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else { .....
I have a table with images in the cells. I'm using JSFX_ImageZoom.js to zoom, that works fine. The problem is if I don't define absolute positions for my images then when zoomed the rest of the page gets garbled. If I do define absolute positions then the zoomed image is "under" the surrounding images. Code:
View 5 Replies View RelatedI think this is just a dumb question, I'm missing some basic logic here about jquery "grammar".
I'm trying to do an image swap on hover that checks to be sure the thumbnail is not the active thumbnail. So mouseover, it swaps. Mouseout, swaps back, unless the thumb has been clicked.
Here's a snippet of the code that doesn't work:
How do I check that _li is not ".active" and replace the src if it isn't?
I have develop a jquery image gallery with text description , image and other thing and its live know. you can check the live gallery Executed for Makkah ! But i am facing some problem in JavaScript coding as i am not a expert init. If you click on any image you can see that new information appear with some effect like fade in or fade out. Which gives very bad impression to my client. I want to remove that effect and want to appear the text immediately without any effect. I am placing the code below and also highlighted the area which control that effect and try myself to edit that one can't able to get the results that i want.
[Code]....
I am searching a solution to change a ComboBox by popup I have found this script on the web. Is it also possible to select the newVendor just after adding? Is this script ok or are there better solutions?
<script type="text/javascript">
<!--
function message(value){
if(value=="newVendor"){// New Vendor is selected
var vendor = prompt("Vandor's Name","");
var elementSelect = document.getElementById('vendor');
try{
[Code]....
I'm receiving the following error: Error: uncaught exception: Syntax error, unrecognized expression: # However all the functionality of the script continues to work, I need to get rid of the error as it looks pretty bad on client's sites and want to make sure the script isnt doing anything funny. The basic set up is a number of Select boxes, When selecting an option in the select boxes, I loop through a JSON stock array to see if the item is in stock and to then enable / disable the relevant options in the other selects based on the stock record. The error (as far as I can see) appears on this line: $("#option" + nextid + " option").filter(function(){
[Code]....
It needs to allow the user to highlight some text within a paragraph. If the correct text (with an error) is selected it should provide feedback that the user has correctly selected this text.
So what I need to do is
1. Get the text selection
2. Compare this text selection to a predefined answer
3. Provide feedback to the user e.g. they are correct if text selection = predefined answer, and incorrect if text selection != predefined answer
I'm using the following code to remove an option from a select control based on a selection in a different select control and the option text in the select option that is being removed. The code works as I want it to, but I would prefer to use the option value for identifying the option to remove instead of using the option text. I've tried several different ways to do this, but can not find the proper syntax.
[Code]...
I am wondering if it is at all possible to create a button that--when
clicked--grabs a paragraph of text that a user has highlighted. So you
go to this website, then highlight a section of text. Once you have
the text selected with you mouse, you then click the button. The
button executes a function which acquires the selected text in a
string. Is this hypothetical situation possible? Thank you for the
time it took to read this post.
Is there a way of searching for highlighted words on a webpage?
View 4 Replies View RelatedI am a JS newbie and I'm wondering if there a way to figure out the sentence from which a word has been highlighted. Essentially, when a user selects a word or a phrase, I should output the sentence from which it's been selected. Is this possible with JS or with any server side languages?
View 2 Replies View Relatedi'm using a great script from oreilly for an efficient rollover effect on an image map - highly recommend for anyone needing something like this - link is below - my question is how do i modify it so the menu item *stays* highlighted when the page is selected? that is, in the example, if you rollover or click 'home', the image changes, but once you select it, the effect goes away. i've tried a few things but am getting bogged down as to the best approach. [URL]
View 9 Replies View RelatedI've got the following code inside a js function that highlights the table row (multiple, dynamic number of rows) onclick. But I'm trying to figure out a way to "unhighlight" that previously highlighted row back to what it was before the user clicked on it. Is it possible to save-off the "this" so that it's the "previous this" ? [code]...
View 1 Replies View RelatedI am creating a little html editor, and I want to highlight a chunk of
unformatted text, click a <buttonand put a <pand the beginning and
a </pat the end. I assume there is a DOM element relating to this,
can anybody help please ?
I'm currently trying to get the tabs on a multi-script navigation to stay highlighted while you select a link from the sub-nav. [uRL]. I'm unsure of how to do this, or what js file I would have to edit (if any). The hover is run through jQuery 1.2.6 min but the sub-nav is run through dynamic drives' ddtabmenu.js.
View 5 Replies View Relatedi'm using this script below that highlights the current link clicked. My site is a horizontal scrolling site so the links just redirect to different parts of the page.My problem is is that when the page is refreshed the current link is forgotten and the home link is highlighted, even though the page stays in the right place. Is there a way to keep the current link highlighted?
View 6 Replies View RelatedI am looking for a script that would prevent an image from being highlighted by dragging the mouse.
View 1 Replies View RelatedIn This structure (see below), i need select the highlighted element (a) depending each "submenu" that is opened.
div#id > ul > li > ul.submenu
> li > a
> ul.class > li > a > ul.submenu
[code]....
