|
JavaScript - Previous/next
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 Similar TutorialsAlright, this is going to sound strange, but bear with me here... Code: <input type="text" name="_F0827U" size="015" maxlength="015"> <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? 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&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&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&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&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&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&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&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&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&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&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 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, 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. 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! Evening folks I'm -very- green when it comes to Javascript, but I'm working my way up. The problem right now I'm running in to now is when trying to implement a website function that allows two buttons (previous, and next) to do their respective tasks. I can get the script to go forward and back, however when I jump to another page in the frame (this is all through iframes), when clicking either button, it will take me to the last page I had stopped on. A little hard to explain, but maybe seeing the code will give you a better idea. <script type="text/javascript"> var pNum=0; var maxPage=10; function next() { pNum++; if (pNum > maxPage) pNum=10; document.getElementById("frame").src="page"+pNum+".htm"; } function prev() { pNum--; if (pNum < 0) pNum=0; document.getElementById("frame").src="page"+pNum+".htm"; } </script> It's nothing fancy, but it's apparently keeping the last page it was on in memory instead of resetting itself, so when I go back to the start page it starts on page 0 and goes to page 10; right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there. Any help or advice would be appreciated. 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. 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... I tried to use the script to return the user to the previous page by clicking the link, and it did work, however, it would return me to the previous website I visited and not just the previous page within my site. Is there a way to override it by changing the code or is the code definitive? This was the code I had tried to use: Code: <a href="javascript:history.go(-1)">Back</a> I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks. Here's the code: Code: $(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 7;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* End of customizations */
});
I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category. But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open? Code: <!-- start show cat list -->
<br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
<ul class="catMenuItem">
<li><a style="background-image: url("images/triangle_down.gif");" href="#" class="titleTriangle"><span>cat1</span></a></li>
<li style="display: block;" class="catSubMenu">
<a href="?cat=2">sub 1-2</a> (0)<br>
<a href="?cat=7">sub 1-3</a> (2)<br>
<a href="?cat=8">sub 1-4</a> (0)<br>
<a href="?cat=9">sub 1-5</a> (0)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
<li style="display: none;" class="catSubMenu">
<a href="?cat=3">sub 2-1</a> (0)<br>
<a href="?cat=4">sub 2-2</a> (0)<br>
<a href="?cat=5">sub 2-3</a> (0)<br>
<a href="?cat=6">sub 2-4</a> (1)<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<ul class="catMenuItem">
<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
<li style="display: none;" class="catSubMenu">
<br>
</li>
</ul>
<script type="text/javascript"><!--
/* Categories Menu START */
var prevCat;
function menu(newCat) {
var mens;
var anchors;
if (prevCat) {
mens = prevCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
prevCat.style.display = 'none';
}
if (newCat != prevCat) {
mens = newCat.parentNode.getElementsByTagName('li')[0];
anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
newCat.style.display = 'block';
prevCat = newCat;
} else {
prevCat = null;
}
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
/* Categories Menu END */
--></script>
<!-- end show cat list -->
Hi all, I am using some Javascript to open up a pop up window... Code: <script type="text/javascript">
//<![CDATA[
function editText() {
sList = window.open("editText.php", "list", "width=300,height=300,scrollbars=Yes");
}
//]]>
</script>
This works fine and within that popup window I have the following: Code: <form action="index.php" method="post"> <textarea name="userInput" id="userInput" cols="32" rows="10"><?php echo $_SESSION['greeting'];?></textarea> <input type="submit" name="updateText" id="updateText" value="Update Text" onclick="changeText2()"/> </form> The idea is to send the value of the form back to index.php so I can perform the following check: PHP Code: if(isset($_POST['updateText'])) { $userInput = $_POST['userInput']; $product->greeting = "I am set"; echo $product->greeting; } else { $product->greeting = "I am not set"; echo $product->greeting; } However because the form is opening in a popup window, when submitting it is loading index.php in the new popup window. What I need to do is somehow close the popup and send the data back to the original page. I know of window.close but if I call this, then form will not run. Can any body help me here... alternatively I was trying to do the following: Code: <script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
window.opener.document.getElementById('element-greeting-content').innerHTML = userInput;
window.close('editText.php');
}
</script>
<textarea name="userInput" id="userInput" cols="32" rows="10"><?php echo $_SESSION['greeting']; ?></textarea>
<input type='button' onclick='changeText2()' value='Update Text'/>
but doing it this way meant that the value wasn't been passed to be checked in an if statement. Any help would be greatly appreciated. I have an application I'm working on and here is what I'm trying to do: I want users to work from a main application. Certain things will need to be done but the users wont want to see the main screen go away while doing these certain things. So my idea is to just open a new window with the content they need, they'll make their changes, the new window will close but then I want the main page to reload. What I've done now is at the end of the script that will be run prior to the new window closing is added this (its a php app): Code: echo "<script>window.close();</script>"; echo "<script>window.opener.location.reload(true);</script>"; Sometimes this works in IE and Firefox but never in Chrome. I know I've seen this done before on other sites, but I cant think of what they are. Can anyone tell me a reliable way that works in all browsers? Hi everyone. New to javascript here.... I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit... Example. I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago" Can any one enlighten me ? Thank you! Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. Hi Guys, I need to put previous/next navigation button images on a lot of slides and was wondering if javascript could do the following: Firstly say my slides increment as: slide1.html slide2.html slide3.html slide4.html If i am on slide 3 I'd like javascript to identify previous button as slide2.html and next button as slide4.html and so on Some loop/array code that does if filename = slide3.html then set button left(left.lpg)) url to slide2.html and button right(right.jpg) url to slide4.html array[0] = slide1.html array[1] = slide2.html ... opening as _self i.e no pop up. Thanks |
|||||||