JavaScript - Drop-down Menu Hidden Behind .js Slideshow Script - Solution?

Hi, i am currently using the below slideshow javascript on one location on a webpage.
http://www.javascriptkit.com/howto/show2.shtml

I have another image on the same webpage, that i would like to turn into a slideshow as well.

My problem is, that as soon as i put the "head" code for the second group of images, none of the slideshows work..

Basically, how can i get two slideshows on one page, using the same script?
If anyone can help me i would really appreciate

Thanks!
srhlb

Hi,

I need some help with a slideshow script. I have a client who wants a slideshow script similar to BR's site (http://bananarepublic.gap.com/ ). See the part where the big picture is that has the little gray box on the side with the date? My customer wants that to be a slideshow (where the picture is - so multiple pictures fading in/out) with that gray spot over it with the date on it (staying on the slideshow as the pictures move behind it). How would I go about doing this?

I am not an expert in writing Javascript, but I can edit javascript once it's written. If anyone has any tips or can help at all, it'd be much appreciated!

Thanks!

Hello,

I am trying to have my print button appear only once the script for my validation button has gone through without any errors. To do this, I used the following script in my validation button (I've truncated most of it since you get the point after two lines):

// hidden field
var lrcf = this.getField("LastRCFalse");

var ei = this.getField("Employee ID number");

if ( lrcf.value != ""){
var tempname = lrcf.value;
if (tempname == "Employee ID number")
{ei.setFocus();}}
else {
var ei = this.getField("Employee ID number");
if (ei.value != "" && (ei.value == "0000000" || ei.value < 1259)){
app.alert("Employee ID number, if entered, must be between 0001259 and 0999999")
ei.setFocus();}

else {
var city = this.getField("Effective date");
if (city.value == ""){
app.alert("Please enter Effective date")
city.setFocus();}
else {
var gmf = this.getField("Gender");
if (gmf.value != "M" && gmf.value != "F" ){
app.alert("Please select gender of employee")
gmf.setFocus();}

else {

// Making fields visible for printing
VisibleToPrint();
app.alert("Your form is ready to print. Please press the PRINT button on this form.",3)

The red part is where it all seems to be breaking apart. I've verified that none of the script before is incorrect and it all goes smoothly except that my print button does not appear afterwards. (The print button doesn't have any complicated script just a "execute a menu item" and is put as hidden in common properties so that no one can print before having gone through the verification).

Should I have created another print button which sits on top of the other one?

I am really new to this so any help would be greatly appreciated.

I have used the script I downloaded from here. I have 3 images to run through. Its all works, BUT!

My images are 3072 x 2034 in size, and thats what comes up on the page when loaded.

I set the var slideheight and width entries in the code for 500 and 500.

It seems to not read the var statement.

I would like to leave the orogical images as is, so when clicked on they load full size.

Any ideas would be great.

Hi All, I am very new at this and do not have any script editing skills.

I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited.

However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load.

The pictures URL is correct, thus my dilemma! I don't know what else to do....

Copy of script bellow

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg']
ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg']
ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg']
ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg']
ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="540px" //set to width of LARGEST image in your slideshow
var slideheight="412px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

Hello!

A client of mine wanted a picture slideshow like this website.

http://themeforest.net/item/dark-atl..._preview/50415

I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this.

Can anyone help?

I did find this:

http://sorgalla.com/jcarousel/

but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated

Kristen
http://www.twitter.com/kris10ized

i have two scripts using jquery 1) custom scrollbar content 2) fade in out slideshow. they both work individually well. but when i put them together on one page the customscrollbar doesnt work. here are sample scripts 1) http://jsfiddle.net/3PaNV/ 2) http://jsfiddle.net/BM3S3/1/ 3) http://jsfiddle.net/MP6Lt/

Thanks for any suggestions or help in advance

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

? how would i make it for a menu so you could press it and it would go down to click on a link.

Here is the JS I used for a drop down nav bar from DW8. I need the cursor to become a hand when you scroll over one of the menu items. Can someone tell me what and where to change this. File attached...

Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this:

HTML and Javascript included below.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">

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

</script>

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

<body>
<ul class="nav">

<li><a href="/home/">Home </a></li>
<li><a href="/products/">Products </a>

<ul>

<li><a href="/products/silverback/">Silverback </a></li>
<li><a href="/products/fontdeck/">Font Deck </a></li>

</ul>

</li>

<li><a href="/services/">Services </a>

<ul>

<li><a href="/services/design/">Design </a></li>
<li><a href="/services/development/">Development </a></li>
<li><a href="/services/ consultancy/">Consultancy </a></li>
</ul>

</li>

<li><a href="/contact/">Contact Us </a></li>

</ul>



</body>
</html>

Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links.
Thanks

i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.

Hi Everyone,
Could someone please help?
I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript.

Here's the page I'm having a bit of trouble with:

http://www.ambersupplies.co.uk/thomas/miscellaneous.htm

If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over.

Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to.

I'd be so very grateful for any help anyone can offer.

Graham