Converting a HTML page to PDF - javascript

I want to convert a HTML page like the given one having a form in it to PDF using jsPDF, but the table isn't getting printed with all of the columns in it. So I am thinking to print it on a landscape page but I am confused with the size measurements. Can anyone help me to get it done correctly?
And this is how it gets printed:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
(function () {
var
form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('suman-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 5,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>

Related

QueryLoader PreLoading Issue

I'm using http://www.gayadesign.com/scripts/queryLoader/to preload my pages. Now, it works fine with my home page, but when I put the code on any other page, the loader just stops at 90% and it won't load... I'm using the code provided in the zip file on the site. What's the problem? I added the script which initiates the plugin
QueryLoader.selectorPreload = "body";
QueryLoader.init();
In the php file and included it in my pages... Like I said, works good on my home page, but fails on any other. Why?
Code 1:
var QueryLoader = {
overlay: "",
loadBar: "",
preloader: "",
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: "body",
ieLoadFixTime: 2000,
ieTimeout: "",
init: function()
{
if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0")
{
return false;
}
if (QueryLoader.selectorPreload == "body")
{
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
}
else
{
$(document).ready(function()
{
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
});
}
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
},
ieLoadFix: function()
{
var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
if (ie[0].match("MSIE"))
{
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100)
{
QueryLoader.imgCallback();
}
}
},
imgCallback: function()
{
QueryLoader.doneNow ++;
QueryLoader.animateLoader();
},
getImages: function(selector)
{
var everything = $(selector).find("*:not(script)").each(function()
{
var url = "";
if ($(this).css("background-image") != "none")
{
var url = $(this).css("background-image");
}
else if (typeof($(this).prop("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img")
{
var url = $(this).prop("src");
}
url = url.replace("url(\"", "");
url = url.replace("url(", "");
url = url.replace("\")", "");
url = url.replace(")", "");
if (url.length > 0)
{
QueryLoader.items.push(url);
}
});
},
createPreloading: function()
{
QueryLoader.preloader = $("<DIV></DIV>").appendTo(QueryLoader.selectorPreload);
$(QueryLoader.preloader).css({
height: "0px",
width: "0px",
overflow:"hidden"
});
var length = QueryLoader.items.length;
QueryLoader.doneStatus = length;
for (var i = 0; i < length; i++)
{
var imgLoad = $("<IMG></IMG>");
$(imgLoad).prop("src", QueryLoader.items[i]);
$(imgLoad).unbind("load");
$(imgLoad).bind("load", function()
{
QueryLoader.imgCallback();
});
$(imgLoad).appendTo($(QueryLoader.preloader));
}
},
spawnLoader: function()
{
if (QueryLoader.selectorPreload == "body")
{
var height = $(window).height();
var width = $(window).width();
var position = "fixed";
}
else
{
var height = $(QueryLoader.selectorPreload).outerHeight();
var width = $(QueryLoader.selectorPreload).outerWidth();
var position = "absolute";
}
var left = $(QueryLoader.selectorPreload).offset()['left'];
var top = $(QueryLoader.selectorPreload).offset()['top'];
QueryLoader.overlay = $("<DIV></DIV>").appendTo($(QueryLoader.selectorPreload));
$(QueryLoader.overlay).addClass("LoadCont");
$(QueryLoader.overlay).css({
position: position,
top: top,
left: left,
width: width + "px",
height: height + "px"
});
QueryLoader.loadBar = $("<DIV></DIV>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadBar).addClass("Loading");
$(QueryLoader.loadBar).css({
position: "relative",
top: "90%",
width: "0%"
});
},
animateLoader: function()
{
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99)
{
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function()
{
QueryLoader.doneLoad();
});
}
else
{
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() { });
}
},
doneLoad: function()
{
clearTimeout(QueryLoader.ieTimeout);
if (QueryLoader.selectorPreload == "body")
{
var height = $(window).height();
}
else
{
var height = $(QueryLoader.selectorPreload).outerHeight();
}
//The end animation, adjust to your likings
$(QueryLoader.loadBar).animate({
height: height + "px",
top: 0
}, 500, "linear", function()
{
$(QueryLoader.overlay).fadeOut(888);
$(QueryLoader.preloader).remove();
});
}
}
Code 2:
<SCRIPT>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</SCRIPT>
CSS:
.LoadCont
{
Z-INDEX: 9999 !important;
BACKGROUND: #000000;
}
.Loading
{
HEIGHT: 1px;
BACKGROUND-COLOR: #626262;
}
The page is: http://www.okultopedija.com/Ulaz?otvori=Razno

Can't get Highstock "scroll" to work

trying to compare two sensor readings - the data is coming from thingspeak. I've got the zoom part working, but for some reason I cant get the scroll to work.
<script type="text/javascript">
// variables for the first series
var series_1_channel_id = 43330;
var series_1_field_number = 4;
var series_1_read_api_key = '7ZPHNX2SXPM0CA1K';
var series_1_results = 480;
var series_1_color = '#d62020';
var series_1_name = 'Zims Sensor';
// variables for the second series
var series_2_channel_id = 45473;
var series_2_field_number = 2;
var series_2_read_api_key = 'N12T3CWQB5IWJAU9';
var series_2_results = 480;
var series_2_color = '#00aaff';
var series_2_name = 'UVM30a';
// chart title
var chart_title = 'UV Sensors Zim / UVM30A';
// y axis title
var y_axis_title = 'UV Index';
// user's timezone offset
var my_offset = new Date().getTimezoneOffset();
// chart variable
var my_chart;
// when the document is ready
$(document).on('ready', function() {
// add a blank chart
addChart();
// add the first series
addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color, series_1_name);
// add the second series
addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color, series_2_name);
});
// add the base chart
function addChart() {
// variable for the local date in milliseconds
var localDate;
// specify the chart options
var chartOptions = {
chart: {
renderTo: 'chart-container',
defaultSeriesType: 'line',
zoomType: 'x', // added here
backgroundColor: '#ffffff',
events: { }
},
title: { text: chart_title },
plotOptions: {
series: {
marker: { radius: 3 },
animation: true,
step: false,
borderWidth: 0,
turboThreshold: 0
}
},
tooltip: {
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (my_offset*60000));
var n = (this.point.name === undefined) ? '' : '<br>' + this.point.name;
return this.series.name + ':<b>' + this.y + '</b>' + n + '<br>' + d.toDateString() + '<br>' + d.toTimeString().replace(/\(.*\)/, "");
}
},
xAxis: {
type: 'datetime',
scrollbar: {
enabled: true,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
title: { text: 'Date' }
},
yAxis: { title: { text: y_axis_title } },
exporting: { enabled: true },
legend: { enabled: true },
credits: {
text: 'ThingSpeak.com',
href: 'https://thingspeak.com/',
style: { color: '#D62020' }
}
};
// draw the chart
my_chart = new Highcharts.Chart(chartOptions);
}
// add a series to the chart
function addSeries(channel_id, field_number, api_key, results, color, name) {
var field_name = 'field' + field_number;
// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&round=2&results=' + results + '&api_key=' + api_key, function(data) {
// blank array for holding chart data
var chart_data = [];
// iterate through each feed
$.each(data.feeds, function() {
var point = new Highcharts.Point();
// set the proper values
var value = this[field_name];
point.x = getChartDate(this.created_at);
point.y = parseFloat(value);
// add location if possible
if (this.location) { point.name = this.location; }
// if a numerical value exists add it
if (!isNaN(parseInt(value))) { chart_data.push(point); }
});
// add the chart data
my_chart.addSeries({ data: chart_data, name: data.channel[field_name], color: color });
});
}
// converts date format from JSON
function getChartDate(d) {
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
return Date.parse(d) - (my_offset * 60000);
}
</script>
​
<style type="text/css">
body { background-color: white; height: 100%; margin: 0; padding: 0; }
#chart-container { width: 800px; height: 400px; display: block; position:absolute; bottom:0; top:0; left:0; right:0; margin: 5px 15px 15px 0; overflow: hidden; }
</style>​
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="//thingspeak.com/exporting.js"></script>
</head>
<body>
<div id="chart-container">
// <img alt="Ajax loader" src="//thingspeak.com/assets/ajax-loader.gif" style="position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;" />
</div>
</body>
</html>​
I would also like to get the chart updating automatically, so any help on that score would also be appreciated. The final issue I am having is trying to get the legend to display the sensor names properly: UV Index (red) should read "Zims Sensor" and UV Index (blue) should read "UVM30A"

