Develop Reference

Injecting an image if the image doesn't already exist with jquery

I'm trying to do the following:
Check if a div contains the text "Correct Mistakes" if it does then it should:
Check if the div contains an image and/or an image with a specific URL
If the image exits and/or has a specific URL do nothing.
If the image doesn't exist and/or doesn't have a specific URL then insert it after the h3 header tag
See the code below:
var imgURL = "https://i.imgur.com/umCv9Ck.png"
$('.container .modal .content').each(function() {
if ($(this).find('h3').text() == "Corrected Mistakes") {
if ($(this).find('img').attr('src') != imgURL ) {
console.log($(this).find('img').attr('src'))
$('<img alt="blue tile" src="https://i.imgur.com/umCv9Ck.png">').insertAfter(".container .modal .content h3");
}
}
});
Currently it's inserting the image over over and over, every time I run the code... it shouldn't because on the first run it adds the image so on future runs it should see this and not add it again.
I've tried using :contains, I've tried doing it in one statement as shown below
if ($(this).find('h3').text() == "Corrected Mistakes" && ($(this).find('img').attr('src') != imgURL) {}
But nothing I try seems to be working... it's going to be something simple that I am missing but I can't figure it out.

I think part of that is the way your are using the selectors. You did not post the HTML. You can try what is below and edit accordingly. Do you want to insert a new image element or replace the one that is there or change the src for the one that is there ?
var imgURL = "https://i.imgur.com/umCv9Ck.png";
$('.container.modal.content').each(function() {
if ($(this).find('h3').text() == "Corrected Mistakes" && $(this).find('img').attr('src') !== imgURL) {
$('<img alt="blue tile" src="https://i.imgur.com/umCv9Ck.png">').insertAfter($(this).find('h3'));
}
});

Using JavaScript to dynamically change display style in img tags

I show links to 240 images on a page. The real images are uploaded by users. I tried to avoid showing an empty image if users did not upload it yet. jQuery did not work for me because of conflicts, so I have to do it in pure JavaScript.
image(s) links:
<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">
My JavaScript:
function imgError()
{
alert('The image could not be loaded.');
var _aryElm=document.getElementsByTagName('img'); //return an array with every <img> of the page
for( x in _aryElm) {
_elm=_aryElm[x];
_elm.className="photo240off";
}
}
The style photo240off equals to display:none.
Right now, whenever an image misses, all the images are turned to style photo240off and I want only the missing image to be hidden. So there is something wrong with my script.
(the overall script works well, because I get the alert).

Use this to get the image with the error.
Change to:
onerror="imgError(this)"
Then the function can be:
function imgError(el) {
alert('The image could not be loaded.');
el.className = "photo240off";
}

You need to reference the image from your onerror call and change the class only for that one.
Something like this:
HTML
<img class="photo240" src="example.jpg" onerror="imgError(this)">
JS
function imgError(el) {
el.className="photo240off";
}

Do not load images in javascript

I build a website and i want to ask the user when each time visit the site, if he want to display images or not. and if not, i want to do not load them and display the page without any img tag
i tried this, but this is not useful because the page will be loaded
function load_img () {
if (!confirm("Do you want to load the images on your site?")) {
var images = document.getElementsByTagName("img");
var l = images.length;
for (var i=0; i<l; i++) {
images[0].parentNode.removeChild(images[0]);
}
}
}
i need some code that don't load any img tag when the page load,
and not a code that hide or remove the images after the page is loaded and the images are displayed
can someone help me please with this javascript code
thank you

You can take a look at lazyload plugin for jQuery. What this plugin does is load the image when the image is on the visible area of the page.
Their idea is to put the original URL to the image in data-original attribute and in the src attribute put some small image e.g. 1x1 transparent gif like this:
<img data-original=“img/example.jpg” src=“img/grey.gif” />
and then you are able to load all the images whenever you want to just by replacing the the src.
this is a simple javascript code that you can try:
window.onload = function() {
if( confirm('Images?') ) {
var img = document.getElementsByTagName('img');
for(i in img) {
var original = img[i].getAttribute('data-original');
if( original.length ) {
img[i].setAttribute('src', original);
}
}
}
}

You could try jquery : $("img").remove();

It would be better to solve this problem from the server side!
Make start page with a link to a version of the page with images and one without the images. You can write a server side script (PHP?) to show or hide the images. Simple removing the images could break the page design. Also removing html image tags does not do the trick. What about background images, some in css files, ...
If you like to do this an on the client side with javascript you have to remove all images and add them manually with javascript.

Using jQuery you can do:
if (confirm('Hide images?'))
{
$('img').remove();
}
Without jQuery you have to use getElemtentsByTag and a loop.

IE7 & IE8 javascript print function

I'm having a javascript issue I can't figure out. I've taken a snippet of code that I got
here and am using it in this page.
The idea is that users can click the 'Print List' button and the listing is copied to a div within a hidden iframe and printed. The printed page contains the the iframe source HTML with the list inserted properly. However, in IE7 & 8, the printed page is the full parent page, not the iframe. The behavior in IE9, Chrome and FF is correct.
I tried debugging the script but I couldn't see where it was going wrong.
Here's the code that the Print List click triggers:
function printSection(id) {
if (document.getElementById('print_frame').contentDocument){
theIframe = document.getElementById('print_frame').contentDocument;
}
else {
theIframe = document.frames['print_frame'].document;
}
var thePrinter = theIframe.getElementById('print_section');
var theCopy = document.getElementById(id);
thePrinter.innerHTML = theCopy.innerHTML;
parent.print_frame.printPage();
}
And here's the printPage() function:
function printPage() {
window.parent.print_frame.focus();
window.print();
}
I'd appreciate any help. Please let me know if you need more information. Thanks so much.

A simpler solution might just be to use CSS media types to hide the content of the page and show an otherwise hidden element for print.
CSS
.print{display:none;}
#media print {
.pagecontainer{display:none;}
.print{display:block;}
}
HTML
<body>
<div class="pagecontainer">
Page content here
</div>
<div class="print">Only show this when printing</div>
</body>

Why doesn't setting frame src by js show the display source?

Based on a JS condition, I want either of the 2 things to happen;
Either to show a frame on page
OR
Show a link "Show pdf" on page..
Show pdf
Now while I know how to do a Show/Hide based on the JS condition, my question is
In case 2nd condition is satisfied, not only do I want to hide the frame thing, BUT ensure that it is not loaded in the background as well...
I think using show/hide will not stop it from loading the pdf in the background..
So my question is how can I acheive that using Javascript?
**********Here is what I am trying**********
if(isiPad)
{
$('#content').attr('src','ipad_frame.html');
}
else
{
$('#content').attr('src','xyz.pdf');
}
And in the html, I have
<frame src="#" title="Content Frame" name="content" id="content" />
Will this work fine? For some reasons, I just tested it and even though it goes in the if/else part, it does not show the relevant content..

Why not add the elements dynamically in script to a container element? Something like (assuming you're using jQuery):
if(condition)
{
$('#container').html('<html for frame>');
}
else
{
$('#container').html('<html for pdf>');
}
This will ensure only the item that you want to load is loaded.

Rather than show/hide, you could use the DOM to modify the contents of the page:
<div id="frameWillBeHere">
</div>
<script language="javascript">
var f = document.getElementById('frameWillBeHere');
if (whatever) {
f.innerHTML = '<iframe>pdf file</iframe>';
}
else {
f.innerHTML = 'something else';
}
</script>
You can also make that script respond to an event, so that the frame will appear when needed. There is some work to do so that the frame appearing in your page doesn't completely break your layout.