Loading an alternative script if website widget located is down - javascript

So I am having a problem with some of my code because the website I'm pulling my widget from, is down. What I have is a script that calls to a widget to pull up future projected values of oil prices. This morning the website I pull my information from is down, and I was wondering if there was a way to load up an alternative site if this one is down. Here is a snippet of my code:
<div class="item1">
<span class="title">Brent Crude:</span>
<script type="text/javascript" src="https://www.oilcrudeprice.com/oilwidget.php?l=en&m=000000&g=ffffff&c=ed3232&i=ffffff&l=e88888&o=ed7070&u=brent"></script>
</div>
I was wondering if there way a way to pull information from https://oilprice.com/widgets/brent/brentchart.js instead of www.oilcrudeprice.com when www.oilcrudeprice.com is down.

You can always load an alternative js file by using the onError handler.
<script type="text/javascript" src="http://example.com/script1.js" onError="loadAlternative(this);"></script>
and the error handler function would be:
function loadAlternative(elem)
{
elem.src = "http://alternative_address.com/somefile.js";
}

Related

Loading Section not disappearing on first load

I made a loader that uses css and javascript to play an animation. On loading the site for the first time the animation sometimes doesn't play leaving a blank white screen. I believe it has something to do with caching on the second load that makes it work. Thanks in advance.
HTML:
<section id="loading">
<div class="circle spin"></div>
<img src="src/j2.svg" alt="J2 Logo">
</section>
<link rel="stylesheet" href="css/loading.css">
<script type="text/javascript" src="scripts/loading.js"></script>
loading.css:
https://pastebin.com/E16PMTtQ
loading.js:
https://pastebin.com/1X09KatC
The websites link is https://j2.business
With a quick look at your code it looks like all code is executed when the javascript-file gets loaded. This could be a timing-issue (your javascript-file is retrieved faster than your HTML-page: the elements it wants to act on are not available yet).
With jQuery you can quickly solve that by embedding your variables and functions in this holder:
$( document ).ready(function() {
// place code here, the document is waiting
});
Because you are not using jQuery you could use this:
add the "defer" attribute.
<script type="text/javascript" src="scripts/loading.js" defer></script>
This should be enough, specs found here:
https://www.w3schools.com/tags/att_script_defer.asp
Or if you want only some functions executed when the document is loaded you could use the function which all browsers support:
(function() {
// place code here, the document is waiting
})();

Includes taking a long time to load and you can see them loading

I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.
The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.
Here's the rendered HTML.
And here’s a code snippet showing you how I generate these pages:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
});
</script>
<div id="includeHeader"></div>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="includeNavigation"></div>
I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.
You should use one of the templating languages.
If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.
You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.
You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.
Try
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
</script>
</body>
Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden,
$( "#result" ).load( "ajax/test.html", function() {
/// show your stuff
});
You will of course need to know both has loaded.
I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.
I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html", function(data){
console.log("header loaded");
$("#includeNavigation").load("includes/templates/navigation.html", function(data){
console.log("navigation loaded");
});
});
</script>
</body>

Addthis is Undefined when I use addthis, When I load page by Ajax

I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>
I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.
The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support

Best way to fire events when single elements in the document becomes ready

I'm developing a web application that because of performance concerns is heavily reliant on Ajax functionality. I'm attempting to make parts of each page available while longer running modules load.
The issue is that I want to kick off the Ajax requests as soon as possible (in the head of the document). This part works fine; the issue is on rare occasion, the Ajax call will come back before the area that I want to load the Ajax data into is present on the page. This causes the data to not be loaded.
To get around the issue I started using script tags below each of my containers that resolve a JQuery promise to let the code know that the area is available.
EDIT: I want to load the data into the area as soon as it becomes available (before full document load).
The current pseudo code looks like this:
<head>
<script>
var areaAvailablePromise = new $.Deferred();
$.when(areaAvailablePromise, myAjaxFunction()).then(function(){
// load data into the element.
});
</script>
</head>
<!-- much later in the document -->
<div class="divIWantToLoadAjaxContentInto"></div>
<script>
areaAvailablePromise.resolve();
</script>
My question is: is there ANY better way to handle this situation? Every one knows that inline scripts are blocking and are bad for performance. Also, I feel that this is going to lead to cluttered code with micro-script tags all over the place.
Put your (whole) <script> tag just after the element.
HTML is parsed from top to bottom, so the element will be loaded already.
No. There really is no better way to my knowledge.
<!doctype html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="q.min.js"></script>
<script>
var elD = Q.defer();
var dataP = Q($.ajax(…));
Q.spread([elD.promise, dataP], function (el, data) {
…
}).done();
</script>
</head>
<body>
…
<div id="foo"></div>
<script>elD.resolve($("#foo"));</script>
…
</body>
</html>
you can use:
$(document).ready( handler )
(recommended)and also has contracted form:
$(handler)
exemple:
$(function(){
alert("OK");
})
read more: http://api.jquery.com/ready/

How to add javascript to an image from the content_wrapper in the css stylesheet

I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});

Categories