|
JavaScript - Help With 'next' & 'back' Buttons In Slideshow
Hello kind folk of codingforums.com! I am pretty new to JS and have been racking my brain all week to find a solution for this. I have a javascript fading slideshow but it has no back or next button. I'm not sure if i need to add another function or go about it a different way. Here is the code if anyone can help. Thanks in advance!!!
<script type="text/javascript"> var slidespeed=5800 var slideimages=new Array("my_images/SBDCslide.gif","my_images/americanbuilding.gif","my_images/emerald.gif", "my_images/nautical.gif", "my_images/rent.gif","my_images/allyn.gif","my_images/SBDCslide.gif","my_images/signs.gif","my_images/cobalt.gif","my_images/test.gif","my_images/federal.gif") var slidelinks=new Array("#" ,"american.asp","emerald.asp","nautical.asp") var whichlink=0 var whichimage=0 var imgobj, filtersupport, blenddelay var imageholder=new Array() for (i=0;i<slideimages.length;i++){ //preload images imageholder[i]=new Image() imageholder[i].src=slideimages[i] } function gotoshow(){ window.location=slidelinks[whichlink] } function slideit(){ if (filtersupport) imgobj.filters[0].apply() imgobj.src=imageholder[whichimage].src if (filtersupport) imgobj.filters[0].play() whichlink=whichimage whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0 setTimeout("slideit()", slidespeed+blenddelay) } window.onload=function(){ imgobj=document.getElementById("slideshow") //access img obj filtersupport=imgobj.filters //check for support for filters blenddelay=(filtersupport)? imgobj.filters[0].duration*1000 : 0 slideit() } </script> Similar TutorialsHi, 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="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" 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. Please follow these steps in my jsfiddle: 1. click on the (open grid) link and select option "13", buttons A to N would appear 2. click on the select all answers button, all buttons A to N would turn green. 3. Now click on the open grid again and select option "5". As you can see all the buttons from A to 5 are now selected (Have all turned green). 4. Now go back to grid and choose option 13. As you can see all buttons A to N would be selected. I don't want this to happen. What should happen is that the 5 buttons selected before the option change should remain selected and the other 8 buttons should go back being unselected, but I do not know how to do this. I tried including this in the selectAll() function but it did not work: Code: $('.answerBtns:hidden').removeClass('answerBtnsOn').addClass('answerBtnsOff');
Does anyone have any ideas? Code is in jsfiddle, click [here][1] Thank You [1]: http://jsfiddle.net/C7vcQ/5/ Hello everyone, I am totally new to javascript, I have a web form I designed using coffeecup, the form is very long about 4 pages long and it is all in one long scroll down the page, I was wondering if I can add page breaks and at the bottom of each categoty inserting a button for next and back whilst hiding the rest of the categories until next is clicked etc. until you reach submit. Please help in anyway you can?\ Yhanks K 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 the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location? this script is generated from easypano tourweaver - Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Tour Created By CAPITA SYMONDS</title>
</head>
<body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg");
so.addVariable("lwBgColor", "255,255,255,255");
so.addVariable("lwBarBgColor", "255,186,186,186");
so.addVariable("lwBarColor", "255,153,0,0");
so.addVariable("lwBarBounds", "-512,-384,1024,768");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "false");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("iniFile", "config_2_Area_Multipix.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf");
so.addVariable("href", location.href);
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
here is the button code - Code: <span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span> Not sure how to explain this but...... Using a meta refresh to display a thankyou page for 5 seconds after a form submit, then return to form. If user clicks back to return to main page from form, returns to thankyou page instead, and has to go back to form again, then back to main page. I can have thankyou page return to main page, but would rather return to form. This is what it should do: main page -> form -> thankyou page -> form -> main page This is what it does: main -> form -> thankyou -> form -> thankyou -> form -> main Is there any way to remove thankyou page from history? I am not sure if this has been posted before but I need help with this. When a user clicks on the back button I need them to be directed to the previous page and still have their original selections and not the defaults. Here is the rest of code on the back button. At the moment this is not working. <input id=STDBUTSHORT type="button" value="Back" onClick="history.back();">') Thanks in advance. I need a back to top link on the bottom of my page that stays there all the time while people are scrolling.. is this possible? is this close to what i'm looking for? http://javascript.internet.com/page-...ting-link.html i've seen it on some other sites but I can't find any to reference now... I'm totally new to this! thanks for your help! -B this function seems to be working fine in all browser but of course. I'm still a noob at JavaScript and well things like this just doesn't make sense. when I go to alert this function in IE I get undefined. But other browser gives me a value. What am I doing wrong with this function? Code: function ext() {
var img = document.getElementById('photoSmall');
img = img.src;
if (typeof img == 'string' && img != 'undefined') {
var typeis = img.substr(-4);
if (typeis == '.png' || '.jpg' || '.gif') {
return typeis;
}
}
}
Thanks Jon W I need an html page that when visited automatically redirects the browser to return to the previous page it was on. here is the current code I have: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function load()
{
history.go(-1)
alert("");
}
</script>
</head>
<body onload="load()">
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
this works in firefox but in IE you have to press ok in the alert box before it returns. I admit I am a javascript novice. Any suggestions Hello there, I'm a 30yr old returning to school and I signed up for a CMIS102 class, thinking it be more explanatory as the syllabus let on. But I was wrong. While I do understand some of what the professor has been teaching us, like modular programming and IfElse statements, I can't wrap my head around things like While Loops. My professor has saddled us with a couple assignments, requiring us to write in pseudocode and I was wondering if anyone could explain what he wants from this assignment or even help me with it, that maybe I can finally have a grasp of it, and will know what I'm doing on the final. ~Tia P.S. I've posted the assignment question below: I need to write a pseudo-codepseudocode for the following question but don't know how: Write a program to read a list of exam scores (in the range 0 to 100) and to output the total number of grades and the number of grades in each letter=grade category. The end input is indicated by a negative score as a sentinel value. (The negative value is used only to end the loop, so do not use it in the calculations. Example: 88 93 55 77 100 -1 (The output would be) Total number of grades = 5 Number of A's =2 Number of B's = 1 Number of C's =1 Number of D's = 0 Number of F's =1 Must prompt user to run again Hi, I currently have a <div> with a <p> and have an edit button that when clicked will transform it into a textarea using jQuery's .html(). I also have a cancel button which allows the user to cancel the edit and return the textarea to the previous content, any ideas how I do this? JavaScript Code: // JavaScript Document
jQuery(document).ready(function(e) {
$('#edit_p').click(function(e){
$('#cancel_p').show();
$('#greeting').html("<textarea id='txt_greeting' cols='20'>" + $('#greeting p').text() + "</textarea>");
$(this).hide();
});
$('#cancel_p').click(function(e){
$('#edit_p').show();
$(this).hide();
});
});
HTML Code: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Textarea/Button Change</title> <script type="text/javascript" src="jquery-1.7.js"></script> <script type="text/javascript" src="txt_area_jquery.js"></script> <link rel="stylesheet" type="text/css" href="txt_area_style.css" /> </head> <body> <div id="greeting"><p>Hello, today is a great day!</p></div> <input type="button" name="edit_p" id="edit_p" value="Edit" /> <input type="button" name="cancel_p" id="cancel_p" value="Cancel" /> <?php ?> </body> </html> overview: from my javascript, i call a function in the php block, that function successfully retrieves a value from the database, but when i pass that retrieved value back to the calling function....all is lost somehow. when i test this code by itself, it works fine and gets the correct number. <?php mysql_select_db($database_connFtH, $connFtH); $result = mysql_query("SELECT status_index FROM cpqc_status ORDER BY row_id DESC"); $row_result = mysql_fetch_assoc($result); $index = $row_result['status_index']; echo $row_result['status_index']; echo $index; echo "the value of index is ".$index; ?> however, when i set this same code up as a function to be called upon globally, and to return the value of $index, it all just seems to "not work". <?php function runStatus() { mysql_select_db($database_connFtH, $connFtH); $result = mysql_query("SELECT status_index FROM cpqc_status ORDER BY row_id DESC"); $row_result = mysql_fetch_assoc($result); $index = $row_result['status_index']; return ($index); } //end function runStatus() ?> the calling function, with an alert box to check if the value of $index was passed down accurately <script type="text/javascript"> var x = runStatus(); alert(x); </script> all i want to do is call a server-script function that deals with the database and gets me a value out of the database, and pass that value back to the calling function. can't figure out what is wrong. the "return($index)" should send back the value of $index. the call to that function should receive back a value and assign it to "x". and the alert(x) should spit it out with no problem. but......something is wrong and it won't work. any ideas what is wrong? it is my understanding that a function inside the php determants can be called upon from anywhere and that function can return a value.(?) argh!! i think i know why Einstein's hair was always so messy!! thanks, Paul Williams weather today in Kalispell, MT: 7 deg this morning, got a little snow last night, only about 6 or 8 inches, not much. maybe more later. I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript. When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page. I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good. Thank Hi, I have the following problem: When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not. Code: <script type="text/javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "blabla";
}
</script>
I have a website using this pageslide function http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? While these questions have probably been asked before, separately, I'd like to know how to put them together. What I want to do, is create a link, that goes to an url that I decide, after which, the page goes back to the previous page and refreshes. It would be ideal, if that could be done with AJAX, but that's probably asking too much. Especially if I want to use it for wordpress. hi i have a html page that has a link "OPEN POP UP" when this link is clicked a new pop up window is opened. and this pop has two LINKS first is ONE and second is TWO. what i want to do is. when any of these LINKS is clicked on the popup the should close and the my main html page from where the popup came should execute a javascript function. please help |
|||||||