|
JavaScript - Help Needed In Adding Next And Back Buttons
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 Similar TutorialsHello 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> 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/ Code: <script type="text/javascript" language="javascript">
function toggle()
{
var ele = document.getElementById("toggle");
var text = document.getElementById("display");
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
Code: <a href="javascript:toggle();" id="display" style="color:#000000">Show</a> <div id="toggle" style="display:none">CONTENT</div> The above toggle code works perfectly. How can I edit the code to use buttons instead of text? In other words: How can I replace two different texts that say "Show" and "Hide" with two different buttons that say "Show" and "Hide"? Thanks. I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with: Code: function ObjButtonBuild() {
this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
if(this.accessKeyValue && this.accessKeyValue!=null){
this.divInt+=' accessKey='+this.accessKeyValue+' ';
}
if( this.altName ) this.divInt += ' title="'+this.altName+'"'
else if( this.altName != null ) this.divInt += ' title=""'
this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
if( this.altName ) this.divInt += '" alt="'+this.altName
else if( this.altName != null ) this.divInt += '" alt="'
this.divInt += '" width='+this.w+' height='+this.h+' border=0'
if( !is.ns4 ) this.divInt += ' style="cursor:pointer"'
this.divInt += '></a>'
}
Code: button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()
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 */
});
Hello. My difficulty is in adding Flash control buttons (play, stop, rewind, et cetera) to a window for playing movies. My initial code to create a window for the Shockwave/Flash player worked just fine: Code: <html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
function playMovie(file){
var moviePlayer=window.open('assets/'&&file&&'', '', 'height=480,width=640,resizable=0,status=0,locationbar=0,menubar=0,top=200,left=350');
moviePlayer.document.write('<html><head><title>Movie Player</title>');
moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
moviePlayer.document.write('</head><body"><center>');
moviePlayer.document.write('<object width="640" height="480">');
moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480">');
moviePlayer.document.write('</embed></object>');
moviePlayer.document.write('</center></body></html>');
moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>
</html>
However, I then tried to add some of the material found on this webpage: http://www.permadi.com/tutorial/flashjscommand/ The resulting code: Code: <html>
<head>
<title>Movie Player Example</title>
<script type="text/javascript"><!--
function playMovie(file){
var moviePlayer=window.open('assets/'&&file&&'', '', 'height=510,width=640,resizable=1,status=0,locationbar=0,menubar=0,top=200,left=350');
moviePlayer.document.write('<html><head><title>Movie Player</title>');
moviePlayer.document.write('<link rel="stylesheet" href="style.css">');
moviePlayer.document.write('<script type="text/javascript">');
moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
moviePlayer.document.write('else{return document.getElementById(file);}}');
moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
moviePlayer.document.write('</script>');
moviePlayer.document.write('</head><body><center>');
moviePlayer.document.write('<object width="640" height="480">');
moviePlayer.document.write('<param name="movie" value="assets/'+file+'"></param>');
moviePlayer.document.write('<param name="ShowControls" value="1">');
moviePlayer.document.write('<param name="wmode" value="transparent"></param>');
moviePlayer.document.write('<embed src="assets/'+file+'" type="application/x-shockwave-flash" wmode="transparent" width="640" height="480" pluginspage="http://www.macromedia.com/go/getflashplayer">');
moviePlayer.document.write('</embed></object>');
moviePlayer.document.write('<a href="javascript:movieControlPlay();"><img src="play.png" alt="Play" height="50" width="50" border="0" /></a> ');
moviePlayer.document.write('<a href="javascript:movieControlStop();"><img src="stop.png" alt="Stop" height="50" width="50" border="0" /></a> ');
moviePlayer.document.write('<a href="javascript:movieControlRewind();"><img src="rewind.png" alt="Rewind" height="50" width="50" border="0" /></a>');
moviePlayer.document.write('</center></body></html>');
moviePlayer.document.close();
}
//--></script>
</head>
<body>
<p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
</body>
</html>
Where the problem is: Code: moviePlayer.document.write('<script type="text/javascript">');
moviePlayer.document.write('function getFlashMovieObject("assets/'&&file&&'"){var file=;if(window.document[file]){return window.document[file];}');
moviePlayer.document.write('if(navigator.appName.indexOf("Microsoft Internet")==-1){if(document.embeds && document.embeds[file])return document.embeds[file];}');
moviePlayer.document.write('else{return document.getElementById(file);}}');
moviePlayer.document.write('function movieControlPlay(){var flashMovie=getFlashMovieObject("assets/'+file+'"); flashMovie.Play();}');
moviePlayer.document.write('function movieControlStop(){var flashMovie=getFlashMovieObject("'&&file&&'"); flashMovie.StopPlay();}');
moviePlayer.document.write('function movieControlRewind(){var flashMovie=getFlashMovieObject("assets/'&&file&&'"); flashMovie.Rewind();}');
moviePlayer.document.write('</script>');
And: Code: <p><a href="javascript:playMovie('mymovie.swf');">Create movie player window.</a></p>
So it's just the sections dealing with the buttons and handling the buttons in the generated page header. Any help would be appreciated. Thanks. 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 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 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. 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> 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 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. 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 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 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? im trying to figure out a script that when someone clicks my checkbox (or onchange/onclick events the span tag that wraps it) it changes the color of the font in the span tag... but then if they click again...for the color to return to normal heres my checkboxes as of the moment... disregard the sloppy multiple classes....i wanted to pad the elements evenly lol Code: <div id="selectform">
<span onclick="id='colorchange'" class="webspace"><input type="checkbox" value="website"> Website Design
</span>
<span class="reverbspace"> <input type="checkbox" value="reverb"> Reverb Nation </span>
<span class="twitspace"><input type="checkbox" value="twitter"> Twitter </span>
<span class="logospace"> <input type="checkbox" value="logo"> Logo/Branding </span>
<span class="soundclickspace"> <input type="checkbox" value="ning"> SoundClick </span>
<span class="photospace"> <input type="checkbox" value="photo"> Photo Retouch </span>
<span class="albumspace"><input type="checkbox" value="Album/Mixtape/DVD"> Mixtape/ DVD Cover</span>
<span class="ningspace"> <input type="checkbox" value="ning"> Ning WebSite </span>
<span class="flyerspace"> <input type="checkbox" value="flyer"> Flyers </span>
<span class="businessspace"> <input type="checkbox" value="Business card"> Business Card </span>
<span class="brochurespace"> <input type="checkbox" value="Brochure"> Brochure </span>
<span class="otherspace"> <input type="checkbox" > Other </span>
</div>
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. |
|||||||