Two-level javascript missing image? - javascript

I am trying to update a webpage that already has a bit of javascript in it to replace a missing image. The way it works right now is it looks for pcp.gif, and if not found displays an error message image instead. (Just like in this thread)
<p align = center><img src = PCP.gif onerror = "this.onerror=null;this.src='!FireSeasonOnly.gif';">
What I want it to do now is look for pcp.png, if not found display pcp.gif and if BOTH are not found then display the error message image. I'm not having any luck getting the second level to work. I tried wrapping it in an IF but it didn't work the way I was hoping.
<p align = center><img src = pcp.png onerror = "if (this.src='pcp.png') {this.onerror=null;this.src='pcp.gif';} else {this.onerror=null;this.src='!FireSeasonOnly.gif';} ">
The above doesn't work. If the PNG is present, it displays it. If not, it displays the GIF if present. But if both are missing, I get the broken image icon, so it's not hitting my else statement. Any suggestions?

Here's the working answer -- thank you for your help, all, especially floribon!
onerror="this.src=(this.src === location.protocol + '//' + location.host + '/Weather/Maps/pcp.gif') ? '!FireSeasonOnly.gif' : 'pcp.gif';"

Related

Jquery string and ace editor value causes error

I'm using ace editor to edit javascript scripts and I seem to get an error on loading the webpage when I try to add set the value of a variable to "<script>" + jse.getValue() + "</script>";
I have also tried adding .toString() at the end of the editor value
and jse.value()
edit: I also tried "<script>" + jse.getSession().getValue() + "</script>";
Any help would be greatly appreciated.
Update: I have found that its the <script> tag causing the issue I renamed the tag to something else and it worked fine, however I am still confused as to how I can make this work? I'm basically setting the contents of an iframe <body> but need to keep the contents of <body><script>
For anyone in the future experiencing this problem I did manage to find a solution, the problem was I was trying to constantly set the contents of two elements, a parent and child.
My solution was to move the <script> tag from the <body> and place it into the <head> instead.
This plugin https://ace.c9.io/ ?
Maybe you can get the content of
With
var jse = $('.ace_content').html();

document.getElementById.style.backgroundImage not working

I want to assign different background images to a div depending on the page's address, so for example, if my url is http://www.mywebsite.com/mysubdirectory/ I use the following code:
if(document.URL.indexOf("mysubdirectory") >= 0){
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
}
But it's not working. I even added a bogus document.write command just to make sure the rest of the code was ok and sure enough the bogus line showed up in my browser. Is there something I'm overlooking?
EDIT: Thank you all for your answers - when I use body instead of getElementById("wrapper") in my code, the image shows up, so I doubt it's a path-related issue. I trued adding an onload attribute to the body tag but it's still not working with getElementById. Any ideas?
Your
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
code is correct.
It works fine in this jsfiddle: http://jsfiddle.net/hUuN5/
Are you sure the image is correct. Remember that the path to the file is relative to the location of the current page. NOT the css directory
I'm using Chrome 29.0.1547.66 and none of the anwers worked either.
So I tried:
document.getElementById("wrapper").style.backgroundImage = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
It worked taking off the quotation marks from the image url.
Here working as well: http://jsfiddle.net/xEujg/
html css backgroundimage javascript
Try this, I think the image url is wrong most likely. You probably need a relative path of sorts:
document.getElementById("wrapper").style.backgroundImage = "url('/bg-wrapper.jpg')";
Specifying a protocol worked for me in chrome. I couldn't get it to work using the catch all '//'. It had to be 'http://' I'm assuming it must match whatever protocol was used to load the page or iframe.
for example
element.style.backgroundImage="url(http://somedomain.com/images/myimage.jpg)"
or
element.style.backgroundImage="url('http://somedomain.com/images/myimage.jpg')"
worked for me.
If anyone is still interested in this. Here is a solution:
document.getElementById("wrapper").style.background = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
This works for me:
var pointer = "url(\'/" + imageArray[imageCounter].toString() + "\')";
document.body.style.backgroundImage = pointer
After spending a bit of time on this, it was the browser's engine parsing the CSS. No good errors in the console.
The solution is to not do everything on the same line.
You have to create a variable, assign it the url and then pass it.
let bg = "url('" + imgUrl + "')";
document.getElementById("wrapper").style.backgroundImage = bg;

IE is not showing updated IMG SRC change done in Javascript

