JavaScript - Possible To Stop Images Caching With Js?

Code:

function convertee(){
    value = document.inputFormee.argument.value;
    if (isNaN(value)){
        alert(value+' is not a valid entry'); return;
    }
    arg = (value/1.75975326);
    arg = (parseInt(arg*100)/100).toFixed(3);
    document.inputFormee.result.value = arg;
}

Any help much appreciated.

Saz.

Thanks to Old Pedant , in this forum, I am using this basic code for a slideshow he posted:

Code:

var slides = [
    [ "abc.jpg", 3000 ],
    [ "xyz.png", 5000 ],
    [ "foo.gif", 1500 ]
];
var curSlide = 0;

function nextSlide( )
{
    document.getElementById("thePicture").src = slides[curSlide][0].src;
    setTimeout( nextSlide, slides[curSlide][1] );
    curSlide = ( curSlide + 1 ) % slides.length;
}

function setUp( )
{
    for ( var s = 0; s < slides.length; ++s )
    {
        var image = new Image();
        image.src = slides[s];
        slides[s] = image;
    }
    nextSlide( );
}

window.onload = setUp;

which works just fine. But I can't find a way for it to play one round of the slides then stop. Could someone please help me with the right bit of code to stop the show?

I know the code is a bit basic (no fades etc) but I have been unable to find a similar slideshow product that gives variable time delays for each slide. I've googled endlessly but nothing could i find....

TIA

Richard
=========

Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout?

http://www.javascriptkit.com/script/....shtml#current

in IE9 Browser list of country names sorting on keys.
we are using Ajax
javascript:
Code:

var data= remoteRequest(url);

the data like
Code:

data={" 11":"Australia"," 14":"Bermuda"," CAN":"Canada"," 12":"France"," 15":"Germany"," IND":"India"," 16":"Russia"," 13":"South Africa"," 10":"UK"," USA":"United States"}
name_set= eval('('+data+')');

it fine in all browser
the array like
Code:

name_set[11]=Australia
name_set[14]=Bermuda
name_set[CAN]=Canada
name_set[12]=France
name_set[15]=Germany
name_set[IND]=India
name_set[16]=Russia
name_set[13]=South Africa
name_set[10]=UK
name_set[USA]=United States

but in the IE9 browser array keys sorting as like.
Code:

name_set[10]=UK
name_set[11]=Australia
name_set[12]=France
name_set[13]=South Africa
name_set[14]=Bermuda
name_set[15]=Germany
name_set[16]=Russia
name_set[CAN]=Canada
name_set[IND]=India
name_set[USA]=United States

so please help me, how to stop the array sorting in IE9.

thanks in Advance,
Venu

Is there anyway to stop the page 'jumping to the top' when using a link like the below?

Code:

<a href="#" onClick="arrangeCards();">blah</a>

.. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked.

Cheers!

I'm writing a flickr API driven match game like program right now and I'm running into a lot of issues where one button needs to fire off 5 actions but Js starts executing action 4 while 3 is still going and then I get some nasty bugs. Is there a technique that will help me solve these issues.

The first example is this piece of code:

this.cardFlippedImg.src = 'http://farm' + this.farm + '.static.flickr.com/' + this.server + '/' + this.id + '_' + this.secret +'_m.jpg';

//handle image centering
var cardFlippedPadding = (240 - this.cardFlippedImg.height) / 2;
cardFlippedPadding = Math.round(cardFlippedPadding);
this.flippedBackgroundPosition = 'center ' + cardFlippedPadding + 'px';
this.card.style.backgroundPosition = this.flippedBackgroundPosition;

This only works the second time the same photo is used because downloading the photo from flickr to get the height doesn't finish before the height is set.

this piece of code is the other:


for(j=0; j <= photoCount; j++){

gamePhotos[j].initialHide();
duplicates[j].initialHide();
}
$(startBtn).fadeOut(1000);

shuffleCards();


The shuffling action happens before the photos finish their flipping animation and it results in a mess.

Is there a Js programming technique I'm oblivious too that will allow me execute these types of scripts. I was thinking of setTimeout...but setting an MS value doesn't seem proper.

