Develop Reference

How can I create a new object with multiple methods?

I am trying to follow this tutorial here https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/ and I am stuck on the second part. (2. A Blank Canvas)
I am not sure where to put the POP.Draw object. Does it go inside of the var POP{} brackets where the other objects are created? I've tried keeping it inside, outside, and in the init function which I don't think makes sense. The purpose is to create methods within the new Draw object so they can be called later to create pictures in the canvas.
Here is my current code. It is the same as the one in the link:
var POP = {
//setting up initial values
WIDTH: 320,
HEIGHT: 480,
// we'll set the rest of these
//in the init function
RATIO: null,
currentWidth: null,
currentHeight: null,
canvas: null,
ctx: null,
init: function() {
//the proportion of width to height
POP.RATIO = POP.WIDTH / POP.HEIGHT;
//these will change when the screen is resized
POP.currentWidth = POP.WIDTH;
POP.currentHeight = POP.HEIGHT;
//this is our canvas element
POP.canvas = document.getElementsByTagName('canvas')[0];
//setting this is important
//otherwise the browser will
//default to 320x200
POP.canvas.width = POP.WIDTH;
POP.canvas.width = POP.HEIGHT;
//the canvas context enables us to
//interact with the canvas api
POP.ctx = POP.canvas.getContext('2d');
//we need to sniff out Android and iOS
// so that we can hide the address bar in
// our resize function
POP.ua = navigator.userAgent.toLowerCase();
POP.android = POP.ua.indexOf('android') > -1 ? true : false;
POP.ios = (POP.ua.indexOf('iphone') > -1 || POP.ua.indexOf('ipad') > -1) ? true : false;
//we're ready to resize
POP.resize();
POP.Draw.clear();
POP.Draw.rect(120, 120, 150, 150, 'green');
POP.Draw.circle(100, 100, 50, 'rgba(225,0,0,0.5)');
POP.Draw.text('Hello WOrld', 100, 100, 10, "#000");
},
resize: function() {
POP.currentHeight = window.innerHeight;
//resize the width in proportion to the new height
POP.currentWidth = POP.currentHeight * POP.RATIO;
//this will create some extra space on the page
//allowing us to scroll past the address bar thus hiding it
if (POP.android || POP.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
//set the new canvas style width and height note:
//our canvas is still 320 x 400 but we're essentially scaling it with css
POP.canvas.style.width = POP.currentWidth + 'px';
POP.canvas.style.height = POP.currentHeight + 'px';
//we use a timeout here because some mobile browsers
//don't fire if there is not a short delay
window.selfTimeout(function() {
window.scrollTo(0, 1);
})
//this will create some extra space on the page
//enabling us to scroll past the address bar
//thus hiding it
if (POP.android || POP.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
}
};
window.addEventListener('load', POP.init, false);
window.addEventListener('resize', POP.resize, false);
//abstracts various canvas operations into standalone functions
POP.Draw = {
clear: function() {
POP.ctx.clearRect(0, 0, POP.WIDTH, POP.HEIGHT);
},
rect: function(x, y, w, h, col) {
POP.ctx.fillStyle = col;
POP.ctx.fillRect(x, y, w, h);
},
circle: function(x, y, r, col) {
POP.ctx.fillStyle = col;
POP.ctx.beginPath();
POP.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true);
POP.ctx.closePath();
POP.ctx.fill();
},
text: function(string, x, y, size, col) {
POP.ctx.font = 'bold' + size + 'px Monospace';
POP.ctx.fillStyle = col;
POP.ctx.fillText(string, x, y);
}
};

SOLVED
I didn't realize but the completed code is on the webpage. I downloaded it and looked at the example for answers.
I solved the issue by placing the POP.Draw.clear, POP.Draw.rect methods before calling the POP.resize() method. I'm not really sure why the order matters, but it does.

Change menu option width with jQuery

I have got a menu on my homepage and on hover I would like them to enlarge. This is exactly what I have achieved, except there is one flaw:
When I move off before the animation ends, the option stops the animation and subtracts 30 from the width that left off from the previous animation. So it always intersects with the other animation and causes false results.
Example:
I move quickly to menu option 1, it only expands little - let's say by 10px - while I am on it, and as I move off the width decreases by 30px, which is more than the previously moved 10px, which results in a smaller button overall.
I would like to somehow capture how much it has moved during the mouseover animation and only decrease the width in the leaving function by that amount. Or, of course some other easy solution, if there is one...
Here's the code:
$('.menu_option').hover(
function() {
var w = $(this).width()+30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
}, function() {
var w = $(this).width()-30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
});

What you can do is make another variable which is the origin width then when you put it back go back to the origin:
js:
var o = $('.menu_option').width();
$('.menu_option').hover(function () {
var w = $(this).width() + 30 + "";
$(this).stop().animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
$(this).stop().animate({
width: o
}, 150, 'easeOutQuad');
});
http://jsfiddle.net/Hive7/qBLPa/6/

You need to complete the previous animation before the width is calculated
$('.menu_option').hover(function () {
var $this = $(this).stop(true, true);
var w = $this.width() + 30;
$this.animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
var $this = $(this).stop(true, true);
var w = $this.width() - 30 + "";
$this.animate({
width: w
}, 150, 'easeOutQuad');
});
Demo: Fiddle

how to direct download button to url with showing the image

i have this code. and i want when i press download image that it will show the filtered image in my designed webpage. someone can help me how can i do this?
i know i have to change something here in the url. but its dont working and i dont really know why:
var url = canvas.toDataURL("image/png;base64;"); downloadImage.attr('href', url);
please help me.
$(function() {
/*
In this code, we are going to do the following:
1. Accept an image on drag and drop
2. Create a new canvas element (original), with a max size
of 500x500px (customizable) and keep it in memory
3. Listen for clicks on the filters. When one is selected:
3.1 Create a clone of the original canvas
3.2 Remove any canvas elements currently on the page
3.3 Append the clone to the #photo div
3.4 If the selected filter is different from the "Normal"
one, call the Caman library. Otherwise do nothing.
3.5 Mark the selected filter with the "active" class
4. Trigger the "Normal" filter
*/
var maxWidth = 500,
maxHeight = 500,
photo = $('#photo'),
originalCanvas = null,
filters = $('#filters li a'),
filterContainer = $('#filterContainer');
// Use the fileReader plugin to listen for
// file drag and drop on the photo div:
photo.fileReaderJS({
on:{
load: function(e, file){
// An image has been dropped.
var img = $('<img>').appendTo(photo),
imgWidth, newWidth,
imgHeight, newHeight,
ratio;
// Remove canvas elements left on the page
// from previous image drag/drops.
photo.find('canvas').remove();
filters.removeClass('active');
// When the image is loaded successfully,
// we can find out its width/height:
img.load(function() {
imgWidth = this.width;
imgHeight = this.height;
// Calculate the new image dimensions, so they fit
// inside the maxWidth x maxHeight bounding box
if (imgWidth >= maxWidth || imgHeight >= maxHeight) {
// The image is too large,
// resize it to fit a 500x500 square!
if (imgWidth > imgHeight) {
// Wide
ratio = imgWidth / maxWidth;
newWidth = maxWidth;
newHeight = imgHeight / ratio;
} else {
// Tall or square
ratio = imgHeight / maxHeight;
newHeight = maxHeight;
newWidth = imgWidth / ratio;
}
} else {
newHeight = imgHeight;
newWidth = imgWidth;
}
// Create the original canvas.
originalCanvas = $('<canvas>');
var originalContext = originalCanvas[0].getContext('2d');
// Set the attributes for centering the canvas
originalCanvas.attr({
width: newWidth,
height: newHeight
}).css({
marginTop: -newHeight/2,
marginLeft: -newWidth/2
});
// Draw the dropped image to the canvas
// with the new dimensions
originalContext.drawImage(this, 0, 0, newWidth, newHeight);
// We don't need this any more
img.remove();
filterContainer.fadeIn();
// Trigger the default "normal" filter
filters.first().click();
});
// Set the src of the img, which will
// trigger the load event when done:
img.attr('src', e.target.result);
},
beforestart: function(file){
// Accept only images.
// Returning false will reject the file.
return /^image/.test(file.type);
}
}
});
// Listen for clicks on the filters
filters.click(function(e){
e.preventDefault();
var f = $(this);
if(f.is('.active')){
// Apply filters only once
return false;
}
filters.removeClass('active');
f.addClass('active');
// Clone the canvas
var clone = originalCanvas.clone();
// Clone the image stored in the canvas as well
clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
// Add the clone to the page and trigger
// the Caman library on it
photo.find('canvas').remove().end().append(clone);
var effect = $.trim(f[0].id);
Caman(clone[0], function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
// Show the download button
showDownload(clone[0]);
}
else{
hideDownload();
}
});
});
// Use the mousewheel plugin to scroll
// scroll the div more intuitively
filterContainer.find('ul').on('mousewheel',function(e, delta){
this.scrollLeft -= (delta * 50);
e.preventDefault();
});
var downloadImage = $('a.downloadImage');
function showDownload(canvas){
downloadImage.off('click').click(function(){
// When the download link is clicked, get the
// DataURL of the image and set it as href:
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);
}).fadeIn();
}
function hideDownload(){
downloadImage.fadeOut();
}
});

