|
JavaScript - Simple Slideshow Question
Hi everyone,
I am a newbie Javascript programmer. I have gotten better lately and am starting creating scripts from scratch to test my knowledge. I wrote the script below and needless to say, it does not work... yet. I know I am not far and I need someone's help to tweak my script and let me know what was wrong with. That would be greatly appreciated. Anyone? I have this div in the middle of a page which has an image. I want the image.src to switch to the next image every 3 seconds. Here's my html code: Code: <body> <div id="slideShow"> <img src="pic3.jpg" id="image" /> </div> </body> Here's my js code: Code: window.onload = initLoad;
function initLoad()
{
// Create a new image object
oImage = new Image;
// tie the object image object with your target id in your html code
oImage = document.getElementById("image");
//Create a new date object
var oCurrDate = new Date();
// Create a new time object
var oCurrentTime = oCurrDate.getSeconds();
//Loop through all images in the document
for(var i=0; i<document.images.length; i++)
{
//the current image remains so as long as 3 seconds or less have passed
while(oCurrentTime <= oCurrentTime + 3)
{
// if 3 seconds have not passed, your current picture remains on the screen
oImage.src = document.images[i].src;
}
}
}
Similar TutorialsHello, looking for simple javascript slideshow script, similar to this: http://www.jimex.co.jp/veh_details.php?id=4541 I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side. Has anyone got something like this? Thanks Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this: Code: <script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;
function fade(how)
{
if(how==0)
{
if(opacity>0)
{
opacity = opacity - 0.1;
}
else return;
}
else
{
if(opacity<1)
{
opacity = opacity + 0.1;
opacity_IE = opacity * 100;
}
else return;
}
document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
var temp = 'fade('+how+')';
setTimeout(temp, 1000);
}
function main_loop()
{
fade(0); //break_point 2
if(current == n_pics)
{
current = 1;
}
else
{
current = current + 1;
}
document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
fade(1);
main_loop();
}
</script>
</head>
<body onload="main_loop();">
fade(0) means to fade out, and fade(1) - to fade in. on IE i get 'Member Not found' on break_point 1 and too much recursion at breake_point 2 can you help me? I have been searching through the forums and have not been able to find exactly what I am looking for. I built my web site a while back using Flash. Right now I am trying to convert it to a non-Flash site. I am trying to duplicate my slideshow, with a caption, and forward/back button in javascript. If anyone can offer advice on how to do this I would greatly appreciate it. my current flash site: http://moparch.com/moparch/architecture/msbe/msbe.html Thanks in advance. P.S. I am brand new to javascript. My experience is limited to the few online tutorials that I have worked through. I was planning on using Dreamweaver (which I am already familiar with) to assemble the final site once I get the necessary javascript figured out. Was wondering if someone could help me quickly, i'm have a strange issue with a slideshow i have built in javascript. The slideshow works fine until you add any other image onto the page like a banner or anything. As soon as you do that when you click next on the slideshow that image or banner with change to the next picture instead of the desired image if that makes any sense... Would appreciate any help, thank you! here is the link to my practice website, so you can see what is going on pretty new to all of this.. http://dpetersen.net46.net/advancedw...l.html?agree=0 Is there a way to have the websites open in new windows? I've tried the standard ways, but script doesn't work when I change it. Does anyone know what and where in the script I can add for opening in new windows. Thank you The script is shown on this page: http://www.javascriptkit.com/script/cut181.shtml Hey guys, this should be a very easy fix for someone who knows Javascript (which I don't). The following code allows the class "ul.slideshow-nav li" to control the navigation of the slideshow, I want to adjust this script to allow "ul.slideshow-nav li" AND "ul.slideshow-nav2 li" to do this, possible? Code: $slideshow = {
context: false,
tabs: false,
timeout: 8000,
fx: 'scrollLeft',
slideSpeed: 900,
tabSpeed: 900,
init: function() {
this.context = $('#content-slideshow');
this.tabs = $('ul.slideshow-nav li', this.context);
this.tabs.remove();
this.startSlideshow();
},
startSlideshow: function() {
$('div.slideshow > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
pager: $('ul.slideshow-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.startTabs,
befo $slideshow.Tabactive,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pauseOnPagerHover: true,
pause: true
});
},
startTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
Tabactive: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$slideshow.init();
});
Hi I'm trying to get a slideshow working but the timings are all over the place. I can make it loop through once, neatly, but thereafter the timings seem to out - I have a loop set up to run five times. I think this is because the function is incrementing the delay values or something along those lines (I know there's a neater way to write this but I'm just starting out). Code: function slideWinder () {
var x = 1
for (var x = 1; x < 5; x++) {
$('#slideone').delay(0).fadeIn(0).delay(2000).fadeOut(400);
$('#slidetwo').delay(2000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidethree').delay(4000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidefour').delay(6000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidefive').delay(8000).fadeIn(400).delay(2000).fadeOut(400);
$('#slidesix').delay(10000).fadeIn(400).delay(2000).fadeOut(400);
}
}
I am using a show/hide script for my sites FAQs. This is the code: However, when you click on one of the Questions it brings you to the top of the page due to the <a href="#" How do I make it so it doesn't bring you to the top of the page? Code: <html>
<head>
<title>TEST TEMPLATE</title>
<script type="text/javascript">
function showHide(id)
{
var current = document.getElementById(id);
for ( var f = 1; f < 99999; ++f )
{
var div = document.getElementById("FAQ" + f);
if ( div == null ) return; // quit when we run out of FAQs
if ( div != current )
{
div.style.display = "none"; // zap all others
} else {
// toggle current one
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
}
return false; // IMPORTANT!
}
</script>
</head>
<body>
<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="#" onclick="return showHide('FAQ1')">FAQ one</a></li>
<li> <a href="#" onclick="return showHide('FAQ2')">FAQ two</a></li>
<li> <a href="#" onclick="return showHide('FAQ3')">FAQ three</a></li>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>
</body>
</html>
Hello, I am new to javascript. Below is the code that opens a new window when the user clicks on the button "Click here to see". But the code resides outside the <script></script>. As far as i know javascript codes have to be between these tags to work. How will the "window.open" statement work? Code: <form>
<input type="button" value="Click here to see" onclick="window.open('http://www.yahoo.com')" />
</form>
I have yet to have my ah-ha moment with Javascript but I think its coming soon. there are small things that seem to be baffling me and Im hoping posting to the forums to get help from people of limitless wisdom. What exactly does the "|" mean in this code? or I should say what does it do? Code: document.template.Aprod_string.value = document.template.Aprod_string.value + "|" + string_recode(Aprod_array) ; Hello guys, Im new to Javascript,please help me ya in my php code, I retrieve a ID value and assign to variable like below PHP Code: $id = $gettingdata['id']; and I want this id to be include together with javascript "insertsubcat" function like below Code: <a href="javascript:insertsubcat('.$ID.');"/>Click to insert this data</a>
in the javascript page, I dont know how to call back the id value and i try like code below but it doesnt work Code: function insertsubcat(data) {
var data = data.value;
.
.
.
.
}
Any idea? Thanks Azhan Malaysia Can someone please tell me why there is an error with my code (see in red below). I am told that 'process' is not an object or is null and I don't understand why or the implications with the click event which I am trying to capture and pass to my function: Javascript Code: Code: var USStates = new Array(50);
USStates[0] = "Alabama";
USStates[1] = "Alaska";
USStates[2] = "Arizona";
USStates[3] = "Arkansas";
USStates[4] = "California";
USStates[5] = "Colorado";
USStates[6] = "Connecticut";
USStates[7] = "Delaware";
USStates[8] = "Florida";
USStates[9] = "Georgia";
USStates[10] = "Hawaii";
USStates[11] = "Idaho";
USStates[12] = "Illinois";
USStates[13] = "Indiana";
USStates[14] = "Iowa";
...
var stateEntered = new Array(50);
stateEntered[0] = "1819";
stateEntered[1] = "1959";
stateEntered[2] = "1912";
stateEntered[3] = "1836";
stateEntered[4] = "1850";
stateEntered[5] = "1876";
stateEntered[6] = "1788";
stateEntered[7] = "1787";
stateEntered[8] = "1845";
stateEntered[9] = "1788";
...
var process = document.getElementById("search");
process.onclick = getStateDate;
function getStateDate()
{
var selectedState = document.getElementById("entry").value;
for (var i = 0; i < USStates.length; i++)
{
if (USStates[i] == selectedState)
{
break;
}
}
if (i < USStates.length)
{
alert(selectedState + " entered the Union in " + stateEntered[i] + ".");
} else
{
alert("Sorry, '" + selectedState + "' isn't a US State.");
}
}
HTML Code ( in case you need it): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Loops</title> <script type="text/javascript" src="loops.js"></script> </head> <body> <h2>Enter a US Sate in the field below and click the 'submit' button to get the date of entry in the union</h2> <form action="process.php"> <input type="text" id="entry" name="entry" /> <input type="button" id="search" name="search" value="submit" /> </form> </body> </html> Ok...this is gonna sound very stupid to you guys, but I don't get one part of this code. Code: function range(upto) {
var result = [];
for (var i = 0; i <= upto; i++)
result[i] = i;
return result;
}
show(range(4));
What does result[i]=i mean? I know it adds the value of i into the array, but how? Why couldn't you just write it as result[i] or result[] = i? I have the following code: Code: if (n==1 && g <=5)
{
sndPlayer1.URL ="Boy-a1.wav";
}
else if (n==1 && g >5)
{
sndPlayer1.URL ="Girl-a1.wav";
}
else if (n==2 && g <=5)
{
sndPlayer1.URL ="Boy-e1.wav";
}
else if (n==2 && g >5)
{
sndPlayer1.URL ="Girl-e1.wav";
}
else if (n==3 && g <=5)
{
sndPlayer1.URL ="Boy-i1.wav";
}
else if (n==3 && g >5)
{
sndPlayer1.URL ="Girl-i1.wav";
}
else if (n==4 && g <=5)
{
sndPlayer1.URL ="Boy-o1.wav";
}
else if (n==4 && g >5)
{
sndPlayer1.URL ="Girl-o1.wav";
}
else if (n==5 && g <=5)
{
sndPlayer1.URL ="Boy-u1.wav";
}
else if (n==5 && g >5)
{
sndPlayer1.URL ="Girl-u1.wav";
}
else if (n==6 && g <=5)
{
sndPlayer1.URL ="Boy-b1.wav";
}
else if (n==6 && g >5)
{
sndPlayer1.URL ="Girl-b1.wav";
}
else if (n==7 && g <=5)
{
sndPlayer1.URL ="Boy-b1.wav";
}
else if (n==7 && g >5)
{
sndPlayer1.URL ="Girl-b1.wav";
}
else if (n==8 && g <=5)
{
sndPlayer1.URL ="Boy-h1.wav";
}
else if (n==8 && g >5)
{
sndPlayer1.URL ="Girl-h1.wav";
}
else if (n==9 && g <=5)
{
sndPlayer1.URL ="Boy-t1.wav";
}
else if (n==9 && g >5)
{
sndPlayer1.URL ="Girl-t1.wav";
}
I was wondering what the best way to make a smaller simpler version of this code is? Would it be using a loop? If so can you help me with how to I have an alert I'm using over in Salesforce to remind sales reps to use a special terms document when quoting. Problem is, the alert is going off for ALL accounts, not just "Account1" and "Account2". Is this line incorrect in syntax or something? if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) Thanks all. This forum has been very helpful for me in the past so this was my first stop! Jeremy Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
var isstatus = "{!Opportunity.StageName}";
var acct = "{!Opportunity.Account}"
var msgg = "Please remember to use a special terms and conditions quote template when quoting this opportunity.";
if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
I want to Count the number of occurrences of character 't' in a string entered by the user (via prompt) and write the result to the web page. For example, if the user enters "Working with strings", you should write a message saying that the string contains 't' 2 times. I know it has something to do with charAt. Im just playing around with it trying to figure it out and got Code: var str = prompt(); document.write(str.charAt(1)); That doesnt count anything up obviously. i need to use a loop but im not sure how to apply a loop and charAt. I'm trying to not allow my users to enter in n/a in my form ex... "N/A" "n/A" "na" My code trips the alert every time no matter what is entered in the cell... Why is it doing that? Code: function appliance() {
if (document.ComplianceForm.Appliance.value=="n/a" || "N/A" || "n/A" || "N/a") {
alert("You cannot enter any variation of n/a in this cell.")
}
else {
return false;
};
}
Code: if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailvalue))
this is a code to validate an email address. My question is.. how do you call this type of validation? Those /^\w+([\.-]?\w+.. i don't really understand how they work. Is there a special term used to describe this? I want to learn how it works. I want to search for tutorials online but i cant think of any desriptive word to use as keyword for google search. I cant find helpful results. Please help. Thanks I'm building a webpage using javascript and iframes. Basically I have an iframe in the middle of the index.html page that links to another html page (let's call it iframe.html). My question is, is it possible to call a javascript function from iframe.html to control an object on index.html? If so, how do I do this? I'd like to be able to assign an image in iframe.html with the hyperlink of href="javascript:function()", where the function effects the CSS of a div on index.html. Thanks Hi there, a website I am trying to load in an Iframe uses this code to ensure that its window is the top window: Code: <script language="JavaScript"> if (window != top) top.location.href = location.href; </script> I was wondering is there any way possible of loading this page in an iframe or is this method of ensuring the page is on top not beatable? Many thanks, David. |
|||||||