JavaScript - Js Previous And Next Page Function

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now

Hi there. I am sort of a mid-level javascripter, and I'm wondering if anyone would know a code I could use to make these previous/next buttons active. The reason I can't figure it out is that the thumbnails below currently control which image appears above, and I'd like the previous/next to also do so, but in the relative order of the corresponding thumbnails. I'd image there would be some way or specifying the current image, and adding either +1 or -1 or something along those lines? any help would be greatly appreciated. Page link below.

http://www.annaleithauser.com/rosema...e/country.html

Alright, this is going to sound strange, but bear with me here...

Code:

<input type="text" name="_F0827U" size="015" maxlength="015"> &nbsp; <input type="submit" class="cmdkey" name="_K040827" value="...">

Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation). Is it posable, using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals, say using an onClick() event on either of the elements?

I am trying to display testimonials on my website in an iframe. This way I can utilize the scrolling feature if needed and keep the page from changing sizes due to the length of the testimonial. I can also change the testimonials order and content easily.

I am trying to make a "next" and "previous" button that will sit on the main page (not in the iframe) and cycle through the testimonials. However I am having trouble with this as I am trying to use an array.

This is my current code for the Next button. The idea is to check to see if the testimonial is on the last document. If so display the first testimonial in the array. "Else" change to the next testimonial in the array.

Code:

var myTests=new Array();
	myTests[0]="test001.html";       
	myTests[1]="test002.html"; 
	myTests[2]="test003.html"; 
var numTests = myTests.length;
var curTests = 0

function nextTests()
{
	if (curTest <= numTests)						
		document.getElementById("testFrame").src=myTests(1);
	else
		document.getElementById("testFrame").src=myTests[0];
}

Then I am using a simple button to call the function "onclick"
Code:

<button type="button" onclick="nextTests()">next</button>

PS I am a beginner at this so I apologize if I am making silly mistakes. However, I would really appreciate any direction you can give me! Thanks so much!

Hi, I'm using the following javascript to allow users to navigate through my various picture galleries on my blog http://exp212.blogspot.com/

Quote:
<script type="text/javascript">
function show(what)
{var find = "Img" + what.id.substring(4); for ( var i = 1; i < 99999; ++i )
{var cur = "Img" + i; var img = document.getElementById(cur); if ( img == null ) return; img.style.display = ( find == cur ) ? "block" : "none"; }}
</script>

<div id="pix">

<img id="Img1" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7oLQJNII/AAAAAAAABpI/fJMx9Gp0AWU/s320/night1.jpg" style="display: block;" />
<img id="Img2" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7o5484JI/AAAAAAAABpM/1ZMn1wRbAB8/s320/night2.jpg" />
<img id="Img3" src="http://3.bp.blogspot.com/_P6fRcsNpSXY/S8Y7pSrB94I/AAAAAAAABpQ/KKIQQH0uJz4/s320/night3.jpg" />
<img id="Img4" src="http://1.bp.blogspot.com/_P6fRcsNpSXY/S8Y7p7eUA6I/AAAAAAAABpU/MMy7MrIvZcg/s320/night4.jpg" />
<img id="Img5" src="http://2.bp.blogspot.com/_P6fRcsNpSXY/S8Y7qtRJVnI/AAAAAAAABpY/zFMRSGb8Qhk/s320/night5.jpg" /></div>

<div id="names">

<div id="Name1" onmouseover="show(this);">001</div>
<div id="Name2" onmouseover="show(this);">002</div>
<div id="Name3" onmouseover="show(this);">003</div>
<div id="Name4" onmouseover="show(this);">004</div>
<div id="Name5" onmouseover="show(this);">005</div>
</div>


As you can see (if you visit the blog) each picture is brought up by hovering over the next number in the sequence, but in order to save space I'd like to change this so it uses a simple 'Next' and 'Previous' function. How would I adapt the above javascript in order to achieve this?

Thank you in advance.

Code:

<script type="text/javascript" src="external.php?type=js"></script> 
<script language="" type="text/javascript">
<!--
for (x = 0; x < 10; x++)
{
document.writeln("<a href=\"showthread.php?t="+threads[x].threadid+"\">"+threads[x].title+"</a>, ");
}
//-->
</script>

