JavaScript - Which Variables Change Transitions?
Hi,
I'm trying to work out some of the variables of a JQuery-based scripts I got he http://www.dreamcss.com/2009/04/crea...y-sliders.html Specifically I'm trying to work out how to change the delay between slide transition, whether I can disable the auto-transitioning or not (and how), and how to change the sliding speed of the images. Which variables do they rely on? Thanks for the help. Code: var $j = jQuery; $j(function(){ slider.init(); }); var slider={ num:-1, cur:0, cr:[], al:null, at:10*845, ar:true, init:function(){ if(!slider.data || !slider.data.length) return false; var d=slider.data; slider.num=d.length; var pos=Math.floor(Math.random()*1);//slider.num); for(var i=0;i<slider.num;i++){ $j('#'+d[i].id).css({left:((i-pos)*845)}); $j('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>'); } $j('img,div#slide-controls',$j('div#slide-holder')).fadeIn(); slider.text(d[pos]); slider.on(pos); slider.cur=pos; window.setTimeout('slider.auto();',slider.at); }, auto:function(){ if(!slider.ar) return false; var next=slider.cur+1; if(next>=slider.num) next=0; slider.slide(next); }, slide:function(pos){ if(pos<0 || pos>=slider.num || pos==slider.cur) return; window.clearTimeout(slider.al); slider.al=window.setTimeout('slider.auto();',slider.at); var d=slider.data; for(var i=0;i<slider.num;i++) $j('#'+d[i].id).stop().animate({left:((i-pos)*845)},845,'swing'); slider.on(pos); slider.text(d[pos]); slider.cur=pos; }, on:function(pos){ $j('#slide-nav a').removeClass('on'); $j('#slide-nav a#slide-link-'+pos).addClass('on'); }, text:function(di){ slider.cr['a']=di.client; slider.cr['b']=di.desc; slider.ticker('#slide-client span',di.client,0,'a'); slider.ticker('#slide-desc',di.desc,0,'b'); }, ticker:function(el,text,pos,unique){ if(slider.cr[unique]!=text) return false; ctext=text.substring(0,pos)+(pos%2?'-':'_'); $j(el).html(ctext); if(pos==text.length) $j(el).html(text); else window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30); } }; Similar TutorialsMy goal is to replace a 300px x 300px div with a random assortment of pictures, all being 300px x 300px. I however am not that great at JavaScript (I've taken a bigger bite than I can chew) and would love your guys' help. So far this is what I have for my JavaScript: Code: begin(); function begin() { setTimeout(newimage(),7000); } function newimage() { } Which brings me to my first question: What's the best method of pre-loading images? And also, if the method is not through JavaScript, how would I reference the image from the JavaScript? My next step would be to transition between images. (Fading specifically.) I really like the fade transition here and I plan on using that in the site. How would I incorporate that into my code? I noticed he made the entire JavaScript code into one line, which is quite annoying. Thanks guys! Can someone point me in the right direction to making custom javascript image slideshow transitions?
Hi, I was wondering why in mozilla firefox the same image menu has different way of transition on different sites. If you use firefox and go to this link and then hover over different pictures you will get to know how it moves http://www.alohatechsupport.net/exam...ge-menu-2.html after doing that go to this link http://bloghutsbeta.blogspot.com/201...ting-main.html and hover over images and see how it moves. In both cases the transition effect is same but in one it is slow (hanging) while in other it is smooth. I didn't presented the Markup as the both are identical but still if you feel like let me know in comments I will edit it to provide you with as much relevant data as possible and required. Quote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) { document.getElementById('scontent').innerHTML = ''; // empty option-content if (SList[slist][option]) { // if option from the last Select, add text-content, else, set dropdown list if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option]; else { var addata = '<option>- - -</option>'; for (var i = 0; i < SList[slist][option].length; i++) { addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>'; } // cases for each dropdown list switch (slist) { case 'slist2': document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>'; document.getElementById('slist3').innerHTML = ''; break; case 'slist3': document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>'; break; } } } else { // empty the tags for select lists if (slist == 'slist2') { document.getElementById('slist2').innerHTML = ''; document.getElementById('slist3').innerHTML = ''; } else if (slist == 'slist3') { document.getElementById('slist3').innerHTML = ''; } } } I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = { ... "United Kingdom" : { "England" : ["Staffordshire", "Derby", ... ], "Scotland" : ["Edinburgh", ... ], "Wales" : [ ... ], "Northern Ireland" : [ .... ] }, ... }; I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? I wrote a script: when the same button is clicked for the first time, it should give a message "Hello World", for the second time "hello Earth". The script is not working. I don't want anybody to re-write the script, but to look at how i define variables and tell me where I am wrong. I think, this is where the main error is. my current script just outputs the message "hello world". my assumption is that functions can alter the value of a global variable. Thank you very much. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> title</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> var count=0; function changePar() { if(count===0) first(); if(count===1) second(); } function first() { document.getElementById("changingParagraph").innerHTML="Hello World"; var count=1; } function second() { document.getElementById("changingParagraph").innerHTML="Hello Earth"; var count=0; } </script> </head> <body> <button onclick="changePar()">Click Here</button> <p id="changingParagraph"></p> </body> </html> hello i am editing a javascript game and im trying to get a heading (h1) to display the value of a variable in a javascript function however everything i have tried always causes an error. Any help will be apreciated. Hi All Please could any one shed some light on the values of thirdVar fourthVar and fifthVar. Am i correct to say that value of thirdVar is o cromwell Any help and explanation would be great thanks. var firstVar = 'oliver' var secondVar = 'cromwell' var thirdVar = firstVar.charAt (0) + '. ' + secondVar var fourthVar = thirdVar.length var fifthVar = 'The last character is' + thirdVar.charAt (fourthVar) + '!' I hope someone can help me! I have a website that sells a product through a third party merchant - ie a customer clicks my "buy now" button and they are transfered to the merchants payment processing page. once the transaction is complete the customer is sent back to my thank you page where I give them some extra stuff for free. All pretty normal I guess. The problem is this - The merchant sends back some url parameters when they transfer the customer to the thank you page and I would now like to use the "customer name" parameter to personalise the thank you page to test if this makes any difference to my return rate. Now, whilst I am not a complete newbie I haven't got a clue how to achieve this. What I want to do is have the page display: "Hello [customer] .....etc..." The customer name parameter is passed as "cname" and is one of about a dozen passed seperated, presumably, by "&" Thanks for any help! Paul Noob here. Please bear with me.http://www.codingforums.com/images/smilies/tongue.gif <span title="this is the title">....</span> I need to use variables for the title instad of text. Please advise. Thank you. Ok i'm really new at this so i apologize beforehand if i ask a stupid question or anything. I'm working on a project that displays a GUI asking for a name as well as grades. when you enter them all it runs the grades through a formula and opens another frame with the results. I don't need any help building the GUI what i need help on is I cannot for the life of me find out how to access the variable from another frame. Everything i've seen online tells me to set the variable outside the class but i need to run the formula inside because the grades come from the user. Sorry if my code is messy, like i said i'm very new at this Code: // Loads all neccesary plugins import java.awt.*; import java.awt.event.*; import javax.swing.*; public class SInfo extends JPanel { // Setting all text fields, labels and button public JButton submitInfo; public JLabel SNamel, Asign, Asignl, Asign1l, Asign2l, Asign3l, Asign4l, Asign5l, Asign6l, Asign7l, Asign8l, Asign9l, Asign10l, Folderl, Projectl, Project1l, Project2l, Project3l, Project4l, GProjectl, blank, blank1, Sname, AsgnAvg, ProjectAvg, TotalAvg; public JTextField SName, Asign1, Asign2, Asign3, Asign4, Asign5, Asign6, Asign7, Asign8, Asign9, Asign10, Folder, Project1, Project2, Project3, Project4, GProject; double a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, p1, p2, p3, p4, gp, fldr, asgnAvg, projectAvg, totalAvg; public SInfo() { setLayout (new GridLayout (20,2)); // Sets the text for the labels { blank = new JLabel (""); blank1 = new JLabel (""); SNamel = new JLabel ("Student Name: "); Asign = new JLabel (""); Asignl = new JLabel ("--------Assignment Grades--------"); Asign1l = new JLabel ("Assignment 1: "); Asign2l = new JLabel ("Assignment 2: "); Asign3l = new JLabel ("Assignment 3: "); Asign4l = new JLabel ("Assignment 4: "); Asign5l = new JLabel ("Assignment 5: "); Asign6l = new JLabel ("Assignment 6: "); Asign7l = new JLabel ("Assignment 7: "); Asign8l = new JLabel ("Assignment 8: "); Asign9l = new JLabel ("Assignment 9: "); Asign10l = new JLabel ("Assignment 10: "); Folderl = new JLabel ("Class Folder Grade: "); Projectl = new JLabel ("--------Project Grades--------"); Project1l = new JLabel ("Project 1: "); Project2l = new JLabel ("Project 2: "); Project3l = new JLabel ("Project 3: "); Project4l = new JLabel ("Project 4: "); GProjectl = new JLabel ("Group Project Grade: "); } // Button text and sets listener for it { submitInfo = new JButton ("Submit"); submitInfo.addActionListener (new SubmitListener()); } // Tells the program how long to make the textfield { SName = new JTextField (20); Asign1 = new JTextField (5); Asign2 = new JTextField (5); Asign3 = new JTextField (5); Asign4 = new JTextField (5); Asign5 = new JTextField (5); Asign6 = new JTextField (5); Asign7 = new JTextField (5); Asign8 = new JTextField (5); Asign9 = new JTextField (5); Asign10 = new JTextField (5); Folder = new JTextField (5); Project1 = new JTextField (5); Project2 = new JTextField (5); Project3 = new JTextField (5); Project4 = new JTextField (5); GProject = new JTextField (5); } // Adds the objects to the Window { add (SNamel); add (SName); add (Asign); add (Asignl); add (Asign1l); add (Asign1); add (Asign2l); add (Asign2); add (Asign3l); add (Asign3); add (Asign4l); add (Asign4); add (Asign5l); add (Asign5); add (Asign6l); add (Asign6); add (Asign7l); add (Asign7); add (Asign8l); add (Asign8); add (Asign9l); add (Asign9); add (Asign10l); add (Asign10); add (Folderl); add (Folder); add (blank1); add (Projectl); add (Project1l); add (Project1); add (Project2l); add (Project2); add (Project3l); add (Project3); add (Project4l); add (Project4); add (GProjectl); add (GProject); add (blank); add (submitInfo); } // sets size and color of the window { setPreferredSize (new Dimension(400,450)); setBackground (Color.gray); } } public class SubmitListener implements ActionListener { // Performs calculation and saves when button is clicked public void actionPerformed (ActionEvent event) { // Sets variables for the text fields Sname = new JLabel ("Student Name: " + SName); AsgnAvg = new JLabel ("Average of Assignments: " + asgnAvg); ProjectAvg = new JLabel ("Average of Individual Projects: " + projectAvg); TotalAvg = new JLabel ("Total Average for the year: " + totalAvg); // Assignments { String asgn1 = Asign1.getText(); a1 = Double.valueOf(asgn1); String asgn2 = Asign2.getText(); a2 = Double.valueOf(asgn2); String asgn3 = Asign3.getText(); a3 = Double.valueOf(asgn3); String asgn4 = Asign4.getText(); a4 = Double.valueOf(asgn4); String asgn5 = Asign5.getText(); a5 = Double.valueOf(asgn5); String asgn6 = Asign6.getText(); a6 = Double.valueOf(asgn6); String asgn7 = Asign7.getText(); a7 = Double.valueOf(asgn7); String asgn8 = Asign8.getText(); a8 = Double.valueOf(asgn8); String asgn9 = Asign9.getText(); a9 = Double.valueOf(asgn9); String asgn10 = Asign10.getText(); a10 = Double.valueOf(asgn10); } // Projects { String proj1 = Project1.getText(); p1 = Double.valueOf(proj1); String proj2 = Project2.getText(); p2 = Double.valueOf(proj2); String proj3 = Project3.getText(); p3 = Double.valueOf(proj3); String proj4 = Project4.getText(); p4 = Double.valueOf(proj4); String gproject = GProject.getText(); gp = Double.valueOf(gproject); String Sname = SName.getText(); // Folder String folder = Folder.getText(); fldr = Double.valueOf(folder); } // Math Formula { // asgnAvg = 20% // projectAvg = 45% // fldr = 10% // gp = 25% asgnAvg = (a1 + a2 + a3 + a3 + a5 + a6 + a7 + a8 + a9 + a10) / 10; projectAvg = (p1 + p2 + p3 + p4) / 4; totalAvg = (asgnAvg * .20) + (projectAvg * .45) + (fldr * .10) + (gp * .25); } { JFrame frame = new JFrame ("Student Average"); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); frame.getContentPane().add(new SInfo2()); frame.pack(); frame.setVisible(true); // Show the frame frame.setSize(300, 300); setBackground (Color.gray); frame.setVisible(true); } } } } And this is the second frame i am trying to open i haven't really done anything for the GUI i'm just working on it reading the variables now Code: // Loads all neccesary plugins import java.awt.*; import java.awt.event.*; import javax.swing.*; public class SInfo2 extends SInfo { // Setting all text fields, labels and button public JLabel Sname, AsgnAvg, ProjectAvg, TotalAvg; public SInfo2() { setLayout (new GridLayout (4,2)); { Sname = new JLabel (Sname); // These are the 4 I cannot retrieve AsgnAvg = new JLabel (asgnAvg); // These are the 4 I cannot retrieve ProjectAvg = new JLabel (projectAvg); // These are the 4 I cannot retrieve TotalAvg = new JLabel (totalAvg); // These are the 4 I cannot retrieve add (Sname); add (AsgnAvg); add (ProjectAvg); add (TotalAvg); } } } Thank you in advance for anyone who even looks at it Hi there, Greetings, I have limited knowledge on Javascript. I wish someone could help me out. Thanks. I have actually found a free script named "Image Flow" (http://finnrudolph.de/ImageFlow/Examples) on the website. Then, I have uploaded it to my web server. Everything was fine and functioning well. I would like to add in new Var (to make new window appears after clicking) according to the codes given but failed to do so. The codes given are A) Code: var target_1 = new ImageFlow(); target_1.init({ ImageFlowID: 'target_1,' onClick: function() {window.open(this.url, '_blank');} }); Then, I just added the above code into imageflow.JS and imageflow.packed.JS. (I have attached the file below) Original: Code: domReady(function() { var instanceOne = new ImageFlow(); instanceOne.init({ ImageFlowID:'myImageFlow' }); }); After amendment: Code: domReady(function() { var instanceOne = new ImageFlow(); instanceOne.init({ ImageFlowID:'myImageFlow' }); var target_1 = new ImageFlow(); target_1.init({ ImageFlowID: 'target_1,' onClick: function() {window.open(this.url, '_blank');} }); }); However, no pictures were loaded after that. Does it involve more than just "copy and paste"? Or what have I done incorrectly? Sorry to disturb you. Hi, I'm trying to get variables out of an iFrame for my JavaScript function. Is it possible to use an onload parameter to call the JavaScript function to run after it has loaded? If there is a better method to get remotely created variables into a JavaScript function, besides using the url, please let me know. Thanks All, I have the following code: Code: var http_request = false; function makePOSTRequest(url, parameters) { alert(parameters); http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } } function getjob(obj) { var poststr = "job_id=" + encodeURI( obj ); makePOSTRequest('getnextjob.php', poststr); } I call the getjob but doing the following: echo "<li><a href=\"#\" onclick=\"javascript:getjob($resultsetjob[job_id]); return false;\">$resultsetjob[name]</a></li>"; It's weird, only sometimes does it pass the variable and other times it doesn't. Is there a better way to do this?? Thanks in advance. Code: <script language="javascript" type="text/javascript"> function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } </script> <textarea name="txt_area" rows="3" id="txt_area" class="style3" onKeyDown="limitText(this.form.txt_area,this.form.countdown, 500);" onKeyUp="limitText(this.form.txt_area,this.form.countdown, 500);" cols="20"></textarea><br> <font face='Arial' size="1" color='#336600'>(Maximum characters: 500)<br> You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font> </td> This works great BUT, the value 500 (in 4 places in the above HTML) is a constant. I need this value to be set to a default when the page loads, but I have onclick events that change the style of the textarea and in doing so, I need the maximum allowed characters to change. So I need the constant value 500 to be a variable that changes with my onclick event AND gets initially set (I'm guessing) on page load..... I just do not know how to change this constant into a variable and make that variable change with onclick. Thank you. Hi, I'm looking to use the document function in javascript to change the TYPE of an INPUT. However I want to change the TYPE of the INPUT according to a variable passed to the javascript button, so i use: document.formname.inputname.value="newvalue"; I want to be able to change what inputname is depending on what is passed to the function, but right now firefox is telling me that it's undefined. Is there any way I can do this? Thanks in advance, Daniel Hi, I'm trying to make a calculator app; with a few differences. I have a text field with a numberpad below it, I got the numbers to show up in the text field, but am unsure as to how when I hit the enter button - it would store them in a variable?...I am also wondering as to how it would store current value and then allow me to input another value(maybe on the next page) and either subtract or add to it(the first value that is stored). I am also wondering how to get a decimal point in place(need it for currency). Any help would be greatly appreciated! Here is my code: Code: <html> <head> <script type = "text/javascript"> function decPoint(str){ if (str.indexOf('.') == -1) str += "."; var decNum = str.substring(str.indexOf('.')+1, str.length); if (decNum.length > 2) { alert("Invalid more than 2 digits after decimal") } else { alert("Valid no") } } var ent = document.write(document.getElementById("curamt").value); </script> </head> <body border = "1"; color = "blue";> <div id = "cur"> <p>amount is: <script>document.getElementById("amount").innerHTML = ent);</script> </p> <b>Please type in price of item:</b> <form name = "calculator"> <table border = "1"; color = "blue";> <tr> <td colspan = "3" width="75%" align = "center"> <input type = "tel" id = "curamt" name = "tinput" maxlength="4" size="6"> </td> </tr> <table> <tr> <td><input type = "button" name = "one" value = " 1 " onclick = "calculator.tinput.value += '1'"></td> <td><input type = "button" name = "two" value = " 2 " onclick = "calculator.tinput.value += '2'"></td> <td><input type = "button" name = "three" value = " 3 " onclick = "calculator.tinput.value += '3'"></td> </tr> <tr> <td><input type = "button" name = "four" value = " 4 " onclick = "calculator.tinput.value += '4'"></td> <td><input type = "button" name = "five" value = " 5 " onclick = "calculator.tinput.value += '5'"></td> <td><input type = "button" name = "six" value = " 6 " onclick = "calculator.tinput.value += '6'"></td> </tr> <tr> <td><input type = "button" name = "seven" value = " 7 " onclick = "calculator.tinput.value += '7'"></td> <td><input type = "button" name = "eight" value = " 8 " onclick = "calculator.tinput.value += '8'"></td> <td><input type = "button" name = "nine" value = " 9 " onclick = "calculator.tinput.value += '9'"></td> </tr> <tr> <td><input type = "reset" name = "clear" value = " c " onclick = "calculator.tinput.value = ''"></td> <td><input type = "button" name = "zero" value = " 0 " onclick = "calculator.tinput.value += '0'"></td> <td><input type = "submit" id = "amount" name = "enter" value = " e " onsubmit = "ent(); return false;"></td> </tr> </table> </table> </form> </div> </body> </html> Hello, I am using javascript to dynamically edit a form and have run into some problems. In this excerpt of code "x" is already defined, "num" is already defined, and "eval(q)" is just pointing to the proper field in the proper form. Code: eval(q).onkeydown=function onkeydown(event) { checkLength(event,x,num,5); }; Now the problem is, it is literally calling the function with "x" and "num" instead of their values. I tried "eval(x)" and "eval(num)" but that literally calls it with that whole statement as the parameter. How can I call this with the actual values inside of x and num? Thank you. Hi, Ive got a iphone based website im writing in html/javascript, it all works perfectly well apart from an issue with a javascript variable and i cant figure out what im doing wrong At the start of the code i declare a variable var jpgname='blank'; - its blank for testing I then have a href which attempts to change this variables value when clicked <li class="flip"><a onClick="jpgname='test'" href="#page">Cars</a></li> If i replace the jpgname='test' with confirm('test) i get a popupbox so i know its running this code under my #page section (just a div named section) i have [<h1><script>document.write(jpgname);</script></h1> however this always has the value 'blank' Im sure im doing something stupid but im not sure what Any help gratefully recieved thanks Mike |