Rollover Image Menu With Current Page Active?
May 27, 2011
I've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;
[Code]...
View 1 Replies
ADVERTISEMENT
May 26, 2011
I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?
In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;
Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}
And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>
View 1 Replies
View Related
Oct 25, 2011
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.
View 9 Replies
View Related
Nov 17, 2010
It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item.I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state.
View 1 Replies
View Related
Mar 7, 2006
Its cool but would like to have image rollovers instead of the text shown in the example.
I can't figure out how to do it without screwing up the slide bar on the bottom. And the css file won't let me specify which link like... a.home li {etc etc etc....I would really like to be able to have a separate rollover image for each link and have the slide bar work still.
View 2 Replies
View Related
Nov 21, 2010
I tried to make a drop down menu with rollover image... with the drop down code that I found in this forum some days ago. I can finally make it but can't find how to make it rollover not hover with only colors. I want in like rollover menu but with drop down, but can't find how to make it rollover.
Javascript code
Code:
var timeout= 500;
var closetimer= 0;
var ddmenuitem= 0;
// open hidden layer
function mopen(id){
// cancel close timer
mcancelclosetime(); .....
View 1 Replies
View Related
Jul 14, 2009
I know very little about jQuery. I am trying to design a graphic menu bar that is capable of displaying each button in 4 modes: up (neutral), hover, down (mouse down), and selected. After some research, I was able to "come up" (by cutting and pasting and burning up a couple of neurons) with the code below. It works well enough but I'm sure it could be written a lot better. What I really would like to do is to change whatever button is "down" to go back "up" once another button is pushed, changing the img src, or by whatever method is more efficient.
<script src="js/jquery-1.3.2.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() { // image rollover
$(".topmenu img").hover(function() {
this.src = this.src.replace("-up","-hover");
}, function() {
this.src = this.src.replace("-hover","-up"); .....
View 3 Replies
View Related
Sep 13, 2010
I have a simple superfish menu on my site and I'm wondering if there is a way to add a quick line that shows the 'current' page the menu is point to?
this is a wordpress site, I noticed an example [URL] i'm getting closer?!
View 1 Replies
View Related
Oct 9, 2011
I 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 #.
View 3 Replies
View Related
Dec 7, 2010
I'm looking for a Javascript workaround that'll allow me to indicate the current page on the main menu(basically, the menu button for that page will be a different colour to the rest of the menu buttons). The main menu is in CSS but isn't bringing up the required image for the "current menu item" indicator automatically and no one knows why.
View 1 Replies
View Related
Jun 23, 2010
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?
View 4 Replies
View Related
Jul 15, 2009
How do I display or hide a Javascript menu based on the current url in a php page?I want to specify when a java menu appears on a page based on the current url - does anyone have a script for the vars and conditional statements to make this happen - it would be something like this in natural language:
<javascript>
if currenturl = http://jemmakidd.com/categories.php
then displaymenu
[code]....
View 5 Replies
View Related
Jun 5, 2010
I have navigation buttons that I'll call primary buttons. I also have secondary navigation buttons that I'll call secondary buttons. If you rollover a primary navigation button, it should make secondary navigation buttons 1,4,and 5 go to rollover state A. However, if you rollover secondary navigation button 1,4 or 5 they should go to rollover state B.So the simplest way I can explain it is that the secondary navigation buttons need two rollover states possible.
View 2 Replies
View Related
May 11, 2010
Before, I had an iframe, and when I moused over a link outside the iframe, it would load a page into the iframe. Background image was part of the page loaded, as well as the text and what not. The problem was, the image took too long to load. I've been learning how to do javascript and I came across some code for preloading an image before the mouseover so there was zero wait time. For the past few days I've been trying to figure out how to have the preload image appear BENEATH the iframe (now with no background image or color) with the allowtransparency attribute set to true.
I've figured out the code to do both individually, i.e. I have the code so that when the link is moused over, the new image will appear; AND I have the code so that when the link is moused over, the page with load into the iframe. Both work, both do what is expected, but they don't do it together.Below is the script. Here's where it's confusing. If I have the "setupImgRollover..." first inside the if statement: the page loads into the iframe, but there is no image. If I have the "setupImgRollover..." after the "document.link..." commands in the if statement: the image appears but the page does not load into the iframe.
HTML Code:
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
[code]....
View 2 Replies
View Related
Aug 24, 2011
Whether there is a way to get the index of currently active/selected row in tabla just like in C# dataGridView
View 1 Replies
View Related
Apr 11, 2010
I have a spry accordion that I have inserted in Dreamweaver with 5 tabs for Monday-Friday.
How could I make the tab active depending on what day it is?
i.e: So if its Tuesday the Tuesday tab will be active.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Monday</li>
<li class="TabbedPanelsTab" tabindex="0">Tuesday</li>
<li class="TabbedPanelsTab" tabindex="0">Wednesday</li>
<li class="TabbedPanelsTab" tabindex="0">Thursday</li>
<li class="TabbedPanelsTab" tabindex="0">Friday</li>
</ul>
View 6 Replies
View Related
Jul 20, 2010
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:
[URL]
View 1 Replies
View Related
Oct 14, 2010
I am using an ajax call to generate a new image with some text across it. How can I "replace" the image in the current page with the one I just generated, they will have the same name.
View 4 Replies
View Related
Mar 16, 2009
I'm trying to create two bookmarklets:
1. Take the current URL of the page and open a new window with a URL based on the current page. Some examples (I use "->" to mean "this URL turns into that URL"):I plan to use these bookmarklets in sequence, first pressing 1 to log into the CMS, then pressing 2 to edit the current page.
View 5 Replies
View Related
Dec 18, 2010
I'm trying to get the hover over image selected based on the current page. I've used an external jquery.url.js library to access file and href information. The if statement is reached correctly, but I can't get the code within it to work. Each image is stored within an anchor and, as with the hover code (included), I'm trying to change the end of its source file name from '_off'to '_on' so it's active.
$(function () {
$("img.rollover").hover(
function () {
this.src = this.src.replace("_off", "_on");
},
function () {
this.src = this.src.replace("_on", "_off");
});
$page = jQuery.url.attr("file");
$('#menu tr td a').each(function () {
var $href = $(this).attr('href');
if ($href == $page) {
$("img", this).src.replace("_off", "_on");
}});
View 3 Replies
View Related
May 6, 2010
How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: [URL]
Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row.
View 2 Replies
View Related
Oct 3, 2011
! I'm making a tab menu with HTML, CSS and JavaScript. I have this HTML:
[Code]...
how to set active the first tab. I've tried with class='active', but when I use that atribute and click on another tab, the first one doesn't deactivate...
View 2 Replies
View Related
May 18, 2010
i'm working on a horizontal menu based on this one [URL]).
When the user clicks on a menu item, the submenu container stays there on mouse out but... BUT when the user make over on another menu item and then makes out, the menu doesn�t return to active menu...
View 28 Replies
View Related
Aug 5, 2011
I am trying to change the look of the 'active' submenu item... Meaning, when you're on a certain page - the corresponding submenu item will look different (i.e. bold, different color, etc.)... URL is --> IDC's Fundamentals for Newer Directors JS code I'm using -->
$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
})
View 16 Replies
View Related
Aug 19, 2011
I'm only adding this code to a few pages. I have the background changing over each linked hover, but is there anyway for me to allow one item remain that background color to indicate which page my visitors are currently on. If you can show me how to do one, I can figure out the rest. Code below.
[Code]..
View 2 Replies
View Related
Dec 16, 2005
I've a highly customized site and therefore am attempting my own rollover menu function.
For right now I'll give the basics.
I have two divs - a left nav and a right content div.
The left div houses the left navigation and the right content div... well - houses the content.
On mouseover of a left navigation image - I am changing the image to "highlight" and also would like to display a previously hidden div that contains the submenu items.
That is all fine and dandy. My problem is this. When I mouseout of the image - I lose the highlighting and the displayed submenu.
I'm trying to figure out how to make a "handler" of some sort that will cause the image rollover to stay when I move the mouse to go select a menu item in the submenu.
There is probably 5-6 px between the right edge of the image and the right content div (which is where the submenu ends up displaying)...
Can I not catch the mouse position or something or am I limiting myself using the mouseover/mouseout functions or grr... How can I do this?
View 4 Replies
View Related
