I am trying to display some banner from a remote location using hrefs and img in JavaScript.  On client side:  &lt;script src="data/JScript.js?id=123" type="text/javascript"&gt;&lt;/script&gt;   I want some solution so that I can make 123 dynamic in below JS file. As of now it is hard coded.  I just want that i will give client the above JS link and it will generate a dynamic link to a website with a querystring paramenter like (www.abc.com/123)   JS file (JScript.js):  document.write('&lt;div style="text-align:center" class="img-responsive" &gt;&lt;a href="www.test.com/123" &gt; &lt;img style="width:200px;height:200px;" src="http://pixel.nymag.com/imgs/daily/intelligencer/2015/07/18/20-donald-trump.w529.h352.2x.jpg" alt="" &gt; &lt;/img&gt; &lt;/a&gt; &lt;/div&gt;');
16364
How can I reference the script element that loaded the javascript that is currently running?  Here's the situation. I have a "master" script being loaded high in the page, first thing under the HEAD tag.  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;   There is a script in "scripts.js" which needs to be able to do on-demand loading of other scripts. The normal method doesn't quite work for me because I need to add new scripts without referencing the HEAD tag, because the HEAD element hasn't finished rendering:  document.getElementsByTagName('head')[0].appendChild(v);   What I want to do is reference the script element that loaded the current script so that I can then append my new dynamically loaded script tags into the DOM after it.  &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt; loaded by scripts.js--&gt;&lt;script type="text/javascript" src="new_script1.js"&gt;&lt;/script&gt; loaded by scripts.js --&gt;&lt;script type="text/javascript" src="new_script2.js"&gt;&lt;/script&gt;
104259
I am currently working on a project to create a (not prepaid) postage label.  In java, I would go about doing this by creating a bufferedimage and adding various other images to it to create what I want.  What I want is to put text, converted to an image, onto a template letter, to make a proper postage label.    For example, imagine I was given a document with blank spaces such as:  "Name: _________"  This document is in the form of an image, and I want to use apex and visualforce (the page is already constructed, I am just stuck at the image manipulation part) to add whatever name the user types in onto the image and pack it and email the new image.  The question I have here is: where do I even start?  Java is a little nicer when it comes to image manipulation, as far as I can see.  I've looked into using a web service and sending a soapxml request to return a proper encoded image, but I haven't found a web service that can do this.  Any pointers would be nice. Thanks.
104708
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:   &lt;div&gt;   &lt;!-- some html --&gt;   &lt;script type="text/javascript"&gt;     /** some javascript */   &lt;/script&gt; &lt;/div&gt;   I'm inserting the whole thing into the DOM, but the JavaScript isn't being run.  Is there a way to run it?    Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed.  I can't call eval on the response because the JavaScript is within a larger block of HTML.  I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky.  Anyone know a better way?
9012
I'd like to make a click event fire on an &lt;input type="file"&gt; tag programmatically.  Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.  I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
24948
I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.
38485
is handy, but is there a similar function in the .NET framework for ?  I'm looking for syntax like this:  Url.Combine("http://MyUrl.com/", "/Images/Image.jpg")   which would return:  "http://MyUrl.com/Images/Image.jpg"
123115
What's the best way to get a regular anchor (&lt;a href="..."&gt;) to submit the form it is embedded in when clicked?  &lt;form&gt;     &lt;ul&gt;         &lt;li&gt;             &lt;p&gt;                 The link could be &lt;span&gt;embedded &lt;a href="" onclick="?"&gt;at any level&lt;/a&gt;&lt;/span&gt;                 in the form, so "this.parentNode.parentNode..." is no good. :(             &lt;/p&gt;         &lt;/li&gt;     &lt;/ul&gt; &lt;/form&gt;   I know that the easiest way using jQuery would be  $('#myLink').click(function() {     $(this).parents('form:first').submit(); });   ...but I'm trying to find a way to do this without using a library.    Edit: I'm really trying to find a method which doesn't require knowledge of the form (eg: its name, id, etc). This would be similar to how you could put this on an input element: &lt;input onclick="this.form.submit()" /&gt;
122561
Most sources of documentation state that one can declare a webpage a duplicate of another by applying this tag on the duplicate page:  &lt;link rel="canonical" href="(absolute URL to original page)"&gt;   I could generate the above tag via the script below:  &lt;script&gt; var l=document.createElement('Link'); l.rel='canonical';l.href='(absolute URL to original page)'; document.getElementsByTagName('head')[0].appendChild(l); &lt;/script&gt;   My question is, would google be able to process this javascript and believe I'm declaring the page as a duplicate page? or would I be forced to use the link tag in the header?  I ask because I'm trying to reduce the unnecessary bytes required to be processed before the actual user readable content begins.
31228
How can I fetch images from a server?  I've got this bit of code which allows me to draw some images on a canvas.  &lt;html&gt;   &lt;head&gt;     &lt;script type="text/javascript"&gt;       function draw(){         var canvas = document.getElementById('canv');         var ctx = canvas.getContext('2d');          for (i=0;i&lt;document.images.length;i++){           ctx.drawImage(document.images[i],i*150,i*130);         }     }     &lt;/script&gt;   &lt;/head&gt;   &lt;body onload="draw();"&gt;     &lt;canvas id="canv" width="1024" height="1024"&gt;&lt;/canvas&gt;     &lt;img src="http://www.google.com/intl/en_ALL/images/logo.gif"&gt;     &lt;img src="http://l.yimg.com/a/i/ww/beta/y3.gif"&gt;     &lt;img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png"&gt;   &lt;/body&gt; &lt;/html&gt;   Instead of looping over document.images, i would like to continually fetch images from a server.  for (;;) {     /* how to fetch myimage??? */     myimage = fetch???('http://myserver/nextimage.cgi');     ctx.drawImage(myimage, x, y); }
66978
I have got a problem with JavaScript. I want to add a drop down list control with a link as Value of it. After it will be choosen and clicked button it schould redirect me to chosen link. I tried this code from this Article:       &lt;select name="list" id="list" accesskey="target"&gt;     &lt;option value='none' selected&gt;Choose a theme&lt;/option&gt;     &lt;option value="index.html"&gt;Theme 1&lt;/option&gt;     &lt;option value="theme2.html"&gt;Theme 2&lt;/option&gt;     &lt;option value="theme3.html"&gt;Theme 3&lt;/option&gt; &lt;select&gt; &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;  &lt;script type="text/javascript"&gt; function goToNewPage() {     var url = document.getElementById('list').value;     if(url != 'none') {         window.location = url;     } }     but when I tried to add by the script, or by html on site, or by designer its erase me that sort of text:  &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;   It's live only:  &lt;input type=button value="Go" /&gt;
78512
I've seen a lot of questions around this, but not exactly this question.  Within apex code (not using VF so JavaScript isn't an option), how can one find the dimensions of an image given its URL? Some use cases are:   identifying wide images in a rich text field because VF's renderAs=&quot;pdf&quot; doesn't honor the max-width property and wide images go off-page  How do other people deal with this?  I've written my own code (see below), but I'm also curious to see what other answers you all have.
82017
Note:My question is not about Javascript.  I'm developing a plugin for jQuery/Mootols/Prototype, that work with DOM.  This plugin will be to improve page performance (better user experience).  The plugin will be distributed to other developers so that they can use in their projects.  How does the lazyload: The images are only loaded when you scroll down the page  (will look like this:  LazyLoad).  But he does not need HTML5, I refer to this attribute: data-src="image.jpg"  Two good examples of website use LazyLoad are: youtube.com (suggested videos) and facebook.com (photo gallery).  I believe that the best alternative would be to use:  &lt;A href="image.jpg"&gt;Content for ALT=""&lt;/a&gt;   and convert using javascript, for this:  &lt;IMG alt="Content for ALT=\"\"" src="image.jpg"&gt;   Then you question me: Why do you want to do that anyway?  I'll tell you: Because HTML5 is not supported by any browser (especially mobile)  And the attribute data-src="image.jpg" not work at all Indexers.  I need a piece of HTML code to be fully accessible to search engines. Otherwise the plugin will not be something good for other developers.  I thought about doing so to help in indexing:  &lt;noscript&gt;&lt;img src="teste.jpg"&gt;&lt;/noscript&gt;   But noscript has negative effect on the index (I refer to the contents of noscript)  I want a plugin that will not obstruct the image indexing in search engines.  This plugin will be used by other developers (and me too).  This is my question: How to make a HTML images accessible to search engines, which can minimize the requests?
81617
Any alternate thing in JavaScript to make a file upload control ?    actually the problem was, i am creating file upload control dynamically using htmlwriter, and when i use request.form[fileuplodctrl].tostring() , i am getting only the file name not path...   can any one suggest me any other ways to get full file path :)
86062
How can I display an image which is stored in files?  For attachments I can use the code below, but it doen't work for files.  &lt;apex:image id="Stat1" URL="/servlet/servlet.FileDownload?file=0698E0000008w5e" width="15" height="15"/&gt;
58040
I want to add background image, to part of my header i wrote code like this.  but its not working.   &lt;div style="{!'background:' + v.backgroundColor + ' url(' + v.backgroundImageURL +') no-repeat;background-position: center;background-size: cover;'}"&gt;  &lt;/div&gt;     doInit : function(component, event, helper) {          var url = $A.get('$Resource.RollingHillsGrey1');         component.set('v.backgroundImageURL', url);     }
110632
I'm currently building a sitemap for my web app.  Note: my app is a single page app built with React and Firebase.  Basically I wan to index blogPost and product pages. So I intend to generate my sitemap dynamically (on server). It's a small website (around 500 pages).  I want to build something like this:  &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;   &lt;url&gt;     &lt;loc&gt;       https://www.myproject.org/blog/some-blog-post-slug     &lt;/loc&gt;     &lt;lastmod&gt;2019-11-14T20:22:43.502+00:00&lt;/lastmod&gt;     &lt;changefreq&gt;weekly&lt;/changefreq&gt;     &lt;priority&gt;0.8&lt;/priority&gt;   &lt;/url&gt;   &lt;url&gt;     &lt;loc&gt;       https://www.myproject.org/dp/some-product-slug     &lt;/loc&gt;     &lt;lastmod&gt;2019-11-15T13:08:52.127+00:00&lt;/lastmod&gt;     &lt;changefreq&gt;weekly&lt;/changefreq&gt;     &lt;priority&gt;0.8&lt;/priority&gt;   &lt;/url&gt; &lt;/urlset&gt;   And I keep the following properties in my database, both for blogPosts and products:  createdAt: &lt;Timestamp&gt; lastModifiedAt: &lt;Timestamp&gt;  // UPDATED EVERYTIME I UPDATE THE RECORD   And I'm thinking about using my lastModifiedAt value as the &lt;lastmod&gt; tag for the sitemap.  So far, so good! Everytime I update my blogPost or product objects in my database. The next time the sitemap is requested, the new modifiedDate will show on those that have been changed.  QUESTION  But what if I make a change not in the database itself, but in the way I render all the product pages, for example.  Imagine that I've added some structured data tags to display rich results on google, with price, reviews etc. So my product info is the same, but from that point on, all of my product pages will render those extra tags that I need to be re-indexed.  Example (add a structured data tag with the product price):   &lt;div property="schema:price" content="119.99"&gt;&lt;/div&gt;   In that situation, will I have to update all &lt;lastmod&gt; for all the products? How Google will know that it needs to re-crawl those pages and be able to see the structured data tags?  What if I change only the styles for the productPages? Do I have to update the &lt;lastmod&gt; for every product in this case?
89673
I am trying to get  to work within salesforce visualforce pages.  I have a basic vf page from  example, but it does not respopnd, I suspect there may be some "unknown" workaround needed? Does anyone know?  &lt;apex:page standardController="Contact" showHeader="false" sidebar="false" docType="html-5.0"  standardStylesheets="false"&gt;  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"&gt;&lt;/script&gt;      &lt;div id="the-basics"&gt;   &lt;input class="typeahead" type="text" placeholder="States of USA"/&gt; &lt;/div&gt;  &lt;script&gt;     var substringMatcher = function(strs) {       return function findMatches(q, cb) {         var matches, substrRegex;          // an array that will be populated with substring matches         matches = [];          // regex used to determine if a string contains the substring `q`         substrRegex = new RegExp(q, 'i');          // iterate through the pool of strings and for any string that         // contains the substring `q`, add it to the `matches` array         $.each(strs, function(i, str) {           if (substrRegex.test(str)) {             // the typeahead jQuery plugin expects suggestions to a             // JavaScript object, refer to typeahead docs for more info             matches.push({ value: str });           }         });          cb(matches);       };     };      var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',       'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',       'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',       'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',       'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',       'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',       'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',       'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',       'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'     ];      $('#the-basics .typeahead').typeahead({       hint: true,       highlight: true,       minLength: 1     },     {       name: 'states',       displayKey: 'value',       source: substringMatcher(states)     }); &lt;/script&gt;