Fancybox with ProgressBar + fadeIn + fadeOut + OnTimer + Redirect - javascript

The following code function is what I'm after
OnClick = FancyBox(image),FadeIn,FadeOut,Timer & Download + Time = Redirect
My goal is to have a functional FancyBox that loads onclick set to fadeIn(time) > show a "progress bar/.gif image" and fadeOut(time) initiates a download then redirect(time) to new page. The timer for the redirect would be an awesome perk but if it's not possible that's okay.
<style>
#overlay {
background:#EAE8E8;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 20%;
z-index:1001;
-moz-opacity: 0.8;
opacity:.50;
filter: alpha(opacity=50);
Font-Size:150%;
}
<div id="overlay">
<img src="http://de.speedmaxpc.com/wp-content/uploads/2017/01/120px-Gray_circles_rotate.gif" alt="Loading" />
Loading...
<script>
jQuery(window).load(function(){
$("#overlay").fadeTo(3000,1).fadeOut(3000);
});
</script>
Do I add the redirect and time code to the functional script above or keep it separate in the header of my page?
<script type="text/javascript" language="JavaScript">
function SetUpRedirect() {
var destination = "http://website.com";
setTimeout("window.location='"+destination+"'",1000);
return true;
}
</script>
<a class="yip" onclick="SetUpRedirect();" href="#" rel="">click</a>
<a class="yip" onclick="SetUpRedirect();" href="#" rel="">click</a>

Related

Image appearing before the text

