I'm having a strange problem that I can't quite figure out.
I have a normal image on a web page
<img src="images/logo.png"/> <!-- getting image from root directory -->
and I have some javascript code to replace the image source
function imageUpdate() {
var image = document.querySelectorAll("img");
for (var num = 0; num < image.length; image++)
image[num].src = image[num].src.replace("images/pic01.png", "images/other/pic02.png")
}
This code works fine which is great although it seems to fall down as soon as the src I want it replaced to is outside of my root directory such as "http://www.servername.com/pic03.png" // (this is an imaginary URL don't try to click it).
is there a reason this happens? is there a way around this?
The problem is that you are only replacing the last part of your original src. The src of the img tag first looks like this:
"http://yourserver.com/images/pic01.png"
...and after replacing "images/pic01.png" with you external URL, it looks like this:
"http://yourserver.com/http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png"
To avoid this problem you can try this:
function imageUpdate() {
var image = document.querySelectorAll("img");
for (var num = 0; num < image.length; num++) {
if (stringEndsWith(image[num].src, "images/pic01.png")) {
image[num].src = "http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png";
}
}
}
function stringEndsWith(string, suffix) {
return string.indexOf(suffix, string.length - suffix.length) !== -1
}
There's also an error in your for loop, where you are incrementing image instead of num
Step-by-step explanation
imageUpdate()
Loop through each img tag and look at the src attribute
If src ends with "images/pic01.png" replace all of src with the new url
stringEndsWith()
Find index of given suffix (start looking for the suffix at the last possible position
the suffix can be located at)
If this index is found (is different from -1) return true, else return false
What target url are you assigning to it? Make sure that it is pointing to an absolute address (keep the http:// part at the beginning).
If the file is in the same server, you can still use relative file paths, and go up a parent folder by using two dots. For instance: ../someotherfolder/pic03.jpg
<script>
function imageUpdate() {
document.getElementById('imageT').src = 'test.jpg';
}
</script>
<img id='imageT' src="images/logo.png"/> <!-- getting image from root directory -->
JS Fiddle-Demo
There is an error in the link you are trying to use. The actual link should be:
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png
Here is come code to demonstrate:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function changeImage() {
document.getElementById('changeThis').src = 'http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png'
}
</script>
</head>
<body>
<img id="changeThis" src="http://www.wartburgseminary.edu/uploadedImages/Resources/small-twitter-icon.jpg">
<input type="button" value="Change" onClick="changeImage()">
</body>
</html>
Related
I'm new to JS, and reading Javascript Dom, I'm trying to figure out one of the example in my book!
here is my html code
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
</head>
<body>
<script type = "text/javascript" src="showPic.js"></script>
<h1>Snapshots</h1>
<ul id = "image">
<li>
Fall
</li>
<li>
Sunshine
</li>
<li>
Green
</li>
<li>
Filter
</li>
</ul>
<img id = "placeholeder" src="images/rise.jpg" alt = "my image gallery"/>
<p id="description"> Choose an image</p>
</body>
</html>
here is my javaScript code
function showPic(whichPic) {
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholeder");
placeholder.setAttribute("src", source);
description.firstChild.nodeValue = text;
}
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
function perpareGallery() {
var gallery = document.getElementById("image");
var links = gallery.getElementsByTagName("a");
for(var i = 0 ; i<links.length; i++) {
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
my code didnt getting anything from id = image. and I checked many times dont know what is wrong....
There seems to be no code that actually runs the perpareGallery() function.
After you fix that, it might still not work if you run perpareGallery() before the elements in HTML (like your a elements) are parsed and rendered. So, you might want to do something like:
window.onload = prepareGalery;
Although there are way better ways to set-up events, this will run your function after all HTML is parsed.
Two advices on how to track down your issue:
1) All browsers have a so called javascript console. It shows you all syntax error with your code. For firefox and chromium the keyboard shortcut F12 turns it on/off
If you run your code and open the javascript console you'll see this error:
ReferenceError: whichPic is not defined
In your example it looks as if the line var text = whichPic.getAttribute("title"); belongs to the function showPic(whichPic), but it doesn't.
2) You should format your code to not get lost. Your current code formatted:
function showPic(whichPic) {
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholeder");
placeholder.setAttribute("src", source);
description.firstChild.nodeValue = text;
}
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
function perpareGallery() {
var gallery = document.getElementById("image");
var links = gallery.getElementsByTagName("a");
for(var i = 0 ; i<links.length; i++) {
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
If you now take a look to the formatted code, it no longer looks as if whichPic is used inside of showPic(whichPic) but outside of the scope. The error makes perfectly sense.
You might want to move it inside of the function, before you use it.
How can I get my extension to work on all frames like adblock does?
I tried adding "all_frames" : true to my manifest file but it didn't work.
I tried to use this code to get the text with specific ids:
var theId = "starts with something";
var myArray = [];
$('[id^="theId"]').each(function(i, obj) {
myArray.push($(this).text());
});
$.unique(myArray);
console.log(myArray);
but it says my array is empty. When I inspect element on the page, I see a "top" layer, and a "target content" layer. The code only works when I execute it in the console on the "target content" layer. Can I use this code in a content script, or do I need to use background.js somehow?
Continued from SO44122853
I see you figured out that the content was loaded in an iframe. So I have a working demo here PLUNKER, the snippet is here just in case the plunker goes down.
Details are commented in PLUNKER
Demo
Not functional due to the need to run 2 separate pages
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<style></style>
</head>
<body>
<!--iframe is same as the one on the site, with the exception
of the src-->
<iframe id="ptifrmtgtframe" name="TargetContent" title="Main Content" frameborder="0" scrolling="auto" width='90%' src="tables.html"></iframe>
<!--The data is displayed as a one string-->
<output id='display'></output>
<script>
// Reference the iframe
var iFID = document.getElementById("ptifrmtgtframe");
// Register the load event on iframe
iFID.onload = function(e) {
// Callback is extractText function
return extractText('#ptifrmtgtframe', '#display', '.PSLONGEDITBOX');
}
/* Pass iframe and display as a single selector
|| Pass targets as a multiple selector
*/
function extractText(iframe, display, targets) {
var iArray = [];
var iFrame = document.querySelector(iframe);
var iView = document.querySelector(display);
var iNode = "";
/* .contentWindow is property that refers to content
|| that is in an iframe. This is the heart of the
|| demo.
*/
var iContent = iFrame.contentDocument || iFrame.contentWindow.document;
var iTarget = iContent.querySelectorAll(targets);
/* .map() will call a function on each element
|| and return a new array as well.
*/
Array.from(iTarget).map(function(node, idx) {
iNode = node.textContent;
iView.textContent += iNode;
iArray.push(iNode);
return iArray;
});
console.log(iArray);
}
</script>
</body>
I think your script may be executing before the DOM loads, try putting your function inside:
document.addEventListener('DOMContentLoaded', function() {
});
EDIT
That event seems to do nothing in content scripts, I think that is because they are already loading after DOM is loaded, and never fires.
However this seems to fire but not sure why:
$(function(){
//something
});
This needs jQuery injected aswell
I've a JavaScript file that processes tab switches. Here is the source:
var tCount = 0;
function SwitchToTab(id) {
if (id < 0 || id > tCount) { id = 0; }
for (var i = 0; i < tCount; i++) { document.getElementById("tab" + i).className = ""; }
document.getElementById("tab" + id).className = "active";
for (var i = 0; i < tCount; i++) { document.getElementById("area" + i).style.display = "none"; }
document.getElementById("area" + id).style.display = "";
}
function InitializeTabs(initialTabId, tabsCount) {
tCount = tabsCount;
SwitchToTab(initialTabId);
}
I'm trying to make it as short as possible like this:
<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script>
It doesn't works but it works if I separate them like this:
<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>
So, is there any way to run JavaScript inside <script src="..."></script> tags? What I am missing?
No, this is not possible. The html spec dictates that a <script> tag does one or the other.
<script>Tag Html Spec, emphasis mine.
The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
You are suppose to do it the second way. in <script src="Resources/Tabs.js">InitializeTabs(0, 4);</script> you are referencing an external javascript file, your inline code should go into a second script block.
You can either use src, or put JavaScript inside the tag.
But not both at once. There's no downside to using two tags anyway (apart from larger file size).
When you include <script src="Resources/Tabs.js"></script>, you are mentioning that you want to use the Javascript which is included inside the Tabs.js file so that the compiler knows where to look for InitializeTabs function, when it is trying to execute the function.
Now if you want to include some Javascript inline, that is inside the HTML, hen you use the <script>... JAVASCRIPT HERE .... </script>
You need to do it like this
<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>
You can't put javascript inside of <script src="... tags, but you could run a JavaScript file which parses the HTML, looking for <script src tags, which converts it into two tags.
For example,
<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script>
would have to be converted into
<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>
Here's the code I tried:
var tags = document.querySelectorAll("script[src]");
[].forEach.call(tags, function(elem){
var text = elem.innerText;
var src = elem.src;
var parent = elem.parentNode;
parent.removeChild(elem);
var newTag = document.createElement('script');
newTag.setAttribute('src', src);
parent.appendChild(newTag);
var newTag = document.createElement('script');
var t = document.createTextNode(text);
newTag.appendChild(t);
parent.appendChild(newTag);
});
in a JSFiddle
I am trying to set an image dynamically at runtime using javascript. However i always get 404 error in firebug saying image could not be found. when i run this the javascript seems to look for the image in the Home Folder rather than the image folder. Am i missing a format to specify the image urls?
Why is it looking at that location whereas it should be looking at Images folder in the solution?
Also if i make that javascript external the html cannot access it even though my references to the js file are correct.
Anyone willing to contribute on this? you help be very much appreciated.
Here is my code
Html
<body onload="startTime();">
<div class="img">
<img id="img1" border="0" src="~/Images/Ghandrukpic4.jpg" alt="GhanddrukPic4" class="image" />
</div>
</body>
Javascript Code
$(function () {
function startTime() {
var imgArray = new Array("Images/60987Ghandruk Village.jpg", "Images/GhandrukPic2.jpg", "Images/ghandrukpic3.jpg");
var imgCount = 0;
if (imgCount == imgArray.length) {
imgCount = 0;
}
document.getElementById("img1").src = imgArray[imgCount];
imgCount++;
setTimeout("startTime()", 5000);
}
});
add a / in front of your Images string in the array.
new Array("/Images/60987Ghandruk Village.jpg", "/Images/GhandrukPic2.jpg", "/Images/ghandrukpic3.jpg");
This will let the browser know to request from the root directory of your site. If there is no forward slash it is a Relative path to the page that is loaded. So if the page you are on is http://yoursite.com/home/ then it will be looking in the images directory nested in your nonexistant /home directory.
As far as your javascript. Unwrap your startTime function like so in your external and it should work fine.
function startTime() {
var imgArray = new Array("/Images/60987Ghandruk Village.jpg", "/Images/GhandrukPic2.jpg", "/Images/ghandrukpic3.jpg");
var imgCount = 0;
if (imgCount == imgArray.length) {
imgCount = 0;
}
document.getElementById("img1").src = imgArray[imgCount];
imgCount++;
setTimeout("startTime()", 5000);
}
I am trying to develop a slideshow with a pause between slides. So I'm trying to use the setTimeout statement as shown below. This is written to swap 2.jpg for 1.jpg with a pause of 10 seconds on clicking the button. But it does now work. Can anyone help me. Thanks.
<html>
<head>
<script type="text/javascript">
var t;
function swap(newImage) {
var fileName=newImage.toString()+".jpg"
document.slideshow.src=fileName
t=setTimeout("swap()",10000)
}
</script>
</head>
<body>
<img name="slideshow" src="1.jpg" width="450" height="335" />
<br /><br />
<input type="button" onClick="swap('2')" value="Change image" />
<br /><br />
</body>
</html>
There are a couple of things wrong here. First, its passing code to be eval'ed in the first parameter of setTimeout is not recommended. Better pass a callback instead:
setTimeout(function() { swap(); },10000);
//Or
setTimeout(swap,10000); //Passing the actual function as the callback
Second, you are calling the swap() method without parameters inside the timeout. It should pass in a new image filename (perhaps by declaring an array of filenames), or check whether the parameter is set or not.
function swap(newImage,element) {
if(newImage) {
var fileName = newImage.toString()+".jpg";
element.src = fileName;
}
t=setTimeout(this,10000)
}
This function obviously won't do anything after the first run (since no new image filenames are supplied). Using an array you could iterate over several filenames:
var images = ['1.jpg','2.jpg','3.jpg'];
var slideshow = function(element, images, index) {
if(!index || ( (index + 1) > images.length) ) index = 0;
element.src = images[index];
t = setTimeout(function(){
slideshow(element, images, index + 1);
},10000)
};
//Fetch the image element the slideshow is running on
var element = document.slideshow;
slideshow(element, images);
This will continue switching between the images in the array until the timeout is canceled.
Your swap function requires a parameter, so it won't work with setTimeout.
Javascript isn't necessary to do a slideshow. All you have to do is put each image into a separate page, then add this single line to the top of each page in the <head> section:
<meta http-equiv="refresh" content="10;url=NextPage.html"/>
"10" is the number of seconds to wait before going to the next page, and "NextPage.html" is the link to the page containing the next image to display.