JavaScript - How Can Javascript Grab The Active Url And Metadata?

I am fairly new to JavaScript and I have been searching and searching and I cannot get a clear cut answer to my question. Here is what I am trying to accomplish:

I want to gather the html source code from a particular sports score site and then store specifics of that resulting html (ie: the actual game scores) as strings, which I will then call in a windows sidebar gadget. Aside from actually getting the source code stored as a string, I would need to know how to then find a part of that string (ie: the text between "Last:" and "</") and store it as a separate variable.

From what I have seen online I need to be using XMLHttpRequest... but I am completely lost when it comes to this. Can someone please give me a hand. Thanks in advanced. Please be as specific as possible.

I have a data like the format below. How would I only extract the following data: meet, run into, encounter, run across, come across, see (The data after "Sense 1" and stops before the next "Sense #"?

Quote:
Synonyms (Grouped by Similarity of Meaning) of verb meet


Sense 1:
meet, run into, encounter, run across, come across, see


Sense 7:
meet, gather, assemble, forgather, foregather

interact


Sense 3:
converge, meet
Quote:
function Main(strText)
{
var strResult;
strResult = strText;
return strResult;
}

So, say I want to grab two twitter feeds from 2 people and put them together in one feed on a page (not using the built in twitter 'goodies'). How can I do this? I'm sure it's possible...

I've got this script working for grabbing and scrolling a website, and it's perfect; the only problem is I'd like to disable it when clicking a form (basically, not being able to drag scroll when clicking inside a form or input tag). This could be either by specifying a class or ID, whatever works best.

This is the script, in case the website goes down or something:

Code:

<script type="text/javascript">
document.onmousedown = function(){
  var e=arguments[0]||event;
  var x=zxcWWHS()[2]+e.clientX;
  var y=zxcWWHS()[3]+e.clientY;
  document.onmousemove=function(){
  var e=arguments[0]||event;
    window.scroll(x-e.clientX, y-e.clientY);
    return false;
  }
  document.onmouseup=function(){
    document.onmousemove=null;
  }
  return false;
}

function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 else if (document.getElementById("mailForm").onmousedown=null);
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
</script>

Also, would there be a way to enable grab scrolling just on the background? I mean, disabling it on images, text and any other element, and just leaving the empty spaces of the website with the ability to scroll.

Thanks a lot in advance.

Hey there,

I'm having difficulties writing a script that should do the following:

1. "visit"/connect to a website
2. search after rss feeds on the site
3. grab the rss link and make it useable for other scripts (array...)

If anybody could guide me on how to do that I would be grateful..

thanks!

I'm trying to get this to work... I have a menu which has a submenu which is activated on mouse over with javascript and that part works just fine, but... I want to be able to have the submenu showned if the mainmenu is clicked... So if, as in example below, the page home is selected, the submenu is activated untill trhe mouse is hoovering over the "Cars" link, and when the mouse goes off the Cars link again the home submenu is activated...

Hope this makes sense... Example below:
Code:

<script>
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<ul class="navbar">
    <li><a href="index.php?page=home">Home</a>
        <ul class="sub">
            <li><a href="index.php?page=account">Account</a></li>
            <li><a href="index.php?page=profile">Profile</a></li>
        </ul>
    </li>
    <li><a href="index.php?page=cars">Cars</a>
        <ul class="sub">
            <li><a href="index.php?page=smallcars">Small Cars</a></li>
            <li><a href="index.php?page=bigcars">Big Cars</a></li>
        </ul>
    </li>
</ul>

Hope this makes sense... Any help is appreciated...

Hi everyone! I'm making a tab menu with HTML, CSS and JavaScript.

I have this HTML:

<ul class="tabmenu">
<li><a href="javascript:void(0)" onclick="tabs('1');changeActiveStates(this)" id="link1">Informaci&oacute;n</a></li>
<li><a href="javascript:void(0)" onclick="tabs('2');changeActiveStates(this)" id="link2">Mapas</a></li>
<li><a href="javascript:void(0)" onclick="tabs('3');changeActiveStates(this)" id="link3">Fotos</a></li>
<li><a href="javascript:void(0)" onclick="tabs('4');changeActiveStates(this)" id="link4">C&oacute;mo llegar</a></li>
</ul>

Then I added some CSS to it (if you need to see it please tell).
And the JavaScript:

<script type="text/javascript">
function tbs(id){
return document.getElementById(id);
}

function tabsen(){
tbs("1").style.display = "none";
tbs("2").style.display = "";
tbs("3").style.display = "";
tbs("4").style.display = "";
}

function tabs(id) {
tabsen();
var e = tbs(id);
e.style.display = ( e.style.display == '' ) ? 'block' : '' ;
}

function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'active';
prevLink = ele.id;
}
</script>

