|
JavaScript - How Can I Highlight Clicked Menu Item?
Hi all,
I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state. Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element. Take a look at a basic example I've mocked up, and see the code below: CSS: Code: #navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:155px;
color:#fff;
text-decoration:none;
background:url(../images/tab.gif) no-repeat;
padding-top: 7px;
padding-right: 4px;
padding-bottom: 6px;
padding-left: 10px;
}
#navlist a:hover {
background-position:0 -29px;
color: #1e5ebd;
}
#navlist a:active {
background-position:0 -58px;
color:#1e5ebd;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>
</head>
<body>
<!-- Tour Box Begins Here -->
<div id="box">
<div id="titleBar"></div>
<div id="content">
<div id="menu">
<ul id="navlist">
<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
</ul>
</div>
<div id="videoDisplay">
<object id=flashMov1
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="233" height="156">
<param name="movie" value="sb-main.swf" />
<param name="quality" value="high" />
<param name="SCALE" value="exactfit" />
<embed src="sb-main.swf"
width="233" height="156" name=flashMov2 quality=high
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
</object>
</div>
</div>
</div>
<!-- Tour Box Ends Here -->
</body>
</html>
Similar TutorialsHi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. Hi, I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script> var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script> to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here. Any help will be much appreciated. Thank you. Hi I am doing validation on a form, but instead of throwing an alert on empty fields I want to highlight those fields indicating error. if all are empty, then i would like to show only 1 generalized error message "Pls. fill the highlighted textboxes.". how do i do this and thanks in advance. Referring to following link, I get no idea on what the highlight code do, I would like to retrieve the web page using direct URL coding without using function. Does anyone have any suggestions? Thanks in advance for any suggestions http://www.dailyfx.com.hk/calendar/index.html function setFilter(field, value){ var params = {}; params["type"] = "calendar"; params["date"] = "2011-12-06" $('#calTable').load("/inc/process.php", params, function(data){ $(this).html(gbBig5(data)); }); } Hi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? Hi guys, I wonder if anyone can help me here, got this below code for a page im working on, what you'll notice is that when you hover over 'order' a sub menu appears, what I need help on is this, how do I make the 'order' remain highlight while Im hovering over the sub menus. hope im making sense. thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test </title>
<style type="text/css">
#menu {width:800px; height:36px; text-align:left; background:url(red.gif);}
#menu li a {display:block; width:80px; margin-top:5px; height:24px; color:#000;
text-decoration:none; padding:0 10px 0 10px; font: bold 12px/22px verdana;}/* This sets the default properties*/
#menu li a:hover{padding:0 9px; border:1px solid #000; background:#444; color:#fff; line-height:24px}/* This sets the hover properties*/
#menu ul {width: 100%;margin: 0 75px auto;} /* This centres the menu 100px from the left*/
#menu li
{ margin: 0; padding: 0; list-style: none; float: left;}
#sddm div
{ position: absolute; visibility: hidden; margin: 0; background: #EAEBD8; border: 1px solid #5970B2}
#sddm div a {position: relative; display: block; margin: 0; width: auto; white-space: nowrap; text-align: left; text-decoration: none;
background: lightgrey; border-left:1px solid black; color: #2875DE;}
#sddm div a:hover{ background: #49A3FF; color: #FFF}
/* End navigation bar styling. */
/* This is just styling for this specific page. */
body { font: small/1.3 Arial, Helvetica, sans-serif; }
div { text-align:center; }
div#page { border:1px solid lightgrey; width:800px; margin:0 auto; padding:5px; text-align:left;}
div#header { border:2px solid lightgrey; width:796px; height:100px;}
div#content { border:2px solid lightgrey; width:796px; min-height:500px; _height:500px}
div#footer { border:2px solid red; width:750px; height:30px;}
</style>
<script type="text/javascript">
<!--
var timeout = 1;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
</head>
<body>
<div id="page">
<div id="header">Header</div>
<div id="menu">
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
I've Googled this without success. I have a webpage with an iframe which is on my same server. My parent page is a form which posts to the iframe page. The iframe page is a shell script that is used to telnet to routers and process commands and display the commands and responses. I need to have a highlight text option on the parent page for what is displayed in the iframe. Is this possible to do this with Javascript and if so, can you share that with me? Hey guys, So, I am using the highlight.js library to highlight posted code. It is working fine, however in IE it centers everything within my <pre><code>...</code></pre> area. This is because my body has the attribute: text-align: center; This is specifically because IE doesn't respond to: margin: 0 auto. So, how could I go about fixing this? Here is the code. Code: <html>
<head>
<link rel="stylesheet" href="highlight/styles/sunburst.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style type="text/css">
pre
{
overflow: auto;
}
p hover
{
position: relative;
width: 100%;
height: 80%;
z-index: 99;
}
body
{
margin: 0px;
text-align: center;
}
.spacer1
{
height: 7%;
}
.sub_title
{
text-align: center;
font-size: 1.7em;
font-family: monospace;
font-weight: bold;
}
.sub_title2
{
text-align: center;
font-size: 1.4em;
font-family: monospace;
font-weight: bold;
}
.text_norm
{
font-size: 1.2em;
font-family: monospace;
text-align: left;
}
.code_cont
{
width: 90%;
height: 40%;
background-color: #CCCCCC;
border: 1px solid #333333;
margin: 0 auto;
overflow: auto;
text-align: left;
}
#container
{
background-color: #999999;
width: 80%;
height: auto;
margin: 0 auto;
overflow: hidden;
padding-bottom: 5%;
}
#title_cont
{
background-color: #333333;
width: 100%;
height: 10%;
display: table;
text-align: center;
}
#title
{
color: #ffffff;
font-size: 2.4em;
font-family: monospace;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
#summary_cont
{
width: 90%;
margin: 0 auto;
}
#ex_cont
{
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="title_cont">
<span id="title">Dynamically Expanding Textarea Script</span>
</div>
<div id="summary_cont">
<div class="sub_title">SCRIPT SUMMARY</div>
<br />
<div id="summary_body" class="text_norm">This script adds a feature on all textarea's in a page allowing them
to dynamically change height according to their content. The script goes at the very bottom of the body. The
script first makes an array of all the textareas on the page, and then modify's the onfocus, onblur</div>
</div>
<div class="spacer1"></div>
<div class="sub_title2">Code(Goes at bottom of <body>)</div>
<pre class="code_cont">
<code>
<script type="text/javascript">
////////////////////////////////////
// Auto Expand Textarea Script //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and //
//returning to original size //
//relative to its conetnt. //
////////////////////////////////////
// Insert at end of body tag //
////////////////////////////////////
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
for(var i=0; i %lt; textareas.length; i++)
{
textareas[i].style.overflow = "visible";
}
}
else
{
//This function dynamically changes the height of the textarea in focus
function tAreaSniffer(tArea, prevVal)
{
//This makes sure the textarea doesn't change height if no changes
//have been detected recently.
var curVal = tArea.value;
if(curVal != prevVal)
{
tArea.style.height = 1 + "px";
tArea.style.height = tArea.scrollHeight + "px";
}
//This is a recursive call that will execute 50 milliseconds after here.
sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
}
//This cycles through every textarea on the page and assigns different properties
//and methods as can be seen below. Onfocus property means when a textarea has
//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
//sure the textarea never gets smaller than its originally intentded height.
for(var i=0; i < textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
textareas[i].style.overflow = "hidden";
textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
}
}
</script>
</code>
</pre>
<div class="spacer1"></div>
<div id="ex_cont">
<div class="sub_title2">Example</div>
<div class="text_norm">Below are several textareas. This is meant to demonstrate the script's universal
power, in the sense that it will modify each and every textarea object. To test the script, simply type,
or copy and paste text into the textareas. They should change accordingly.</div>
<div>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
</div>
</div>
</div>
<script type="text/javascript">
////////////////////////////////////
// Auto Expand Textarea Script //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and //
//returning to original size //
//relative to its conetnt. //
////////////////////////////////////
// Insert at end of body tag //
////////////////////////////////////
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
for(var i=0; i < textareas.length; i++)
{
textareas[i].style.overflow = "visible";
}
}
else
{
//This function dynamically changes the height of the textarea in focus
function tAreaSniffer(tArea, prevVal)
{
//This makes sure the textarea doesn't change height if no changes
//have been detected recently.
var curVal = tArea.value;
if(curVal != prevVal)
{
tArea.style.height = 1 + "px";
tArea.style.height = tArea.scrollHeight + "px";
}
//This is a recursive call that will execute 50 milliseconds after here.
sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
}
//This cycles through every textarea on the page and assigns different properties
//and methods as can be seen below. Onfocus property means when a textarea has
//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
//sure the textarea never gets smaller than its originally intentded height.
for(var i=0; i<textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
textareas[i].style.overflow = "hidden";
textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
}
}
</script>
</body>
</html>
I'm trying to highlight the row color when the input field is changed but get an error. Can someone please help. TRACY Code: <script type="text/javascript">
function toggle(trid){
var edited_row_bgcolor = '#FAEBD7';
var elm = document.getElementById(trid);
document.elm.style.background = edited_row_bgcolor;
}
</script>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr id="Child1">
<td width="50%">
<input onchange="toggle('Child1');" type="text" name="T1" size="20">
</td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
</table>
Hello, I have an image that contains two links; however, you cannot tell unless you happen to mouseover the right area and a message appears "Click here..." How do I highlight the area so that the user knows the links are there? This is the url: http://jaxpubliclibrary.org/progs/jpl/foote.html Thank you for your help, Elbee Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){
$(".nav.a").toggle("fast");
$(this).toggleClass("active");
});
This is my css; Code: .nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed;
padding: 0px 0px 0 830px;
}
.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
/* ----- dot effect -----*/
.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #484848;
bottom: 40px;
}
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
bottom: 38px;
left: 50%;
margin-left: 0px;
background: #484848;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #fff;
border-radius: 100%;
z-index:999;}
I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?
Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite ) Code: $('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows Code: <nav>
<li class="highlt">
<a href="index.php" class="home"><span>Home</span></a>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work Hi I have the code below. I am trying to get the radio button selector to highlight on mouseover and remain highlighted until focus is taken away from the highlighted selector. [CODE] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body > <div onmouseup="setBack(Radio1,1)" style="width:1000px; height:1000px"> <input id="Radio1" type="radio" name="RadioGroup" /><label id="lblRadio1" for="Radio1" title="Radio1" onmouseover="setBack(Radio1, 2)" >Radio1</label> <div onmouseup="setBack(Radio2, 1)" style="width:1000px; height:1000px"> <input id="Radio2" type="radio" name="RadioGroup" /><label id="lblRadio2" for="Radio2" title="Radio2" onmouseover="setBack(Radio2,2)">Radio2</label> </div> </div> <p> </p> <p> </p> <script type="text/javascript"> function setBack(rdo, area) { switch (area) { case 1: rdo.style.background = "White"; break; case 2: rdo.style.background = "Blue"; break; default: rdo.style.background = "White"; break; } } </script> </body> </html> [CODE] |
|||||||