JavaScript - Navigation Menu Stays On Top Of Pictures

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

Hi,

I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side.

Ign.com do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement?

Any help wolf be great
Many thanks
Joe

I have a navigation menu.
When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place.

I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation.

Example Shown he http://www.courage.ca

Code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
        (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Hello everyone,

For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript:

Code:

$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.pMenu li").hoverIntent(config);
    
    $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");

});

My css that corresponds to this is:

Code:

.pMenu{
	margin:0;
	padding:0;
}

#health{
	width:10%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	border-right:none;
	width:100%;
	display:inline-block;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

Okay, I'll try to give as much detail on what I'm trying to do here and please correct me if this is not possible to do using javascript. Let's say you have 3 files:
document.html = the page where all this is displayed
menu.js = the script that will read the menufile.txt and parse it into a navigation menu
menufile.txt = content of the menu that will be parsed

The idea here is that when the website grows, I want a simple way of updating the menu for all the pages without going and doing it page by page.

The content of menufile.txt will look like this:
+Menu Item1 "Link1"
-SubMenu Item1 "Link2"
-SubMenu Item2 "Link3"
+Menu Item2 "Link4"

Each link corresponds to the item before it as you can see, and I'm using + to signify a main menu item while - signifies a submenu item. The logic I can see for doing this is reading the whole file into an array, then going through the array searching for + or - and breaking the line into pieces.

Take the first line for example:
+Menu Item1 "Link1"
This is broken into 3 variables:
+ -> is the what tells me if it's a main menu item or a sub menu item
Menu Item1 -> is the name i want put into a variable
"Link1" -> This is the link variable for the page associated with the item, this could be left blank if there is no link available to the corresponding item.

So to sum it up, I'm reading the file link by line, breaking it into 3 variables. But I am not that experienced with javascript and don't know how I can go about doing that or if it's even possible.

Thank you in advance for taking the time to read this. If you need more clarification on anything I mentioned please let me know, I'll be glad to elaborate.

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

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

hello! i am new here and i want help!
i have a problem with the scrollbar. i want to stay in a certain point after click in a onclick event. this is not happened and my scroll bar goes on the top of my page. what i can do?

my code is this:

<a><xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onClick" ><xsl:text>displaybody('</xsl:text><xsl:value-of select="fileDesc/sourceDesc/@n"/><xsl:text>')</xsl:text></xsl:attribute><div id="a" onclick="definesearchmode()" align="center"><b>click here.</b></div>
</a>

the function displaybody shows me what i want to see and the definesearchmode() has a code to hide the phrase (click here) when you click there.
thank you.

All,
I have the following code:

Code:

              
<div class="col-1">
    <div id="swap">
        <img src="images/gallery-img3-big.jpg" alt="" />
    </div>
</div>
<div class="col-2">
    <div class="list3">
       <ul>
          <li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated.

Thanks in advance.

All,
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

An example of a similar desired result is a link he
http://qrayg.com/experiment/hig/

Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

Thanks for any guidance you could provide me on this.

Thanks in advance!

I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU

Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

i found this code that refreshes the pictures:
Code:

<script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);


img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>

and to come up with the tables i made this code:

Code:

<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>

but if you see the home page he

http://celulardepot.squarespace.com

you can see that something is DEFINITLY wrong lol
please help me! =D

i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this,

also can the code be easy ish for example.

if show is 5pm till 6pm an image appears

if show is 6pm till 7pm an image appears

i know this is possible but there are so many codes out there,

thank you for your help

Hello

I have header made from 3 parts (becouse its not rectengular)
So 3 pictures build one header and 3 headers are changing every 10s.
I have some code but works only on 1 part, i dont know how to add other 2 is this posible?

Code:

<head>
<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->

</script>
</head>

<body>
<a href="javascript:gotoshow()"><img src="images/header_main.gif" name="slide" border=0></a>
	  <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/header_main.gif", "images/header_main_cv.gif", "images/header_main.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2
var whichlink=0
var whichimage=0

function slideit(){
  if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage

  if (whichimage<slideimages.length-1)
    whichimage++
  else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>

On my website, I have random logos appear on the home page as products that I recommend. I would like to make these logos into links to the website they are from, so that when one clicks on the picture, it directs you to the site, but I can't quite get it to work, and I know very little about Javascript (as you may know from my previous question about Javascript). If someone could help me crack the code, that would be great

Here's my current JS code:

Code:

<!--

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'http://i200.photobucket.com/albums/aa216/Jilldear/classicequinelogo-1.jpg'
theImages[1] = 'images/logo2.jpg'
theImages[2] = 'http://i200.photobucket.com/albums/aa216/Jilldear/pyranha-1.jpg'

// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->

And my current HTML code:

Code:

<script language="JavaScript">
<!--
showImage();
//-->
</script>

Sorry for being so green with JS