|
JavaScript - Navigation Menu Current Page Background Color
Hi,
I created a simple menu: Code: <html>
<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>
<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>
<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>
<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>
<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>
</tr>
</tbody>
</table>
</body>
</html>
Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on. Regards Rain Lover Similar TutorialsHi 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;}
So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction. I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons. I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value. Code: <script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];
var clientData = [
"This is a place holder for the first set of text.", // index 1
"This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2
"This is a place holder for the third set of text.",
"This is a place holder for the fourth set of text.",
"This is a place holder for the fifth set of text.",
"This is a place holder for the sixth set of text.",
"This is a place holder for the first seventh of text.",
];
var currentMain = 0;
var currentMainT = 0;
function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
}
function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
document.getElementById("mainText").style.display = 'inline'
document.getElementById("gallery").style.color="#ff0000";
return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="../Assets/Images/pt_entry+hall2.jpg"
images[1]="../Assets/Images/pt_stair+hall.jpg"
images[2]="../Assets/Images_Revised/40_kitchen.jpg"
images[3]="../Assets/Images_Revised/40_stair.jpg"
images[4]="../Assets/Images_Revised/C_front2.jpg"
images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg"
images[7]="../Assets/Images_Revised/C_side.jpg"
images[8]="../Assets/Images_Revised/Y_combo.jpg"
images[9]="../Assets/Images_Revised/Y_window.jpg"
images[10]="../Assets/Images_Revised/V_stair.jpgg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
Code: <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p>
</td>
<td id="cell5 images"> </td>
</tr>
<tr>
<td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a></div>
Hi there I've created a nav bar for this site - http://web11.3essentials.com/~cp27358/ - 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" ; 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> thank you I've tried the following: Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location.href!= window.location.href ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
and Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location == location ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
I've tested the if statement and the set background code, using a button. I'm guessing it fails since there is no background when the script runs. Any ideas? Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. 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>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours. this is the html: Code:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
the css is as follows: Code:
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul ul ul ul li a {
margin-left: 60px; /* indent level 3 */
}
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
and finally the javascript: Code: var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";
//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;
//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
var url = location.href;
if (url.lastIndexOf("/") == (url.length-1)) {
url = url+menu_default_page;
}
if (url.lastIndexOf("?") >= 0) {
url = url.substring(0, url.lastIndexOf("?"));
}
if (url.lastIndexOf("#") >= 0) {
url = url.substring(0, url.lastIndexOf("#"));
}
menu_url = url;
var main = document.getElementById(menu_id);
if (!main) alert("No element with id '"+ menu_id +"' found");
menu_traverse(main);
}
/* Walks down the subtree and on the way back
sets properties.
returns bit set
1: set = element is a node, unset = element is a leaf
2: set = element contains the active node
4: set = element is the active A node
*/
function menu_traverse(element) {
var props = 0;
// walk down
for (var i=0; i<element.childNodes.length; i++) {
var child = element.childNodes[i];
props |= menu_traverse(child); // aggregate bits
}
// on the way back now
switch (element.tagName) {
case "UL":
props |= 1;
break;
case "LI":
var c1 = (props & 1) ?
((props & (2|4)) ? menu_open_class : menu_closed_class)
: menu_leaf_class;
element.className = element.className ? element.className+" "+c1 : c1;
if (props & 4) {
if (!(props & 2)) element.className += " "+menu_active_class;
props |= 2;
props &= 1 | 2; // reset bit 4
}
break;
case "A":
if (props & 2) break; // once is enough
var href = element.getAttribute("href");
if (menu_isSameUrl(menu_url, href)) props |= 4;
break;
}
return props;
}
//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
if (b[j] == "..") { j-=2; continue; }
if (a[i] == "..") { i-=2; continue; }
if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
if (! (a[i] == b[j])) return false;
i--;
j--;
}
return true;
}
New to this forum but hope this will explain my problem, any help is much appreciated! thanks!! Jesper I'm trying to learn to write javascript myself. So please, don't right anything for me, just steer me in the right direction. The way I have my my navigation set up is when the user clicks on a section of the main nav, the subnav displays beneath the header (see the pic more a visual idea). I want the the subnav for "Services" to be displayed on all pages that are listed under Services. Same thing for everything else on the nav bar. They way it's set up right now, the "about" submenu is displayed on every page. If the user clicks on "services" then that submenu displays. Just in case you need it, I'm posting the code for that. Like I said above, please don't write anything for me, just point me in the right direction. Code: /*Javascript to display Sub Menu */
function showAbout() {
if(subnav.style.display=="none") {
subnav.style.display="block";
services.style.display="none";
contact.style.display="none";;
partners.style.display="none";
}
else subnav.style.display="none";
}
function showServices() {
if(services.style.display=="none"){
services.style.display="block";
subnav.style.display="none";
contact.style.display="none";
partners.style.display="none";
}
else services.style.display="none";
}
function showContact() {
if(contact.style.display=="none"){
contact.style.display="block";
subnav.style.display="none";
services.style.display="none";
partners.style.display="none"
}
else contact.style.display="none";
}
function showPartners() {
if(partners.style.display=="none"){
partners.style.display="block";
subnav.style.display="none";
services.style.display="none";
contact.style.display="none";
}
else partners.style.display="none";
}
Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? Hi - I hope someone can help me out, I've pored over this problem for hours. The site is http://www.spacemodel.com. A doctype is set. The CSS for the navmenu is: Code:
#menu
{
background:#262626 url(images/menu_bg.gif) repeat-x top;
border-bottom:1px solid #230808;
margin:0 20px;
height: 49px;
overflow: hidden;
}
#menu .mleft{background: url(images/menu_side.gif) no-repeat left; width: 100%; height: 100%;}
#menu .mright{background: url(images/menu_side.gif) no-repeat right; width: 100%; height: 100%;}
#menu ul
{
width:960px;
height:100%;
overflow:hidden;
}
#menu ul li
{
list-style:none;
font-family:Arial, sans-serif;
font-weight: 700;
line-height: 49px;
color:#E6E6E6;
font-size:11px;
text-transform:uppercase;
text-align:center;
background:url(images/menu_side.gif) no-repeat right 0;
margin:0 0 0 25px;
padding: 0 25px 0 0;
}
#menu a:link,#menu a:visited,#menu a:active,#menu a:hover
{
color:#E6E6E6;
text-decoration:none;
}
Works fine in all other browsers and versions. Affects about 5% of visitors, but one is my client All help and insight appreciated! Laurie due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem. i'm not sure if the problem is in the Javascript, HTML, or CSS however here go when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should. here is the codes so you can have a look javascript: Code: <script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
HTML code Code: <table align="center" width="950px" border="0" cellpadding="0">
<tr>
<td height="50">
<div align="center">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="100%" height="48" align="center" bgcolor="#CF8D72">
<ul id="sddm"><li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<!-- travel guides drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Guides</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Africa</a>
<a href="#">Asia</a>
<a href="#">Australia</a>
<a href="#">Europe</a>
<a href="#">North America</a>
<a href="#">South America</a>
<a href="#">Vesas</a>
<a href="#">Carnas</a>
<a href="#">Driving Over Sea</a>
</div>
</li>
<!-- adventures drop menu -->
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Adventures</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">up & coming Adventures</a>
<a href="#">The Team</a>
<a href="#">the Journey</a>
<a href="#">pod casts</a>
<a href="#">Photo Gallery</a>
</div>
</li>
<!-- travel news drop menu -->
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Travel News</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Advice</a>
<a href="#">Destinations</a>
<a href="#">Holidays</a>
<a href="#">Cities</a>
<a href="#">Cruses</a>
<a href="#">Hotels</a>
<a href="#">Snow & skis</a>
<a href="#">Expats</a>
<a href="#">Watch Dog</a>
</div>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Chatroom</a></li>
<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
</tr>
</table>
</div></td>
and the CSS Code: #sddm
{
width: 99%;
margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
font-weight: bold;
z-index: 30
}
#sddm li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px;
}
#sddm li a
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 90px;
background: url(/images/navigation/chromebg4.gif) center center repeat-x;
color: #000000;
text-align: center;
text-decoration: none;
}
#sddm li a:hover
{
background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}
#sddm div
{
position:absolute;
top: 0;
border: 1px solid #E8BEBE;
border-bottom-width: 0;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
line-height:18px;
z-index:100;
background-color: white;
width: 140px;
visibility: hidden;
height: 296px;
}
#sddm div a
{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
}
#sddm div a:hover
{ background-color: #FFECEC;
color: #000000;}
now i am making a navigation menu using images by on mouse over function, i want to make a div that shows menu using css and javascript function plz find the attached image .. and try to help me Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
Can this be done? Change background color a row of depending on cell data on that row. e.g Items <table border="1"> <tr> <td><b>Cost</b></td> <td><b>Item</b></td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>34</td> <td>socks</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>24</td> <td>gloves</td> </tr> </table> Any pointers in the right direction please I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is! The line the body is onmouseover: Code: <p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>
The function is as follows Code: function switchElementColour(elementName){
var tryId = document.getElementById(elementName);
var yrf = tryId.style.backgroundColor;
alert(yrf);
}
I've tried a number of different variations, including: messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online ...but I keep coming back to the above. The result is a blank alert box (no errors, just blank). The element name is getting passed, because when I create an alert box in the function that looks like this: Code: alert(elementName); The result is an alert box that says metallic (no quotation marks). Au secours por favore? I have a table row that I would like to have change color when onMouseOver, and revert back onMouseOut. That works fine. Now, I have added an onClick event, which when they click I want the color to stay. Here is what I have. It works, sort of, that is it changes only the first row and not the one I clicked. How do I refer to the row that is clicked? Thanks! Code: <script type="text/javascript">
function check(x)
{
document.getElementById("rowColor").bgColor=x
}
</script>
<tr id="rowColor" onClick="check('#99FF99');" onMouseOver="this.bgColor='#99FF99';" onMouseOut="this.bgColor='#FFFFFF';"><div>
|
|||||||