The problem is: I don't know 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...

Can anybody help me?

Hi,

Please help.......

i am working on a project which has left side menu (dhtml and javascript)sliding menu with submenus and,in the right side,i have placed an empty div where i will be calling html files externally by storing all the html files in a folder called "Htmlfiles".

so say for eg: in the homepage.html, i have header,left menu,center white content area, and the footer and i will be calling all the html files into this homepage.html right side content area(into the div) using javascript function.

So when i click Home in the leftside menu.. the home.html which is stored in htmlfiles folder opens inside the homepage.html center area inside the blank div.

Now my problem is.. when i click the home button text.. i have given the css as a:active{
color: #ff3000;
} .. so when i click the home button text, the font color changes to red but when i click outside the menu or ie nearer to the menu or any other place inside the page.. the active color vanishes.. so that i am not able to guess in what page i am now.

So please guide me.. so that wherever i click on the page..the active color should stay on page unless i click the next button link.

And moreover, as i am loading the html files externally, when i click on that content which is loading in the right side div .. also, the active color vanishes and the original color comes for the font.

So please help me... how do i do this......

See http://forums.mathannotated.com/gui-...-layout-4.html.

When you click the "More" tab, the browser forgets the active tab styling and current tab contents; I don't want these to change - all I want to change on the click "More" tab action is the navigation tab. But my browser should maintain the styling for the last active tab and continue to display its corresponding tab contents. Yet it forgets these details when the user clicks "More".

In particular, when user navigates back and forth between the two tab sets, whatever was the last styled active tab remains styled as such. Browser should remember this.

Code:

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
	
	//Your additions
	
	//When page loads...
	$("#button_set_2").hide(); //Hide 2nd button set; added by YOU
	
	//On Click Event: hide 1st button set, show 2nd
	$("li#more_forward").click(function() {
	$("#button_set_1").hide();
	$("div#button_set_2").show();
	

	
	})
	
	//On Click Event: hide 2nd button set, show 1st again
	$("li#more_backward").click(function() {
	$("#button_set_2").hide();
	$("div#button_set_1").show();
	

	
	})
	

});

I'm new to javascript. Can someone help me with this menu?

Here is my html code:

<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Alaska Fur Gallery</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="JavaScript" src="js.js"></script>
<link rel="stylesheet" type="text/css" href="activemenu.css" />
<script src="jquery-activemenu.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$("a#fancybox").fancybox({
'titleShow' : false,
type:'image'
});

//show the footer
$("#footer").css("visibility","visible");

//initialize activeMenu
initMenu();
});

</script>




</head>
<body>


<div id="container">

<div id="header">
<a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a>
<div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div>
<div id="underlinemenu" class="ulmhead">
<ul>
<li><a href="index.html" style="border:0;">Home</a></li>
<li><a href="content2e96.html?id=431503">About</a></li>
<li><a href="content9bf1.html?id=431504">Services</a></li>
<li><a href="find_location.html">Locations</a></li>
<li><a href="ct.html">Contact Us</a></li>

</ul>
</div>
<div class="clear"></div>
<div id="topmenu">
<ul id="activeMenu">
<li style="top: 0; left:0px"><a href="shopa146.html?action=cat&amp;catID=20529" id="furs">Furs</a></li>
<li style="top: 0; left:66px"><a href="shop52df.html?action=cat&amp;catID=20541" id="leather">Leather & Fur</a></li>
<li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&amp;catID=20575" id="cashmere">Cashmere & Fur</a></li>
<li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&amp;catID=21239" id="outerwear">Outerwear</a></li>
<li style="top: 0; left:493px"><a href="shop0376.html?action=cat&amp;catID=20544" id="plus">Plus Sizes</a></li>
<li style="top: 0; left:604px"><a href="shop2060.html?action=cat&amp;catID=20580" id="accessories">Accessories</a></li>
</ul>
</div><!-- topmenu -->
</div><!-- header -->

