JavaScript - Javascript Start / End Looping Help!

Hi,

I was wondering if there is anyone who could help me!

I'm creating a Javascript slideshow, I have 'back' & 'next' functions which work.

However, I'm not sure how to create a 'start' and 'stop' function (have to be separate functions), here is my current code below?

IS there a genius out there who can help?!



-------------------------------------------
<div id="slideshow">
<div class="mainimage">
<img height="300px" src="images/homemainimage.jpg" width="300px" height="300px" name="photoslider"/>
<script language="JavaScript1.1">
var photos=new Array()
var which=0
photos[0]="images/css3.svg"
photos[1]="images/cloudcomputing.png"
photos[2]="images/Rss.jpg"
photos[3]="images/html5.png"
photos[4]="images/jQuery.png"
photos[5]="images/firewall.png"
function swapImage(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
setTimeout("swapImage()",10000);
}
window.onload=swapImage;
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
}
</script>

<input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()">

<input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>

---------------------------------------------------------

Thanks in advance!!





Reply With Quote




01-20-2015, 09:56 PM #2
felgall View Profile View Forum Posts Visit Homepage

Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts

It would be easier if you used setInterval rather than setTimeout as then you just need to use clearInterval to stop and setInterval to restart.

Note also that both setTimeout and setInterval expect a function as their first parameter and not a string (except for IE3) and so the way you have it coded it has to eval() the string to convert it to a function.

Also the language attribute on the script tag was replaced by a type attribute about 15 years ago.

Also most browsers don't allow JavaScript to access window.status any more for security reasons.

1 down vote favorite


I do have the countdown script (see link below) to display the time between current time and the date given in real-time.

However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time.

I want to be able to set up my own start time and end time.

Here is what I have:

http://jsfiddle.net/BgEtE/

thank you for help

Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work.


window.onload = defineMarquee;

var timeID;

var marqueeTxt = new Array();

var marqueeOff = true;

function defineMarquee(){

var topValue = 0;

var allElems = document.getElementsByTagName("*");

for (var i=0; i < allElems.length; i++){
if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]);
}

for (i = 0; i < marqueeTxt.length; i++) {
if (marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top");
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
}

document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;

}

function startMarquee(){

if (marqueeOff == true) {
timeID = setInterval("moveMarquee()", 50);
marqueeOff = false;
}

}

function stopMarquee(){

clearInterval(timeID);
marqueeOff = true;

}

function moveMarquee(){

var topPos = 0;

for (i=0; i < marqueeTxt.length; i++){
if (marqueeTxt[i].getComputedStyle) {
topPos = parseInt(marqueeTxt[i].getPropertyValue("top"));
} else
if (marqueeTxt[i].currentStyle) {
topPos = parseInt(marqueeTxt[i].currentStyle("top"));
}

if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}

marqueeTxt[i].style.top = topPos + "px";

}
}

I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere.
E.g. I have following declaration in the head section of html:

<script language="javascript" type="text/javascript" src="java1.js"
</script>

My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as:

var firstname="Tom";

I put document.write statement to the head of html section as:

<script language="javascript" type="text/javascript" src="java1.js">
document.write;
</script>

....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding.

hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming

Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe

http://net.tutsplus.com/tutorials/ja...ck-navigation/

I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out.

The problem I have is that I need the images to be transparent initially when they are in the stack.

You can see the problem he http://bit.ly/cdelJu

Here is the javascript for this:

Code:

$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack2>img').toggle(function(){
		var vertical = 0;
		var horizontal = 90;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
			vertical = vertical + 40;
			horizontal = (horizontal+.75)*1.15;
		});
		$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingBottom: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingBottom: '35px'});
	});
	
	// Stacks additional animation
	$('.stack2 li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});

and here is the css:

Code:

/* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute;  }
.stack2 ul li img { border: 0;  }
.stack2 ul li span { display: none; }
.stack2 .openStack li span { 
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	right:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}

#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }

/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }

annd the html:

Code:

<div class="stack2">
		<img src="images/stacks/stack-down.png" alt="stack"/>
		<ul id="stack2">
	    <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li>
			<li><a href="#"><span>All&nbsp;Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
			<li><a href="example3.html"><span>Example&nbsp;3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
			<li><a href="example2.html"><span>Example&nbsp;2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
			<li><a href="index.html"><span>Example&nbsp;1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>			
		</ul>
</div>

Any help is greatly appreciated!

Ok so i want to code something like this
http://i45.tinypic.com/29y10s1.png

I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer.

Can anyone give me some references that might help me get started with coding this.
I have no clue where tos tart.

Hi guys I'm new to the forums here. I want to learn how to use Javascript and AJAX along with jquery or prototype to develop a dynamic website.

For example, I like how www.dropbox.com works. Everything has a transition, and you can drag and drop things around which is what I like.

Ultimately I hope to be able to develop a dynamic website with social networking elements.

I know my goals are lofty, but where should I get started and what should I learn. I have some cursory programming experience with visual basic, fortran and html. Any particular books that would help me learn. Ideally a book would have some programming "challenges" or small projects that would give me some experience.

Thanks

public static void main(String[] args){
int oddNo;
oddNo = getOdd();
}
public static int getOdd(){
int oddNo = 0;
Scanner sc = new Scanner(System.in);

while (oddNo % 2 == 0){
System.out.print("Enter an odd number : ");
oddNo = sc.nextInt();
System.out.println("Wrong input ! ");
}
if (oddNo % 2 !=0);
System.out.print("The odd number is : " + oddNo);
return oddNo;

}

however, the output:
Enter an odd number : 10
Wrong input !
Enter an odd number : 8
Wrong input !
Enter an odd number : 9
Wrong input ! (how to remove this?)
The odd number is : 9

I need to loop through an array like this one:

[1,2,4,8,8,16,32,64]

I don't really know how to do this, so a little guidance would be great.

Basically, I have 4 vars: a b c and d in the form of (ax + b)(cx + d)

inside the loop something like this:

i++
a = array[i]
If (a*b > Math.floor(a) && a*b < Math.ceil(a)){
then increment i again and do the loop again}
else{
break the loop and set leave a = array[i]
}

A code sample or something would be really nice (I don't know how to do the parts that are written out in text...

Thanks!
}

hi there,

I need to ask my users to input some numbers via textbox(or prompt) using a DELIMITER (,) between each digit. Then The program will display(list) when clicking a button.
for this I will use three columns
in the first column I have (2,4,6,9) to prompt.

in the second column I have (3,4,7,10) to prompt.

in the third columns I have (5,6,11,14) to prompt
so the first lines should look like:

2,3,5
2,3,6
2,3,11
....
....
.... and the last line :
9,10,14

there should be 4x4x4=64 rows/lines

How can we achieve this ?

Thanks in advance

hi to all... good day to u all...

i have a noob question

i followed this instruction
Code:

for (count=1; count<11; count++) {
     javascript code here
}

at the bottom of my page i did this
Code:

<script type="text/javascript">
for (counter=1; counter<11; counter++) {
	var followTrigger+counter+a = new Spry.Widget.Tooltip('following'+counter+'a', '#followMe'+counter+'a', {followMouse: true});
}
</script>

what im trying to do is to make multiple of this
Code:

<script type="text/javascript">
var followTrigger1a = new Spry.Widget.Tooltip('following1a', '#followMe1a', {followMouse: true});
var followTrigger2a = new Spry.Widget.Tooltip('following2a', '#followMe2a', {followMouse: true});
var followTrigger3a = new Spry.Widget.Tooltip('following3a', '#followMe3a', {followMouse: true});
var followTrigger4a = new Spry.Widget.Tooltip('following4a', '#followMe4a', {followMouse: true});
var followTrigger5a = new Spry.Widget.Tooltip('following5a', '#followMe5a', {followMouse: true});
var followTrigger6a = new Spry.Widget.Tooltip('following6a', '#followMe6a', {followMouse: true});
var followTrigger7a = new Spry.Widget.Tooltip('following7a', '#followMe7a', {followMouse: true});
var followTrigger8a = new Spry.Widget.Tooltip('following8a', '#followMe8a', {followMouse: true});
var followTrigger9a = new Spry.Widget.Tooltip('following9a', '#followMe9a', {followMouse: true});
var followTrigger10a = new Spry.Widget.Tooltip('following10a', '#followMe10a', {followMouse: true});
</script>

i dont know why it wont work... any help pls...

Hi,
Using this script
Code:

<script language="javascript" type="text/javascript">
function compareDate()
{
var start = document.beginDate.startdate.value;
var end = document.termDate.enddate.value;

var stDate = new Date(start);
var enDate = new Date(end);
var compDate = enDate - stDate;

if(compDate >= 0)
return true;
else
{
alert("Please correct-end date is before begin date.");
return false;
} 
}
</script>

Have two input boxes for Start Date and End Date. Both boxes have JQuery linked code for datepicker calendar. Want to ensure that end date is >= to start date. Want dates validated on losing focus from end date input (text) box - like this - I guess.
Code:

<input style="width: 70px" type="text" id="enddate" onblur="function compareDate();" />

The reason I am here is that, of course, what I have is not working. Appreciate your help.

Thanks - John

Maybe somone can help me out he

I am trying to validate two dates, to make sure one comes before another.

This is the code I have:

Code:

function validate_time(fielda, fieldb) {

if (fielda < fieldb ) {
    ErrFields.push("The start date must be before the end date");
    return false;
  } else {
    return true;
  }


}

and it is called using:
Code:

validate_time(startdate, enddate);

This code dosen't work at all, so I guess I am way off. If anyone knows what may be the problem or any suggestions I would apprecate it.

Thanks.

This forum give luck, I get the solution myself

regards.