My code will display 10 posts, however at the very end it will display an extra ", " which bugs me. How can I strip those last two characters.

Code:

<html>
<head>
<script language="javascript">
var myWindow;
function christDoes(){
    mydWindow=open("secondary.html", "yes");
    }

    </script>
</head>
<body><form name="myform" method=POST ACTION="sake.html" ><CENTER>
<B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject">
<input type="button" name="ok" value="OK" onClick="christDoes()">
</form>
</body>
</html>

Code:

<html>
<head>
<script language="javascript">
function me(){
displayColor();
}
function displayColor() {
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');

}

function closeChild(){
    if(winChild){
         winChild.close();
    }
}


var m=0;
var fSubject = self.opener.document.forms[0].subject.value;
	if(fSubject.length>0){
	if(isNaN(fSubject)){fSubject="";}
	else{opener.alert("Please enter figure");}
	numSub=parseInt(fSubject);
	if(numSub==3){var strSub="abcde";}
	self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>");
	var mercy="<HTML><BODY>"
	mercy +="<CENTER>"
	sub=new Array(strSub.length);
	for(var i=0; i<sub.length; i++){
	m++;
	mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>";
	opener.alert("You have entered" +m +"subjects");
	}
	}
	mercy +="</CENTER></FORM></BODY></HTML><BR></BR>";
	self.document.write(mercy +"<BR>");
	self.document.bgColor="pink";
	newWindow();

document.write("<center><input type=\"button\" name=\"submit\" value=\"SUBMIT\" onclick=\"window.open('child', 'childwin.html')\">" +"</center>");
}

</script>
</head>
<body onload='me()' onFocus="closeChild();" onUnLoad="closeChild()">

<form></form>
</body>
</html>

Code:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var fValue = self.opener.document.forms[0].sub1.value;
document.write(fValue +"<input type="text"  name="sub1.toLowercase()">");
document.write(fValue +"<input type="text"  name="sub2.toLowercase()">");
document.write(fValue +"<input type="text"  name="sub3.toLowercase()">");
//-->
</SCRIPT>
</HEAD>
<BODY >
<form>
<form>
</BODY>
</HTML>

To every freelancer guru, words can not measure how grateful I am to you for your selfless service. God will reward you in Jesus name. Please kindly help me in this: All I want to do is to get the values input of the iterated textbox in the second window to appear in the third window with a textbox with each.

First off, Hello, I plan to be frequenting these forums as I am still learning JavaScript. I am creating a gallery and am having trouble getting the previous and next buttons to work properly with the current image. I was trying to create a solution that would change the current image variable so that the previous and next buttons would correlate.

What I am working on can be found here. As you can see the next and previous buttons are not working.

Here is my JavaScript:
Quote:
<script type="text/javascript">

/* following not currently used by this script
function show(what) {
var find = "Img" + what.id.substring(4);
for ( var i = 1; i < 99999; ++i ) {
var cur = "Img" + i;
var img = document.getElementById(cur);
if ( img == null ) return;
img.style.display = ( find == cur ) ? "block" : "none";
}
}
*/

