JavaScript - Javascript Menu Slide Timeout Option!

I am having two problems with the script.

1. Sometimes when the page opens the slideout submenu shows on the left side of page, this always happens when my browser is full screen.

2. After clicking on 2 or more submenu links the submenu then overlaps the verticle black bar.

http://villagehomegoods.com

Appreciate any help.

Hi everyone,
I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything.
This is a perfect example of what I'm looking for:
www.mimeartist.com
Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature.
Thanks.

Forgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time.

I'm running a sales video and I do not want the download button to appear until the end.

Hope this makes sense??

Hi there,

I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time.
I looked over you FAQ section but I can't seem to figure it out.
Any help would be hugely appreciated.
Thank you so much.

HTML:
Quote:

<!-- Main content -->
<div id="content">
<div style="text-align:center">
<img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
</div>

<script type="text/javascript" src="slideshow.js"></script>
</div>




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li>
<div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div>
</li>
<li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li>
<li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li>
<li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li>
<li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li>
<li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li>
<li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li>
<li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li>


</ul>

</div>

<script type="text/javascript" src="navigation.js"></script>

<div id="footer">
<!-- Site navigation menu - footer -->
<div id="navcontainer_footer">
<ul>


<li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li>
<li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li>
<li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li>
</ul>

</div>

<script type="text/javascript" src="navigation_bottom.js"></script>
</div>
</div>
<!-- End Wrapper -->







slideshow.js

Quote:
var pause = 3000; // interval, in milliseconds, between transitions
var i = 0; // image counter
var pic = document.getElementById("pic"); // the <img> element in the HTML file

// define an array of images
var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" );

// preload the images
for (var j = 0; j < imgs.length; j++)
{
var obj = new Image();
obj.src = imgs[j];
}

// rotates between the images in the "imgs" array
function rotate()
{
pic.src = imgs[i];
if (i === (imgs.length -1))
{
i = 0;
}
else
{
i++;
}

setTimeout("rotate()", pause);
}

window.onload = rotate;



navigation_bottom.js
Quote:
// define an array of images
var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg");


// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer_footer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;



navigation.js

Quote:
// define an array of images
var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg");

// preload the images by iterating the array
for (var i = 0; i < navImgs.length; i++)
{
var obj = new Image();
obj.src = navImgs[i];
}

// initialize the onmouseover and onmouseout events
function init()
{
// get all the <img> tags in the HTML document as an array
var navContainer = document.getElementById("navcontainer");
var imgArray = navContainer.getElementsByTagName("img");
// var imgArray = document.getElementsByTagName("img");
// loop through the array and bind the onmouseout and onmouseover events
for (var i = 0; i < imgArray.length; i++)
{
var img = imgArray[i];
img.onmouseover = doMouseOver;
img.onmouseout = doMouseOut;
}
}

// define the function for the onmouseover event
function doMouseOver(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

// extract the digit only from the "id" attribute value and concatenate it
// to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg"
var id = img.id;
img.src = "images/buttons/" + id + ".jpg";
//img.src = "images/pic" + id.substring("pic".length) + ".jpg";
}

// define the function for the onmouseout event
function doMouseOut(e)
{
var img;

if (!e) // IE
{
e = window.event;
// get the <img> element for IE that triggered the event
img = e.srcElement;
}
else
{
// get the <img> element for FF that triggered the event
img = e.target;
}

//img.src = "images/button_home1.jpg";
var id = img.id;
img.src = "images/buttons/" + id + "1.jpg";
}

// call the "init" function to initialize the event binding
//window.onload = init;

I want to be able to display the whole contents of a text file containing 4 paragraphs of text, on a static web page, as soon as a video finishes playing on the page. The video is to be set to autorun as soon as the page loads in the browser.

The text file mentioned above, is to remain hidden when the page initially loads and the video is playing. Please I need your advice about what JavaScript code to use to achieve this effect, and where to place the code in the HTML code of the web page. I am new to website design and the use of JavaScript code.

I have seen examples of code used for the timed delay of the display of an image file, after a video has finished playing. I do not know how to apply this to the display of a text file.

I do not want to convert the whole text file into an image file, as I feel this would negatively affect the search engine optimisation of the page, if there is no text content on the page. Thank you.

hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!.
Example of how it works here Link
Code:

<head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;