ISSUE: IE version 7 and 8 is not showing updated IMG SRC change done in JavaScript
You can see what I mean if you go to the URL below, and on the left under (3) I want a different liner, you choose one of the swatches; lets say you choose "Asahi Chartreuse". Notice nothing happens to the preview on the left. BUT then if you go ahead and choose another swatch, you will see the preview on the left shift to show Asahi Chartreuse. So it is one behind. This is why I believe it is a "refresh" issue. It works in Chrome just fine.
In IE: Notice if you click on some other control, the refresh happens.
You can see the code here: https://www.casemodo.com/test.asp
WHAT I'VE TRIED SO FAR:
I've tried adding headers to say "no-cache".
I've tried adding "?" and random number after the png file name.
I've tried setting focus() to the image after changing the src.
I've tried, after changing src, telling the style.display to be hidden and then visible.
I've tried creating a hidden (and not hidden) text input box on the page and then setting focus() to it after changing img src.
I've tried setting window.focus().
I've tried (as you see now) setting an alert after changing the src.
GUESS: What it looks like now is the JavaScript engine just pauses after I set that src UNTIL you manually click (focus) somewhere else on the screen. So it never even gets to all of those scripts I've tried above.
Set the src attribute to null, then set it to your new url:
in jquery:
var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);
in straight js:
var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl
This worked for me - it was driving me mad!
Try to use onclick instead of onchange. The latter doesnt work well with some form elements in some browsers.
I've seen similar IE issues solved with a seemingly bizarre reassignment of innerHTML. Suppose "container" is a variable referencing the parentNode of the img. Try "container.innerHTML = container.innerHTML". This triggers a re-rendering and may bring the errant img to life.
Comments on the question:
Please include a code snippet in the question.
Was the javascript in an onchange event, or where?
If the client browser is Google Chrome, does it work?
(Sounds like yet-another-IE-image-src-bug.)
The demonstration page you linked to has been changed since this question was posted;
as I write this, clicking on a swatch causes submit which causes load of a different page.
A suggestion:
Use setTimeout, so that the actual change occurs when the timeout event fires, instead of in the original GUI event thread.
For example, if the original javascript was
SomeFunction();
change this to
setTimeout(SomeFunction, 10);
(where image.src = newURL; is done inside SomeFunction)
This question is probably no longer relevant but we ran into the same issue today when we checked backward compatibility for one of our libraries.
The only thing that worked for us was to replace the image element by itself before changing the value for the src attribute:
var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;
I was working with a Lazy Loading implementation, and got to a similar problem. For some reason, after changing the data-srcset attributes to srcset in code, even with the other approaches described on this page, the elements still didn't seem to get the new attributes values. After some research, I got to this page on github, about a bug fix on a lazy loading plugin. It gave me the idea to, instead of using the replace option described here, or the your_element.src=null approach, to use something like this:
your_element.setAttribute("src", your_element.getAttribute("data-srcset"));
And it ended up working for me.

How to make videos on Youtube not cover a lightbox?

Edit: I thought I solved it but I didn't.
I have javascript that gathers elements on a webpage and puts them in a lightbox on top of the page. It works fine for your every day page but on Youtube the videos show through. I looked and found out about wmode = "transparent". So what I have tried is...
var youtubevideo = document.getElementsByTagName('link');
var len = youtubevideo.length;
for(var i=0;i<len;i++){
//youtubevideo[i].setAttribute('wmode', "transparent");
youtubevideo[i].href += "?wmode=transparent";
alert(youtubevideo[i].href);
}
The alert verifies I am doing nothing wrong as far as doing what I intend to do. You can also see where I have commented out the other way I tried it. Is there a way I didn't find to accomplish this?
I found out you need to make the video reload. You can do this by copying the src to another variable then change the src to "" and then change the src again to the variable you saved the original src in.

Why does the Chrome spacing work in one JS file and not the other?

Update: Bug Resolved. Answer points go to whoever explains why the fix works.
If you highlight and copy the text in the first paragraph on this page, then paste it into a rich text editor (dreamweaver or gmail in rich text mode), you will see that some of the text is automagically linked. Basically, it works:
http://seox.org/link-building-pro.html
--> http://seox.org/lbp/old-pretty.js
I'm trying to build a second version, but somewhere along the way I broke it. If you go along with the same process on this new url, spacing before and after the link are removed in Chrome:
http://seox.org/test.html
--> http://seox.org/lbp/lb-core.js
Why does the spacing work correctly in the first one, but not in the second? More importantly, how do I fix the second one so that it doesn't bug out?
I asked a variation of this question before, and got a helpful and interesting answer, but hopefully I've asked the question with full detail this time around. The previous question, which has an answer I have a hard time understanding, is located here:
Javascript: Whitespace Characters being Removed in Chrome (but not Firefox)
Thanks in advance for your time!
Edit: I've added a bounty to this post, and would greatly appreciate precise instructions on how to fix the bug (rather than general suggestions.
To better illustrate the bug, I've copied the gray box (from the second page) below. Note how the spacing is removed before and after the a tags:
Link Building 2 is an amazing tool that helps your website visitors share your content, with proper attribution. It connects to email, social sharing sites, eCommerce sites, and is theSEO's best friend. Think of it as the sneeze in the viral marketing metaphor.
<div>
<p id="credit"><br />
Read more aboutText Citationsbyseox.org</p>
</div>
Second Update:
I was able to solve the bug by adding the following to the top of the function processSel():
lbp.vrs.holder.style.position = "absolute";
I'll award the correct answer to whoever can give the best explanation of why this fixes the spacing issue in chrome.
You have a typo on line 30.
... by <a href='http://" + lbp.page.domain + "' />" + lbp.defaults.author ...
^ (extra "/" before ">")
lbp.vrs.holder.style.position = "absolute";
Adding the above to the top of processSel() function fixed Chrome's weird spacing issues. It would seem that setting a position triggers some sort of "I'm on the page" awareness (or something). But get this, "relative" doesn't work!
Now that we've got the solution... does anyone want to try to explain why it works this way?
On line 30 in your lb-core.js file. Try this:
lbp.defaults.credit = "<p id='credit'><br/>Read more about <a href='" + lbp.page.url + "'>" + lbp.page.randKeyword + " </a> by <a href='http://" + lbp.page.domain + "' /> " + lbp.defaults.author + " </a></p>";
EDIT: I can't really explain why Chrome is treating it like that, but if you're asking what position:absolute; does, it removes that element from the block layout of the page, so that element is not taking up any "space" on the page. It is then positioned with the coordinates you specify to see where on the page it actually is placed. Why that would affect what you're seeing I really can't say. I think you may be dealing with a bug in the browser at this point? Maybe something with lbp.vrs.holderHider.style.left = "-9999px"; maybe the negative margin is an issue for some reason unless the element is removed from the block layou t with position:absolute
This is one of several spacing or possibly layout bugs currently open in Chrome.
http://code.google.com/p/chromium/issues/list?q=failing+layout+tests
http://code.google.com/p/chromium/issues/list?q=position+absolute

Categories

Resources