|
JavaScript - Stop Code
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 --> Similar TutorialsHow 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,"");
}
}
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 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"> </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'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-->
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 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 <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? 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
}
}
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 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 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 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! Hi, I am using the code: Code: function ScrollFW(){
self.scrollBy(0,3)
}
function playScrollFW(){
bTmp=setInterval('ScrollFW()',5)
}
window.onload=playScrollFW
and it auto scrolls the page to the end and stops. I'd like the autoscrolling to stop once a user clicks anywhere on the page. Any ideas please? Thanks 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... 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> 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 |
|||||||