Javascript/JQuery Nav Button Highlighting

  • Java
  • Thread starter jeff1evesque
  • Start date
  • Tags
    Hep
In summary, the conversation is about writing code for a personal webpage to highlight navigation buttons to a gray color with white text when the cursor is over them. The speaker is using javascript mouseover and mouseout functions to achieve this, but is looking for a cleaner way to write the code. They mention an outline of an idea using current mouseover position and a separate "selected" class to change the text color, but are unsure of how to implement it. They also mention using CSS to change the button background color, but the text color does not change as specified.
  • #1
312
0
I am writing a small personal webpage (http://pubpages.unh.edu/~jmm42/JML/levesque.html# [Broken]), and am trying to write code so that when the cursor is over my navigation buttons, the buttons highlight to a gray color #404040: and the text color becomes white. I am trying to write this code in javascript using mouseover and mouseout functions. I have code that works, but it is rather long, and it is:

$('#button1').mouseover (function() {
$('a#button1').css('color', 'white');
});

$('#button1').mouseout (function() {
$('a#button1').css('color', '#404040');
});
/*
$('.button2').mouseover (function() {
$('a.button2').css('color', 'white');
});

$('.button2').mouseout (function() {
$('a.button2').css('color', '#404040');
});

$('.button3').mouseover (function() {
$('a.button3').css('color', 'white');
});

$('.button3').mouseout (function() {
$('a.button3').css('color', '#404040');
});

But there has to be a cleaner way to write this code. I have an outline of an idea, but don't know how to save current mouseover position (on navbuttonsn). Here is my outline of my idea:

/*
Idea for nav button highlight text/background on mouseOver
1. Get and save current nav button name
2. Strip to get the number value using substring
3. then use mouseover to highlight text for nav using correct identifier fro$
use mouseout to restore text color, and similarly for the background.

thisbutton =
document.getElementById('mouseovers').getElementsByTagName('.nav a');

alert('mouseover: ' +thisbutton);

$('.nav a').mouseover(function() {
$('a#button' +thisbutton).css('color', 'white');
});
*/
 
Last edited by a moderator:
Technology news on Phys.org
  • #2


Do you really need a mouseover? If all you're doing is changing the CSS of the button (since it's really an anchor tag), you could just use:

div.nav a:active { color: #FFFFFF; }
div.nav a:hover { color: #D0D0D0; }
div.nav a:visited,a:link { color: #404040; }

I see you're using a:hover, already, though-- And you're mentioning something about the state? So, maybe you've already got it figured out, or you're asking about how to keep the "currently selected" link a different color on the mouseout? If so, a separate "selected" class is pretty easy to add, with its own hover, visited, etc CSS properties...

DaveE
 
  • #3


Yeah I used CSS to get the buttons to highlight and stuff. But as the button background changes color upon the mouse being over it, the text doesn't change- even though I specified it to change to white (in the CSS: navbar.css):

div.nav a:hover {
color:white;
background:#404040;
}So, I am not sure- when I tried writing the code I specified above in javascript- it fixed the problem temporarily. For exaample if you click another button, then return and about to click about me- it works (since I left that portion of .js file intact). But then while it's active (upon click return from another button active state) and you hover over the button, the white text disappears- and just the gray background remains.Thanks,JL
 

1. What is Javascript/JQuery Nav Button Highlighting?

Javascript/JQuery Nav Button Highlighting is a web development technique used to visually indicate which navigation button or link is currently active or selected by the user. This can help improve the user experience and make it easier for users to navigate through a website.

2. How does it work?

Javascript/JQuery Nav Button Highlighting works by using Javascript and/or JQuery to add a specific class or style to the currently selected navigation button or link. This class or style will have a different appearance than the other buttons/links, making it stand out and indicating to the user that it is the active one.

3. Why is Javascript/JQuery Nav Button Highlighting important?

Javascript/JQuery Nav Button Highlighting is important because it can improve the overall user experience of a website. It helps users easily navigate through the website, reducing frustration and increasing engagement. It can also make the website look more visually appealing.

4. How can I implement Javascript/JQuery Nav Button Highlighting?

To implement Javascript/JQuery Nav Button Highlighting, you will need to have a basic understanding of Javascript and/or JQuery. You will need to add event listeners to the navigation buttons/links to detect when they are clicked, and then use Javascript/JQuery to add the appropriate class or style to the selected button/link. There are also many online tutorials and resources available to help guide you through the process.

5. Are there any alternatives to Javascript/JQuery Nav Button Highlighting?

Yes, there are other ways to achieve similar results, such as using CSS or server-side scripting languages. However, Javascript/JQuery Nav Button Highlighting is a popular and effective technique that is widely used in web development. It is also more dynamic and allows for more customization compared to other methods.

Suggested for: Javascript/JQuery Nav Button Highlighting

Replies
11
Views
1K
Replies
2
Views
936
Replies
9
Views
938
Replies
4
Views
424
Replies
11
Views
1K
Replies
4
Views
915
Replies
1
Views
973
Replies
5
Views
1K
Back
Top