Mad_Griffith

Hi everybody, I am trying to import a db in myphpadmin which works fine on another server and I get the error below. Can you tell me what's wrong here? Thank you. Roughly translated it s: Static analysis: 1 error was found during analysis. Keyword not recognized. (near "ON" at position 25) SQL Query: SET FOREIGN_KEY_CHECKS = ON; MySQL message: #2006 - MySQL server has gone away

Ok, thanks. If I create a PHP function, how can I then access it through JS? Could you make a simple example? Thanks!

I updated the JS/jQuery as follows but I am having a hard time understanding how establish whether I am heading towards the right direction and what else I have to possibly add to the script. Twitter documentation's being poorly written may contribute to my confusion, to some extent. var base64img = canvas.toDataURL().split(',')[1];$.ajax({url: "uploadFile.php",type: "POST",data: {image: base64img},processData: false,contentType: "application/octet-stream"}).done(function(respond) {alert(respond);});

Hi juststomeguy, yes, all the keys and tokens are already in the script (I took them out from the code I pasted here for security reasons). I am just wondering how I should practically write the $.ajax call to have the script work.

Hi, I am currently trying to implement the posting of a canvas image to a Twitter wall.Below, first you see the JS I came up with.What I can't figure out is how am I supposed to get the keys and tokens provided in the PHP function below that code. Such PHP function is contained in the uploadFile.php file.JS: var base64img = canvas.toDataURL().split(',')[1]; $.ajax({ url: "uploadFile.php", type: "POST", data: base64img, processData: false, contentType: "application/octet-stream", }).done(function(respond) { alert(respond); }); PHP: function _microsite_last_tweets($search) {define('CONSUMER_KEY', 'my key');define('CONSUMER_SECRET', 'my key');define('ACCESS_TOKEN', 'my key');define('ACCESS_TOKEN_SECRET', 'my key');$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);$content = $connection->get("account/verify_credentials");if ($search[0] == '@' && strpos($search,' ') == false) {$user = substr($search, 1);$tweets = $connection->get("statuses/user_timeline", array("screen_name" => $user, "count" => "4"));}else {$search = urlencode($search);$tweets = $connection->get("search/tweets", array("q" => $search . '+exclude:retweets', "result_type" => "recent","count" => "4"));}return $tweets;}

As somebody explained to me: [*]The image object is created. [*]The onload listener is registered. Code in the anonymous function is not yet executed. [*]src attribut is assigned to the image object. [*]Image is loaded. [*]onload event fires and code in the anonymous function is executed. [*]Calculations are done. [*]Image is drawn on the canvas.

This version of readUploadeImage() works in the end... function readUploadedImage(file) {var readFile = new FileReader();readFile.onload = function (event) {drawBaseBadge();profileImgUrl = event.target.result;profileImg = new Image();profileImg.id = 'profile-image';profileImg.onload = function () {originalAspectRatio = profileImg.width / profileImg.height;console.log('Img:', profileImg);console.log('Original:', profileImg.width, profileImg.height);profileImg.width = 90;profileImg.height = profileImg.width / originalAspectRatio;profileImgPosX = 44;profileImgPosY = 152;console.log('Resized:', profileImg.width, profileImg.height);context.drawImage(profileImg, profileImgPosX - ((profileImg.width - clipWidth) / 2), profileImgPosY - ((profileImg.height - clipHeight) / 2), profileImg.width, profileImg.height);};profileImg.src = profileImgUrl;};readFile.readAsDataURL(file);}

It's profileImg we are talking about... why should badgeImg be involved? badgeImg loads just fine.

Nothing is logged in the console... I don't know what I am doing wrong...

I understand. I moved it outside the other curly brace, but still it does not work... what else can be wrong? (function() {var badgeImg = new Image();badgeImg.onload = function() {var canvas = $('#badge-image')[0],context = canvas.getContext('2d');canvas.width = 451;canvas.height = 300;drawBaseBadge();function drawBaseBadge() {badgeImg.width = '451';badgeImg.height = '300';context.drawImage(badgeImg, 0, 0);clipWidth = 90;clipHeight = 110;context.rect(44, 152, clipWidth, clipHeight);context.clip();}function readUploadedImage(file) {var readFile = new FileReader();readFile.onload = function(event) {drawBaseBadge();var profileImg = new Image();profileImg.onload = function(profileImg) {profileImg.id = 'profile-image';originalAspectRatio = profileImg.width / profileImg.height;console.log('Img:', profileImg);console.log('Original:', profileImg.width, profileImg.height);profileImg.width = 90;profileImg.height = profileImg.width / originalAspectRatio;profileImgPosX = 44;profileImgPosY = 152;result = {'profileImg.width': profileImg.width,'profileImg.height': profileImg.height,'profileImgPosX': profileImgPosX,'profileImgPosY': profileImgPosY,'originalAspectRatio': originalAspectRatio};}profileImg.src = event.target.url;console.log(result);console.log('Resized:', profileImg.width, profileImg.height);context.drawImage(profileImg, profileImg.profileImgPosX - ((profileImg.width - clipWidth) / 2), profileImg.profileImgPosY - ((profileImg.height - clipHeight) / 2), profileImg.width, profileImg.height);readFile.readAsDataURL(file);}}$('#badge-uploader input').change(function() {readUploadedImage(this.files[0]);});document.getElementById('badge-download').addEventListener('click', function() {downloadCanvas(this, 'badge-image', 'myBadge.png');}, false);function downloadCanvas(link, canvasId, filename) {link.href = document.getElementById(canvasId).toDataURL();link.download = filename;}};badgeImg.src = './img/badge.jpg';}());

