JavaScript - Injecting Javascript On A Live Page.
I want to run a piece of javascript on a live page that I don't have backend control of. I know it's possible. I've never done it before though.
I'm in google chrome. This is what I see. I have no idea what I'm doing Similar TutorialsI need to be able to inject the jQuery library into a page through a JavaScript file, then be able to immediately use those jQuery functions. My code to injecting jQuery works: Code: jq = document.createElement("script"); jq.setAttribute("type","text/javascript"); jq.setAttribute("src","jquery.js"); document.getElementsByTagName('head')[0].appendChild(jq); After this code runs, I can do something such as "on a button click, do $(...).slideUp(...), but I cannot run $(...).slideUp(...) directly after that code. In my test HTML file, I have this in the head: Code: <script type="text/javascript"> injectJQuery(); $("#test").slideUp(1000); </script> Where injectJQuery(); is the code above that injects the jQuery. When the browser hits the "$("#test").slideUp(1000);" line, it tells me $ is undefined which means jQuery is not loaded. How would I go about doing this? So, I am working out a current issue I'm having with a sortable table script. Code: var sortableTable = new Class({:thumbsup: getOptions: function(){ return { overCls: false, onClick: true, sortOn: 0, sortBy: 'ASC', filterHide: true, filterHideCls: 'hide', filterSelectedCls: 'selected' }; }, initialize: function(table, options){ this.setOptions(this.getOptions(), options); this.table = $(table); this.tHead = this.table.getElement('thead'); this.tBody = this.table.getElement('tbody'); this.tFoot = this.table.getElement('tfoot'); this.elements = this.tBody.getElements('tr'); this.filtered = false; /*for(i=0;i<10;i++){ this.elements.clone().injectInside(this.tBody); } this.elements = this.tBody.getElements('tr');*/ //THIS IS FOR ANIMATION AND POINTER EFFECT ON HOVER this.elements.each(function(el,i){ if(this.options.overCls){ el.addEvent('mouseover', function(){ el.addClass(options.overCls); }, this); el.addEvent('mouseout', function(){ el.removeClass(options.overCls); }); } if(this.options.onClick){ el.addEvent('click', options.onClick); } }, this); //setup header this.tHead.getElements('th').each(function(el,i){ if(el.axis){ el.addEvent('click', this.sort.bind(this,i)); el.addEvent('mouseover', function(){ el.addClass('tableHeaderOver'); }); el.addEvent('mouseout', function(){ el.removeClass('tableHeaderOver'); }); el.getdate = function(str){ // inner util function to convert 2-digit years to 4 function fixYear(yr) { yr = +yr; if (yr<50) { yr += 2000; } else if (yr<100) { yr += 1900; } return yr; }; var ret; // if (str.length>12){ strtime = str.substring(str.lastIndexOf(' ')+1); strtime = strtime.substring(0,2)+strtime.substr(-2) }else{ strtime = '0000'; } // // YYYY-MM-DD if (ret=str.match(/(\d{2,4})-(\d{1,2})-(\d{1,2})/)) { return (fixYear(ret[1])*10000) + (ret[2]*100) + (+ret[3]) + strtime; } // DD/MM/YY[YY] or DD-MM-YY[YY] if (ret=str.match(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{2,4})/)) { return (fixYear(ret[3])*10000) + (ret[2]*100) + (+ret[1]) + strtime; } return 999999990000; // So non-parsed dates will be last, not first }; // el.findData = function(elem){ var child = elem.getFirst(); if(child){ return el.findData(child); }else{ return elem.innerHTML.trim(); } }; // el.compare = function(a,b){ var1 = el.findData(a.getChildren()[i]); var2 = el.findData(b.getChildren()[i]); //var1 = a.getChildren()[i].firstChild.data; //var2 = b.getChildren()[i].firstChild.data; if(el.axis == 'number'){ var1 = parseFloat(var1); var2 = parseFloat(var2); if(el.sortBy == 'ASC'){ return var1-var2; }else{ return var2-var1; } }else if(el.axis == 'string'){ var1 = var1.toUpperCase(); var2 = var2.toUpperCase(); if(var1==var2){return 0}; if(el.sortBy == 'ASC'){ if(var1<var2){return -1}; }else{ if(var1>var2){return -1}; } return 1; }else if(el.axis == 'date'){ var1 = parseFloat(el.getdate(var1)); var2 = parseFloat(el.getdate(var2)); if(el.sortBy == 'ASC'){ return var1-var2; }else{ return var2-var1; } }else if(el.axis == 'currency'){ var1 = parseFloat(var1.substr(1).replace(',','')); var2 = parseFloat(var2.substr(1).replace(',','')); if(el.sortBy == 'ASC'){ return var1-var2; }else{ return var2-var1; } } } if(i == this.options.sortOn){ el.fireEvent('click'); } } }, this); }, sort: function(index){ if(this.options.onStart){ this.fireEvent('onStart'); } // this.options.sortOn = index; var header = this.tHead.getElements('th'); var el = header[index]; header.each(function(e,i){ if(i != index){ e.removeClass('sortedASC'); e.removeClass('sortedDESC'); } }); if(el.hasClass('sortedASC')){ el.removeClass('sortedASC'); el.addClass('sortedDESC'); el.sortBy = 'DESC'; }else if(el.hasClass('sortedDESC')){ el.removeClass('sortedDESC'); el.addClass('sortedASC'); el.sortBy = 'ASC'; }else{ if(this.options.sortBy == 'ASC'){ el.addClass('sortedASC'); el.sortBy = 'ASC'; }else if(this.options.sortBy == 'DESC'){ el.addClass('sortedDESC'); el.sortBy = 'DESC'; } } // this.elements.sort(el.compare); this.elements.injectInside(this.tBody); // if(this.filtered){ this.filteredAltRow(); }else{ this.altRow(); } // if(this.options.onComplete){ this.fireEvent('onComplete'); } }, altRow: function(){ this.elements.each(function(el,i){ if(i % 2){ el.removeClass('altRow'); }else{ el.addClass('altRow'); } }); }, filteredAltRow: function(){ this.table.getElements('.'+this.options.filterSelectedCls).each(function(el,i){ if(i % 2){ el.removeClass('altRow'); }else{ el.addClass('altRow'); } }); }, filter: function(form){ var form = $(form); var col = 0; var key = ''; form.getChildren().each(function(el,i){ if(el.id == 'column'){ col = Number(el.value); } if(el.id == 'keyword'){ key = el.value.toLowerCase(); } if(el.type == 'reset'){ el.addEvent('click',this.clearFilter.bind(this)); } }, this); if(key){ this.elements.each(function(el,i){ if(this.options.filterHide){ el.removeClass('altRow'); } if(el.getChildren()[col].firstChild.data.toLowerCase().indexOf(key) > -1){ el.addClass(this.options.filterSelectedCls); if(this.options.filterHide){ el.removeClass(this.options.filterHideCls); } }else{ el.removeClass(this.options.filterSelectedCls); if(this.options.filterHide){ el.addClass(this.options.filterHideCls); } } }, this); if(this.options.filterHide){ this.filteredAltRow(); this.filtered = true; } } }, clearFilter: function(){ this.elements.each(function(el,i){ el.removeClass(this.options.filterSelectedCls); if(this.options.filterHide){ el.removeClass(this.options.filterHideCls); } }, this); if(this.options.filterHide){ this.altRow(); this.filtered = false; } } }); sortableTable.implement(new Events); sortableTable.implement(new Options); It works flawlessly on my dev page: http://www.align.com/Dev/Resources/ But I am having issues with is on my live page: http://www.align.com/Resources/ My first thought is that it could be a labeling issue (ie: I forgot to remove "/dev" when moving the HTML over to live) but after reviewing for an hour, I don't believe this is the issue. Could it be an ASP issue? thx in advance.... -Mike Fortuna Do you log JavaScript errors on your live website? The actual errors that users experience? If you do, what tool do you use? And how is it woring out? If you don''t why not? Hey I've created a new homepage for my cubecart shop, but when I upload it it doesn't display, I've check all resources and they are all being loaded Here is the site: http://www.genyx.co.uk/ Here is what it is supposed to look like: http://www.genyx.co.uk/Genyx%20Theme/html/index.htm Can anyone help? Hi, I got this code from w3schools and I want to alter it for my needs. However I can not get the basic example to work. I have repeatedly cross checked it and can't see any error. I wonder if anyone can spot what I am doing wrong. Code: </script> <script type="text/javascript"> function showHint(str){ if (str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if {xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getName.php?q="+str,true); xmlhttp.send() } </script> </head> <body> <label>Search by name: </label> <input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" /> <br /> <p>Suggestions: <span id="txtHint"></span></p> <br /> </body> And my getName.php is: PHP Code: <?php $a[]="Anna"; $a[]="Amalie"; $a[]="Amelie"; $a[]="Amanda"; $a[]="Amel"; $a[]="Amely"; $q=$_GET["q"]; if (strlen($q) > 0){ $hint=""; for ($i=0; $i<count($a); $i++){ if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){ if ($hint==""){ $hint=$a[$i]; }else { $hint=$hint." , ".$a[$i]; } } } } if ($hint == ""){ $response="no suggestion"; }else{ $response=$hint; } echo $response; ?> Nothing happens when I start typing in the name box. Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Hi guys im trying use a live search on my website, and iv found a code on the following link: http://www.w3schools.com/php/php_ajax_rss_reader.asp i understand it all but need to tweak it to suit my needs. What i need for it to do is search multiple drop down requests, for example: 1. first name 2. last name I want it to search by what has been selected (it is not necesary that all fields need to be selected, default will be any), however in the html it states: xmlhttp.open("GET","getrss.php?q="+str,true); and it only shows 1 option, i would like it to show multiple records. and once the records are shown, I would like the option of amending the search result any time in the search. please help Can some one help me step me through this last part of my script i have made. I have completed my entire chat program but currently i use: <meta http-equiv="refresh" content="5; URL=shout.php"> This is what keeps my chat room up to date, but this is pretty ugly due to the fact the browser makes a refresh. So i was hopeing some one could step my through to add ajax that makes a live affect with it appear to refresh. The script that has this chat is in the structure of: Code: <meta http-equiv="refresh" content="5; URL=shout.php"> <?php function get_chats(){ //query //while loop the logs out } getlogs(); ?> And thats it. I took a look on W3 about ajax and most of it was involve an event occuring such as submit/on key press which isn't what i want as some times a user may not do anything but i still want the chat to keep "up to date". I found one tutorial but it was over complicated to just take snippets out to put on my chat without knowing what it did or what to change for my chat to make it to work. Hope you can help - im a quick learner when i see the right example of what i need. Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. hello guys the idea is to make "offline" bill of lading i used to do php thing and well this time i only need to kinda make bill of lading generator so i want to pass value from page 1 to page 2 and to page . all offline without web server interaction i was never fluent in javascript and i wanted to get a quick start from you guys how do i pass the form ( javascript variable from 1 page to another page ) i am googling this as well right now and hoping answer from codingforums thanks I'm trying to figure out how to display the live price of gold on a site. I've been googling for 2 hours and have gotten nowhere, most results are people trying to sell you something. I just want a simple display of the price of gold on a site, and don't know where to start. If anyone has any idea, or has done something similar to this, let me know. I appreciate it Hi, I'm working on a project that will display a form that takes in the amount of Money I earn in a given month. This value is inserted into the code, and once submitted, a Live Updating value will display how much $ I would have earned so far this month. This counter will work and display much like Gas Pumps increment. So in example: I type in that I make $1,000 per month. Once submitted, the count begins. The code will figure out how much money I will be making every second of the day, and update it live. This value updates live displaying something like $0.0012. If I earn $1 Million per month, then the values would increment much faster. Could anyone give me some input? Thanks http://turtle-tv.com I already have the server time (top left) in a live format but this other bit is a bit much for me as I know little to nothing about JS and the code in question isnt mine. Anyway, the bit in the parenthesis which depending on the current server time will read Lights on in ??? or Lights off in ??? I would like to have turned in to a liver ticker while keeping all of it's current functionality. Like lets say it was 7:59:59pm EST time the message in the parenthesis would read (Lights off in 1 sec) then come 8:00:00pm the message would do a live rollover to read (Lights on in 11 Hrs, 30 Mins & 0 Secs) then count down from there and then come lets say 7:39:59am EST the message would read (Lights on in 1 Sec) and come 7:30:00am EST the message would roll over to the lights off message. If this is something you can do then great but if not then thankyou for at least reading my post. If you are able to do this and can improve on existing code for the liver server clock then please do that as well as there's some redundant code I don't even need for stuff liek the day etc since I'm just displaying as hh:mm am/pm clock in a 12hr format. Code: <head> <title>Niko's Live 24/7 Video Broadcast</title> <script type="text/javascript"> var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"] function showLocalTime(container, servermode, offsetMinutes, displayversion){ if (!document.getElementById || !document.getElementById(container)) return this.container=document.getElementById(container) this.displayversion=displayversion var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-php")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>' this.localtime=this.serverdate=new Date(servertimestring) this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time this.updateTime() this.updateContainer() } showLocalTime.prototype.updateTime=function(){ var thisobj=this this.localtime.setSeconds(this.localtime.getSeconds()+1) setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second } showLocalTime.prototype.updateContainer=function(){ var thisobj=this if (this.displayversion=="long") this.container.innerHTML=this.localtime.toLocaleString() else{ var hour=this.localtime.getHours() var minutes=this.localtime.getMinutes() var seconds=this.localtime.getSeconds() var ampm=(hour>=12)? "pm" : "am" var dayofweek=weekdaystxt[this.localtime.getDay()] <!-- // this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+" ("+dayofweek+")" this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+""+ampm+"" // --> } setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second } function formatField(num, isHour){ if (typeof isHour!="undefined"){ //if this is the hour field var hour=(num>12)? num-12 : num return (hour==0)? 12 : hour } return (num<=9)? "0"+num : num//if this is minute or sec field } </script> </head> <body background="./smalls_file_mainBg_1919366_7636654_l.jpg"> <font size="2" color="FFFF00" style="background: #181818;">Time Now: <span id="timecontainer">Loading...</span></font> <script type="text/javascript"> new showLocalTime("timecontainer", "server-php", 0, "short") </script> <?php $lights_on = '7:30am'; $lights_off = '8pm'; $time = lights_on_off(time(), $lights_on, $lights_off); ?> <center> <font size="5" color="FFFF00" style="background: #181818;"> Lights out from <?php echo $lights_off; ?> to <?php echo $lights_on; ?> <?php echo date('T'); ?> (Lights <?php echo $time['n_state']; ?> in <?php $h = ($time['remaining']['m'] + 1 ==60) ? $time['remaining']['h'] + 1 : $time['remaining']['h']; $m = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['m']; $s = ($time['remaining']['m'] + 1 ==60) ? 0 : $time['remaining']['s']; echo ($h>1) ? $h . ' Hrs, ' : (($h==1) ? $h . ' Hr, ' : ' '); echo ($m>1) ? $m . ' Mins & ' : (($m==1) ? $m . ' Min & ' : ' '); echo ($s>1) ? $s . ' Secs' : (($s==1) ? $s . ' Sec' : '0 Secs'); ?> ) !</font></center> <?php function lights_on_off($time, $lights_on, $lights_off){ $time = (isset($time)) ? $time : time(); $d_lights_on = strtotime($lights_on); $d_lights_off = strtotime($lights_off); $secs_lights_on = (date("G",$d_lights_on)*60 + date("i",$d_lights_on))*60 + date("s",$d_lights_on); $secs_lights_off = (date("G",$d_lights_off)*60 + date("i",$d_lights_off))*60 + date("s",$d_lights_off); $secs = (date("G",$time)*60 + date("i",$time))*60 + date("s",$time); $c_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'on' : 'off'; $n_state = ($secs_lights_on < $secs && $secs < $secs_lights_off) ? 'off' : 'on'; $next_switch = ($secs_lights_on < $secs && $secs_lights_off > $secs) ? $secs_lights_off : ($secs_lights_on + 60*60*24); $next_switch = ($next_switch > ($secs+60*60*24)) ? $next_switch - (60*60*24) : $next_switch; $time_rem = $next_switch - $secs; $h = floor($time_rem/(60*60)); $m = floor(($time_rem-($h*60*60))/60); $s = $time_rem-($h*60*60)-($m*60); return array('c_state' => $c_state,'n_state' => $n_state, 'remaining' => array('secs' => $next_switch, 'h' => $h, 'm' => $m, 's' => $s)); } ?> <center> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="523" id="utv451302"> <param name="flashvars" value="autoplay=false&brand=embed&cid=1919366"/><param name="allowfullscreen" value="true"/> <param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/live/1/1919366"/> <embed flashvars="autoplay=false&brand=embed&cid=1919366" width="625" height="545" allowfullscreen="true" allowscriptaccess="always" id="utv451302" name="utv_n_740840" src="http://www.ustream.tv/flash/live/1/1919366" type="application/x-shockwave-flash" /></object> <iframe scrolling="no" height="523" frameborder="0" width="576" src="./prochatrooms/index.php"></iframe> </center> </body> so im interested by those video of people walking out and talking on the screen like these links below: http://www.premiumpostcard.com/ http://www.forcefactor.com/?&fb_lgid...4aaade4060d68b know my rational brain thinks well its just a video that is played with the background white or Green Screened to whatever. but the way i would do it in dreamweaver to insert a swf or video would provide a play button and stuff which these videos don't have. is there a code resource that i could apply to make this happen somewhere out there? I have an external .js file that ends its process with a document.write() command. This needs to be called near the end of the HTML page, right before </body>. Am I better off calling the external .js at the desired location in the footer? Or making the .js into a defined function, loading the .js in the <head> portion and then executing the function in the footer? - M. Hi I hope someone can help me or direct me to the right place.... Here is the situation. I am a graphic guy and do some web design but am not really good with javascript. I am using the enlargeit.js program for the photo viewer on www.blackwoodsconcrete.com in the galleries. It has worked wonderfully up till now. I recieved new pictures from the owner to post on his page and they will not open when i view them live. I use dreamweaver cs5 and when i look in preview mode, they work great. They are standard jpg images. see http://www.blackwoodsconcrete.com/example_error.html for an example. The top pic does not work and the rest do... I have resized them, changed file formats, opened them in photoshop and edited them, and basically anything else you could think of, i tried. Even if i open one of the working photos in photoshop and place the new one over it and save it as something completely different it still does not work! everything else does. Does anyone have any clue what to do? Thanks in advance! TK I have used an excellent template which uses JS to display background images. However while this works locally it doesn't when published. The site structure is sound and I notice this happens with the source files I downloaded also so it's nothing I have done in my build which could have caused this. This is the link to my site, everything is fine except the background image not showing. http://www.khawkinsdesign.com Any ideas, as I say fine locally, not fine when published? Hi all, First... this isn't homework... Now, I'm trying to make a live Regular Expression evaluator and I thought it would be really simple, but it's not working. Here's the JS I wrote..... Code: <html> <head> <style type="text/css"> body { background-color:#ddeeff; } textarea#inp1, textarea#inp2, textarea#out1 { margin:0 25%; margin-bottom:1%; border:0; padding:0; width:50%; height:100px; border: 1px solid #000000; } p { margin:0 25%; } </style> <script type="text/javascript"> function test() { var inp1 = document.getElementById('inp1'); /* regex in here */ var inp2 = document.getElementById('inp2'); /* test string here */ var out1 = document.getElementById('out1'); /* results here */ r = inp1.value.split(','); /* get find , replace */ var str = inp2.value; var find = r[0] || ''; var repl = r[1] || ''; var result = str.replace(find, repl); out1.value = result; } </script> </head> <body> <p>regex</p> <textarea id="inp1"></textarea> <p>test string</p> <textarea id="inp2"></textarea> <p>result</p> <textarea id="out1"></textarea> <script type="text/javascript"> setInterval('test()', 100); </script> </body> </html> Now, it DOES work if I do something simple like enter the word "Test" for the test string and T,X for the "regex" (the result transforms into "Xest" as it should). But if I put in something like this: /<p(.*?)>(.*?)<\/p>/gi,'$2' for the regex and <p class="test">Hello</p> for the test string The result is <p class="test">Hello</p> when it should be just Hello I can put regex strings into an array and of course it works (for example): Code: var find = [/<p>/g,/<\/p>/g]; var repl = ['P open', 'P close']; var n = find.length; while (n--) str = str.replace(find[n], repl[n]); ...blah...blah... So why doesn't my code work when I'm using variables that contain find and replace strings??? Am I missing something, or can it not be done this way? -- Roger (edit to add): The above code is online HERE Hello, I'm a novice with java script and I can't figure out why my script will work locally, but not live. Here is the link. http://www4.uwm.edu/recsports/ There is supposed to be a rotating slideshow in the header, but it's just a black box. Thanks! |