function myback()
{
t += 786;

with(document.getElementById("contents"))
{
if (t > 0)
t = 0;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}

function myforward()
{
t -= 786;

with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
  <tr>
    <td rowspan="2">
      <div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
    <td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
  </tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>

Hope this is clear. Thanks.

I used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml
But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this?
thanks!!

Hy every one, i need help .I have a program made in visual c++ witch
detect motion and makes a file.jpg every time when detects something.
I would like to make a web pages witch makes the autorefresh with
the last image generated by this program.
How do i do that with javascript?
I think i must declare a golbal variable witch kepps the path to the most
younger file, or to make a list witch keeps all the images and sort it ascended but i don't know how to make this in java script.
Can enyone help me ?Thanks in advance

hi guys

I am looking at this template:
http://www.csstemplatesfree.org/prev...ero/index.html

I think the sliding at the top happens way too frequently. How can I slow it down? I think it would be better if the slides change once every 6 seconds.

i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?

I'm making an JS accordion and I just miss the final step.
That is - say:
I click menu 1, content 1 slides down (shows up).
After that, I click menu 2, content 2 slides down but
content 1 of menu 1 just display: none (abruptly disappers) but not slides up.

For the slide up effect, I wrote a function called cutHeight().
The cutHeight function works perfectly independently but not coherent with the accordion function.
Is there anything wrong with my scripts?

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=utf-8" />
<title>Untitled Document</title>
<script>

function accordion(openAccordionID){
	
	document.getElementById("content"+openAccordionID).style.display = 
	(document.getElementById("content"+openAccordionID).style.display == "none") 
	? "block" : "none" ;
	
	var sumAccordion;
	if(document.all){
		sumAccordion = document.body.getElementsByTagName("div").length/2;		
		}
	else {sumAccordion = document.getElementsByClassName("content").length;}
	
	for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){
		if(closeAccordionID == openAccordionID){continue;}
		document.getElementById("content"+closeAccordionID).style.display = "none";

		}

	addHeight(openAccordionID);
	cutHeight(closeAccordionID);
	
	}

	var h=0;
	var t;
	function addHeight(openAccordionID){
		clearInterval(t);
		document.getElementById("content"+openAccordionID).style.height = h+"px";
		h+=1;
		t = setInterval("addHeight('"+openAccordionID+"')",10);
		if(h==100){clearInterval(t);h=0;}
			}
	
	var T;
	function cutHeight(closeAccordionID){
		var h=100;
		clearInterval(T);
		document.getElementById("content"+closeAccordionID).style.height = h+"px";
		h-=1;
		T = setInterval("cutHeight('"+closeAccordionID+"')",10);
		if(h==0){clearInterval(T);}
			}

</script>
<style>
.menu {
	background-color: #6F6;
	width: 200px;
	height: 50px;}
.content {
	display: none;
	background-color: yellow;
	width: 200px;
	height:0px;
	overflow: hidden;}

</style>
</head>
<body>
<div onclick="accordion(1)" class="menu">Menu 1</div>
<div id="content1" class="content">Content 1</div>
<div onclick="accordion(2)" class="menu">Menu 2</div>
<div id="content2" class="content">Content 2</div>
<div onclick="accordion(3)" class="menu">Menu 3</div>
<div id="content3" class="content">Content 3</div>
</body>
</html>

Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right.

Here is the menu I'm using embedded in HTML:

Code:

<td width="40%" align="center"><font color="#000099"><b>
<select id="Aircraft">
 <option value="0">N148LH</option>
 <option value="1">N149LH</option>
 <option value="2">N150LH</option>
 <option value="3">N151LH</option>
 <option value="4">N152LH</option>
 <option value="5">N153LH</option>
 <option value="6">N155LH</option>
 <option value="7">N156LH</option>
 <option value="8">N157LH</option>
 <option value="9">N159LH</option>
 <option value="10">N162LH</option>
 <option value="11">N163LH</option>
</select></b></font></td>

Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working:

Code:

  

  var selectmenu=document.getElementById("Aircraft")
  
  if (Aircraft=0) {
  df.ew.value = 1569.41;
  df.ew_mom.value = 135909.2;
  }
  
  if (Aircraft=1) {
  df.ew.value = 1570.11;
  df.ew_mom.value = 135929.76;
  }

Any help is appreciated. If anyone is interested the page this is on is here.

Hello everybody,

I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below:
Code:

function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}

I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected".

Is this possible? If yes, how? Please help.

Thanks and regards
telmessos

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!