<!--submenu divs-->
<div id="furs_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;">
<span>Women's Furs</span>
<li><a href="shopde5e.html?action=cat&amp;catID=20572">Mink</a></li>
<li><a href="shop2705.html?action=cat&amp;catID=20574">Sable</a></li>
<li><a href="shop5c0d.html?action=cat&amp;catID=20570">Chinchilla</a></li>
<li><a href="shopdfa7.html?action=cat&amp;catID=20568">Beaver</a></li>
<li><a href="shop04fa.html?action=cat&amp;catID=20571">Lynx</a></li>
<li><a href="shop65dc.html?action=cat&amp;catID=20569">Bobcat</a></li>
<li><a href="shopc9fc.html?action=cat&amp;catID=20622">Coyote</a></li>
<li><a href="shop65f8.html?action=cat&amp;catID=20539">Fox</a></li>
<li><a href="shop3276.html?action=cat&amp;catID=20573">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop2ef6.html?action=cat&amp;catID=20531">Mink</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20532">Sable</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20533">Chinchilla</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20534">Beaver</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20535">Lynx</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20536">Bobcat</a></li>
<li><a href="shopfc5b.html?action=cat&amp;catID=20618">Coyote</a></li>
<li><a href="shop88e4.html?action=cat&amp;catID=20537">Fox</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20540">Rabbit</a></li>
</ul>
</div>

<div id="leather_submenu">
<ul class="dropdown">
<li><a href="shop973d.html?action=cat&amp;catID=20542">Women's Leather & Fur</a></li>
<li><a href="shop4cc6.html?action=cat&amp;catID=20543" style="border:0;">Men's Leather & Fur</a></li>
</ul>
</div>

<div id="cashmere_submenu">
<ul class="dropdown">
<li><a href="shop3f01.html?action=cat&amp;catID=20576">Coats</a></li>
<li><a href="shopd4d8.html?action=cat&amp;catID=20577">Strollers</a></li>
<li><a href="shop7899.html?action=cat&amp;catID=20578">Jackets</a></li>
<li><a href="shopcba4.html?action=cat&amp;catID=20579" style="border:0;">Capes</a></li>
</ul>
</div>

<div id="plus_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;">
<span>Women's Furs</span>
<li><a href="shop2530.html?action=cat&amp;catID=20564">Mink</a></li>
<li><a href="shop807e.html?action=cat&amp;catID=20566">Sable</a></li>
<li><a href="shopbc8f.html?action=cat&amp;catID=20557">Chinchilla</a></li>
<li><a href="shopcb16.html?action=cat&amp;catID=20553">Beaver</a></li>
<li><a href="shop3cb8.html?action=cat&amp;catID=20561">Lynx</a></li>
<li><a href="shopb6e3.html?action=cat&amp;catID=20555">Bobcat</a></li>
<li><a href="shop1e6c.html?action=cat&amp;catID=20621">Coyote</a></li>
<li><a href="shopc08b.html?action=cat&amp;catID=20559">Fox</a></li>
<li><a href="shop0495.html?action=cat&amp;catID=20562">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop9b23.html?action=cat&amp;catID=20565">Mink</a></li>
<li><a href="shop10dc.html?action=cat&amp;catID=20567">Sable</a></li>
<li><a href="shop8154.html?action=cat&amp;catID=20556">Chinchilla</a></li>
<li><a href="shop0b63.html?action=cat&amp;catID=20551">Beaver</a></li>
<li><a href="shopa40f.html?action=cat&amp;catID=20560">Lynx</a></li>
<li><a href="shopd843.html?action=cat&amp;catID=20554">Bobcat</a></li>
<li><a href="shopa2c0.html?action=cat&amp;catID=20620">Coyote</a></li>
<li><a href="shopb0b2.html?action=cat&amp;catID=20558">Fox</a></li>
<li><a href="shopd3b0.html?action=cat&amp;catID=20563">Rabbit</a></li>
</ul>
<div class="clear"></div>
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;">
<span>Leather & Fur</span>
<li><a href="shop91d6.html?action=cat&amp;catID=20549">Women's Leather & Fur</a></li>
<li><a href="shop8605.html?action=cat&amp;catID=20548">Men's Leather & Fur</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;">
<li><a href="shope478.html?action=cat&amp;catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li>
</ul>
</div>

