|
JavaScript - Stopping A Rotating Image Script From Looping
Hi,
I am working with a template I purchased that will loop a series of header images. I like to stop the image series from going back to the beginning once the series of images cycles through. For instance, if there were 3 images in the sequence; currently the script cycles through all 3 images and then starts from the beginning. I would like the script to stop on the last image (so that image stays displayed) and not start the sequence again from the beginning. I couldn't get any support for hacking this script from the developers. The php file that handles this operation attached below and i was told by the support forum I posted in that some Javascript skill would be needed, hence the reason for posting in this section of the forum. Thanks for looking Similar TutorialsOk so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance! Web Page Code Code: <html> <head> <title>slayeroffice | code | image cross fade redux</title> <link rel="stylesheet" type="text/css" href="xfade2_o.css"> <script type="text/javascript" src="xfade2.js"></script> </head> </div> <body background="id=imageContainer"> <div id="imageContainer"> <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg"> </div> </body> </html> Style Sheet 1 Code: #imageContainer {
height:309px;
}
#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}
Style Sheet 2 Code: #imageContainer {
position:relative;
margin:auto;
width:500px;
border:1px solid #000;
}
JavaScript Code: 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;
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,1000);
}
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,1000);
} 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) + ")";
}
}
Id like to create a rotating content for my homepage, using 4 images, all of which id like to be hyperlinked to there pages.
Hello, I use the following script for my rotating images with links and would like to know if there is a way to have the links display in a new window: Code: <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"]; slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"]; slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"]; slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"]; slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"]; slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"]; slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"]; slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"]; slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> Thanks for your help, Elbee Hi Guys, I am trying to create a game similar to this https://www.carchallenge2014.com/practice.php What I want to know is how can I run a script so that the script will be able to click on the hands and increase the score. Willing to pay for the help as well. Tks Hi, I am new to the forum so apologies if I have posted in wrong place ! I have used a script in my site but would like to get the .wav file to loop can anyone advise how to change the script to allow this, I am not very good with Javascript !!!! Here is the Javascript: <!-- Functions Code Block Start--> <script> /* Here we are creating two functions. The first to start a sound object playing and the second to stop a sound object from playing. */ // // This function, when called will play the sound object function EvalSoundPlay(soundobj) { var thissound= eval("document."+soundobj); thissound.Play(); } // This function, when called will stop the sound object function EvalSoundStop(soundobj) { var thissound= eval("document."+soundobj); thissound.Stop(); } </script> <!-- Functions Code Block End--> <!-- Here we are embedding the sound file/s. We give each embedded sound a 'name' that we can refer to in a JavaScript event call. ----- // Note: You can have multiple sounds embedded but remember that each sound requires a different 'name' and each would require its own set of play/pause buttons. --> <embed src="Smooth_Ambience.wav" autostart=false width=0 height=0 name="sound1" enablejavascript="true" /> <!-- This is an example of a second embedded sound. --> <embed src="jingle_bell_rock.mp3" autostart=false width=0 height=0 name="sound2" enablejavascript="true" /> And Here is my HTML <div class="musicPlayer"> <img src="../Assets/Images/Global/play-button.png" alt="music play button" width="40" height="40" onClick="EvalSoundPlay('sound1')"/><img src="../Assets/Images/Global/stop_button.png" alt="music stop button" width="40" height="40" onClick="EvalSoundStop('sound1')"/> </div><!-- End .musicPlayer --> Thanks, Nick C -edit - nevermind. mods plz delete.
Code: // Values for fading
var fadeBy = 10; //Amount to fade by
var fadeTime = 120; //Time in milliseconds to fade.
var ie_counter = 0; //Counter for crappy IE.
var fade_to = 70;
function fader(obj) {
var div = document.getElementById(obj);
//Object details
var opacity = div.style.opacity * 100 + fadeBy; //Fade (FF)
ie_counter = ie_counter + fadeBy;
var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
div.style.opacity = opacity / 100;
if ( ie_counter != fade_to || opacity != fade_to ) {
setTimeout( "fader('" + obj + "')", fadeTime );
}
}
The loop stops for firefox (good browser), but not for internet explorer for some reason :/ Apart for the fact that IE is crap why is this? as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye! Using javascript I've made a simple drag and drop interface for a backend component. Elements are dragged from a list at right into a main area. The elements are organized as a list (<ul><li>). Each has a mouse down listener which flicks on the visibility of a div (that mirrors the appearance of the named <li>) and then follows the mouse as long as it is needed. All is peachy... ... BUT THEN !!! ... As one might predict, the dragging action selects whatever content comes between the list item where the drag started and the placement where the drag ends. It's ugly and distracting; furthermore it changes my nice 'pointer' cursor to a 'text' cursor. I don't want to have to disable selecting for the entire page (nor do I know of a slick, elegant way to accomplish this) and I've tried all sorts of other hackery: cover up divs were especially fail-tastic. Hoping someone out there's cleverness gland can help me with this one. Excerpt from the site below to give an idea of layout: elements of the orange list at right get dragged into the main area in the middle I can't link to the site directly, sorry, I don't have a version ready that doesn't modify existing databases. Thanks, -S as I have no idea if this will boil down to a JS problem, or a CSS problem, I've posted this to both forums. If some enterprising moderator would like to consolidate them, have at ye! CSS thread link I wrote a form and a JavaScript to valid the form. I cannot figure out however how to stop the form from submitting if the form is invalid. [CODE] function validateForm() { if(""==document.test.custName.value) { alert("Please enter your name."); return false; } if(""==document.test.email.value) { alert("Please enter your email address."); return false; } if(""==document.test.custComment.value) { alert("Please enter your comment."); return false; } return true; } [CODE] I am using the following validation routine function savenotes() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = xmlhttp.responseText.split("~"); alert(result[0]) if (result[0] == "1") { // alert(result[1]); alert("should return true"); valid = true; } else { alert(result[1]); valid = false; } } } var str = "ok"; var mypost = "check.asp" // alert(mypost); xmlhttp.open("GET", mypost, true); xmlhttp.send(); return valid; } now where do I put the return so that it returns to my form if it's valid or not. It doesn't seem to work to me and the form is always submitted I am calling this with <form method=post action=admin.asp onsubmit="return savenotes()"> Im having some problem with stopping a function i run on loop using setInterval Code: $(document).ready(function(){
var Cycle = setInterval('cycle()', 3000);
/* ... some other functions here ... */
$('.Test').click(function(){
var ID = $(this).attr('ID');
clearInterval(Cycle);
/* ... Rest of this function ... */
if (ID == 'Home')
{
var Cycle = setInterval('cycle()', 3000);
}
console.log(ID);
});
});
When i click a link with the Test class it runs through the function but the loop never stops and im not sure why, cant anyone help me solve this? If you want to see the bits of JS i cut out just say but i dont think there relevant. EDIT: Seems to be the if (ID == 'Home') bit which is causing the problems even though when in the log it shows ID being the word 'Live'. Have i missed some stupid obvious thing ? Whenever i click I have a simple form that works via a suggested results system (http://www.brandspankingnew.net/arch...uggest_v2.html) While in firefox the go button is greyed out and enter doesn't submit the form in IE pressing the enter key submits the form. Is there any way with a bit of javascript to stop IE from doing a form submission on enter but only for this form (since there are many more on the site) PHP Code: <form action="index.php" method="GET" name="qsform" id="qsform"><input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /><input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /><input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" /></form> Hello everyone! First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old. Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one. Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked? Thanks alot for any help, Regards, Tom. I am having trouble with some JavaScript that is supposed to add some Google Analytics tracking parameters to "cross-domain" links (used to auto append tracking info across multiple domains as a way of sharing the Google cookie info). I have my code kind of working at this point except the default event (the normal href link) is not stopping. Instead my new event (the link plus Google parameters) fires off and is immediately replaced by the default (no parameters) event. For links that open in a new window, two windows open, one the standard link and one with the intended parameters. I am using a return false; on each link type but it is not doing anything. Any ideas how I can stop the default event? Code: Code: //Last Updated 5/10/12
/*Regex list of on-site domains, pipe and backslash delimited. */
var wa_onsiteDomains = /mydomain\.com|my2nddomain\.com|my3rddomain\.com|javascript/i;
/*Used to unobtrusivly add events to objects*/
function unobtrusiveAddEvent (element,event,fn) {
var old = (element[event]) ? element[event] : function () {};
element[event] = function () {fn(); old();};
}
function wa_crossDomainLink(i) {
return function () {
var thisLink = decodeURI(wa_links[i]);
var thisLinkTarget = wa_links[i].target;
if (typeof(_gaq) == "object") {
if(thisLinkTarget == "_blank") {
var wa_myTracker=_gat._getTrackerByName();
var wa_fullUrl = wa_myTracker._getLinkerUrl(thisLink);
window.open(wa_fullUrl); return false;
} else {
_gaq.push(['_link', thisLink]); return false;
}
}
};
}
var wa_links = document.links;
if ( wa_links ){
for(var i=0; i<wa_links.length; i++) {
if( wa_links[i].href.match(wa_onsiteDomains) && !wa_links[i].href.match(location.hostname)){
unobtrusiveAddEvent( wa_links[i], 'onclick' , wa_crossDomainLink(i));
}
}
}
Note, the code above resides in a separate js file and is called at the bottom of every page. Thanks! hi guys, i have a forum system that auto refreshes, but what that is doing is stopping my refresh container from refreshing to let people know if they have new inbox messages, im not very good with javascript and i cant figure out why its doing it. any help would be great, below are both of my codes. Forum refresh: Code: function keepRefreshed(){
if(set == 0){
refresher = setTimeout("keepRefreshed()", 60000);
allowButton = setTimeout("allowRefresh()", 3000);
set = 1;
} else {
refreshTopics();
}
}
function allowRefresh(){
document.replyForm.refreshButton.disabled = false;
}
function refreshTopics(hl){
if(set == 1){
clearTimeout(refresher);
clearTimeout(allowButton);
}
document.replyForm.refreshButton.disabled = false;
refresher = setTimeout("keepRefreshed()", 60000);
allowButton = setTimeout("allowRefresh()", 3000);
Refresh container: Code: $(window).ready(function() {
$("#responsecontainer").load("includes/inc-mess-jail.php", function(response, status, xhr) {
if (status == "error") {
$(this).html("Error: " + xhr.status + " " + xhr.statusText);
}
});
var refreshId = setInterval(function() {
$("#responsecontainer").load('includes/inc-mess-jail.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
as i said, any help would be great. thanks in advance. Dan Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript. Code: <noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">
var delay=6000
var curindex=0
var images=new Array()
images[0]="quote1.gif"
images[1]="quote2.gif"
images[2]="quote3.gif"
images[3]="quote4.gif"
images[4]="quote5.gif"
var preload=new Array()
for (n=0;n<images.length;n++)
{
preload[n]=new Image()
preload[n].src=images[n]
}
document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=images[curindex]
}
setInterval("rotateimage()",delay)
</script>
But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics. Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated. Thanks, Dell Hi I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc Code: <script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";
var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;
//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}
</script>
I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! |
|||||||