Thanks,
Chris

Hi all.
I have this simple javascript that initiates a flash player.
Code:

	<script type="text/javascript">
	function add_content(filedesc,filepath,whatarget) 
{
    
	var output = "" + filedesc + "</b><br />";
	output += "<object type='application/x-shockwave-flash' data='mp3player.swf'>";
    	output += "<param name='movie' value='mp3player.swf'>";
	output += "<param name='wmode' value='transparent'>";
    	output += "<param name='FlashVars' value='mp3=" + filepath + ">";
    	output += "</object></div>";
		output += "" + whatarget + "";
document.getElementById("" + whatarget + "").innerHTML = output;
}
</script>

and this takes care of the onclick event:
Code:

<a href="javascript:void;" onclick="javascript:add_content('Hello1','../m_music/omd.mp3','target1');">Omd</a><div id='target1'></div>
<a href="javascript:void;" onclick="javascript:add_content('Hello2','../m_music/blondie.mp3','target2');">blondie</a> <div id='target2'></div>

page and vars are going to be dynamic. My question is: if I press 'target1' it plays. When I press 'target2' second player plays in its div layer. How can I start one player while stopping another (I am guessing 'target1' must be hidden). I am going to have many mp3 files and I want each player to be in its rightful place. I've looked for functions, but I am not that experienced with JV syntax. Thank you.

Been given a task to edit a simple javascript slide show to have form buttons

This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle.

Quote:
<script type="text/javascript">

var hol_pics = new Array(); // Create Array Object
for (var i=0;i<9;i=i+1) {
hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects
hol_pics[i].src="harbour"+i+".jpg"; // Preload Images
}

i=0; // 'Remember' original image displayed by img tag
function next_photo() {
i=i+1;
if(i>8) i=0; // Increment image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i+1)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}

function back_photo() {
i=i-1;
if(i<0) i=8; // Decrement image index but keep in range 0 - 8
// above 2 lines can be replaced by alternative code: i=(i-1+9)%9;
document.images[0].src = hol_pics[i].src; // Display next image
}


//]]>
</script>
</head>

<body>
<h1>Basic Slide Show</h1>
<p>

<img src="harbour0.jpg" width="324" height="432" alt=></a>

<form action="">
<input type="button" value="Previous" name="button" onclick="back_photo()" />
<input type="button" value="Next" name="button" onclick="next_photo()" />
</form>

HI
I have a form that has some fields and inputs . I wrote some javascript code that if there was any problem with entered values , it shows the errors but when the user press submit button , the form submited before it had shown the problems .

How can halt it and showing the problems ?

TNX

Hey I am almost done with my API boot system and with the way I am calling new files it seems to double boot how can I stop this from happening as the page fully loads and that but the loader shown in the IE tab doesn't stop and it says '1 item remaining' and that never goes, both stay until you click anywhere on the document, so I was wondering if there is a way to stop this.

My code to call the js document in the file 'boot.js'.
Code:

var o = 'http://www.example.com/file.js';
document.write("<script src=\""+o+"\" type=\"text\/javascript\"><\/scr"+"ipt>");

And in index.html I have this script tag
Code:

<script type="text/javascript" src="http://www.example.com/boot.js"></script>

I am using joomla, and have a tabbed menu at the top, which has different articles embedded within. I have embedded a flash video inside each article. The problem is that if i play a video and then switch to the other tab (article) without pausing the video, the video keeps on playing. And if i try to play the video in the other article, then both videos start playing.

I want to stop the first video from playing as soon as I switch to the new tab. There are a lot of different files which are included in the page, so If I know where to place a particular code within the source of the final rendered webpage, I will be able to place it at the right point in a particular file.

thanks

the website link is: http://tinyurl.com/ycg4tcm

I am very new to Javascript - as in this is the first day I'm using it. I am using a code I got offline to fade three pictures together, but when it gets to the last image, it loops back to the first.

How do I code it so that when it gets to the last image, it stops?
Here is the code - sorry if its messy.

Javascript:

/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Please leave this notice intact.

Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html


*****/


window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so _init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);

imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;

setTimeout(so_xfade,3000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

}




HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<div class="container">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<title>Diamonds in the Rough</title>
</head>

<body>

<div id="container">
<img src="images/top2.jpg" usemap="#Map2"/>
<map name="Map2" id="Map2">
<area shape="rect" coords="69,56,145,84" href="invite.html" rel="nofollow" target="_self" alt="The Gala" />
<area shape="rect" coords="171,53,356,87" href="diamonds.html" rel="nofollow" target="_self" alt="Diamonds in the Rough" />
<area shape="rect" coords="377,52,498,87" href="mariama.html" rel="nofollow" target="_self" alt="Speaker Mariama Elliot" />
<area shape="rect" coords="525,52,636,86" href="contact.html" rel="nofollow" target="_self" alt="Get Involved" />
</map>

<div id="imageContainer">
<img src="images/index.jpg"/>
<img src="images/index2.jpg"/>
<img src="images/invite.jpg"/>

</div>



<div id="container2">
<img src="images/BOTTOM.jpg"/>
</div>


</body>
</html>



Thanks for your help!

Hey CodingFourm-ites!


Ive scoured the internet for scripts that make a <div> follow the mouse, and have found one that seems to work well. However, I want the <div> to stop moving when the CTRL or the SHIFT key is pressed, I dont care which. Hopefully, I can have a div that follows the mouse at an offset that contains some click-able items, so a menu is always by your mouse. Ive tried now more than a few times to put together a piece of code that can achieve this, but none have worked. Can somebody write a script that can achieve this, or point me in the right direction?

Thanks guys!

Current JS for mouse follow:

Code:

var divName = 'mouseFollow'; // div that is to follow the mouse
                       // (must be position:absolute)
var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;

The original code can be found at: http://javascript.about.com/library/blfollow2.htm

Hi I am new here, am having a terrible problem with animation build up.
have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place.

Wondering if anyone can help, would really appreciate it.
Following is the code:
Thank you


Code:

 
var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			if (!this.istopheader)
				$subul.css({left:0, top:this._dimensions.h})
			var $innerheader=$curobj.children('a').eq(0)
			$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
			$innerheader.append(
				'<img src="'+ droplinemenu.arrowimage.src
				+'" class="' + droplinemenu.arrowimage.classname
				+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						if (this.istopheader)
							$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
						if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
							$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
						$targetul.slideDown(droplinemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(droplinemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
	}) //end document.ready
}
}

I'm not really good with javascript but I seem to be able to understand it better since I was last on here.

Anyway I got a script off of quirksmode and tried to add some stuff to it. I'm trying to pass an Id to the script so I don't have to copy and paste the script for each drop category.
it works half the time or less. I changed the height of the div(sel) that contains span (links1). I think that the mouse out would trigger if I leave an an element inside of sel or sel it's self.

it looks like this. links1 is out side of sel. if I leave links or sel mouse out should trigger. What am I doing wrong?
____________
| sel |
____________
| links1 |
| |
--------------

Code:

function mouseEvent(id, e) {
   /* var element = document.getElementById(id)*/
	if (!e) e = window.event;
      var tg = (window.event) ? e.srcElement : e.target;
       if (tg.nodeName != 'DIV') return;
      var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
      while (reltg != tg && reltg.nodeName != 'BODY'){
      reltg= reltg.parentNode
     if (reltg== tg) return;
	}
	// Mouseout took place when mouse actually left layer
    // Handle event
    /* element.style.display='block'*/
     document.getElementById(id).className = 'close'
}

Code:

<div class="sel"  style="left:6%;" onclick="document.getElementById ('links1').className = 'pages'" onmouseout="mouseEvent('links1',event)"> 
&nbsp; &nbsp; &nbsp;<span class="hedderT" >Tutorials</span> <!--Page Name-->

&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
<img src="truenav.png" onclick="document.getElementById ('links1').className = 'pages'"/><!--page logo-->
<span id="links1" class="close"   > <!--link's span-->