<div id="accessories_submenu">
<ul class="dropdown">
<li><a href="shop2f26.html?action=cat&amp;catID=20581">Fur Hats</a></li>
<li><a href="shop9989.html?action=cat&amp;catID=20582">Fur Headbands</a></li>
<li><a href="shop935f.html?action=cat&amp;catID=20583">Fur Earmuffs</a></li>
<li><a href="shopd2bf.html?action=cat&amp;catID=20584">Gloves with Fur</a></li>
<li><a href="shop2c08.html?action=cat&amp;catID=20585">Fur Boot Toppers</a></li>
<li><a href="shop9f4f.html?action=cat&amp;catID=20586">Fur Scarves & Flings</a></li>
<li><a href="shop3d06.html?action=cat&amp;catID=20587">Fur Blankets</a></li>
<li><a href="shop4bf4.html?action=cat&amp;catID=20588">Fur Handbags</a></li>
<li><a href="shop611a.html?action=cat&amp;catID=20589" style="border:0;">Mink Teddy Bears</a></li>
</ul>
</div>

Here is the javascript:
/*
jQuery ActiveMenu v1.0
Author: Miguel Sanchez
12/2009
*/


var timeouts = []; //for hiding the menu purposes


function initMenu(){
var offclass;
var menuAnchor;
$("#activeMenu").find("li").each(function() {

//get a reference to the anchor inside the li
menuAnchor = $(this).children(":first");

//get the name of the offclass
offclass = $(menuAnchor).attr("id")+"_off";

//assign off class to item
$(menuAnchor).addClass(offclass);

//assign hover event handler to main menu
$(menuAnchor).hover(
function (event) {
submenu_show(event.target);
},
function (event) {
submenu_hide(event.target);
}
&nbsp;

});

//assign hover events to submenu
$("div [id$=_submenu]").hover(
function (event) {
submenu_over(event.target);
},
function (event) {
submenu_out(event.target);
}
&nbsp;


}


function submenu_show(caller){
//hide all the submenus
$("div [id$=_submenu]").hide();

//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id")

//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";

//remove off class to item
$(caller).removeClass(offclass);

//assign on class to item
$(caller).addClass(onclass);

// get the id of the submenu
var targetSubMenuId = mainMenuItemId+"_submenu";
//show the submenu
$("#"+targetSubMenuId).slideDown("fast");



}

function submenu_hide(caller){

//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id");

//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";

//remove on class to item
$(caller).removeClass(onclass);

//assign off class to item
$(caller).addClass(offclass);

timeouts[mainMenuItemId] = setTimeout(function() {
$("#"+mainMenuItemId+"_submenu").slideUp("fast");
}, 200);

}

function submenu_over(caller){

//get a reference to the containing div
var subMenuDiv = $(caller).closest("div");
//show the div
$(subMenuDiv).show();

//get the id of the main menu
var mainMenuItemId = $(subMenuDiv).attr("id");
mainMenuItemId = mainMenuItemId.replace("_submenu","");

clearTimeout(timeouts[mainMenuItemId]);


//remove the "off" class
$("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off");
//add the "on" class
$("#"+mainMenuItemId).addClass(mainMenuItemId+"_on");
}


function submenu_out(caller){
//get a reference to the containing div
var subMenuDiv = $(caller).closest("div");
$(subMenuDiv).hide();
//get the id of the main menu
var menuAnchorId = $(subMenuDiv).attr("id");
menuAnchorId = menuAnchorId.replace("_submenu","");

//remove the "on" class
$("#"+menuAnchorId).removeClass(menuAnchorId+"_on");

//add the "off class
$("#"+menuAnchorId).addClass(menuAnchorId+"_off");
}

Here is the CSS styling:

/* graphical menu codes */

#topmenu ul {
list-style: none;
width: 738px;
height:52px;
padding:0;
margin: 0px;
position: absolute;
top:94px;
right:0;
overflow: hidden;

}

#topmenu li {
display: inline;
position: absolute;
}


#topmenu li a{
float: left;
font-size:11px;
line-height: 14px;
white-space: nowrap;
text-transform: uppercase;
text-align:center;
padding: 0 0 0 0;
text-indent:777px;
overflow:hidden;
height:52px;
}

#topmenu li a:hover {
color: #bceffa;
}
a.on {
color: #bceffa;
}

#topmenu a {
color: #ffffff;
text-decoration: none;

}
#topmenu a:hover {
color: #bceffa;
text-decoration: none;
}