jQuery flot hover not working when user moves down the page

I am using jQuery flot. I can't seem to explain the bug well. But by the looks of it, the hover does not work when the user moves down to the page: Here's the video:
http://screencast.com/t/qZIjJ8jsi
Notice when i'm on top of my page the hover is working, but when I'll go down the page, then the hover on the points won't work.
My page is responsive(not sure if that's related, but just saying). Looks like this is a CSS problem. So here's my code:
var graphData = decodeURIComponent(jQuery("#graphData").val());
graphData = jQuery.parseJSON(graphData);
var visitors = new Array();
var totalVisitors = 0;
jQuery.each(graphData,function(index,value){
visitors[index] = [value[0],value[1]];
totalVisitors = totalVisitors + parseInt(value[1]);
});
jQuery(".date-figures").text(totalVisitors);
var visitor = $("#activeUsers"),
data_visitor = [{
data: visitors,
color: '#058DC7'
}],
options_lines = {
series: {
lines: {
show: true,
fill: true,
fillColor: "#E5F3F9",
color:"#058DC7",
},
points: {
show: true
},
hoverable: true
},
grid: {
backgroundColor: '#FFFFFF',
borderWidth: 0,
borderColor: '#CDCDCD',
hoverable: true
},
legend: {
show: true
},
xaxis: {
mode: "time",
},
yaxis: {
show:true
},
};
$.plot(visitor, data_visitor, options_lines);
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
padding: '2px 10px 2px 10px',
opacity: 0.8,
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$('#visitor-stat, #order-stat, #user-stat,#activeUsers').bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var d = new Date(item.datapoint[0]);
var day = parseDay(d.getDay());
var date = d.getDate();
var month = parseMonth(d.getMonth());
var year = d.getFullYear();
var tooltipWording = "<b>"+day+", "+month+" "+date+", "+year+"</b>";
tooltipWording += "<ul>";
tooltipWording += "<li>Visits: <b>"+item.datapoint[1]+"</b></li>";
tooltipWording += "</ul>";
showTooltip(item.pageX, item.pageY, tooltipWording);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
What seems to be problem here? Your help will be greatly appreciated! Thanks! :)