When my site is loading up the image always appears straight away (even when it's still loading) however I want it to appear at the exact same times as the text does to make it look like it loading up at the same time. This is the code I have used to make what I see
Javascript
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
$.fn.srcLazy = function (src, callback) {
let elem = $(this);
let img = new Image();
img.addEventListener('load', function () {
elem.on('load', function () {
if (callback) callback();
});
elem.attr('src', img.src);
});
img.src = src;
}
$('#my-image-in-the-page').srcLazy("./images/ohridimage1.jpg", function () {
// Show text here!
});
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "flex";
}
CSS (LOADING PAGE)
body {
margin: 0;
padding: 0;
width:100vw;
height: 100vh;
background-color: #eee;
}
.content {
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display:flex;
justify-content: center;
align-items: center;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% { transform: rotate(0deg);}
25% { transform: rotate(180deg);}
50% { transform: rotate(180deg);}
75% { transform: rotate(360deg);}
100% { transform: rotate(360deg);}
}
#keyframes loader-inner {
0% { height: 0%;}
25% { height: 0%;}
50% { height: 100%;}
75% { height: 100%;}
100% { height: 0%;}
CSS
#myDiv {
margin: 0 50px 0 50px;
display: none;
text-align: center;
justify-content: space-between;
align-items: center;
}
.image1 {
position: flex;
right: 0px;
top: 0px;
z-index: -1;
filter: grayscale(100%);
style: float
border: 3px solid #73AD21;
width: 300px;
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<link rel="stylesheet" type="text/CSS" href="image.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
<script src="js/jquery.js"></script>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
Home
Macedonian Dispora
Cities
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Ancient History
Ottoman Period
Yugoslav Period
Modern History
</div>
</div>
</div>
</head>
<script src="loading.js"></script>
<link rel="stylesheet" type="text/css" href="loadingcss.css" />
</head>
<body>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom"></div>
<div>
<h2>Welcome to my website about my country Macedonia (Makedonija)</h2>
<p>Macedonia officially the Republic of North Macedonia, is a country in the Balkan Peninsula in Southeast Europe. It gained its independence in 1991 as one of the successor states of Yugoslavia. A landlocked country, North Macedonia has borders with Kosovo to the northwest, Serbia to the northeast, Bulgaria to the east, Greece to the south, and Albania to the west. It constitutes approximately the northern third of the larger geographical region of Macedonia. The capital and largest city, Skopje, is home to roughly a quarter of the country's 2.06 million inhabitants. <br>
The majority of the residents are ethnic Macedonians, a South Slavic people. Albanians form a significant minority at around 25%, followed by Turks, Romani, Serbs, Bosniaks, and Aromanians.</p>
</div>
<img class="image1" src="./images/ohridimage1.jpg" alt="Smiley face">
</div>
In order to load an image in the background and show it when finished with another elements like text you need to load the image in the Image Object like this:
var img = new Image();
img.addEventListener('load', function () {
// Here you can set the url that was loaded in the background here
// to an actual `<img>` element. Browser uses cache now to load the image quickly.
});
img.src = 'image url here';
As soon as you set the src the image will get loaded but nobody can see it. This will force the browser to load image in the background and cache it. So now when you set that exact src to the img element the browser will use cache to show the image so the image will be loaded quickly with whatever you want to show.
UPDATE --------
You can do it in a better way in jquery:
Let's say you have bunch of images. Then instead of setting their src set their data-src attribute and then use this functionality to do something when all images loaded:
This is the HTML:
<img class="my-images" data-src="<image url 1>" />
<img class="my-images" data-src="<image url 2>" />
<img class="my-images" data-src="<image url 3>" />
<img class="my-images" data-src="<image url 4>" />
This is the JS:
$.fn.whenImagesLoaded = function (callback) {
let found = $(this);
let counter = found.length;
found.each(function (i, item) {
let elem = $(item);
let img = new Image();
img.addEventListener('load', function () {
elem.on('load', function () {
counter--;
if (counter === 0 && callback) callback();
});
elem.attr('src', img.src);
});
img.src = elem.attr('data-src');
});
}
So now you should not set src on the image at first but you have to do this:
$('.my-images').whenImagesLoaded(function () {
// Hide loading text here and show images!
});
JSFiddle

JavaScript onclick change style from display none to display block

I have a situation that I'm trying to do, and I need your help because I do not have much experience with JavaScript.
First please take a look at this code where I was through ajax, parse from xml file into html. I set the picture as background of #clickMapFlashContainer, and prepend hotspots clickable circles into #clickAreas which results to get 5 clickable circles, which look like this: (screenshot) http://prntscr.com/d3v97y (Currently when we get to the site, site looks like this)
You'll notice that I have 5 different clickable circles with _clickable id and class circle. Each circle with _clickable id have onclick="onclick(id)" and this function should be executed onclick.
Below I have divs with same id but without _clickable and all of 5 have display: none... Display none needs to be changed to display block when click on corresponding id with _clickable circle.
However, there is one thing I must mention, in a situation when the div with class clickMapItem text is display block, background image from #clickMapFlashContainer should be visible as it is, it is only necessary to change the text below the image, but in situation when the div with class clickMapItem multiImageText is display block, background image from #clickMapFlashContainer should be display none because clickMapItem multiImageText contains a gallery and background should not be seen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickMap">
<div id="clickMapFlashContainer" style="background-image: url(../../../../../../linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg;); width: 560px; height: 560px; background-repeat: no-repeat;">
<div id="clickAreas">
<div id="clickMap_item_11024_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 11px; left: 219px; width: 76px; height: 76px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_11006_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 388px; left:
250px; width: 66px; height: 66px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_11004_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 155px; left:
189px; width: 135px; height: 135px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_10450_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 208px; left:
436px; width: 105px; height: 105px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_9510_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 469px; left:
350px; width: 75px; height: 75px; opacity: 0.5; border-radius: 100%; cursor: pointer;">
</div>
<div id="clickMap_item_default" class="clickMapItem text">
<p>Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.</p>
</div>
</div>
<!-- clickMap text -->
<div id="clickMap_item_9510" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap gallery -->
<div id="clickMap_item_10450" class="clickMapItem multiImageText" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap text -->
<div id="clickMap_item_11004" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap gallery -->
<div id="clickMap_item_11006" class="clickMapItem multiImageText" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap text -->
<div id="clickMap_item_11024" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
$.ajax({
type: "GET",
url: 'steel_agg_bof_flash_en.xml',
dataType: "xml",
success: xmlParser
});
function xmlParser(xml) {
$(xml).find("basics").each(function () {
var img = $(this).find('imgpath').text();
$('#clickMapFlashContainer').css({
'background-image' : 'url(' + img + ')',
'width' : '560px',
'height' : '560px',
'background-repeat' : 'no-repeat',
});
});
$(xml).find("hotspot").each(function () {
var position = $(this).find('position').text();
var arr = position.split(",");
var hotspotid = $(this).find('hsid').text();
$('#clickAreas').prepend('<div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>');
});
}
});
</script>
I found a solution and working properly, but this is JavaScript newbie code as you can see, please take a look and suggest what can be changed, because I think it is a messy code. Whether it is a good idea to use Array.prototype.slice.call to convert NodeList to an Array and then check whether the div contains one of these classes?
function changeStyle(hotspotid) {
var hotspot = hotspotid.replace('_clickable', '');
var hotspots = document.querySelectorAll(".clickMapItem.text, .clickMapItem.multiImageText"); // Return a NodeList
var nodesArray = Array.prototype.slice.call(hotspots, 0); //Convert NodeList to an Array
nodesArray.forEach(function(item) {
console.log(item);
});
var i;
for (i = 0; i < hotspots.length; i++) {
hotspots[i].style.display = "none";
}
if (hotspotid == "clickMap_item_10450_clickable" || hotspotid == "clickMap_item_11006_clickable") {
document.getElementById('clickMapFlashContainer').style.display = "none";
}
if (hotspots[0].style.display == "") {
document.getElementById(hotspot).style.display = '';
document.getElementById("clickMap_item_default").style.display = "none";
} else if (hotspots[1].style.display == "") {
document.getElementById("clickMapFlashContainer").style.display = "none";
}
};
function backClose() {
var sections = document.getElementsByClassName("clickMapItem");
var i;
for (i = 0; i < sections.length; i++) {
sections[i].style.display = "none";
}
document.getElementById('clickMapFlashContainer').style.display = "";
document.getElementById("clickMap_item_default").style.display = "";
}
}