.furs_off {
background: url("graphics/topmenu2.gif") 0 0 no-repeat;
width:66px;
}

.furs_on {
background: url("graphics/topmenu2.gif") 0 -52px no-repeat;
}

.leather_off {
background: url("graphics/topmenu2.gif") -66px 0 no-repeat;
width:144px;
}

.leather_on{
background: url("graphics/topmenu2.gif") -66px -52px no-repeat;
}

.cashmere_off {
background: url("graphics/topmenu2.gif") -210px 0 no-repeat;
width:165px;
}

.cashmere_on{
background: url("graphics/topmenu2.gif") -210px -52px no-repeat;
}

.outerwear_off {
background: url("graphics/topmenu2.gif") -374px 0 no-repeat;
width:119px;
}

.outerwear_on{
background: url("graphics/topmenu2.gif") -374px -52px no-repeat;
}

.plus_off {
background: url("graphics/topmenu2.gif") -493px 0 no-repeat;
width:111px;
}

.plus_on{
background: url("graphics/topmenu2.gif") -493px -52px no-repeat;
}

.accessories_off {
background: url("graphics/topmenu2.gif") -604px 0 no-repeat;
width:133px;
}

.accessories_on{
background: url("graphics/topmenu2.gif") -604px -52px no-repeat;
}





ul.dropdown {
list-style: none;
margin: 0;
padding: 0;
border: none;
z-index:10000;
position:relative;
}

ul.dropdown li span {
display: block;
_display:inline-block;
text-decoration: none;
}
ul.dropdown li a {
display: block;
position: relative;
_display:inline-block; /* so IE doesn't add space between elements */
_width: 83%; /* makes block fill width in IE */
padding: 6px 10px 6px 10px;
font-size: 13px;
color: #ffffff;
text-decoration: none;
border-bottom:1px solid #b78833;

}


ul.dropdown li a:hover{
color: #ffffff;
background: #e3a73a;
text-decoration: none;
}

.dropdown span{
font-weight:bold;
color:#64450f;
margin:0 0 0 10px;
}


#furs_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 260px;
display: none;
z-index:1000;
}

#leather_submenu {
width:166px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 325px;
display: none;
z-index:1000;
}

#cashmere_submenu {
width:192px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 470px;
display: none;
z-index:1000;
}

#plus_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 698px;
display: none;
z-index:1000;
}

#accessories_submenu {
width:158px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 840px;
display: none;
z-index:1000;
}

Hi all,

I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS.

Can someone point me in the right direction as far as documentation?

Thanks a bunch!

Hi everyone I have some problems with assigning a class to my included navagation menu.
I would like to give the last clicked menu item a active class so I can style it but i have no clue how that works with javascript. as you can see i have three files two pages which included the same menu.
Now I would like to set the first page to active because it would be the page the would start. but then when someone clicks the second page it should become inactive and set the active class to the secone link.
if that makes sens.

Is this possible with javascript?


my pages:

Page 1
PHP Code:
<HTML>
<BODY>
<?php include "menu.php" ?>
PAGE
</BODY>
</HTML>

Page 2
PHP Code:
<HTML>
<BODY>
<?php include "menu.php" ?>
PAGE 2
</BODY>
</HTML>

menu.php
PHP Code:

<a href="page.php" class="active">page1</a>
<a href="page2.php" class="noactive">Page2</a> 

Hi..

I don't know if my idea is possible and if how can I do that.

I have functions for button onclick.

I have 3 buttons and I want to change the color of my button if it is active

here is my code
Code:

<script type="text/javascript">
//=========display parameter settings==========//
function display_PS(){
    document.loading_kanban.action="ParameterSettings.php";
    document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(){
    document.loading_kanban.action="kanban_report.php";
    document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR){
    document.loading_kanban.action="StockRequisition.php";
    document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()"> 
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>

Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is.

Thank you

Hi,

Here's the slideshow embed code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head> 
<body> 
<div id="large"></div>  
<div id="thumbs"> 
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">  
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';"> 
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div> 
</body>
</html>

I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated!

Best regards
Mike

I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu.
What needs to be added to, or modify if I would like to use it also for "nav2" on the same page?

Thank you, Peter


window.onload=function()
{
setPage();
}

function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for (var i=0; i < arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}

function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("nav") !=null )
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}