JavaScript - Updating Img.src Does Not Work
Hi,
I am creating a web page which automatically updates one image every 5 seconds. I use ajax to fetch a new img url every 5 seconds, and then update the image by changing img.src. I tested the same (in IE8, firefox) and it worked without any issues in my development server. But, when I try to put it on production server, many people are complaining that they are not able to see any image at all. Code: if (url_received){ var path = url.substring(url.indexOf("/")); var img = document.getElementById("testimage"); img.src = "/test/media/" + path; } I cannot think of a reason why this is failing for others. Is this due to any security issues? If someone helps me out, I would be very thankful. Similar TutorialsI'm fairly new to JS so sorry in advance if this is a stupid question! I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page. My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic. I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself." I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?) So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself? heres the JS I'm using to update the div: Code: <label for="editor1">Background Story</label> <textarea id="editor1" name="editor1">This is sample text</textarea> <div id="story"></div> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); timer = setInterval('updateDiv()',100); function updateDiv(){ var editorText = CKEDITOR.instances.editor1.getData(); $('#story').html(editorText); }</script> Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) { steps = 1000; elem = document.getElementById(obj); function fadeIn() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ i +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration); } } function fadeOut() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration); } } /* One for Fade in and anything will be fade out*/ if(toggle == 1) { fadeIn(); } else { fadeOut(); } } Thanks, Jon W Hi I am making a PC customization website, And I need help wit hthe inputs where you select the parts for the PC. Anyway, I need help for self updating inputs, Like if a user was to select a socket 775 processor, The form would automatically update the motherboard field from --Select a processor-- to a list of socket 775 motherboards. I am quite new at javascript I have never attempted to do anything like this myself, Although I don't know if this would need some PHP in here as well Anyway thanks in advance, Gergy Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function loadContent() { $('#count').load('counter.php', function() { setTimeout("loadContent()", 1000); }); return false; } $(loadContent); And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? Hi - I am updating a site for a friend as the original designer has gone missing.. I am no developer by any means but know basic html etc.. I want to change a link in the drop down menu.js file, have opened it in my text editor and changed the link that needs changing to a diff page but it isn't updating on the site - arghhh!! I have notice at the top of the page it has: // QuickMenu Pro, Copyright (c) 1998 - 2003, OpenCube Inc. - http://www.opencube.com does this have anything to do with it? I can't find anything on google - any advice is greatly appreciated. Thanks Is there any way that I can make my HTML website STAY updated from a javascript innerHTML or value change? I've only used it a little...
Hi guys, I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work: Code: <html> <head> <script language="Javascript" type="text/javascript"> var count = 0; function Window() { MyWindow = window.open('', 'myWin', 'height=250,width=250') MyWindow.document.write('<html>') MyWindow.document.write('<head>') MyWindow.document.write('<\/head>') MyWindow.document.write('<body>') MyWindow.document.write('<FORM method="post" name="aname">') MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>') MyWindow.document.write('<\/FORM>') MyWindow.document.write('<\/body>') MyWindow.document.write('<\/html>') MyWindow.focus() } function newfunc() { count++ MyWindow.document.write(count) } </script> </head> <body> <FORM method="post" name="me"> <INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/> </body> </html> I am probably doing something very wrong. Is there a way for this to work? Thanks! I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common... Code: document.getElementById("tester").innerHTML= "hello"; document.getElementById("tester").onmouseover = "alert('hello')"; You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything. How can I change events? Jason Resolved
In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked. I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link. I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari. I'd happily pay someone (Paypal) to help me with this. Code: <html> <body> <script language="JavaScript"> // Initialize WYSIWYG function initialise() { // HTML code to paste var html = "<a href='http://www.google.com'>Click Me</a>"; if (detectBrowser() == "ie") { // IE editorContent.document.designMode='on'; // turn on design mode editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu // Paste the HTML code in iframe document.editorContent.focus(); range = editorContent.document.selection.createRange(); range.pasteHTML(html); document.editorContent.focus(); } else { // FF, Saf, Chr, Op document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu // Paste the HTML code in iframe editorContent.focus(); editorContent.document.execCommand("inserthtml", false, html); editorContent.focus(); } } // Show Context Menu function showContextMenu(e) { // Get the URL from the clicked link if (detectBrowser() == "firefox") { url = e.target.href; } else { url = document.getElementById('editorContent').contentWindow.event.srcElement.href; } // Set the URL in the pop-up and load it document.getElementById("theUrl").value = url; document.getElementById("popUp").style.visibility = 'visible'; document.getElementById("popUp").style.display = ''; if (navigator.appName != "Microsoft Internet Explorer") { e.stopPropagation(); e.preventDefault(); } return false; } // Update the URL function updateUrl() { newUrl = document.getElementById("theUrl").value; alert('Update the URL to '+newUrl); /*******************************************/ /* WHAT TO DO HERE TO UPDATE URL IN EDITOR */ /*******************************************/ document.getElementById("popUp").style.visibility = 'hidden'; document.getElementById("popUp").style.display = 'none'; } // Detect browser function detectBrowser() { var userAgent = navigator.userAgent; var browser; if (userAgent.indexOf("MSIE") !=-1) browser = "ie"; if (userAgent.indexOf("Firefox") !=-1) browser = "firefox"; if (userAgent.indexOf("Chrome") !=-1) browser = "chrome"; if (userAgent.indexOf("Safari") !=-1) browser = "safari"; if (userAgent.indexOf("Opera") !=-1) browser = "opera"; return browser; } </script> <div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px"> <form> <input type="text" id="theUrl" size="30"> <p><input type="button" value="Update" onClick="updateUrl()"> </form> </div> <iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe> </body> </html> Hello Guys, I have a question here.. I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed.. Here is my page. PHP Code: <link rel="stylesheet" href="../../css/li-scroller.css" type="text/css"> <script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#ticker01").liScroll(); }); </script> <?php $file = file_get_contents ('playingnow.txt'); ?> <div class="scrollpos"> <ul id="ticker01"> <li><a href="#"><?php Echo $file;?></a></li> <!-- eccetera --> </ul> </div> What can I add to make it go out and reload just the div not the entire page? Please advise.. I am fairly new to JS so please have patenience with me. What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them. The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags. This is a touch screen so I want control along the bottom of the screen. I have did this very crudely with css and html. But I would like to refine it a little more with javascript. I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page. Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe. Code: <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <script type="text/javascript"> var frames = Array('cal11,html/', 10, 'cal22.html/', 10, 'cal33.html/', 10, 'cal55.html/', 10 'cal66.html/', 10, 'cal77.html/', 10, 'cal44.html/', 15,); var i = 0, len = frames.length; function ChangeSrc() { if (i >= len) { i = 0; } // start over document.getElementById('frame').src = frames[i++]; setTimeout('ChangeSrc()', (frames[i++]*1000)); } window.onload = ChangeSrc; </script> <title>Calender</title> </head> <body> <div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe> </div> <ul class="solidblockmenu"> <li><a href="calstart.html">Instructions</a></li> <li><a href="cal11.html" target="frame">Month View</a></li> <li><a href="cal22.html" target="frame">Week View</a></li> <li><a href="cal33.html" target="frame">Agenda</a></li> <li><a href="cal55.html" target="frame">Current Projets</a></li> <li><a href="cal66.html" target="frame">Bidding Projects</a></li> <li><a href="cal77.html" target="frame">Open Service Calls</a></li> <li><a href="cal44.html" target="frame">General Information</a></li> <li><a href="??????????" target="frame">Stop Scroll</a></li> </ul> </body> </html> In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere. Form code: Code: Month 1: <input size="7" type="text" value="0" id="return1" name="return_1"> <input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();"> Month 2: <input size="7" type="text" id="return2" value="0" name="return_2"> Month 3: <span style="color:black; font-size:14px;" id="return3"></span> ThirdReturn code: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; var third_return_amount = document.getElementById("return3"); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; if (second_return == 0){ var new_second = document.getElementById("return2") new_second.innerHTML = Math.round(temp); } else{ var third_return_amount = document.getElementById("return3"); //alert (temp); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } } Does anyone know why this doesn't work or what can be done to fix it? Thank you! Hello, I'm working with a cooking script that redirects a user if he has already visted the page. Currently, it's set to expire every 24 hours. However, I'd like to have it expire at midnight everyday. How would I change this? Code: <script> num_days = 24; function ged(noDays){ var today = new Date(); var expr = new Date(today.getTime() + noDays*60*60*1000); return expr.toGMTString(); } function readCookie(cookieName){ var start = document.cookie.indexOf(cookieName); if (start == -1){ document.cookie = "seenit=yes; expires=" + ged(num_days); } else { window.location = go_to; } } var go_to = "/development"; readCookie("seenit"); </script> hi, I want to create a litebox with one or two inputs in it and submit button. These inputs would work in jQuerry to update information in main page.. I see many websites are using them, but i am not so good in javascript if you know any examples of simple litebox which could work with jQuerry, please inform me. All suggestions are welcome. Kind regards, Aurimas. Given 2 iframes named leftbox and rightbox The asp file in the "leftbox" lists the "title" field from a SQL table. Each record is listed in an HTML table and each record includes an edit button. When the edit button is clicked, the sql record's text field is opened for editing in an asp file in the "rightbox". When I click "Update" in "rightbox", the updates are posted to the SQL table. I then want both the "leftbox" and "rightbox" to update to reflect the changes. In the asp file that posts the updates, the function Code: function addPost (u) { parent.leftbox.location.replace ("displayposts.asp"); parent.rightbox.location.replace ("changepost.asp?u="+u); } is called after the updating is completed Code: ...... cn.open cn.execute sql %> <script language="javascript" type="text/javascript" > addPost(<%=uniq%>); </script> With Firefox this does exactly what I want. However, the code seems to be ignored by IE7 and IE8. When I click "Update" in IE, the "leftbox" doesn't change and the "rightbox" disappears. I can find no IE error. I would appreciate any help. Mac What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way? Code: <div id="navBar"> <ul> <li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li> <li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li> <li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li> <li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li> <li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li> </ul> </div><!--end navBar --> <form> <label style="color: #FFF;">Change name of links! You can only change them once!</label><br /> <input type="text" class="customLink" size="15" name="link0" onblur="this.value=removeSpaces(this.value);" maxlength="8"/> <input type="text" class="customLink" size="15" name="link1" onblur="this.value=removeSpaces(this.value);" maxlength="8"/> <input type="text" class="customLink" size="15" name="link2" onblur="this.value=removeSpaces(this.value);" maxlength="8"/> <input type="text" class="customLink" size="15" name="link3" onblur="this.value=removeSpaces(this.value);" maxlength="8"/> <input type="text" class="customLink" size="15" name="link4" onblur="this.value=removeSpaces(this.value);" maxlength="8"/> <input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!" /> </form> Code: <script> var links = new Array("home", "portfolio", "stuff", "about me", "contact"); function replaceLinks(name){ for (var i=0; i<=4; i++) { var linkPosition = "link"+i; links[i] = name.linkPosition.value; changeLink(i); } } function changeLink(number) { document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>"; } </script> ANY HELP WOULD BE AWESOME!!! I just replaced the functions to look like this... Code: function replaceLinks(name){ for (var i=0; i<=4; i++) { links[i] = name.linker+i.value; changeLink(i); } } function changeLink(linkNumber) { document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>"; } Now the links are updating but I get NaN for each link. Hello all, and thanks in advance for the help. I want to update a div using innerHTML and take the data from an external HTM file residing on my server. The purpose is to have a series of links in the div content_left that when clicked dynamically change the div content_right. That will allow me to create individual pages for the dynamic content rather than including it all on the original page. Any help is appreciated. Hello guys, Could you please help me with JavaScript that updates input by onKeyUp event. By updating input name products_data[XXXXXX][purchase_price] or input name products_data[XXXXXX][av_factor] shoul be updates input name products_data[XXXXXX][price] by formula: products_data[XXXXXX][purchase_price] * products_data[XXXXXX][av_factor] = products_data[XXXXXX][price] Because form has alot of integer values for each id: XXXXXX it need to be changes price for exactly id, not all. Code: function updatePrice() { var purchase_price = 100 var av_factor = 3; price = purchase_price * av_factor } <form name="product"> <input type="text" name="products_data[29796][purchase_price]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29796][av_factor]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29796][price]" /> <input type="text" name="products_data[29797][purchase_price]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29797][av_factor]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29797][price]" /> <input type="text" name="products_data[29798][purchase_price]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29798][av_factor]" onKeyUp="updatePrice()" /> <input type="text" name="products_data[29798][price]" /> ... </form> Thank you for any suggestion Best Regards |