|
JavaScript - How Do I Stop A Function?
How do I stop the displaymessage function when i ==1
Code: <script type="text/javascript">
var i =0;
function one()
{
document.getElementById('control').innerHTML = 1;
i =document.getElementById('control').innerHTML;
}
function zero()
{
document.getElementById('control').innerHTML = 0;
i =document.getElementById('control').innerHTML;
}
function displaymessage()
//if (i==0)//this causes problems
{
alert("Hello World!");
}
</script>
<body onclick="javascript: displaymessage();">
<div id='control' onmouseover="javascript: one();" onmouseout="javascript: zero()">0</div>
Similar TutorialsHi 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. JavaScript Code: window.addEvent('domready',function(){
//SAMPLE 8
var handles8_more = $$('#handles8_more span');
var nS8 = new noobSlide({
box: $('box8'),
interval: 5000,
autoPlay: true,
items: $$('#box8 h3'),
size: 900,
handles: $$('#handles8 span'),
handle_event: 'mouseenter',
addButtons: {
previous: $('prev8'),
play: $('play8'),
stop: $('stop8'),
playback: $('playback8'),
next: $('next8')
},
onWalk: function(currentItem,currentHandle){
//style for handles
$$(this.handles,handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
}
});
//walk to item 0 witouth fx
nS8.walk(0,false,true);
});
html Code: <div class="slider sample8"> <p class="buttons" id="handles8"> <span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span> </p> <div class="mask1"> <div id="box8"> <div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();"> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8">< Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> </div> All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again. I have some images rotating and I want to be able to stop the whole flow with another function. This function needs to be killed so it all disappears and I can choose which image gets to stay. jquery by the way. Code: function start() {
$("#t1").fadeIn('fast', function() {
$("#t1").fadeTo(2000, 1).slideUp('slow', function() {
$("#t2").slideDown('slow');
$("#t2").fadeTo(2000, 1).slideUp('slow', function() {
$("#t3").slideDown('slow');
$("#t3").fadeTo(2000, 1).slideUp('slow', function() {
$("#t4").slideDown('slow');
$("#t4").fadeTo(2000, 1).slideUp('slow', function() {
$("#t5").slideDown('slow');
$("#t5").fadeTo(2000, 1).slideUp('slow', function() {
$("#t1").slideDown('slow');
});
});
});
});
});
});
}
Is this possible? something like: function killstart(){ //some code that totally stops the start() function } 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("HTML88").style.display="none";document.getElem entById("Text88").style.display="none""><iframe src="http://player.vimeo.com/video/14285815?byline=0&portrait=0&color=ffffff" width="649" height="365" frameborder="0"></iframe></a> <a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElem entById("Text88").style.display="none""><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,"");
}
}
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 Hello, I run a webcam streaming site, and has a gallery of images saved every hour every 24 hours, the thumbnails dont seem to change much (?) so wondered if there was a way to stop caching using a javascript . . . script? This is what im dealing with: Code: <!-- timeshots --> <div id="Html4" style="position:absolute;overflow:auto;left:286px;top:557px;width:455px;height:180px;z-index:10"> <a href="http://server.gardencam.net/snapshots/00.jpg" rel="lightbox" title="GardenCam at 12:00am"><img src="http://server.gardencam.net/snapshots/00-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/01.jpg" rel="lightbox" title="GardenCam at 1:00am"><img src="http://server.gardencam.net/snapshots/01-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/02.jpg" rel="lightbox" title="GardenCam at 2:00am"><img src="http://server.gardencam.net/snapshots/02-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/03.jpg" rel="lightbox" title="GardenCam at 3:00am"><img src="http://server.gardencam.net/snapshots/03-thumbnail.jpg" /></a> <p> <a href="http://server.gardencam.net/snapshots/04.jpg" rel="lightbox" title="GardenCam at 4:00am"><img src="http://server.gardencam.net/snapshots/04-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/05.jpg" rel="lightbox" title="GardenCam at 5:00am"><img src="http://server.gardencam.net/snapshots/05-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/06.jpg" rel="lightbox" title="GardenCam at 6:00am"><img src="http://server.gardencam.net/snapshots/06-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/07.jpg" rel="lightbox" title="GardenCam at 7:00am"><img src="http://server.gardencam.net/snapshots/07-thumbnail.jpg" /></a> <p> <a href="http://server.gardencam.net/snapshots/08.jpg" rel="lightbox" title="GardenCam at 8:00am"><img src="http://server.gardencam.net/snapshots/08-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/09.jpg" rel="lightbox" title="GardenCam at 9:00am"><img src="http://server.gardencam.net/snapshots/09-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/10.jpg" rel="lightbox" title="GardenCam at 10:00am"><img src="http://server.gardencam.net/snapshots/10-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/11.jpg" rel="lightbox" title="GardenCam at 11:00am"><img src="http://server.gardencam.net/snapshots/11-thumbnail.jpg" /></a> <p> <a href="http://server.gardencam.net/snapshots/12.jpg" rel="lightbox" title="GardenCam at 12:00pm"><img src="http://server.gardencam.net/snapshots/12-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/13.jpg" rel="lightbox" title="GardenCam at 1:00pm"><img src="http://server.gardencam.net/snapshots/13-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/14.jpg" rel="lightbox" title="GardenCam at 2:00pm"><img src="http://server.gardencam.net/snapshots/14-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/15.jpg" rel="lightbox" title="GardenCam at 3:00pm"><img src="http://server.gardencam.net/snapshots/15-thumbnail.jpg" /></a> <p> <a href="http://server.gardencam.net/snapshots/16.jpg" rel="lightbox" title="GardenCam at 4:00pm"><img src="http://server.gardencam.net/snapshots/16-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/17.jpg" rel="lightbox" title="GardenCam at 5:00pm"><img src="http://server.gardencam.net/snapshots/17-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/18.jpg" rel="lightbox" title="GardenCam at 6:00pm"><img src="http://server.gardencam.net/snapshots/18-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/19.jpg" rel="lightbox" title="GardenCam at 7:00pm"><img src="http://server.gardencam.net/snapshots/19-thumbnail.jpg" /></a> <p> <a href="http://server.gardencam.net/snapshots/20.jpg" rel="lightbox" title="GardenCam at 8:00pm"><img src="http://server.gardencam.net/snapshots/20-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/21.jpg" rel="lightbox" title="GardenCam at 9:00pm"><img src="http://server.gardencam.net/snapshots/21-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/22.jpg" rel="lightbox" title="GardenCam at 10:00pm"><img src="http://server.gardencam.net/snapshots/22-thumbnail.jpg" /></a> <a href="http://server.gardencam.net/snapshots/23.jpg" rel="lightbox" title="GardenCam at 11:00pm"><img src="http://server.gardencam.net/snapshots/23-thumbnail.jpg" /></a></div> <!-- gardencamscript --> A few suggestions would be nice, or if you could modify the code slightly? Many thanks george 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)">
<span class="hedderT" >Tutorials</span> <!--Page Name-->
<img src="truenav.png" onclick="document.getElementById ('links1').className = 'pages'"/><!--page logo-->
<span id="links1" class="close" > <!--link's span-->
<input type="image" src="uploads/button_in_cart.gif" border="0" alt="Add to Cart" title=" Add to Cart " onclick="addtocart(1);"> in addtocart function I do some checking how can i change that if after some checking my variable valid=0 that it does not allow the user to submit the form? 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
}
}
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 ========= 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"> </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");
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! 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! 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> 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> 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'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 |
|||||||