Isn't it what I am doing already?

Thanks! What should it be like? Isn't it always profileImg which I have to assign the src value to?

Apparently I need to wait until the image width and height are loaded and then add the src. I need to return multiple values from the onload anonymous function and problem is the values doesn't seem to be returned (console.log(result) doesn't work)... what am I doing wrong? See code below (function() { var badgeImg = new Image(); badgeImg.onload = function() { var canvas = $('#badge-image')[0], context = canvas.getContext('2d'); canvas.width = 451; canvas.height = 300; drawBaseBadge(); function drawBaseBadge() { badgeImg.width = '451'; badgeImg.height = '300'; context.drawImage(badgeImg, 0, 0); clipWidth = 90; clipHeight = 110; context.rect(44, 152, clipWidth, clipHeight); context.clip(); } function readUploadedImage(file) { var readFile = new FileReader(); readFile.onload = function(event) { drawBaseBadge(); var profileImg = new Image(); profileImg.onload = function(profileImg) { profileImg.id = 'profile-image'; originalAspectRatio = profileImg.width / profileImg.height; console.log('Img:', profileImg); console.log('Original:', profileImg.width, profileImg.height); profileImg.width = 90; profileImg.height = profileImg.width / originalAspectRatio; profileImgPosX = 44; profileImgPosY = 152; result = { 'profileImg.width': profileImg.width, 'profileImg.height': profileImg.height, 'profileImgPosX': profileImgPosX, 'profileImgPosY': profileImgPosY, 'originalAspectRatio': originalAspectRatio }; profileImg.src = event.target.url; console.log(result); } console.log('Resized:', profileImg.width, profileImg.height); context.drawImage(profileImg, profileImg.profileImgPosX - ((profileImg.width - clipWidth) / 2), profileImg.profileImgPosY - ((profileImg.height - clipHeight) / 2), profileImg.width, profileImg.height); readFile.readAsDataURL(file); } } $('#badge-uploader input').change(function() { readUploadedImage(this.files[0]); }); document.getElementById('badge-download').addEventListener('click', function() { downloadCanvas(this, 'badge-image', 'myBadge.png'); }, false); function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.download = filename; } }; badgeImg.src = './img/badge.jpg';}());

This is the JS I wrote: (function() { var badgeImg = new Image(); badgeImg.onload = function() { var canvas = $('#badge-image')[0], context = canvas.getContext('2d'); canvas.width = 451; canvas.height = 300; drawBaseBadge(); function drawBaseBadge() { badgeImg.width = '451'; badgeImg.height = '300'; context.drawImage(badgeImg, 0, 0); clipWidth = 90; clipHeight = 110; context.rect(44, 152, clipWidth, clipHeight); context.clip(); } function readUploadedImage(file) { var readFile = new FileReader(); readFile.onload = function(event) { drawBaseBadge(); profileImgUrl = event.target.result; profileImg = new Image(); profileImg.id = 'profile-image'; profileImg.src = profileImgUrl; originalAspectRatio = profileImg.width / profileImg.height; console.log('Img:', profileImg); console.log('Original:', profileImg.width, profileImg.height); profileImg.width = 90; profileImg.height = profileImg.width / originalAspectRatio; profileImgPosX = 44; profileImgPosY = 152; console.log('Resized:', profileImg.width, profileImg.height); context.drawImage(profileImg, profileImgPosX - ((profileImg.width - clipWidth) / 2), profileImgPosY - ((profileImg.height - clipHeight) / 2), profileImg.width, profileImg.height); }; readFile.readAsDataURL(file); } $('#badge-uploader input').change(function() { readUploadedImage(this.files[0]); }); document.getElementById('badge-download').addEventListener('click', function() { downloadCanvas(this, 'badge-image', 'myBadge.png'); }, false); function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.download = filename; } }; badgeImg.src = './img/badge.jpg';}());

