JavaScript - Onclick Stop Autoscroll

Help! I'm not very good with html/css or any web stuff, my friend wants a blogger for his videos that I'm currently working on.

Ive managed to create a splash page that features one video and an enter button. The only problem I am having is, one you click on 'wood + wires' it should go into the blog part of the page, which it does, but the sound of the video keeps playing.

Is there any way to make it stop? This is the blog http://brennygee.blogspot.com and this is the code I'm using for the splash page...

Please help!

<!-- Welcome page Start by http://bloggersentral.blogspot.com/ -->
<!-- HTML part -->
<div style="padding-top:0px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElem entById(&quot;Text88&quot;).style.display=&quot;none&quot;"><iframe src="http://player.vimeo.com/video/14285815?byline=0&amp;portrait=0&amp;color=ffffff" width="649" height="365" frameborder="0"></iframe></a>
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElem entById(&quot;Text88&quot;).style.display=&quot;none&quot;"><img src="http://i640.photobucket.com/albums/uu121/brennygee/WWENTER3.gif" /></a>
</div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:650px;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:100;top:-55px;}
#Text88 {background-color:#fff;border:solid 0px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:350;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:100%;filter:alpha(opacity=100);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:none;border:outset 3px none;color:#333;cursor:pointer;font: arial;font-size:25px;padding:10px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!-- Javascript part -->
<script type="text/javascript">
YourBlogUrl="http://brennygee.blogspot.com/"; //enter your blog url here
fromInternal=document.referrer.search(YourBlogUrl); //check come from where
getDarkLayer=document.getElementById("EPDarkLayer").style;
getText88=document.getElementById("Text88").style;
getHTML88=document.getElementById("HTML88").style;
if (fromInternal == -1)
{ //if visitor comes from external page
getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
getHTML88.display="block"; //show DarkLayer
getText88.display="block"; //show message
}
else
{ //if visitor comes from internal page
getHTML88.display="none"; //hide HTML gadget
getText88.display="none"; //hide message
}
</script>
<!-- Welcome page End -->

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.

Hi Guys,

Quick question, is there a way to stop a JavaScript from validating after a certain point of the code. I've been "googling" like crazy and cant find a solution.

I had to add a Checkbox validation last second and there was existing validation and I'm not good enough to alter all of it to reflect the checkbox part so what I did was I checked to see if at least one of the checkboxes was selected, if yes, do nothing and finish the rest of the validation. If no, prompt them with an error.

The problem is after it prompts them for an error, it continues to run the rest of the validation and at the end it allows the end user to print. I cannot allow the end user to print until everything is filled in. Here is my code:

Code:

function validateFields() {
	var fieldsToVerify = [
                ["PrincipalInvestigator"], 
		["ContactEmailAddress"],
		["RFAward"],
		["Sponsor"],
		["AwardTitle"], 
		["BudgetStartDate"], 
		["BudgetEndDate"], 
		["SectionII"],
		["ProjectRole"],
		["EmployeeName"], 
		["DatesofAppointment"],
		["EffortonProject"],
		["Date"],
		["PrintName"],
		["Date2"],
		["PrintName2"],
		
	];
	

		var emptyFields = [];
	var notFullFields = [];
	for (var i=0; i<fieldsToVerify.length; i++) {
		var f = this.getField(fieldsToVerify[i][0]);
		if (f==null) {
			console.println(fieldsToVerify[i][0] + " not found.");
			continue;
		}
		if (f.valueAsString=="") {
			emptyFields.push(f.name);
		} else if (fieldsToVerify[i].length>1 && f.valueAsString.length<fieldsToVerify[i][1]) {
			notFullFields.push([f.name,fieldsToVerify[i][1]]);
		}
	}
	
	for (var i in nonRequiredFieldsToVerify) {
		var f = this.getField(nonRequiredFieldsToVerify[i]);
		if (f==null) {
			console.println(nonRequiredFieldsToVerify[i] + " not found.");
			continue;
		}
		if (f.valueAsString!="" && f.valueAsString.length<f.charLimit) {
			notFullFields.push([f.name,f.charLimit]);
		}
	}


 if 
(this.getField("CheckBox1").value=="Yes" || this.getField("CheckBox2").value=="Yes" || this.getField("CheckBox3").value=="Yes" || this.getField("CheckBox4").value=="Yes" || this.getField("CheckBox5").value=="Yes" || this.getField("CheckBox6").value=="Yes" || this.getField("CheckBox7").value=="Yes")

{}

else

app.alert("Select a Checkbox in Section I before printing") 

	if (emptyFields.length==0 && notFullFields.length==0) {
		this.print();
	} else {
		var msg = "";
		if (emptyFields.length>0) {
			msg += "The following fields must be filled-in:\n";
			for (var i in emptyFields)
				msg += emptyFields[i]+"\n";
		}

		if (notFullFields.length>0) {
			if (msg!="") msg+="\n\n";
			msg += "The following fields are not filled-in completely:\n";
			for (var i in notFullFields)
				msg += notFullFields[i][0] + " (required length: " + notFullFields[i][1] + ")\n";
		}
		app.alert(msg,"");
	}
}

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
=========

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

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

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

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'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.

