|
JavaScript - Stop Event-bubbling
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-->
Similar Tutorialshave a small div above (hover) a big one. I assign onmouseover and onmouseout events to the wrapper div. For image caption roll-over animation. The problem is when the mouse is above the caption itself, causing an unwanted result(probably event bubbling). And another problem: sometimes when you move mouse from outside to container you get a a triple debug sequence: (it should be just 2): -I am over- -I am out- -I am over- (firebug console) How to make it work? (no jquery) must work on all browsers. Demo: http://verror.netai.net/test.html The wanted result: When mouse moved over the image, only mouseover event should be raised once! When mouse moved out from the image, only the mouseout event should be raised. when mouse is over the captionm it should be treated as if the mouse is still on the image. (no flickering) Hi all, At work I have written a form builder which is all drag and drop. The issue I have is with ending the drop, I have no problems in IE. The drag is controlled by the onmousemove and onmouseup events for the document body. The trouble is, in Firefox, if the cursor is over a form item, then the onmouseup event doesn't fire and therefore the drag doesn't end. There is no problem with other items, other HTML items, tables, list, divs, then all bubble the event to the body. Anyone ever come across this, if so how did you get round it. Do I need to manually make form elements bubble in Firefox? Maybe I should just stick a div opacity 0 over the drag objects and make that call the body's onmouseup event. Any thoughts much appreciated, Cheers, Dale Hi all, I am having trouble with an onmouseout event on a div tag. I have read about bubbling a little, and put to use some information I found on the internet, but I still can't overcome a few problems. What I am trying to achieve is that the addStyleDiv function will only call the addStyle function if the user mouses out of the 'rollover' div. As the code stands, the addStyleDiv function is called when any element within the div is moused out (this is expected--bubbling) and the addStyleDiv function handles these instances properly. However, when mousing out of the rollover div, the rollover div is never the source element that triggers the onmouseout event. There is no empty space in the rollover div, that is, it is entirely filled with elements, so that could be part of the problem, but shouldn't bubbling cause the event to be triggered twice-once for the internal element and once for the div itself? I would also be interested in knowing if the method by which I am handling the events is reliable on most browsers or if someone with more expertise can offer a suggestion to increase cross browser compatibility. Thanks a million in advance. HTML Code: <div id="rollover" onmouseout="addStyleDiv(event,'feat_main');">
<ul id="featured">
<li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li>
<li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li>
<li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap™</a></li>
<li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a href="equipment/parts_washing/hurricane">Hurricane</a></li>
<li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li>
</ul>
<div id="flyout" >
<ul id="feat_main">
<h1>Midbrook</h1>
standard page no rollover
</ul>
<ul id = feat_medical>
<h1>Medical</h1>
</ul>
<ul id = feat_fabrication>
<h1>Fabrication</h1>
</ul>
<ul id = feat_capsnap>
<h1>CapSnap</h1>
</ul>
<ul id="feat_hurricane">
<h1>Hurricane</h1>
</ul>
<ul id = feat_media>
<h1>Media</h1>
</ul>
</div>
</div>
JS Code: function addStyleDiv(e, x)
{
if (!e) var e = window.event;
var tg=(window.event) ? e.srcelement : e.target;
if (tg.id != 'rollover')
{
alert('leaving '+tg.tagName + ' '+tg.id);
return;
}
/*These next two lines are NEVER reached no matter what*/
alert('It must have finally seen rollover');
addStyle('feat_main');
}
function addStyle(x){
removeAllStyle();
document.getElementById(x).style.display="block";
}
function removeAllStyle()
{
removeStyle('feat_main');
removeStyle('feat_hurricane');
removeStyle('feat_fabrication');
removeStyle('feat_capsnap');
removeStyle('feat_medical');
removeStyle('feat_media');
}
Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? 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. 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>
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,"");
}
}
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 --> 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 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 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! 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> 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> 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 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 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");
|
|||||||