var Pg = 0;
function Prev() {
Pg--;
if (Pg < 0) { Pg = 0; }
document.getElementById('mainImg').src = imgList[Pg];
document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length;
}
function Next() {
Pg++;
if (Pg >= (imgList.length-1)) { Pg = imgList.length-1; }
document.getElementById('mainImg').src = imgList[Pg];
document.getElementById('Pg').innerHTML = 'Image '+(Pg+1)+' of '+imgList.length;
}
function Pick0() {
var Pg = 0;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick1() {
var Pg = 1;
document.getElementById('mainImg').src = imgList[Pg];

}
function Pick2() {
var Pg = 2;
document.getElementById('mainImg').src = imgList[Pg];



}
function Pick3() {
var Pg = 3;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick4() {
var Pg = 4;
document.getElementById('mainImg').src = imgList[Pg];

}
function Pick5() {
var Pg = 5;
document.getElementById('mainImg').src = imgList[Pg];


}
function Pick6() {
var Pg = 6;
document.getElementById('mainImg').src = imgList[Pg];


}
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

onload = function() {
// document.getElementById('mainImg').src = imgList[0];
Prev();
}
</script>
Here is my Menu:
Quote:
<a href="#" onclick="Prev();return false"><</a><a href="#" onclick="Pick0();return false">1</a> <a href="#" onclick="Pick1();return false">2</a> <a href="#" onclick="Pick2();return false">3</a> <a href="#" onclick="Pick3();return false">4</a> <a href="#" onclick="Pick4();return false">5</a> <a href="#" onclick="Pick5();return false">6</a> <a href="#" onclick="Pick6();return false">7</a> <a href="#" onclick="Next();return false">></a>

Hi there, I am new to javascript and have been working on this code to randomly shuffle a playlist of Youtube videos which are in an array. I have tried to implement a next and previous function, which I have managed to some success however, there is a problem.

I have a system where there are two arrays: one is for the 'upcoming' videos and the other is for 'previous' videos. When the next button is pressed, the last element of the 'upcoming' array is added to the 'previous' array and I use the pop() function to return and delete that element from the 'upcoming' array and so on. When the previous button is pressed it puts the last element into the 'upcoming' array and uses the pop function as well, and so on.

It works well except one thing, when previous is pressed the current video will load again, then on the second press it will go to the true previous video. The same happens when you click next after clicking previous.

This is my code:

PHP Code:
<html>
<span id = "displayarea"></span>
<script type = "text/javascript">
var Varray = []; 
 Varray[0] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/007VM8NZxkI?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/007VM8NZxkI?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
 Varray[1] ='<iframe width="420" height="315" src="http://www.youtube.com/embed/DfDBZUb3mvI" frameborder="0" allowfullscreen></iframe>';
 Varray[2] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/T9TmmF79Rw0?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/T9TmmF79Rw0?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
 Varray[3] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/I1edDfzluXE?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/I1edDfzluXE?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
 Varray[4] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/qXLxM0u1aJw?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qXLxM0u1aJw?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
 Varray[5] ='<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/UyOaTo_MiFE?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UyOaTo_MiFE?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>' 

var Vprevious = []; 


Varray.sort(function(){return Math.round(Math.random());});

function showit()
{
Vprevious.push((Varray[Varray.length-1]));
document.getElementById("displayarea").innerHTML=Varray.pop();
}
function previousit()
{
Varray.push((Vprevious[Vprevious.length-1]));
document.getElementById("displayarea").innerHTML=Vprevious.pop();
}
Vprevious.push((Varray[Varray.length-1]));
document.getElementById("displayarea").innerHTML=Varray.pop();
</script>
<input type = "button" id = "NextB" value = "Next" onclick = "showit();">
<input type = "button" id = "previousB" value = "previous" onclick = "previousit();">
</html> 




and the link to the test site is http://www.musicrate.org/rotate

I have tried playing around with things and trying to use splice() to select the video one before the last, however I have not succeeded. Any help on the matter would be appreciated. It is probably something simple and obvious so I apologize in advance if that is the case.

Thanks

HI
I have tow page and the first page open a new window with javascript(by using window.open).Now I want to call a javascript function that is in the first page from the second page and for that i use parent.function_name but it doesn't work.How can do so?

thanks

<frameset rows="30%,70%>
<frame src="page1.html" name="name1" frameborder="0"></frame>
<frame src="page2.html" name="name2" frameborder="0"></frame>
</frameset>

in above code I used page1.html & page2.html as frame. Both include same javascript file having two function name fun1() & fun2().

as both are separate frame both have there own copy function

page1.html
fun1()
fun2()
page2.html
fun1()
fun2()

I call fun2() from page2.html and inside that function I want to call page1.html's fun1().

fun1() in page1.html and fun1() in page2.html both return different result because of there global variables.

Is there any way to call fun1()-page1.html from the fun2()-page2.html?

Hi guys,
i have a code where if you press on a word some words disappear and new ones appear and then when you press on the word again everything goes back to normal. I am trying to get it so that after the first click if i press back it should go back to normal instead of having to press the word again but all i am getting at the moment when i press back is the the page with the changed text.

Hello all,

I am currently working on a site for a friend and have reached a navigational problem I cannot figure out how to achieve...

He has a list of products that link to relevant individual pages which also have next and previous buttons to browse all the product pages on the site (only 10 so no big deal).

However, he wants to add additional lists that recommend products by category preference? So for example; 4 products may appeal to a particular category, but when you click the link to view one of the products shown the next and previous buttons scroll through the entire products pages! and not only the ones recommended?? IS it possible using Javascript to define which pages are linked to as next previous without having to create lots more html copies of content pages?

I have a basic knowledge of Javascript but cannot find a workable answer or example using google. Any help would be much appreciated.

Thanks in advance...

hi,

I have a google map which shows a car moving along a line that it reads from xml. This is the code that moves the map and the car image:

Code:

     // Returns the bearing in radians between two points.
     function bearing( from, to ) {
       // See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
       // Convert to radians.
       var lat1 = from.latRadians();
       var lon1 = from.lngRadians();
       var lat2 = to.latRadians();
       var lon2 = to.lngRadians();

       // Compute the angle.
       var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
       if ( angle < 0.0 )
	angle  += Math.PI * 2.0;
        			if (angle == 0) {crash;}
       return angle;
     }

      function plotcar() {
        var cosa = Math.cos(angle);
        var sina = Math.sin(angle);
        canvas.clearRect(0,0,32,32);
        canvas.save();
        canvas.rotate(angle);
        canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
        canvas.drawImage(img,-16,-16);
        canvas.restore();
      }


//=============== animation functions ======================
function animate(d) {
        if (d>eol) {
          return;
        }
        var p = poly.GetPointAtDistance(d);
		if (k++>=180/step) {
          map.panTo(p);
          k=0;
        }
        map.panTo(p);
        marker.setPoint(p);
		if (supportsCanvas) {
          if (poly.GetIndexAtDistance(d)>lastVertex) {
            lastVertex = poly.GetIndexAtDistance(d);
            if (lastVertex == poly.getVertexCount()) {
              lastVertex -= 1;
            }
            while (poly.getVertex(lastVertex-2).equals(poly.getVertex(lastVertex-1))) {
              lastVertex-=1;
            }
            angle = bearing(poly.getVertex(lastVertex-2),poly.getVertex(lastVertex-1) );
            plotcar();
          }
        }
        setTimeout("animate("+(d+step)+")", tick);
      }

function startAnimation() {
        eol=poly.Distance();
        map.setCenter(poly.getVertex(0),16);
        map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
        map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
		if (supportsCanvas) {
          marker = new ELabel(poly.getVertex(0), '<canvas id="carcanvas" width="32" height="32"><\/canvas>',null,new GSize(-16,16));
	        map.addOverlay(marker);
          canvas = document.getElementById("carcanvas").getContext('2d');
          var p0 = poly.getVertex(0);
	        var p1 = poly.getVertex(1);
          angle = bearing(p1,p0);
          plotcar();
        } else {
          marker = new GMarker(poly.getVertex(0),{icon:car});
          map.addOverlay(marker);
        }
        poly2 = new GPolyline([poly.getVertex(0), poly.getVertex(1), poly.getVertex(2)], 0,0);
//        map.addOverlay(poly2);
        setTimeout("animate(0)",2000);  // Allow time for the initial map display
}

It works fine as you can see here

but the problem is that if the user clicks the button again without reloading the page, the map moves but the car remains at its last point.

From what I can figure out, this means that the startAnimation() function has restarted but the animate(d) function has not restarted.

but trying to call the animate(d) function from the button, where the startAnimation() gets called, he

Code:

<input type="button" onclick="startAnimation();return false;" value="show bus route 1">

results in an error that d is not defined.

is there some way of resetting the animate(d) function when the startAnimation() function gets called, so everything goes back to the start? Or is there some other way of "refreshing" everything without reloading the page?

thanks in advance.