You can try this:
var downloadImage = $('a.downloadImage');
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);

Jquery height() set using imagesloaded

I'm trying to set the position of a menu beneath a slider that is dynamically generating the height, so I've used imagesloaded to load my jquery last and all is well in every browser except safari where it retrieves the height of the slider set in the back-end and not the height of the image which is dynamically generated depending on page size. this is only occurring in safari....
Here is the javascript to position the menu:
$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
$(window).load(function () {
var $container = $('.ls-wp-fullwidth-container');
$container.imagesLoaded(function () {
var height = $(".ls-wp-fullwidth-container").height() - 50;
$(".menu_wrap").css('top', height);
});
});
} else {
$(window).load(function () {
var $container = $('.ls-wp-fullwidth-container');
$container.imagesLoaded(function () {
var height = $(".ls-wp-fullwidth-helper").height();
$(".menu_wrap").css('top', height);
});
});
}
$(window).resize(function () {
var height = $(".ls-wp-fullwidth-container").height() + 40;
$(".menu_wrap").css('top', height);
});
The slider that is being used is anything slider I'm using a themeforest theme named cleanspace and running wordpress 3.5.1.
I've tried using $(window).bind("load",function(){ to load the jquery last and $.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
to detect the browser which works fine on pc but fails on mac, so I'm left with the first code pasted here and await any help with baited breath.
NOTE: the if statement here is un-needed if safari would load my jQuery after the slider images...