Issue with Flip view not displaying correctly on iOS with Appcelerator Titanium

I'm struggling with an issue on my flashcard iOS app built with Appcelerator (Titanium v 3.2.1).
Code snippet is below, the issue i'm experiencing is as follows....
User taps the masterview to animate between 2 child views, which each have a different language (in this case English/German).
The user can also swipe the view to load in a new word, by calling the loadWords() function again.
Everything is working perfectly, aside of 1 thing.
When the user has tapped the view once it shows the second language and they can happily tap and flip between the words with no issue.
Where we come unstuck is that if the user decides to swipe for a new word when they are on the second language (view: back), rather than the first (view: front) it loads in the new English word ok, but when they tap to view the German word it flips to show the english word again. If they tap again, it will then show the German word.
So I need to eliminate this extra display of the english word on the front view.
Any ideas?!
var win = Titanium.UI.currentWindow;
var selectedlanguage = Ti.App.Properties.getString('langSelect');
// detect height
if (Titanium.Platform.displayCaps.platformHeight == 480) {
var MVTOP = 115;
var tapTOP = 83;
var swipeTOP = 275;
} else {
var MVTOP = 165;
var tapTOP = 133;
var swipeTOP = 325;
}
var masterView = Ti.UI.createView({
backgroundColor: '#FFF',
top: MVTOP,
width: 300,
height: 140,
opacity: 0.7
});
var state = true;
win.add(masterView);
var front = Ti.UI.createView({
backgroundColor: '#FFF',
top: 0,
left: 0,
width: 300,
height: 140,
opacity: 1.0,
touchEnabled: false
});
var back = Titanium.UI.createView({
backgroundColor: '#FFF',
top: 0,
left: 0,
width: 300,
height: 140,
opacity: 1.0,
touchEnabled: false
});
var label1 = Ti.UI.createLabel({
//text: verb_german,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
var label2 = Ti.UI.createLabel({
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
var word_id_num = Ti.UI.createLabel({
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
var dropButton = Ti.UI.createButton({
width: 120,
height: 41,
right: 15,
bottom: 15,
title: 'drop word',
backgroundColor: '#fd0100',
color: '#FFF',
font: {
fontSize: 15
},
opacity: 1.0
});
// add buttons to window
win.add(dropButton);
// the main function which controls the word display
function loadWords() {
label1.text = '';
label2.text = '';
var state = true;
// step 1. get a random pair of words (English & German)
var db = Ti.Database.open('germanV6');
var rows = db.execute('SELECT word_id, word_english, word_german FROM Words WHERE word_dropped = 0 ORDER BY RANDOM() LIMIT 1;');
var x = 0;
while (rows.isValidRow()) {
// step 2. set each label to the correct langauge (this comes from app.js when user selects their default language)
if (selectedlanguage == 'en') {
var word_1 = rows.fieldByName('word_english');
var word_2 = rows.fieldByName('word_german');
} else if (selectedlanguage == 'de') {
var word_2 = rows.fieldByName('word_english');
var word_1 = rows.fieldByName('word_german');
}
// step 3. set the word id, to be used later when wanting to 'drop' a word
word_id_num.text = rows.fieldByName('word_id');
rows.next();
}
// close database
rows.close();
//var state = true;
label1.text = word_1;
front.add(label1);
masterView.add(front);
label2.text = word_2;
back.add(label2);
}
// fire the function and load our words into play
loadWords();
// labels for on screen prompts
var tapLabel = Ti.UI.createLabel({
width: 200,
top: tapTOP,
text: 'tap to flip',
textAlign: 'center',
color: '#FFF',
font: {
fontSize: 15
}
});
var swipeLabel = Ti.UI.createLabel({
width: 320,
top: swipeTOP,
text: 'swipe for next word',
textAlign: 'center',
color: '#FFF',
font: {
fontSize: 15
}
});
// add to the window
win.add(tapLabel);
win.add(swipeLabel);
masterView.addEventListener('click', function (e) {
switch (state) {
case true:
Ti.API.info('true');
masterView.animate({
view: back,
transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
});
break;
case false:
Ti.API.info('false');
masterView.animate({
view: front,
transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
});
break;
}
state = !state;
});
// action for when label is swiped
swipeLabel.addEventListener('swipe', function (e) {
alert(state);
// reload the new word
loadWords();
});
// action for when view is swiped
masterView.addEventListener('swipe', function (e) {
// reload the new word
loadWords();
});
If anyone can help, i'd be so grateful!
Simon
You can try in this way also, you can specify your own animation for the view, you can use other property also:
var animation1 = Ti.UI.createAnimation();
animation1.view: back;
animation1.duration = 1000;
animation1.transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
var animation2 = Ti.UI.createAnimation();
animation2.view: front;
animation1.duration = 1000;
animatio2.transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
masterView.addEventListener('click', function (e) {
switch (state) {
case true:
Ti.API.info('true');
masterView.animate(animation1, function(e){
Ti.API.info('e-->'+e) });
break;
case false:
Ti.API.info('false');
masterView.animate(animation2, function(e){
Ti.API.info('e-->'+e)});
break;
}
state = !state;
});
for more property for animation you can use below link:
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Animation-property-view

TypeError using QueryLoader plugin

For page loader i have used the plugin. Following is js:
var QueryLoader = {
overlay: "",
loadBar: "",
preloader: "",
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: "body",
ieLoadFixTime: 2000,
ieTimeout: "",
init: function() {
if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
//break if IE6
return false;
}
if (QueryLoader.selectorPreload == "body") {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
} else {
$(document).ready(function() {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
});
}
//help IE drown if it is trying to die :)
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
},
ieLoadFix: function() {
var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
if (ie[0].match("MSIE")) {
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
}
}
},
imgCallback: function() {
QueryLoader.doneNow ++;
QueryLoader.animateLoader();
},
getImages: function(selector) {
var everything = $(selector).find("*:not(script)").each(function() {
var url = "";
if ($(this).css("background-image") != "none") {
var url = $(this).css("background-image");
} else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
var url = $(this).attr("src");
}
url = url.replace("url(\"", "");
url = url.replace("url(", "");
url = url.replace("\")", "");
url = url.replace(")", "");
if (url.length > 0) {
QueryLoader.items.push(url);
}
});
},
createPreloading: function() {
QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
$(QueryLoader.preloader).css({
height: "0px",
width: "0px",
overflow: "hidden"
});
var length = QueryLoader.items.length;
QueryLoader.doneStatus = length;
for (var i = 0; i < length; i++) {
var imgLoad = $("<img></img>");
$(imgLoad).attr("src", QueryLoader.items[i]);
$(imgLoad).unbind("load");
$(imgLoad).bind("load", function() {
QueryLoader.imgCallback();
});
$(imgLoad).appendTo($(QueryLoader.preloader));
}
},
spawnLoader: function() {
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
var width = $(window).width();
var position = "fixed";
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
var width = $(QueryLoader.selectorPreload).outerWidth();
var position = "absolute";
}
var left = $(QueryLoader.selectorPreload).offset()['left'];
var top = $(QueryLoader.selectorPreload).offset()['top'];
QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
$(QueryLoader.overlay).addClass("QOverlay");
$(QueryLoader.overlay).css({
position: position,
top: top,
left: left,
width: width + "px",
height: height + "px"
});
QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadBar).addClass("QLoader");
$(QueryLoader.loadBar).css({
position: "relative",
top: "50%",
width: "0%"
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() {
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() { });
}
},
doneLoad: function() {
//prevent IE from calling the fix
clearTimeout(QueryLoader.ieTimeout);
//determine the height of the preloader for the effect
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
}
//The end animation, adjust to your likings
$(QueryLoader.loadBar).animate({
height: height + "px",
top: 0
}, 500, "linear", function() {
$(QueryLoader.overlay).fadeOut(800);
$(QueryLoader.preloader).remove();
});
}
}
In my html file, I used following Javascript:
<script type='text/javascript'>
QueryLoader.init();
</script>
And css is as following:
.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC;
height: 1px;
}
I used this for simple example it works well.
But when I used this for my site it is giving error in js file as following:
TypeError: $(...).offset(...) is undefined
var left = $(QueryLoader.selectorPreload).offset()['left'];
So please can you help out from this issue:
Thanks in advance..
Your plugin is not really one. Go see the documentation to see more details.
Anyway, even if it's not a plugin, it could work as an object using some jQuery functions.
First, you shouldn't call the object inside the object function.
IE :
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
Here, you got your first error which you could have seen in the console. It should be :
this.ieTimeout = setTimeout(this.ieLoadFix, this.ieLoadFixTime);
You can start debugging like this, up to your initial error here.

Categories

Resources