Hi, I created a simple badge generator app here. I am using the html5 file input and <canvas> to display a badge template and the user has to select the picture. The problem is that sometimes (randomly?), as soon as the image is selected, it doesn't show up in the pixels I designated it to appear in. A quick debug made clear that, when this occurs, the image object is there but it has width 0 and height 0 (see screenshot below).

Thanks to both of you. Concerning the inheritance, can I use $.each()? @justsomeguy: I meant to say "a built-in pattern in jQuery, without relying on JS"

Hi, I am building an extremely basic jQuery Slideshow plugin (code below). I have two issues: 1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function? 2) How can I make the plugin multi-instance with pure jQuery? Can I avoid JS classical/prototypal inheritance? $('.article-previous').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();if(inner.position().left < 0) { $('.interaction-tab .inner').css({ 'left' : '+=' + slide_width + 'px' });}e.stopPropagation();});$('.article-next').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();var max_pos = total_width - slide_width;if(-inner.position().left < max_pos) {$('.interaction-tab .inner').css({ 'left' : '-=' + slide_width + 'px' });}e.stopPropagation();}); Thanks

Thanks, my solution for the second part is the following: $(window).load(function(){ setTimeout(function() { $('.preloader_wrapper').addClass('preloader_fadeout'); $('body, .header *').css({ '-webkit-animation-play-state': 'running', '-moz-animation-play-state': 'running', '-o-animation-play-state': 'running', 'animation-play-state': 'running' }); }, 1500);});

Isn't the window load more comprehensive than document ready? It waits until images are loaded as well... Anyways, even without the document ready, the first line of code (adding the class 'preloader_fadein') is skipped: $('.preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('.preloader_wrapper').removeClass('preloader_fadein');$('.preloader_wrapper').addClass('preloader_fadeout');$('.header *').css({ '-webkit-animation-play-state': 'running', '-moz-animation-play-state': 'running', '-o-animation-play-state': 'running', 'animation-play-state': 'running'});});

Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded. JS: jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({ -webkit-animation-play-state: 'running'; -moz-animation-play-state: 'running'; -o-animation-play-state: 'running'; animation-play-state: 'running';});});}); CSS: .preloader_wrapper { position: absolute; top: 50%;}.preloader_fadein { -webkit-animation: preloader_fadein 2s ease; -moz-animation: preloader_fadein 2s ease; animation: preloader_fadein 2s ease;}@keyframes preloader_fadein { from { opacity: 0; left: 45%; } to { opacity: 1; left: 50%; }}.preloader_fadeout { -webkit-animation: preloader_fadeout 2s ease; -moz-animation: preloader_fadeout 2s ease; animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout { from { opacity: 1; left: 50%; } to { opacity: 0; left: 55%; }}.header * { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}

Hi, how do I replace the "animate" tag with CSS code? <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line class="diagonal-line" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,255,255);stroke-width:1;" > <animate attributeName="x2" from="0" to="100%" begin="1s" dur=".5s" /> <animate attributeName="y2" from="0" to="100%" begin="1s" dur=".5s" /> </line> </svg> It's not clear what the CSS declarations for the "from" and "to" attributes are...

Yeah, I am not going to tell you why I did it because it would be a tl;dr for you. And anyway, the problem I highlighted in the opening post would be there even if I used the separation of concerns.

I've just found out that I could use this shorthand, but still would like to know what was missing in the code above... <a onclick="jQuery('.ui-accordion').accordion({ active: 2 });jQuery('.ui-accordion-header:nth-of-type(3)')[0].scrollIntoView(true);" style="color: white; background-color: red; padding: 15px; font-size: 25px; text-transform: uppercase">Participate</a>

Hi, I want to trigger a jQuery UI accordion element from a separate link and the following works so far. The problem is that whenever any other element in the accordion is clicked, the accordion element I triggered from the link stays open. Why so? <a onclick="jQuery('.ui-accordion-header:nth-of-type(3)').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top').attr({'aria-expanded': true, 'aria-selected': true}); jQuery('.ui-accordion-content:nth-of-type(3)').addClass('ui-accordion-content-active').css({'display' : 'block','overflow': 'hidden'}); jQuery('.ui-accordion-header:nth-of-type(3)')[0].scrollIntoView(true);" style="color: white; background-color: red; padding: 15px; font-size: 25px; text-transform: uppercase">Participate</a>

Apparently the API too is barring retrieving 7+ days old tweets.