Ok I was making some error checking... and well for some reason its not liking me... anyone able to tell me where I went wrong?

Code:

<html>

<table border="1">
<tr>

<th>Product Name</th>
<th>Price</th>
<th>Discounts</th>
</tr>
<tr>
<td><a href = "http://www.foodfacts.info/blog/uploaded_images/tall-hamburger.jpg">Mega Burger</a>
</td>

<td>$3.99</td> <td>10%</td>
</tr>

<tr>
<td><a href = "http://www.spokesmanreview.com/media/photos/101507_burger.jpg">Bacon Cheese Burger</a></td>
<td>$3.50</td> <td>8%</td>
</tr>
<tr>
<td><a href = "http://www.treasurechestcc.com/graph/dqgrill.jpg">Grilled Chicken Sandwhich</a></td>
<td>$2.99</td><td>5%</td>
</tr>
<tr>
<td><a href = "http://www.hardrock.com.hk/images/HaystackChickenSalad.jpg">Fresh Chicken Salad</a></td>

<td>$4.00</td><td>20%</td>
</tr>
</table>

<br /><br />

<input type="button" value="Add to cart" onclick="add()" />
<input type="button" value="Check out" onclick="check()" />

<div id="result">&nbsp;</div>

<script type="text/javascript">

var cartItem = new Array();
var cartItemAmmount = new Array();
var counter  = 0;

function getItemInput() {
	
	var input = "";
	
	try {
	
		input = prompt("Please enter a product from out menu.","");
		
	}
	catch(e) {
	
		alert("Out of range");
		
	}
	
	return input;
	
}
function getAmmountInput() {
	
	var input = "";
	
	try {
	
		input = prompt("Please enter the ammount you want.","");
		
	}
	catch(e) {
	
		alert("Out of range");
		
	}
	
	return input;
	
}

function add() {

	do {

		cartItem[counter] = getItemInput();
	
	}while(cartItem[counter]=='' || cartItem[counter]==null || cartItem[counter]!="Mega Burger" || cartItem[counter]!="Bacon Cheese Burger" || cartItem[counter]!="Grilled Chicken Sandwhich" || cartItem[counter]!="Fresh Chicken Salad");
	
	do {

		cartItemAmmount[counter] = getAmmountInput();
	
	}while(cartItemAmmount[counter]=='' || cartItemAmmount[counter]==null && cartItemAmmount[counter]>=1 && cartItemAmmount[counter]<=99999999999999999999999999999999);

	counter++;
	
}

function check() {

	var total = cartItemAmmount;

	for(var i=0; i<cartItem.length; i++) {
	
		document.getElementById("result").innerHTML = '<table border="1"><tr><th>Product</th><th>Ammount</th></tr>';
		document.getElementById("result").innerHTML += "<tr><td>" + cartItem[i] + "</td><td>" + cartItemAmmount[i] + "</td></tr>";
		document.getElementById("result").innerHTML += '<tr><td colspan="2"> Total:' + total + "</td></tr>";
		document.getElementById("result").innerHTML += "</table>";
	
	}

}

</script>
</html>

Code:

	do {

		cartItem[counter] = getItemInput();
	
	}while(cartItem[counter]=='' || cartItem[counter]==null || cartItem[counter]!="Mega Burger" || cartItem[counter]!="Bacon Cheese Burger" || cartItem[counter]!="Grilled Chicken Sandwhich" || cartItem[counter]!="Fresh Chicken Salad");

Hi,

I am using javascript function for refreshing html page. I have used [window.location.reload(true);] method to reload page from server. This code works if i use it by using Link/button etc.
For Example: <input type="button" value="Refresh" onclick="window.location.reload(true);" />

But i want to refresh page when page loads.
For Example: <body onload = "window.location.reload(true);>
But this time, page reloads in an infinite loop. i don't know why...

I have also used following function (against body onLoad) to reload and then stop, but this also does'nt work.

function doLoad(){
var timeoutId = setTimeout( window.location.reload(true), 1000 );
window.clearTimeout(timeoutID);
}

Is there a way to stop reloading page after one refresh ?

Thanks...

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 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!