JavaScript - Sequence Of Javascripts
Hi,
I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works. Example: <html> <head> <script> function one; </script> <script> function two; </script> <script> function three; </script> </head> <body> <form type=post action=newfile.asp> .................... ................... ................... <input type=submit onclick="one(); two(); three();"> </form> </body> </html The schema is right? How is the best way to force many scripts working fine? Bob Similar TutorialsThis textbook is complete garbage, there is nothing in this thing about this topic at all. Here is the question I am trying to do: "Suppose you have a sequence of numbers Where every number is the previous number plus 3 1, 4, 7, 10, 13, 16, 19, 22 Write a program to output the first 10 number s of the sequence. You must calculate the numbers, you cannot just hard-code them into an array." Its a question on a test study guide. Heres what I got so far: Code: <html> <head> <script type="text/javascript"> VarX = 1 i = 3 VarY = VarX + i count++ do varY while count < 10 </script> </head> <body> </body> </html> Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. Hi, I need some advice. I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour. There will always be a set sequence of the same sections lighting up with the same colours. So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16. How would i go about doing this? Is using Javascript the best thing to use? Any advice would be greatly appreciated. Thanks. I want the images to change in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. Thanks [CODE] <script type="text/javascript" language="JavaScript"> var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">', '<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">', '<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">'); var max = imgs.length; var num = Math.floor((Math.random() * max)); document.writeln(imgs[num]); </script> [CODE] I have an autocomplete script but it's currently returning results in a character is in the name anywhere at all, what I need it to do is only return matches if the characters are in sequence only. Example of how it is now if you type S it will return: Science Host Pass What I need it to do is only return a match if the first character is an S, and so on down the line in order. So if you type sam it should only return matches where the first 3 letter are sam in the order it's typed. Here's how the regexp is now: return value.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+", "gi"), "<strong>$1</strong>"); I built some pages that uses a Flash widget to play mp3 files on my server and show album covers at the same time. However, for people without Flash (like iPhone/Safari), I accommodate them by using a JavaScript that offers a list of simple links to the mp3 files. What I would really like, in the case of a page where there are several songs by the same artist, is a script that when activated, will play all the files in order. Possible? Where would I look for such a script?
Hi! I'm very new to Javascript so first I want to apologize for my lack of knowledge, what I'm asking is probably really simple to do. Im have a folder full of images. Each image is named with an incrementing number like vidseq000001, vidseq000002, vidseq000003 and so on. I'm trying to use a jQuery plugin called "reel" to make the sequence animate. For that it seems I need to put the images inside an array. I know how to manually enter each image inside the array like var [ vidseq000001, vidseq000002, vidseq000003, ] But this becomes quite tedious with over thousand images. What would be a smarter way to put all my images inside an array? I have no js experience or coding experience of any kind other than the last few hours of reading a book called 'object-oriented javascript', and all was well until loops. firstly, this is how he teaches the while loop... var i = 0; while (i <10) {i++;} which results in 9 we move on to for loops... var res =''; for( var i = 0; i <10; i++) {res += 'sometext' ;} which repeats, but I'd like to be able to make that into a sequence of numbers... 123456789. how do I do that? thanks. I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning. I have a series of divs that are assigned absolute top and left values to form a grid. The grid tiles are programmed to swap coordinates in pairs when one of the pairs is clicked. Then if I do a sampling of the divs by: Code: //returns the same string on every call. //regardless of the coordinate values. which change var GM = document.getElementById('TP'); if(GM.hasChildNodes) { var GMC = GM.getElementsByTagName('div'); var str = ''; for(i = 0; i < GMC.length; i++) { if(GMC[i].hasChildNodes) { for(var j = 0; j < GMC[i].childNodes.length; j++) { var gmc = GMC[i].childNodes[j]; var gmcTxt = gmc.childNodes[0].data; str += gmcTxt; } } } } alert(str); The list does not represent the positions of the divs as they appear in the browser, but in a sequence that is saved in another array when the divs are created. The same is true for document.getElementById('[id assigned each div]') The only way to detect the sequence is to do a long drawn out loop looking for coordinate values, and comparing them to a prestablish template set of values, then looping back through to compare the contents of each div and decide if they are in the right place (visually). The problem is that some divs may have the same content. If the same content appears to be in the right place, the coordinates can be wrong. So I need to detect the content and decide if it is right, regard- less of the coordinates. This has to be done by the program (of course). So the question is: What is javascript doing when it is asked to Code: document.getElementByTagName('[elem]'); In this case are the divs children of the document? (in the case of my project, children of a container div) And why would they not be detected in the order apparent in the browser window? I will post the current version and return and post a reply with the url. http://www.jekillen.com/jekillen/con..._wise_dev.html Hey, I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out. Here is the page with the conflict. Help? Hi All, I know this has been covered many times on this site, but I just cannot figure out what I'm doing wrong. I've got a jquery slideshow and some lightbox galley images that I'm trying to get to work together. I thought I had taken out the parts that were conflicting but I apparently haven't. Any help would be much appreciated. Here's the page I'm working on: oneeightyone.com/new/index.html So i have this one problem and its been a major pain for a while. I have both a light box function and a fade into page intro on my website. The issue i have is when i put in the lightbox, lightbox seems to not work whats so ever. So i made another page and first put in the lightbox...that worked like a charm but once i put in the fade in intro it basically gets me back to lightbox not working...So...any way to solve this? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function() { // fade in content. $( '#wrapper' ).fadeIn("slow"); }); </script> </head> <body> <div id="wrapper"> <table><tr><td><a href="air_pollution copy.jpg" rel="lightbox" ><img src="air_pollution.jpg" /></a></td></tr></table></div> </body> </html> So I am not great at Javascript, but i have 2 scripts that i want to work with each other. When i use one by itself, they each work fine, but when i add them together it does not work. I have a user form with a bunch of fields on it. If they choose an option on the drop down menu, some fields either show or disappear. Those fields have an "On Change" event that subtracts one field form another and gives us a total. ////////////////////////////////////// Drop Down Menu ///// rel sets to show the Code: <tr> <select name="checkout_by" class="textLeft" id="checkout_by" value="<?php if($cont == 'no') { echo $checkout_by; } ?>" > <option value="serial" selected rel="show">Item Series / Serial Number</option> <option value="isbn" rel="none">Barcode / ISBN Number</option> //////////////////////////////////// Fields used to subtract Code: <input name="serial_start" onChange="updatesum()" type="text" class="textLeft" id="serial_start" value="<?php if($cont == 'no') { echo $serial_start; } ?>" size="15"> Code: <input name="serial_end" onChange="updatesum()" type="text" class="textLeft" id="serial_end" value="<?php if($cont == 'no') { echo $serial_end; } ?>" size="15"> //////////////////////////////////// Field used to add the total up from above Code: <input name="org_quantity" type="text" id="org_quantity" value="<?php if($cont == 'no') { echo $orig_quantity; } ?>" size="10"> ///////////////////////////////////////Update total script Code: <script type="text/javascript"> function updatesum() { document.form1.org_quantity.value = (document.form1.serial_end.value -0) - (document.form1.serial_start.value -0); } </script> //////////////////////////////////// Hide Filed Script Code: var containerTag = 'TR'; var compatible = ( document.getElementById && document.getElementsByTagName && document.createElement && !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1) ); if (compatible) { document.write('<style>.accessibility{display: none}</style>'); var waitingRoom = document.createElement('div'); } var hiddenFormFieldsPointers = new Object(); function prepareForm() { if (!compatible) return; var marker = document.createElement(containerTag); marker.style.display = 'none'; var x = document.getElementsByTagName('select'); for (var i=0;i<x.length;i++) addEvent(x[i],'change',showHideFields) var x = document.getElementsByTagName(containerTag); var hiddenFields = new Array; for (var i=0;i<x.length;i++) { if (x[i].getAttribute('rel')) { var y = getAllFormFields(x[i]); x[i].nestedRels = new Array(); for (var j=0;j<y.length;j++) { var rel = y[j].getAttribute('rel'); if (!rel || rel == 'none') continue; x[i].nestedRels.push(rel); } if (!x[i].nestedRels.length) x[i].nestedRels = null; hiddenFields.push(x[i]); } } while (hiddenFields.length) { var rel = hiddenFields[0].getAttribute('rel'); if (!hiddenFormFieldsPointers[rel]) hiddenFormFieldsPointers[rel] = new Array(); var relIndex = hiddenFormFieldsPointers[rel].length; hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0]; var newMarker = marker.cloneNode(true); newMarker.id = rel + relIndex; hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]); waitingRoom.appendChild(hiddenFields.shift()); } setDefaults(); addEvent(document,'click',showHideFields); } function setDefaults() { var y = document.getElementsByTagName('input'); for (var i=0;i<y.length;i++) { if (y[i].checked && y[i].getAttribute('rel')) intoMainForm(y[i].getAttribute('rel')) } var z = document.getElementsByTagName('select'); for (var i=0;i<z.length;i++) { if (z[i].options[z[i].selectedIndex].getAttribute('rel')) intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel')) } } function showHideFields(e) { if (!e) var e = window.event; var tg = e.target || e.srcElement; if (tg.nodeName == 'LABEL') { var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor'); tg = document.getElementById(relatedFieldName); } if ( !(tg.nodeName == 'SELECT' && e.type == 'change') && !(tg.nodeName == 'INPUT' && tg.getAttribute('rel')) ) return; var fieldsToBeInserted = tg.getAttribute('rel'); if (tg.type == 'checkbox') { if (tg.checked) intoMainForm(fieldsToBeInserted); else intoWaitingRoom(fieldsToBeInserted); } else if (tg.type == 'radio') { removeOthers(tg.form[tg.name],fieldsToBeInserted) intoMainForm(fieldsToBeInserted); } else if (tg.type == 'select-one') { fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel'); removeOthers(tg.options,fieldsToBeInserted); intoMainForm(fieldsToBeInserted); } } function removeOthers(others,fieldsToBeInserted) { for (var i=0;i<others.length;i++) { var show = others[i].getAttribute('rel'); if (show == fieldsToBeInserted) continue; intoWaitingRoom(show); } } function intoWaitingRoom(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { waitingRoom.appendChild(Elements[i]); if (Elements[i].nestedRels) for (var j=0;j<Elements[i].nestedRels.length;j++) intoWaitingRoom(Elements[i].nestedRels[j]); } } function intoMainForm(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { var insertPoint = document.getElementById(relation+i); insertPoint.parentNode.insertBefore(Elements[i],insertPoint); if (Elements[i].nestedRels) { var fields = getAllFormFields(Elements[i]); for (var j=0;j<fields.length;j++) { if (!fields[j].getAttribute('rel')) continue; if (fields[j].checked || fields[j].selected) intoMainForm(fields[j].getAttribute('rel')); } } } } function getAllFormFields(node) { var allFormFields = new Array; var x = node.getElementsByTagName('input'); for (var i=0;i<x.length;i++) allFormFields.push(x[i]); var y = node.getElementsByTagName('option'); for (var i=0;i<y.length;i++) allFormFields.push(y[i]); return allFormFields; } /** ULTRA-SIMPLE EVENT ADDING **/ function addEvent(obj,type,fn) { if (obj.addEventListener) obj.addEventListener(type,fn,false); else if (obj.attachEvent) obj.attachEvent("on"+type,fn); } addEvent(window,"load",prepareForm); /** PUSH AND SHIFT FOR IE5 **/ function Array_push() { var A_p = 0 for (A_p = 0; A_p < arguments.length; A_p++) { this[this.length] = arguments[A_p] } return this.length } if (typeof Array.prototype.push == "undefined") { Array.prototype.push = Array_push } function Array_shift() { var A_s = 0 var response = this[0] for (A_s = 0; A_s < this.length-1; A_s++) { this[A_s] = this[A_s + 1] } this.length-- return response } if (typeof Array.prototype.shift == "undefined") { Array.prototype.shift = Array_shift } hello .. - I want ask about function in js file , when is it start work ? after calling in somewhere ? or in sequence - can I call function in js file from another js file ? thank you . . I have a page with several javascript (.js files) in the header, is it possible to preload all of these before the actual page content is loaded? I want to hide the javascript execution from taking place after the page has loaded. Any ideas? Thanks! Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script. I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts. The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down. The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html Thanks in advance for your valuable time. Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using: http://tympanus.net/codrops/2010/04/...n-with-jquery/ http://www.baijs.nl/tinycircleslider/ And here's my script so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tiny Carousel: A lightweight jQuery plugin</title> <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/> <!--[if lte IE 6]> <style type="text/css"> /* Internet Explorer 6 PNG transparency fix */ #rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); } #rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); } </style> <![endif]--> <script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true }); }); </script> <title>Awesome Bubble Navigation with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Awesome Bubble Navigation with jQuery" /> <meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <style> *{ margin:0; padding:0; } body{ font-family:Arial; background:#fff url(images/bg_scoot1.png) no-repeat top left; } .title{ width:548px; height:119px; position:absolute; top:300px; left:250px; background:transparent url(title.png) no-repeat top left; } a.back{ background:transparent url(back.png) no-repeat top left; position:fixed; width:150px; height:27px; outline:none; bottom:0px; left:0px; } #content{ margin:0 auto; } </style> </head> <body> <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li> </ul> </div> <div class="dot"></div> <div class="overlay"></div> <div class="thumb"></div> </div> <div id="content"> <a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a> <div class="title"></div> <div class="navigation" id="nav"> <div class="item user"> <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>User</h2> <ul> <li><a href="#">Profile</a></li> <li><a href="#">Properties</a></li> <li><a href="#">Privacy</a></li> </ul> </div> <div class="item home"> <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Home</h2> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="item shop"> <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Shop</h2> <ul> <li><a href="#">Catalogue</a></li> <li><a href="#">Orders</a></li> <li><a href="#">Offers</a></li> </ul> </div> <div class="item camera"> <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Photos</h2> <ul> <li><a href="#">Gallery</a></li> <li><a href="#">Prints</a></li> <li><a href="#">Submit</a></li> </ul> </div> <div class="item fav"> <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Love</h2> <ul> <li><a href="#">Social</a></li> <li><a href="#">Support</a></li> <li><a href="#">Comments</a></li> </ul> </div> </div> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('#nav > div').hover( function () { var $this = $(this); $this.find('img').stop().animate({ 'width' :'199px', 'height' :'199px', 'top' :'-25px', 'left' :'-25px', 'opacity' :'1.0' },500,'easeOutBack',function(){ $(this).parent().find('ul').fadeIn(700); }); $this.find('a:first,h2').addClass('active'); }, function () { var $this = $(this); $this.find('ul').fadeOut(500); $this.find('img').stop().animate({ 'width' :'52px', 'height' :'52px', 'top' :'0px', 'left' :'0px', 'opacity' :'0.1' },5000,'easeOutBack'); $this.find('a:first,h2').removeClass('active'); } ); }); </script> </body> </html> I'm trying to run two javascript files on a web page and there appears to be a conflict. Im using InnerFade with JQuery which can be seen at: http://medienfreunde.com/lab/innerfade/ And Im using Lightbox2 which is at http://www.huddletogether.com/projec...box2/#download If I use them individually they work fine but as soon as I call them together the one won't work. I'm not fluent in javascript so I would really appreciate any help with this. Thanks. |