We Keep Coding

alt text for script tag in html body

I embed a GitHub gist on my webpage using the script tag as follows
<script src="https://gist.github.com/uname/id.js"></script>
Is there a way to provide alt text in case the gist doesn't load? I tried the alt attribute within the script tag but that doesn't seem to work.

Looking at how gist's are embedded they use document.write.
And then inside there it will create some markup, so what we could do is check to see if the markup has been created after waiting a while, if no gist has been loaded then they won't be any markup with a class of .gist.
Below is a working example.
if you run the snippet it should fail after 5 seconds and show a message, if you then replace 4577639.js_bad with just 4577639.js it will then hopefully work and failed to load message should not appear.
ps. Not sure if this is the official way of falling back, but it seems to work ok.
setTimeout(function () {
if (!document.querySelector(".gist")) {
document.querySelector("#failed-to-load").
style.display = "block";
}
}, 5000);
<div id="failed-to-load" style="display:none">
Failed to load Gist
</div>
<script src="https://gist.github.com/claudemamo/4577639.js_bad"></script>

How to hide broken images in Angular app

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

Javascript to image fallback

I am working on a web widget that can be embedded on 3rd party websites.
Since a lot of content management systems do not allow users to post/execute scripts, I want my widget to show an image instead of JS-generated content if such situation occurs.
<script type="text/javascript">
(function(){var s = document.createElement('script');s.src = '//example.com/file.js';s.async = "async";document.body.appendChild(s);}());
</script>
<img src="//example.com/image.svg?param1=value1" src="" id="my_fallback">
For now I am using the code above. Is there any way to show the image only if the script did not load? The goal is to reduce transfer usage and provide better user experience.
The first line of my widget script is removing #my_fallback, but it is not fast enough - sometimes I can see the image for a second before the actual widget content replaces it.
The only thing I came up with is to delay creation of the image by including something like sleep() in the beginning of my image generator.
EDIT
No, <noscript> won't work here. I do not want to fallback if user has disabled javascript. I want to fallback when a script has not loaded - for any reason, especially if some security mechanism cut off the <script> section.

Use html tag Noscript
<noscript>Your browser does not support JavaScript! or a image here</noscript>
Remember
In HTML 4.01, the tag can only be used inside the element.
In HTML5, the tag can be used both inside and .
Edit : -
add one html tag
<span class="noscript">script is loading.....or put image</span>
inside your script tag
now in your scripts which has to be load add one code like
add this line at the end
$('.noscript').hide();
This is the other way which you can handle the same!

One quick fix is to create a global variable from that script, visible to the window object.Also the image must be hidden. Then, on a main.js script check for that variable. If it exists then run your widget code from there. If it doesnt exist then fadeIn the fallback image.
Heres a demo
The default img is an image 272x178 size and the widget image is an image 300x400 size.
To simulate the action when the script is unavailable, just name the variable myWidgetIsEnabled with a different name so the condition fails.
Here is some code:
// Code goes here
var widget = (function(){
window.myWidgetIsEnabled = true;
return {
init: function(){
var s = document.createElement('script');s.src = 'file.js';s.async = "async";
document.body.appendChild(s);}
}
}());
$(document).ready(function(){
if(window.myWidgetIsEnabled){
widget.init();
}else{
console.log('not enabled, the default behavior');
$('.fallback').fadeIn();
}
})

Can't load HTML code into a div when an image button is clicked

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.

Why does my onclick"" not work?

Disclaimer: Don't worry about my code being "standards compliant"
Basically, the page I am making is supposed to play a short audio clip upon loading using the <object data="someAudio.wav"> tag. I then use Javascript and setTimeout() to play a couple of other audio files after a few seconds of delay. The setTimeout does this by using innerHTML and rewriting the correct div section with with a new object, where the object is just another audio. For example:
<script type="text/javascript">
setTimeout("update_audio()", 2500);
function update_audio(){
document.getElementById('slide_audio').innerHTML="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' height='0' width='0'><param name='FileName' value='../../../Audio_general/good.wav'><param name='autoplay' value='true'><object type='audio/mpeg' height='0' width='0' data='../../../Audio_general/good.wav'><param name='controller' value='true'><param name='autoplay' value='false'></object></object>";
}
</script>
I have the image linked to a map so that it is divided up into the 4 sections. When I click on a section, it will call a function that will perform logic based on my selection and then should play 1 of 2 other audio files. Section of map code here:
<map id="testing_image" name="pictureMap">
<area id="image1" shape="rect" coords="0, 0, 449, 331" onclick="evaluate_status(1);" onmouseover="this.style.cursor='pointer'" alt="FB">
</map>
My problem is, the onclick="evaluate_status()" parts of the map will only work before I update the innerHTML. Meaning, if I can click on a section before 2.5 seconds (the first innerHTML update) it will play the correct audio. However, after it updates the div section using innerHTML, none of the onclicks of my map will work. I am confused as to why this is since only a small section is being changed.
Can anyone help me figure out why the onclicks don't work and how I can fix it? I am still pretty new to web design and really need the assistance. Thanks!

You're missing a closing </div> tag for slide_audio, therefore testing_image in fact is a child of slide_audio and is being replaced with the new object when the script runs.
If you look in Firebug with JavaScript disabled you'll be able to see that testing_image is inside slide_audio, not separate from it. Here's a screenshot of Chrome's Developer Tools on that site:

Can you show of evaluate_status() function?
Also for the first code
setTimeout("update_audio()", 2500);
function update_audio(){
document.getElementById('slide_audio').innerHTML="";
}
You should define the function before you use it in settimeout. This will not generate error in Chrome, but in other browsers, it will.