I've built an Angular app that utilizes the Instagram API to pull in images. If a user later deletes an image I end up with broken images (404's).
I've attempted to use jQuery to hide the div containing these (broken) images, but they still appear.
I've placed the following jQuery in a 'custom.js' file that I reference in my 'index.html' file:
$(document).ready(function() {
$("img").error(function() {
$(this).parent().hide();
});
});
I reference jQuery then 'custom.js' in the head of 'index.html' as follows:
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="js/custom.js"></script>
...and here is the html I'm attempting to apply this jQuery to:
<a ng-href="{{image.link}}" target="_blank" title="{{image.text}}"><img ng-src="{{image.img}}" alt="" class="img-responsive" ng-style="homeColors" id="image"></a>
I ended up using the following Javascript to hide my images. The first function hides the grandparent of my image so that the entire div is hidden. The second function replaces missing user profile images with Instagram's anonymous user image:
function imgError(image){
image.parentNode.parentNode.style.display = 'none';
}
function anonImg(image){
image.src = 'https://instagramimages-a.akamaihd.net/profiles/anonymousUser.jpg';
}
Just add the following HTML to the respective images:
onerror="imgError(this);"
onerror="anonImg(this);"
Try removing src attribute from broken images instead, but i think this still may not work, because angular could bring this attribute back.
If this won't work, please try this:
https://stackoverflow.com/a/17122325/4229156
Related
I'm trying to simply detect clicking an A link to display an Alert box. Whenever I place the script inside the php file my a link is located, it works fine, but whenever I place it in my custom JS file, it doesn't detect it, and I get the error 'Uncaught TypeError : Cannot set property "onclick" of null'.
The link between the php page and custom js page is definitely working, as I have previous working code on the page. It simply wont detect my A link it its located in an external script.
HTML
<a id="ConfirmHolidayClose" href="#">
<img src="assets/img/close-button.png" alt="Holiday-request-close-button"
class="CloseButton" />
</a>
JAVASCRIPT
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
UPDATE - Forgot to mention sorry, my a link is nested inside div called 'ConfirmHoliday'.
I have JS code manipulating the ConfirmHoliday div inside my Custom JS, so it cant be loading after because it is finding its parent div perfectly well at the moment.
The javascript file runs before the element is created, thus it doesn't exist. To solve this, you have couple options:
1) Surround the code with a window.onload function
window.onload = function () {
// Your code here
};
2) Put it in a separate js file and add a defer property to the script tag.
<script src="yourScript.js" defer="defer"></script>
3) Put the script tag after the anchor tag
It's trying to access the ConfirmHolidayClose element before it exists maybe? Where is your JS loaded in your page? I'm guessing in your <head>
A few solutions:
1) Move your script to bottom of page just above </body>
2) wrap your JS in dom ready function, this ensures no JS will run until the DOM tree exists. Easiest with jQuery, example below...
jQuery example
$(function() {
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
});
Vanilla example
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
});
So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.
I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/
you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})
$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.
I use one of those jQuery libraries, Fancybox, to make images show up in a modal pop-up style thing on top of the text. This works fine for mostly everything, however! When placing an image in TinyMCE and selecting "caption" and then making the image a link, the code Plone generates ends up having two of the same links, which result in a weird "Fancybox gallery slideshow" of the same image repeated twice. Here's why —
HTML from within TinyMCE:
<p><a class="internal-link" href="resolveuid/af2954f5af084d5aa359a480b33c5368" target="_self" title="Test test test"><img class="image-left captioned" src="resolveuid/af2954f5af084d5aa359a480b33c5368/##images/image/med" /></a>
HTML generated when viewing the page:
<dl class="image-left captioned" style="width:300px;">
<dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><img width="300" height="200" title="alison king" alt="alison king" src="http://127.0.0.1:8081/CAES/images/alison-king.jpg/##images/98443898-0834-45ea-b724-8f40a0c92e0c.jpeg"></a>
</dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><dd class="image-caption" style="width:300px;">test</dd>
I get why this happens and it's clever, but doesn't work for my purposes. Does anyone know where this code is generated in the ZMI? Or, any ideas on a jQuery solution to target all links except for that second one? Here's my existing Fancybox code:
<script type="text/javascript">
$(document).ready(function() {
/* Simple image gallery. Uses default settings */
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
});
</script>
It will work with the following code, but then it only applies Fancybox to the first image link of a captioned image, and won't apply to any other non-captioned images.
<script type="text/javascript">
$(document).ready(function() {
$("dl.captioned dt a").attr('rel', 'gallery').fancybox();
});
</script>
And lastly, I tried to apply Fancybox to everything and then afterwards remove it from just the second dl.captioned link with jQuery, but can't quite get it, this still resu:
<script type="text/javascript">
$(document).ready(function() {
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='/image']").attr('rel', 'gallery');
$("dl.captioned > a").attr('rel', '');
$("a[rel$='gallery']").fancybox();
});
</script>
Thanks!
I cannot exactly reproduce the output you get, however can reproduce the doubled images in the gallery.
The doubling results, because the inserted image will be wrapped in a link to the image-file automagically (another JS, assumingly applied by TinyMCE), when you enable the captioning.
So, to resolve your request, it should be sufficient to NOT mark the images as links manually, when using the captioning anyway.
Nota: As you are using the <script>-tag, it seems you insert the JS in a template, yet it is recommended to embed it as a link in the header via JS-registration, especially, if you want this to happen globally. Alternatively add an expression-attribute in the registration, to restrict when the script should be delivered. If you have special reasons to only have this in a certain template, it is recommended to use the javascript-slot. Insert JS via a <script>-tag at the bottom of a document in order to execute it after the DOM is loaded, isn't necessary anymore, respectively discouraged, we can use document.ready (or window.onload) instead.
Steps I took to reproduce: Create a site, enable captioning via TinyMCE's controlpanel, install collective.fancybox, install a product of my own with a registered Javascript and insert:
(function($) {
$(document).ready(function() {
// Look for all links in content-area,
// add rel-attribute to make it a gallery.
// Skipped distinction of whether it's an image or not, 'cause I'm
// louzy lazy and you know how to DIY anyway ;)
$("#content-core a").attr('rel', 'gallery').fancybox();
});
})(jQuery);
I want to synchronize web site like when page load first it will load content then images then flash content then another content.
Like i have seen the same at http://gmailblog.blogspot.com/ [ see how images load ]
Is there any way to achieve? Any link or source code would be appreciated.
I seen the web site. This is the same thing that happens with bing. How to do this ?
In the core HTML code give the <img src="loading.gif" id="1"/> or whatever element you want.
When the Core HTML is done, before the </body> tag, use javascript to change the
attributes values (for eg. "src" attribute of the img element). Remeber the javascript need to be written at the end of the HTML before closing the body tag. The browser will load the
contents accordingly in sequence. This can be used to achieve priority based loading of HTML components.
You can synchronize loading of all elements on your page by controlling it using JS. For ex: one strategy to load images after content would be:
a) In your html, instead of in the src attribute, specify the image location in another attribute, say 'isrc'.
b) Inside your onload callback (assumes you're using jQuery):
var loadCounter = 0;
$('img').each(function() {
if($(this).attr('isrc')) {
this.onload = function() {
loadCounter++;
if($('img[isrc]').length == loadCounter) {
// .. proceed to loading other stuff like flash etc..
}
}
$(this).attr('src', $(this).attr('isrc')); // load the image
}
});
I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?
Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:
<img src="#" data-delayedsrc="/img/myimage.png" />
Then, add a javascript line when your page loads that does something like this:
$('img').each(function(){
$(this).attr('src', $(this).data('delayedsrc'));
});
If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.
Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.
An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery.data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load. The pure JS sets up a delay (3000 milliseconds in the example below), and then executes the jQuery.data(), which sets the image's src to the intended image.
The example below performs on each image with class="load-delay".
Live Example: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
CODE
JS and jQuery:
$(document).ready(function () {
setTimeout(function () {
$('.load-delay').each(function () {
var imagex = $(this);
var imgOriginal = imagex.data('original');
$(imagex).attr('src', imgOriginal);
});
}, 3000);
});
HTML and jQuery Library:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h1>Loading-Delayed Image</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with
$(document).ready(function() {
//load rest of the images
});
You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.