change only the background-image smooth without text in front of it

I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
$('._container-1').css('background-image','url('+bg[2]+')');
window.setInterval(
function(){
img=bg.shift();bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
},
10000
);
Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this:
window.setInterval(
function(){
img=bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image','url('+img+')');
$('._container-1').fadeIn(600);
});
},
17000
);
The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.
Can somebody help me please?
nina_berlini
I have uses 2 elements as background to achieve the effect. Also check demo on https://jsfiddle.net/n380u3cy/1/
HTML:
<div class="container">
<div class="background"></div>
<div class="background"></div>
<button>
Test button
</button>
</div>
CSS:
.container { position: relative; line-height: 100px; }
.container > .background,
.container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
.container > *:not(.background) { position: relative; z-index: 1; }
Javascript:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
var Transition = 1000;
$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
function() {
img=bg.shift();
bg.push(img);
var $Backgrounds = $('.background');
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
$Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
$(this).show(0).css({
'background-image': 'url('+img+')'
});
$Backgrounds.eq(1).hide(0);
});
}, 2000
);
Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.
var bg = [
'https://placehold.it/1001x201',
'https://placehold.it/1002x202',
'https://placehold.it/1003x203'
];
$('._container-1').css('background-image', 'url(' + bg[2] + ')');
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
},
10000
);
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image', 'url(' + img + ')');
$('._container-1').fadeIn(600);
});
},
17000
);
.wrapper {
position: relative;
width: 100%;
height: 200px;
}
._container-1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top center;
}
.buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
button {
background: red;
padding: 5px 10px;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="_container-1"></div>
<div class="buttons">
<button type="button">
Button 1
</button>
<button type="button">
Button 2
</button>
</div>
</div>
thank you for your great solution. I am not well familiar with jQuery and have a question about your code:
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?
nina_berlini

How to add "Loading icon" and dim the background when something is process in backend?

I'm newbie to asp.net, javascript.
I have multiple views in a page in my ASP.NET application which is implemented using MVC5 Razor engine. Each view looks like a panel and they are cshtml files. Not aspx. Each panel has submit buttons individually where they are connected to its own API via Ajax.BeginForm option.
I want to know how can I add a Processing/Loading icon in the center of the screen and dim the background until submit has finished and returned back to my view ??
#using (Ajax.BeginForm("FilterReport", "Report", new AppAjaxOptions()
{
ExtendOnSuccess = "ReportView.onFilteringCompleted(data)",
UpdateTargetId = "filterContent",
}))
{
//some <div> .... </div> here
<button type="submit" class="btn btn-primary">#LanguagesFacade.GetValue(DictionaryKey.Filter)</button>
}
Signature of the API looks like this:
public PartialViewResult FilterReport(ReportFilterViewModel reportFilterViewModel)
Please let me know how to implement a loading icon on screen during the execution of this API simultaneously ??
Thanks in advance.
Here is a sample snippet. This should help you
//for demo
$('button').on('click', function() {
showLoadingIcon(); //call this when you want to show loading icon
});
//----------------------------Core functionality----------------------------------//
function showLoadingIcon() {
var loadingImage = '<div class="loading-div">' +
'<span class="loading-icon " style="opacity:none;">' +
'<i class="fa fa-refresh fa-2x fa-spin" style="margin-left: 47px;"></i>' +
'</span></div>';
$('body').append(loadingImage);
}
function hideLoadingIcon() { //call this when you want to hide loading icon
$('#loading_icon_div').remove();
}
div {
background-color: pink;
width: 400px;
height: 400px;
}
.loading-div {
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.5);
z-index: 9999;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.loading-icon {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -50px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>show loading icon..</button>
some random text goes here..
</div>

Dynamic JavaScript Injection/Execution

A small little rundown of what I'm trying to do:
1) Dynamically determine if a browser is capable of playing HTML5 video (Working)
2) If not capable of playing HTML5 video, load Flash version of video, CSS, and page (Working)
3) If capable of playing HTML5 video, load HTML5 version of video, CSS, and page (Stuck)
All the code needed loads into the browser (IE10, IE11, and Chrome 36 have been tested). The problem is with the execution of JavaScript that is added through the dynamic loading. I'm using the Adobe Captivate CS6 publishing system for Flash and HTML5 output, and all my customized code works perfectly if the scripts are loaded normally, but not through this dynamic method. To save a little bit of effort, I'm just going to post the code for the HTML5 version.
function addExternalStyleSheet(href)
{
if(document.createStyleSheet)
{
document.createStyleSheet(href);
}
else
{
var newSheet = document.createElement('link');
newSheet.setAttribute('rel', 'stylesheet');
newSheet.setAttribute('type', 'text/css');
newSheet.setAttribute('href', href);
document.getElementsByTagName('head')[0].appendChild(newSheet);
}
}
function addInternalStyleSheet(selector, attributes)
{
if(document.createStyleSheet)
{
var styleSheet = document.createStyleSheet('');
styleSheet.cssText = selector + '{' + attibutes + '}';
}
else
{
var styleTag = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(styleTag);
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
if(sheet.insertRule)
sheet.insertRule(selector + '{' + attributes + '}', 0);
else
sheet.addRule(selector, attributes, 0);
}
}
function addJavaScript(src)
{
var newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', src);
document.getElementsByTagName('head')[0].appendChild(newScript);
}
function generateEmbed()
{
if(fileType == 'html5')
{
addExternalStyleSheet('assets/playbar/playbarStyle.css');
addExternalStyleSheet('assets/css/CPLibrary.css');
addExternalStyleSheet('assets/css/CPQuiz.css');
addExternalStyleSheet('assets/css/smoothness/jquery-ui-1.8.14.custom.css');
addExternalStyleSheet('assets/css/dd.css');
addInternalStyleSheet('.shadow', 'overflow: hidden;');
addInternalStyleSheet('.cpMainContainer', 'background-color: transparent; height: 100%; width: 100%; padding: 0px; position: absolute;');
addInternalStyleSheet('.blocker', 'position: absolute; left: 0px; top: 0px; display: none;');
addInternalStyleSheet('.loadingBackground', 'background-color: #777777; opacity: 0.5;');
addInternalStyleSheet('.loadingString', 'color: #ffffff;');
addJavaScript('assets/js/jquery-1.6.1.min.js');
addJavaScript('assets/js/uncompressed.jquery.dd.js');
addJavaScript('assets/js/uncompressed-jquery-ui-1.8.14.custom.js');
addJavaScript('assets/js/CPRuntimeDailog.js');
addJavaScript('assets/js/CPLibrary.js');
addJavaScript('assets/js/CPQuizLibrary.js');
addJavaScript('assets/js/CPPlaybar.js');
addJavaScript('assets/js/CPTOC.js');
addJavaScript('assets/js/CPWidgetManager.js');
addJavaScript('assets/playbar/playbarScript.js');
addJavaScript('Project.js');
document.getElementById('player').innerHTML = '\n <div class="cpMainContainer" id="cpDocument" style="left: 0px; top: 0px;">\n <div class="shadow" id="project_container" style="left: 0px; top: 0px; position: absolute;">\n <div id="project" class="cp-movie" style="width: 1280px; height: 720px">\n <div id="project_main" class="cp-timeline cp-main">\n <div id="div_Slide" onclick="handleClick(event)" style="top: 0px; width: 1280px; height: 720px; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0);"><\/div>\n <\/div>\n <div id="autoplayDiv" style="display: block; text-align: center; position: absolute; left: 0px; top: 0px;">\n <img id="autoplayImage" src="" style="position: absolute; display: block; vertical-align: middle;" \/>\n <div id="playImage" tabindex="0" role="buton" aria-label="play" class="autoPlayButton" onkeydown="CPPlayButtonHandle(event)" onClick="cp.movie.play()" style="position: absolute; display: block; vertical-align: middle;"><\/div>\n <\/div>\n <\/div>\n <div id="playbar" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="toc" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="cc" style="left: 0px; float: left; position: absolute; visibility: hidden;">\n <div id="ccText" style="left: 0px; float: left; position: absolute; width: 100%; height: 100%;">\n <p style="margin-left: 8px; margin-right: 8px; margin-top: 2px;"><\/p>\n <\/div>\n <div id="ccClose" style="background-image: url(.\/assets\/Playbar_icons\/ccClose.png); right: 0px; float: right; position: absolute; cursor: pointer; width: 13px; height: 11px;" onclick="showHideCC()"><\/div>\n <\/div>\n <div id="passwordDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <div id="expDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <\/div>\n <\/div>\n <div id="blockUserInteraction" class="blocker" style="width: 100%; height: 100%;">\n <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;" id="loading" class="loadingBackground">\n <tr style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <td style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <image id="preloaderImage"><\/image>\n <div id="loadingString" class="loadingString">Loading...<\/div>\n <\/td>\n <\/tr>\n <\/table>\n <\/div>\n';
function DoCPInit()
{
CPPreInit();
cp.QuizLibraryInit();
CPPostInit();
}
document.oncomplete = DoCPInit();
}
}
I included all the functions for inserting files (internal and external CSS and JavaScript), in case the problem is there, though it took me several hours just to get the internal CSS function to work without disabling the JavaScript function. :S
When using the browser debugger in IE, it errors with the execution (as a part of the DoCPInit function) of the CPPreInit function, which is located in CPLibrary.js, the fifth script dynamically loaded. The debugger states that the function is undefined.
Honestly, I'd prefer to use PHP to get this all done, but my hands are tied, so JavaScript has to get the job done, and I know it can, I'm just screwing it up. :(
I have a suspicion that the complete event is not firing when you expect, primarily because you're loading in these scripts dynamically, so independently to the resources after which complete fires.
It seems to me you actually need to listen for the load event for each resource, count them and only when those are complete invoke DoCPInit
function resourceLoaded() {
var ev = new Event('resourceLoaded', {bubbles: true});
this.removeEventListener('load', resourceLoaded); // cleanup
this.dispatchEvent(ev);
}
function loadResource(parent, tag, args) {
var node = document.createElement(tag), arg;
// add listeners on this line if needed
node.addEventListener('load', resourceLoaded);
for (arg in args) node.setAttribute(arg, args[arg]);
parent.appendChild(node);
return node;
}
function addJavaScript(src) {
loadResource(
document.head,
{
'type': 'text/javascript',
'src': src
}
);
}
var waitfor = 1; // one script
document.addEventListener('resourceLoaded', function () {
if (--waitfor > 0) return;
// invoke whatever
DoCPInit();
});
Partially tested it in Chrome, you may need to check compatibility over browsers
Quick answer: use a script from http://microjs.com/#loader to load the scripts and execute something after a load. LABJs is a good choice.
Alright, so I took my cue from Paul S, but his code wasn't working. Adding alerts to the first line in the dynamically loaded scripts showed that the DoCPInit function was called before the scripts were loaded, which is where the error came from. To correct this, I moved the jQuery call to a standard SCRIPT tag and called the rest using $.AJAX() with async set to false. To simplify the matter, I set it using an array, rather than 10 individual calls.
var addJavaScript = [
'assets/js/uncompressed.jquery.dd.js',
'assets/js/uncompressed-jquery-ui-1.8.14.custom.js',
'assets/js/CPRuntimeDailog.js',
'assets/js/CPLibrary.js',
'assets/js/CPQuizLibrary.js',
'assets/js/CPPlaybar.js',
'assets/js/CPTOC.js',
'assets/js/CPWidgetManager.js',
'assets/playbar/playbarScript.js',
'Project.js',
];
jQuery.each(addJavaScript, function (i, val) {
jQuery.ajax({ async: false, dataType: 'script', url: val });
});

Categories