I have found a work around I'm guessing it's not the best anwser and would be happy to hear better suggestions, basically I've placed a timer on the function to load like so:
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$(window).load(function() {
setTimeout(function(){
var $container = $('.ls-wp-fullwidth-helper');
$container.imagesLoaded( function() {
var height = $(".ls-wp-fullwidth-helper").height() ;
$(".menu_wrap").css('top', height);
});
}, 2000);
});
}
else {
$(window).load(function() {
var $container = $('.ls-wp-fullwidth-helper');
$container.imagesLoaded( function() {
var height = $(".ls-wp-fullwidth-helper").height();
$(".menu_wrap").css('top', height);
});
});
}
$(window).resize(function(){
var height = $(".ls-wp-fullwidth-helper").height() + 40;
$(".menu_wrap").css('top', height);
});

Different images loaded for different web screen sizes

I have this code which loads automatically a different picture from an array everytime a user loads index.html. This is the jquery code:
$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({'height':'100%','width':'auto'});
} else {
$img.css({'width':'100%','height':'auto'});
}
}
$win.resize(function() { resize(); }).trigger('resize');
});
I'm new with adapting images to different screen resolutions. So I thought that if somebody opens my web with for example an imac with 2560/1440px the image will be adapted correctly with this code, but I suppose it will be completely pixeled. So I think, I have to create a larger image file so those computers load the bigger file to adapt in resolution. I want to avoid that other users with a normal screen load the big file for speed reasons. What could I add to this code to make bigger screens load a bigger file so it doesnt pixalate?!?!
P.D. If you also know which is the best image resolution for different groups of screen sizes it would be VERY helpful!
Thanks!

You could always check the window size, either height or width, whatever floats your boat, and add something to the image filenames to load high res images, like having img4.jpg as a normal image and img4_big.jpg as a high res image etc.
Would look something like this :
$(window).load(function() {
var randomImages = ['img1', 'img2', 'img3', 'img4', 'img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
//add _big to image filename if window width is over 1920px,
//like so : img4_big.jpg etc.
var isBig = $(window).width() > 1920 ? '_big' : '';
//add the string to the image filename
var $img = $('#background')
.attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.jpg')
.css({
'position': 'fixed',
'top': 0,
'left': 0
});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({
'height': '100%',
'width': 'auto'
});
} else {
$img.css({
'width': '100%',
'height': 'auto'
});
}
}
$win.resize(function() {
resize();
}).trigger('resize');
});​