Hello I have a query regarding Kendo UI's Window Content. Basically I've picked up a nice little desktop-like (WebOS) setup that I'd like to fiddle around with. The application windows "openWin1" and "openWin2" are defined but are empty and have no content. Where do I add the content? In HTML5 or Javascript?
Any help would be greatly appreciated. I'm quite new to this.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Masrani Global OS</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="css/system.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.window.min.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div id="titleBar"><a id="openWin1" class="topBtn" href="#">Terminal</a><a id="openWin2" class="topBtn" href="#">Media Player</a></div>
<div id="deskTop"></div>
<div id="statusBar"><ul id="statusBarBtns"><li id="hideAll"><a class="statBarBtn" href="#">Show Desktop</a></li></ul><div id="logText"></div></div>
</body>
</html>
custom.js:
function log(data){
console.log(data);
}
function repositionWindow(elementName){
var thisWindow = $("#" + elementName).closest('.k-window'),
winOffset = thisWindow.offset(),
thisWindowWidth = thisWindow.width()
thisWindowHeight = thisWindow.height()
bottomEdge = winOffset.top + thisWindowHeight
rightEdge = winOffset.left + thisWindowWidth
deskTopOffset = $('#deskTop').offset()
deskTopHeight = $('#deskTop').height();
deskTopBottom = deskTopOffset.top + deskTopHeight - 25
deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
if(thisWindowWidth>$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
if(bottomEdge>deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
if(rightEdge>deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
if(winOffset.top < deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
if(winOffset.left < deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
if(thisWindow.offset().top<deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
}
function createWindow(elementName,Icon,WindowTitle,Width,Height){
$('body').append('<div id="'+elementName+'"></div>');
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
$('#statusBarBtns').append('<li id="statbar_'+elementName+'"><a class="statBarBtn" href="#WIN-'+elementName+'">'+WindowTitle+'</a></li>');
window.kendoWindow({
width: Width+"px",
height: Height+"px",
title: WindowTitle,
actions: ["Custom","Maximize", "Close"],
close: function(){
$('#statbar_'+elementName).remove();
$("#"+elementName).data("kendoWindow").destroy();
if(elementName == 'myWindow'){
$('#openWin1').show();
}
if(elementName == 'myWindow2'){
$('#openWin2').show();
}
},
activate: function(e){
repositionWindow(elementName);
},
dragend: function(e){
repositionWindow(elementName);
},
resize: function(e){
repositionWindow(elementName);
}
});
$("#" + elementName +'_wnd_title').parent().prepend('<img class="windowLeftIcon" src="icons/'+Icon+'.png"/>');
window = $("#" + elementName).data("kendoWindow");
var vv = window.wrapper.find(".k-i-custom");
vv.removeClass('k-i-custom').addClass('k-i-minimize2');
vv.click(function (e) {
$("#" + elementName).closest('.k-window').hide();
})
}
}
$('.statBarBtn').live('click',function(e){
e.preventDefault();
var elementName = $(this).attr('href');
if(elementName == '#') return;
elementName = elementName.replace("#WIN-","");
var wnd = $("#"+elementName).data("kendoWindow");
if(wnd.element.is(":hidden")){
$("#" + elementName).closest('.k-window').show();
wnd.toFront();
} else {
$("#" + elementName).closest('.k-window').hide();
}
});
$(document).ready(function() {
$('#openWin1').click(function(){
createWindow('myWindow','server','Terminal',500,300);
$(this).hide();
});
$('#openWin2').click(function(){
createWindow('myWindow2','server','Media Player',400,200);
$(this).hide();
});
$('#hideAll').click(function(){
$(".k-window-content").each(function(){
$(this).closest('.k-window').hide();
});
});
});
In your JavaScript, a div is created and added to the DOM:
$('body').append('<div id="'+elementName+'"></div>');
The Kendo Window object is then set up on the created div:
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
...
window.kendoWindow({...});
}
Therefore, any HTML content nested within the created div will be displayed within the Kendo Window, i.e.:
$('body').append('<div id="'+elementName+'"><p>This will appear in the window</p></div>');
Related
I am trying to display content in a div inside a popover using Javascript and facing some issue. Below is the code. Hope someone can help..
1) ASP.Net master page that calls the pop up vbhtml page
window.izenda=false;
$("#NextGenReportsLink").click(function(){
if(!window.izenda)
{
PleaseWaitOpen();
window.izenda=true;
$.get("/Report/NextGenReportViewer", function(data){
$("#NextGenReportSelectorNew").append(data)
});
}
});
2) The vbhtml page that should pop up on click of #NextGenReportsLink
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="~/Scripts/EmbeddedUI/izenda-ui.css?db1ebd9b10aa86f1fd76" rel="stylesheet">
<link href="~/Content/ReportsFiles/Css/jquery.webui-popover.css" rel="stylesheet" />
<link href="~/Content/ReportsFiles/Css/nanoscroller.css" rel="stylesheet" />
<link href="~/Content/ReportsFiles/Css/reports.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="~/Content/ReportsFiles/Js/jquery.webui-popover.js"></script>
<script src="~/Content/ReportsFiles/Js/jquery.nanoscroller.min.js"></script>
</head>
<body>
<div class="row" id="data" >
<div class="container" id="izenda-root"></div>
</div>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_common.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_locales.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_vendors.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/EmbeddedUI/izenda_ui.js?db1ebd9b10aa86f1fd76"></script>
<script type="text/javascript" src="~/Scripts/izenda.integrate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
//$("#NextGenReportsLink").click();
PleaseWaitClose();
DoIzendaConfig();
izendaInit();
document.getElementById('NextGenReportSelectorNew').style.display = "block";
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
var options = {
valueNames: ['name']
};
$('#NextGenReportsLink').webuiPopover({
placement: 'vertical',
trigger: 'click',
width: Per98,
offsetTop: -10,
height: Hei,
arrow: true,
title: 'NextGenReports',
closeable: true,
animation: 'fade',
onHide: function () { $("#loadingDiv").hide(); },
onShow: function () {
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
$('.webui-popover.fade').css('left', Per1);
var ll = $('#NextGenReportsLink').offset().left + ($('#NextGenReportsLink').width() / 2)
$('.webui-arrow').css('left', (ll - Per1) + 10);
},
content: $('#data').html(),
type: 'html'
});
$(window).resize(function () {
debugger;
if ($('.webui-popover').is(':visible')) {
var Wid = $(window).width();
var Hei = $(window).height() - (38 + 85);
var Per98 = parseInt(98 / 100 * Wid)
var Per1 = parseInt((Wid - Per98) / 2);
var ll = $('#NextGenReportsLink').offset().left + ($('#NextGenReportsLink').width() / 2)
$('.webui-arrow').css('left', ll - Per1 + 9);
}
})
});
</script>
</body>
</html>
izendaInit(); function loads a UI into the izenda-root div, however that div is not getting displayed. Instead the below div is getting displayed
I can see another div with the same id "izenda-root" being loaded with the data but I'm not sure how to display that div. Any help is much appreciated.. Please let me know if you need any more documentation on the js/css files referred to in the vbhtml..
3) Below is the izenda.integrate.js
//This function will point the front-end at an Izenda API
var DoIzendaConfig = function () {
var configJson = {
"WebApiUrl": "http://x.x.x.x:yy/api/",
"BaseUrl": "/",
"RootPath": "Scripts/EmbeddedUI",
"CssFile": "izenda-ui.css",
"Routes": {
"Settings": "settings",
"New": "new",
"Dashboard": "dashboard",
"Report": "report",
"ReportViewer": "reportviewer",
"ReportViewerPopup": "reportviewerpopup",
"Viewer": "viewer"
},
"Timeout": 3600,
};
IzendaSynergy.config(configJson);
};
//Error checking during token generation
function errorFunc() {
alert('Token was not generated correctly.');
}
//DoRender will called via successFunc
var DoRender = function (successFunc) {
$.ajax({
type: "GET",
url: "https://xxxx.mock.pstmn.io/GenerateToken",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
};
//The IzendaSynergy.render function will render the entire Izenda front-end with an independent navigation
var izendaInit = function () {
function successFunc(data, status) {
var currentUserContext = {
token: data.token
};
IzendaSynergy.setCurrentUserContext(currentUserContext);
IzendaSynergy.render(document.getElementById('izenda-root'));
}
this.DoRender(successFunc);
};
I am building a phonegap application and I get the following error message when debugging.
Uncaught TypeError: app.receivedEvent is not a function(…)** on line 18 of my JS code (I point it out below).
To be honest I have read many guides on the deviceready but I just can't figure out how to properly use it for my phonegap build code.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Anton|Patua+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/fact_page.css">
<title>One Direction Facts</title>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>One Direction - Fact of the Day</h1>
</div>
<div id="deviceready" data-role="main" class="ui-content">
<h2 id="todayh2" class="invisible"> Today's One Direction Fact:</h2>
<div id="quotebox" class="PulseEffect icon">
<div id="ShineDiv" class="shine"></div>
<div class="facebox fade icon">
<div id="ShineDiv2" class=""></div>
</div>
<p class="hidden" id="qotd"> Welcome to<br><strong>One Direction Facts.</strong><br><br>You will get a random fact each day.</p>
</div>
<a id="nextQ" class="" data-role="button" data-ajax="false">View Fact</a>
<div class="XPmeter animateXP" >
<span id="bar" style="width: 20%"></span>
<div id="medaldiv">
<img id="medal" src="images/medal3.svg"><p id="lvl">1</p>
</div>
</div>
</div>
<div data-role="footer">
<h1>New Features Coming Soon!</h1>
</div>
</div>
<!-- --------------------JS------------------------ -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/app_scripts.js"></script>
<script type="text/javascript" src="js/admob.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Here is my JS:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
/*--error is here-->*/ app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent:
$("#nextQ").click(function(){
var tempd = new Date(); //Get today's date
//Checks if localstorage had 'DateOpened' already stored
// Note that by adding strings in there, we end up with a string instead of adding.
// Note the order: Year first, then month, then day.
// Also, since we display it, we put separators in and add 1 to month (since Jan = 0).
var str = tempd.getFullYear() + "-" + (tempd.getMonth() + 1) + "-" + tempd.getDate();
console.log("Today's date: " + str);
var localVal = localStorage.getItem('DateOpened');
console.log("Previous localVal: " + localVal);
if(localVal != null){
var difference = localVal.localeCompare(str);
}
console.log("localeCompare: " + difference);
//If stored date is older than this date do something:
if(localVal == null || difference < 0){
// If the localstorage doesn't exist, nothing happens
console.log("App will now run once for today.")
//Run the JS for the app (give new quote since it is a new day)
var Quotes = [];
var ID = [];
var Tag = [];
//Get quotes from JSON file
$.ajax({
url: './json/facts.json',
dataType: 'json',
type: 'get',
success: function(data){
console.log(data);
console.log("successfully imported the JSON file");
console.log(data.length); //Returns 64
totalQ = data.length;
for (i = 0; i < totalQ; i++){
ID[i] = data[i][0];
Tag[i] = data[i][1];
Quotes[i] = data[i][2];
}
console.log(Quotes.length);
}
})
.done(function(data){ //This waits for AJAX to be done before running
var Quote = new String;
var qnumber = 0;
var totalQ //The total number of available quotes to choose from
var CurrentImage = String;
totalQ = Quotes.length - 1;
console.log("TotalQ = " + totalQ);
//Get list of which facts have already been seen
var seen = JSON.parse(localStorage.getItem('seen'));
console.log("var seen = " + seen);
if (seen == null){
var seen = new Array(totalQ);
for (var i = 0; i < seen.length; ++i) {
seen[i] = false;
}
console.log("var seen = " + seen);
}
//Get a Quote
ChooseQuote(0,totalQ);
//Change the image depending on the quote
//replace the quote with a new one
$("#qotd:visible").hide();
$("#ShineDiv").addClass("shine");
$(".facebox").css("background-image",CurrentImage);
$(".facebox").css("opacity","1.0");
$("#qotd").html(Quote);
console.log("Image Changed");
increaseXP();
//================
function ChooseQuote(min,max){
//Choose 2 random numbers, one for quotes one for image
var RandomNum = Math.floor(Math.random()*(max-min+1)+min);
var ImageNum = Math.floor(Math.random()*(5-1+1)+1);
Quote = Quotes[RandomNum];
CurrentImage = "url(./images/FaceBoxes/" + Tag[RandomNum] + "/" + Tag[RandomNum] + ImageNum + ".png)";
if (seen[RandomNum] == true ) {
//Choose new quote
ChooseQuote(0,totalQ);
console.log("Has this fact been seen before? Answer: " + seen[RandomNum] );
var numOfTrue = 0;
for(var i=0; i<=totalQ; i++){
if(seen[i] === "true")
numOfTrue++;
}
if (numOfTrue = totalQ) {
localStorage.setItem('All_Facts_Seen:', true);
console.log("All the Facts have been seen. Resetting Facts.");
seen = new Array(totalQ); //Empty the seen Array
localStorage.setItem('seen', JSON.stringify(seen)); //Save the empty Array
}
}
else {
seen[RandomNum] = "true";
console.log("This fact has never been seen.")
}
console.log(Quote);
console.log(CurrentImage);
//Remeber which fact is displayed
localStorage.setItem('Curr_Fact', Quote);
localStorage.setItem('Curr_ImgUrl', CurrentImage);
localStorage.setItem('seen', JSON.stringify(seen));
}
//==================
//Save the current date in local storage
localStorage.setItem('DateOpened',str);
console.log("The App Ran, you can get a new fact tomorrow");
console.log("Current LocalStorage Date: " + str);
});
}
else {
//If it is still the same day, show the last fact & image
var Quote = localStorage.getItem('Curr_Fact');
var CurrentImage = localStorage.getItem('Curr_ImgUrl');
$("#qotd:visible").hide(); //Hide main quote
$("#ShineDiv2").addClass("shine");
if ($('h2').hasClass("invisible")){ //if heading is invisble show it, remove that class
$('h2').css('visibility','visible').hide().fadeIn('slow').removeClass("invisible");
}
$(".facebox").css("background-image",CurrentImage);
setTimeout( function() { //This is so that the first image and new image don't crossfade/stretch
$(".facebox").css("opacity","1.0");
}, 100);
$("#qotd").html(Quote); //Replace the main message with the actual quote
console.log("Showing the same fact as before. Wait until tomorrow to get a new fact.");
}
},
};
$(window).load(function() {
var headerh;
var footerh;
var pageh;
var hbtn_nextq;
headerh = $("div[data-role='header']").outerHeight();
footerh = $("div[data-role='footer']").outerHeight();
pageh = $(window).height();
console.log(headerh + " " + footerh + " " + pageh);
var difference = pageh - headerh - footerh;
$(".ui-content").css("height", difference);
var h1, h2, h3, h4 , h5;
h1 = $(".ui-content").outerHeight();
h2 = $(".ui-content>h2").outerHeight();
h3 = $("#quotebox").outerHeight(true);
h4 = $("#nextQ").outerHeight();
h5 = ((h1 - h2 - h3 - h4) /2) - 50;
console.log(h1);
console.log(h2);
console.log(h3);
console.log(h4);
console.log(h5);
var h5s = h5 + "px";
//$("#quotebox").css("margin-top",h5s);
$(".ui-content>h2").css("margin-top",h5s);
//$("#nextQ").css("margin-bottom",h5s);
//ShowXP();
//Make the quotebox flip over on click
$(".facebox, #ShineDiv").click(function(){
$("#quotebox").removeClass("PulseEffect")
$("#ShineDiv").removeClass("shine");
$(".facebox").css("opacity","0");
$("#qotd").fadeIn("slow", function(){});
});
ShowXP();
});
function increaseXP(){
//Get the lvl and xp from storage
var lvl = localStorage.getItem("lvl", lvl);
var XP = localStorage.getItem("XP", XP);
console.log("Old XP = " + XP + " Old Level = " + lvl);
lvl = parseInt(lvl);
XP = parseInt(XP);
//Increase XP
XP = XP + 25;
//Increase lvl
if (XP >= 100){
lvl = lvl + 1;
localStorage.setItem('XP',XP);
localStorage.setItem('lvl',lvl);
UpdateXP(XP);
setTimeout(function() {
ShowUP(lvl);
}, 200);
XP = XP - 100;
console.log("Current XP = " + XP + " Current Level = " + lvl);
UpdateXP(XP);
}
localStorage.setItem('XP',XP);
localStorage.setItem('lvl',lvl);
UpdateXP(XP);
}
function ShowXP(){
var XP = localStorage.getItem("XP");
var lvl = localStorage.getItem("lvl");
if (XP == null){
XP = 0;
localStorage.setItem("XP", XP);
}
if (lvl == null){
lvl = 1;
localStorage.setItem("lvl",lvl);
}
lvl = parseInt(lvl);
XP = parseInt(XP);
$("#lvl").text(lvl);
$(".XPmeter > span#bar").each(function() {
$(this)
.data("origWidth", XP)
.width(0)
.animate({
width: $(this).data("origWidth") + "%" // or + "%" if fluid
}, 1200);
});
}
function UpdateXP(XP){
$(".XPmeter > span#bar").each(function() {
$(this)
.animate({
width: XP + "%" // or + "%" if fluid
}, 1200);
});
}
function ShowUP(new_level){
$("#medal").animate({height: "100px" },600, function(){
$("#lvl").text(new_level);
$("#medal").animate({height: "50px" },600);
});
$(".XPmeter > span#bar").width("0");
}
//-------------------------------------------------------------//
// //
// This is the scirpt that will get the facts and display them //
// //
//-------------------------------------------------------------//
That's because your receivedEvent is not defined as a functions but as a property of the app object so it can't be called as a function.
You to change it from:
// Update DOM on a Received Event
receivedEvent:
to:
// Update DOM on a Received Event
receivedEvent: function(id) {
I have the following code, put in a file called "showLessMore.js". this file is in the same folder as the python file used to render the webpage:
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> ' + config.moreText + '</span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);
When I put the code directly in the webpage it works perfect. However, when I try to used the external file "showLessMore.js" as follows it doesn't work:
s.wfile.write('<script src="showLessMore.js"></script>')
This is the output in the html page, but when I click on the link of my JS file it doesn't show the file, which is bizarre:
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script><script src="showLessMore.js"></script>
....
Could you tell me what could be the reason for that ?
I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg
my code is working in jfiddle but in html page its not working.my coading is given below pls view
my coading is:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Question/problem:not working in html page.
http://jsfiddle.net/5SVuA/1/
hope you understand my problem
First of all you have the wrong script type script type="text/jquery", instead of script type="text/javascript".
And move your javascript code to domready function:
$(function () {
//your code here
});
I have a div container which has a repeating background image that forms a pattern, and I would like to animate it with jQuery so that the pattern moves south-west.
How can this be done?
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="content/main.css">
<script src="content/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
Have a look at Sprightly. It's a jQuery plugin and makes animating background images reasonably easy.
To pan (animate a background image), the documentation gives this code as an example:
$('#trees').pan({fps: 30, speed: 2, dir: 'left'});
If you're looking for a simpler, lighter approach, this plugin may be a better solution. To animate a background, give it an offset:
$('.elem').animate({backgroundPosition: '500px 150px'})
Like this:
$("#container").animate({
'background-position': '1110px 1110px'
}, 1000, function () {
});
...
/**
* #author Alexander Farkas
* v. 1.22
*/
(function ($) {
if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8
var oldCurCSS = $.curCSS;
$.curCSS = function (elem, name, force) {
if (name === 'background-position') {
name = 'backgroundPosition';
}
if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if (!force && style && style[name]) {
return style[name];
}
return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
};
}
var oldAnim = $.fn.animate;
$.fn.animate = function (prop) {
if ('background-position' in prop) {
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if ('backgroundPosition' in prop) {
prop.backgroundPosition = '(' + prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
};
function toArray(strg) {
strg = strg.replace(/left|top/g, '0px');
strg = strg.replace(/right|bottom/g, '100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
}
$.fx.step.backgroundPosition = function (fx) {
if (!fx.bgPosReady) {
var start = $.curCSS(fx.elem, 'backgroundPosition');
if (!start) {//FF2 no inline-style fallback
start = '0px 0px';
}
start = toArray(start);
fx.start = [start[0], start[2]];
var end = toArray(fx.end);
fx.end = [end[0], end[2]];
fx.unit = [end[1], end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
};
})(jQuery);