I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.
Can someone point me to some code, or explain the logic?
(function($){
$.fn.swipeGallery = function(options) {
var settings = {
'classname' : 'appGallery',
'autoHeight' : false,
'height' : '100',
'width' : '100',
'background' : '#000000',
'tolerance' : 0.25,
'delay' : 300
}
var ratio = 0;
var mousedown = false;
var mouseX = 0;
var imagesLength = 0;
var imagesCurrent = 0;
var xdiff = 0;
var containerHeight = 0;
var containerWidth = 0;
function doResizeImage(listElement){
$(listElement).css('height', containerHeight);
$(listElement).css('width', containerWidth);
var img = $(listElement).find('img');
if (img.width() / containerWidth > img.height() / containerHeight){
img.width(containerWidth);
var top = (containerHeight - img.height())/2;
img.css('marginTop', top + 'ratio');
}else{
img.height(containerHeight);
var left = parseInt((containerWidth - img.width())/2);
img.css('marginLeft', left + 'ratio');
}
}
function init(obj, parent, imageHandler){
if(settings.autoHeight){
containerHeight = $(window).height();
containerWidth = $(window).width();
}else{
containerHeight = parseInt(settings.height);
containerWidth = parseInt(settings.width);
}
obj.find('li').each(function(){
doResizeImage(this);
imagesLength++;
})
parent.css('height', containerHeight);
parent.css('width', containerWidth);
imageHandler.css('width', containerWidth);
imageHandler.css('height', containerHeight);
imageHandler.css('left', parent.position().left);
imageHandler.css('top', parent.position().top);
obj.css('width', imagesLength * containerWidth);
}
return this.each(function(){
var _this = $(this);
if(options) {
$.extend(settings, options);
}
if(settings.autoHeight){
containerHeight = $(window).height();
containerWidth = $(window).width();
}else{
containerHeight = parseInt(settings.height);
containerWidth = parseInt(settings.width);
}
_this.wrap('<div class="' + settings.classname + '"/>');
var parent = _this.parent();
parent.css('backgroundColor', settings.background);
parent.prepend('<div class="imageHandler"/>');
var imageHandler = _this.parent().find('.imageHandler');
init(_this, parent, imageHandler);
$(window).resize(function(){
init(_this, parent, imageHandler);
})
imageHandler.mousedown(function(event){
if(!this.mousedown){
this.mousedown = true;
this.mouseX = event.pageX;
}
return false;
});
imageHandler.mousemove(function(event){
if(this.mousedown){
xdiff = event.pageX - this.mouseX;
_this.css('left', -imagesCurrent * containerWidth + xdiff);
}
return false;
});
imageHandler.mouseup(function(event){
this.mousedown = false;
if(!xdiff) return false;
var fullWidth = parseInt(settings.width);
var halfWidth = fullWidth/2;
if(-xdiff > halfWidth - fullWidth * settings.tolerance){
imagesCurrent++;
imagesCurrent = imagesCurrent >= imagesLength ? imagesLength-1 : imagesCurrent;
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}else if(xdiff > halfWidth - fullWidth * settings.tolerance){
imagesCurrent--;
imagesCurrent = imagesCurrent < 0 ? 0 : imagesCurrent;
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}else{
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}
xdiff = 0;
return false;
});
imageHandler.mouseleave(function(event){
imageHandler.mouseup();
})
});
};
})(jQuery);
Try this simple function i mentioned here: https://stackoverflow.com/a/14731922/382536
/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* #param {Number} srcWidth Source area width
* #param {Number} srcHeight Source area height
* #param {Number} maxWidth Fittable area maximum available width
* #param {Number} maxHeight Fittable area maximum available height
* #return {Object} { width, heigth }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Related
I am currently using the following javascript to resize an image to the size of it's parent, while maintaining aspect ratio and keeping the parent div square. So i have a square box with a rectangle stretched to either the max width or max height depending on orientation. This works great on first load however I cannot get the images and divs to resize on page orientation change or resize to work. Any ideas. I have tried using the window.resize and window.orientation listeners.
Original code was from:
Scale, crop, and center an image...
var aspHt = $('.aspectcorrect').outerWidth();
$('.aspectcorrect').css('height', aspHt + 'px').css('width', aspHt + 'px');
function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
var result = {
width : 0,
height : 0,
fScaleToTargetWidth : true
};
if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
return result;
}
// scale to the target width
var scaleX1 = targetwidth;
var scaleY1 = (srcheight * targetwidth) / srcwidth;
// scale to the target height
var scaleX2 = (srcwidth * targetheight) / srcheight;
var scaleY2 = targetheight;
// now figure out which one we should use
var fScaleOnWidth = (scaleX2 > targetwidth);
if (fScaleOnWidth) {
fScaleOnWidth = fLetterBox;
} else {
fScaleOnWidth = !fLetterBox;
}
if (fScaleOnWidth) {
result.width = Math.floor(scaleX1);
result.height = Math.floor(scaleY1);
result.fScaleToTargetWidth = true;
} else {
result.width = Math.floor(scaleX2);
result.height = Math.floor(scaleY2);
result.fScaleToTargetWidth = false;
}
result.targetleft = Math.floor((targetwidth - result.width) / 2);
result.targettop = Math.floor((targetheight - result.height) / 2);
return result;
}
function RememberOriginalSize(img) {
if (!img.originalsize) {
img.originalsize = {
width : img.width,
height : img.height
};
}
}
function FixImage(fLetterBox, div, img) {
RememberOriginalSize(img);
var targetwidth = $(div).width();
var targetheight = $(div).height();
var srcwidth = img.originalsize.width;
var srcheight = img.originalsize.height;
var result = ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox);
img.width = result.width;
img.height = result.height;
$(img).css("left", result.targetleft);
$(img).css("top", result.targettop);
}
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function(index, div) {
var img = $(this).find("img").get(0);
FixImage(fLetterBox, this, img);
});
}
window.onload = function() {
FixImages(true);
};
Call .resize() after $(window).resize():
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("#landscape").css('display','none');
} else {
// Portrait
$("#landscape").css('display','block');
$("#landscape").click(function(){
$(this).hide();
});
}
}).resize();
I figured out what I was missing. The first bit of javascript is setting the style of height and width. When recalling the .outerHeight it was still using the inline style to calculate the width, and hence not resizing the div. I simply used .removeAttr('style') to remove that property first and then did the resize. Working now. I simply used $(window).on("resize", resizeDiv) and wrapped my resizing into a function named resizeDiv
function resizeDiv() {
var asp = $('.aspectcorrect');
asp.removeAttr("style");
var aspHt = asp.outerWidth();
asp.css('height', aspHt + 'px').css('width', aspHt + 'px');
FixImages(true);
}
I want this script not to change the sizes of the images but the same sizes anywhere they are during sliding. The issue is somewhere in this code but i don't know which one that is changing the size. I want an even size
/**
* Given the item and position, this function will calculate the new data
* for the item. One the calculations are done, it will store that data in
* the items data object
*/
function performCalculations($item, newPosition) {
var newDistanceFromCenter = Math.abs(newPosition);
// Distance to the center
if (newDistanceFromCenter < options.flankingItems + 1) {
var calculations = data.calculations[newDistanceFromCenter];
} else {
var calculations = data.calculations[options.flankingItems + 1];
}
var distanceFactor = Math.pow(options.sizeMultiplier, newDistanceFromCenter)
var newWidth = distanceFactor * $item.data('original_width');
var newHeight = distanceFactor * $item.data('original_height');
var widthDifference = Math.abs($item.width() - newWidth);
var heightDifference = Math.abs($item.height() - newHeight);
var newOffset = calculations.offset
var newDistance = calculations.distance;
if (newPosition < 0) {
newDistance *= -1;
}
if (options.orientation == 'horizontal') {
var center = data.containerWidth / 2;
var newLeft = center + newDistance - (newWidth / 2);
var newTop = options.horizon - newOffset - (newHeight / 2);
} else {
var center = data.containerHeight / 2;
var newLeft = options.horizon - newOffset - (newWidth / 2);
var newTop = center + newDistance - (newHeight / 2);
}
var newOpacity;
if (newPosition === 0) {
newOpacity = 1;
} else {
newOpacity = calculations.opacity;
}
// Depth will be reverse distance from center
var newDepth = options.flankingItems + 2 - newDistanceFromCenter;
$item.data('width',newWidth);
$item.data('height',newHeight);
$item.data('top',newTop);
$item.data('left',newLeft);
$item.data('oldPosition',$item.data('currentPosition'));
$item.data('depth',newDepth);
$item.data('opacity',newOpacity);
}
function moveItem($item, newPosition) {
// Only want to physically move the item if it is within the boundaries
// or in the first position just outside either boundary
if (Math.abs(newPosition) <= options.flankingItems + 1) {
performCalculations($item, newPosition);
data.itemsAnimating++;
$item
.css('z-index',$item.data().depth)
// Animate the items to their new position values
.animate({
left: $item.data().left,
width: $item.data().width,
height: $item.data().height,
top: $item.data().top,
opacity: $item.data().opacity
}, data.currentSpeed, options.animationEasing, function () {
// Animation for the item has completed, call method
itemAnimationComplete($item, newPosition);
});
} else {
$item.data('currentPosition', newPosition)
// Move the item to the 'hidden' position if hasn't been moved yet
// This is for the intitial setup
if ($item.data('oldPosition') === 0) {
$item.css({
'left': $item.data().left,
'width': $item.data().width,
'height': $item.data().height,
'top': $item.data().top,
'opacity': $item.data().opacity,
'z-index': $item.data().depth
});
}
}
}
can anybody help me understand how Honda achieved this effect:
http://testdays.hondamoto.ch/
I mean the ease when you scroll.
var $pages = $(".page"),
tot = $pages.length,
c = 0, pagePos = 0, down = 0, listen = true;
$('html, body').on('DOMMouseScroll mousewheel', function(e) {
e.preventDefault();
if(!listen)return;
listen = false;
down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0;
c = Math.min(Math.max(0, down ? ++c : --c), tot-1);
pagePos = $pages.eq(c).offset().top;
$(this).stop().animate({scrollTop: pagePos}, 650, function(){
listen = true;
});
});
*{margin:0;}
.page{min-height:100vh;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page" style="background:#0bf">PAGE 1</div>
<div class="page" style="background:#fb0">PAGE 2</div>
<div class="page" style="background:#0fb">PAGE 3</div>
<div class="page" style="background:#b0f">PAGE 4</div>
P.S:
Use .position().top; if your .pages are inside a scrollable DIV like $("#pagesParent") (instead of $('html, body'))
Notice:
for mobile you might want to adjust the value accounting for the browser's tabs bar height (or best, prevent that behaviour at all). You got the idea
Open up their JS file : http://testdays.hondamoto.ch/js/script_2.js
and search for Utils - Navigation
/***********************************************************************************************/
/************************************ Utils - Navigation *************************************/
/***********************************************************************************************/
/**
* navigation
*/
function navigation(target){
//--Init Quiz
if(!quizRdy){
hideQuiz();
}
//Add class to body
var pageName = target.substr(1).split('-');
$('body').removeClass(lastPage);
$('body').addClass(pageName[0]);
lastPage = pageName[0];
if(resizeBg)retractBg();
resizeBg = false;
busy = true;
$('body').addClass('loading');
//Change Nav Color
$('#nav-wrapper ul.nav li a').each(function(){
$(this).removeClass('selected');
});
var currentNavNumber = currentNav +1;
$('#main_nav_'+currentNavNumber).addClass('selected')
var wHeight = $(window).height();
if(wHeight<1080){
var newMargin = 180 - ( (wHeight - 720)/2 ) ;
if(newMargin<0) newMargin=180;
}else{
var newMargin =0 - (wHeight - 1080)/2;
}
var navTop = $(target).offset().top + newMargin;
navTop += 'px';
trace('navTop : '+navTop);
//$('#nav-wrapper').css('top',navTop);
$('html,body').stop().animate({
scrollTop: $(target).offset().top + newMargin
}, 1000,'easeInOutExpo',function(){
trace('annime done - wHeight : '+wHeight+' target top : '+$(target).offset().top);
if(currentNav==2 && !quizRdy && !quizForm){
showQuiz();
}
if(currentNav==4){
//update social datas
$.getJSON('inc/socials.php', function(data) {
$('#count-fans').empty().append(data['fans-count']);
$('#count-followers').empty().append(data['followers-count']);
});
}
/*
if(currentNav==2){
$('#quiz-nav').livequery(function(){
$(this).show();
});
}else{
$('#quiz-nav').livequery(function(){
$(this).hide();
});
}
*/
$('body').removeClass('loading');
if(currentNav!=0 && currentNav!=4){
$('#nav-wrapper').fadeIn(200);
}else{
$('#nav-wrapper').fadeOut(200);
}
if(currentNav==3){
//--Init Google Map
if(!mapReady){
if(dealerReady){
//init map
initialize();
}else{
askMap = true;
}
}
}
if(wHeight>1080){
extendBg();
}
busy = false;
});
}
/**
* navigation next Page
*/
function nextPage(){
if(currentNav<navArray.length-1 && !busy){
currentNav++;
navigation(navArray[currentNav]);
}
}
/**
* navigation previous Page
*/
function prevPage(){
if(currentNav>0 && !busy){
currentNav--;
navigation(navArray[currentNav]);
}
}
/**
* Center content
*/
function centerContent(){
if(!busy){
//--Retract Background if expended for big screen
if(resizeBg)retractBg();
var wHeight = $(window).height();
var wWidth = $(window).width();
var imgHeight = 0;
//--Test image width / Height and fill the screen
if(wWidth / wHeight > ratioImg ){
//trace('case1 - width : ' + wWidth + ' height : '+wHeight);
if(wHeight > 1080 || wWidth > 1900){
var newImgHeight = wWidth * 1080 / 1920;
$(".bg-image").each(function(){
$(this).css({
'height':newImgHeight+'px',
'width':'100%'
});
});
imgHeight = newImgHeight;
}else{
$(".bg-image").each(function(){
$(this).css({
'height':'1080px',
'width':'1900px'
});
});
imgHeight = 1080;
}
}else{
if(wHeight > 1080 || wWidth > 1900){
$(".bg-image").each(function(){
var newImgWidth = wHeight * 1920 / 1080;
$(this).css({
'height':wHeight+'px',
'width':newImgWidth+'px'
});
});
imgHeight = wHeight;
}else{
$(".bg-image").each(function(){
$(this).css({
'height':'1080px',
'width':'1900px'
});
});
imgHeight = 1080;
}
}
//--Fix height if window > img height
if(wHeight>imgHeight){
$(".bg-image").each(function(){
var newImgWidth = wHeight * 1920 / 1080;
$(this).css({
'height':wHeight+'px',
'width':newImgWidth+'px'
});
});
}
//--Center horizontal bkg image
if(wWidth<1900){
$(".bg-image").each(function(){
var marginCenter = (wWidth - 1900) / 2;
marginCenter = marginCenter * -1;
if($(this).width() > (wWidth + marginCenter)){
$(this).css({'margin-left':-marginCenter+'px'});
}
});
}
//--Scroll to the good position
if(wHeight<1080){
var newMargin = 180 - ( (wHeight - 720)/2 ) ;
if(newMargin<0) newMargin=180;
}else{
var newMargin =0 - (wHeight - 1080)/2;
}
var navTop =$(navArray[currentNav]).offset().top + newMargin;
navTop += 'px';
//$('#nav-wrapper').css('top',navTop);
//trace('Scrool to good position, then expend bg : ' + navArray[currentNav] + ' '+ $(navArray[currentNav]).offset().top);
$('html,body').stop().animate({
scrollTop: $(navArray[currentNav]).offset().top + newMargin
}, 1000,'easeInOutExpo',function(){
if(wHeight>1080){
extendBg();
}
});
}
}
/**
* Extend the background image for big screen ( > 1080 px )
*/
function extendBg(){
var hWin = $(window).height();
if(hWin > 1080){
//--Get & save current page Name
lastBg = navArray[currentNav].split('-');
lastBg = lastBg[0].substr(1);
lastheight = $('#bg-'+lastBg).height();
//--Calculate the position from top to set the scroll position
posToTop = (hWin - $('#bg-'+lastBg).height())/2;
posToTop = $('#bg-'+lastBg).offset().top - posToTop;
lastPosToTop = $('#bg-'+lastBg).offset().top;
//trace('posToTop setting : '+posToTop+' page : ' + lastBg);
//--Set boolean resize to true to call the retract BG
resizeBg = true;
$('#bg-'+lastBg).css({'z-index':2});
//--Test if it's first or last
if(currentNav != 0 && currentNav != (navArray.length-1)){
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:posToTop+'px'
},600);
}else{
if(currentNav==0){
posToTop=0;
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:0
},600);
}else{
posToTop=0;
$('#bg-'+lastBg).animate({
height:hWin+'px',
top:4320+'px'
},600);
}
}
//--Scroll to the bottom for credits page
if(currentNav==(navArray.length-1)){
$('html,body').stop().animate({
scrollTop: $(document).height()
}, 1000,'easeInOutExpo');
}
}
}
/**
* Retrac the background to normal
*/
function retractBg(){
var hWin = $(window).height();
if(resizeBg && lastheight>0 && lastBg!=""){
$('#bg-'+lastBg).css({'z-index':0});
//trace('posToTop callback : '+posToTop + ' lastBg : ' + lastBg + ' lastheight : ' +lastheight);
if(posToTop>0){
//trace('reset pos top : ' + posToTop);
$('#bg-'+lastBg).animate({
height:lastheight+'px',
top:lastPosToTop+'px'
},600)
}else{
$('#bg-'+lastBg).animate({
height:lastheight+'px'
},600)
}
}
}
I am opening a pop up window using window.open function
window.open('some_page.htm','','width=950,height=500');
Now what I want is when user tries to resize the window, the aspect ratio should be maintained i.e., if width is reduced then accordingly height should also get reduced and vice versa. I just want to calculate the new dimensions. So far I have tried this
function ResizeWindow()
{
var iOrignalWidth = 950;
var iOrignalHeight = 500;
var iOuterHeight = window.outerHeight;
var iOuterWidth = window.outerWidth;
var iNewOuterWidth = Math.round((iOrignalWidth / iOrignalHeight) * iOuterHeight);
var iNewOuterHeight = Math.round((iOrignalHeight / iOrignalWidth) * iNewOuterWidth);
alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}
I know that there's something wrong up there since I am not getting desired results. ANy solution on this ?
You'll want to either adjust the width to the height or visa versa, not both.
In this code, I assumed you want the width adjusted to the height:
function ResizeWindow()
{
var iOrignalWidth = 1000;
var iOrignalHeight = 500;
var iOrginalRatio = iOrignalWidth/iOrignalHeight; // 2
var iOuterWidth = window.outerWidth; // example: 1083
var iOuterHeight = window.outerHeight; //example: 600
var iNewOuterHeight = iOuterHeight; // 600
var iNewOuterWidth = Math.round(iNewOuterHeight*iOrginalRatio); //600 * 2 = 1200
alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}
I changed to original width to 1000 for the example, but you can change that back in your actual code.
You should do to accoording to one resize for maintain the aspect ratio. For example:
function ResizeWindow()
{
var iOrignalWidth = 950;
var iOrignalHeight = 500;
var iOuterHeight = window.outerHeight;
var iOuterWidth = window.outerWidth;
var w = (window.outerWidth - iOrignalWidth) / iOrignalWidth; // for exam: (1280-950) / 950= 0.34
var h = (window.outerHeight - iOrignalHeight) / iOrignalHeight; // for exam : (800 - 500) / 500= 0.60
var newWidth;
var newHeight;
if (w<h)
{
// If percentage of width is less than percentage of height, Resize should be according to percentage of width.
newWidth = iOrignalWidth * w * 100;
newHeight = iOrignalHeight * w *100;
}
else
{
// If percentage of height is less than percentage of width, Resize should be according to percentage of height.
newWidth = iOrignalWidth * h * 100;
newHeight = iOrignalHeight * h *100;
}
alert("New Width: "+ newWidth + "\t" + "New Height" + newHeight );
}
So that maintain the aspect ratio is always preserved.
I'm trying to make Divs to appear randomly anywhere on a webpage with javascript. So a div appears then disappears, then another div appears somewhere else on the page then disappears, then another div appears again in another random spot on the page then disappears, and so on.
I'm not sure on how to generate random units in pixels or what technique to use to generate random positions.
How do I do that? Here's my code:
var currentDivPosition = myDiv.offset(),
myDivWidth = myDiv.width(),
myDivHeight = myDiv.height(),
var myDiv = $('<div>'),
finalDivPositionTop, finalDivPositionLeft;
myDiv.attr({ id: 'myDivId', class: 'myDivClass' }); // already defined with position: absolute is CSS file.
// Set new position
finalDivPositionTop = currentDivPosition.top + Math.floor( Math.random() * 100 );
finalDivPositionLeft = currentDivPosition.left + Math.floor( Math.random() * 100 );
myDiv.css({ // Set div position
top: finalDivPositionTop,
left: finalDivPositionLeft
});
$('body').append(myDiv);
myDiv.text('My position is: ' + finalDivPositionTop + ', ' + finalDivPositionLeft);
myDiv.fadeIn(500);
setTimeout(function(){
myDiv.fadeOut(500);
myDiv.remove();
}, 3000);
Here's one way to do it. I'm randomly varying the size of the div within a fixed range, then setting the position so the object is always placed within the current window boundaries.
(function makeDiv(){
// vary size for fun
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
// make position sensitive to size and document's width
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
$(this).remove();
makeDiv();
});
})();
Edit: For fun, added a random color.
Edit: Added .remove() so we don't pollute the page with old divs.
Example: http://jsfiddle.net/redler/QcUPk/8/
Let's say you have this HTML:
<div id="test">test div</div>
And this CSS:
#test {
position:absolute;
width:100px;
height:70px;
background-color:#d2fcd9;
}
Using jQuery, if you use this script, whenever you click the div, it will position itself randomly in the document:
$('#test').click(function() {
var docHeight = $(document).height(),
docWidth = $(document).width(),
$div = $('#test'),
divWidth = $div.width(),
divHeight = $div.height(),
heightMax = docHeight - divHeight,
widthMax = docWidth - divWidth;
$div.css({
left: Math.floor( Math.random() * widthMax ),
top: Math.floor( Math.random() * heightMax )
});
});
The way this works is...first you calculate the document width and height, then you calculate the div width and height, and then you subtract the div width from the document width and the div height from the document height and consider that the pixel range you're willing to put the div in (so it doesn't overflow out of the document). If you have padding and border on the div, you'll need to account for those values too. Once you've figured out the range, you can easily multiple that by Math.random() and find the random position of your div.
So once more: first find the dimensions of the container, then find the dimensions of your element, then subtract element dimensions from container dimensions, and THEN use Math.random() on that value.
The basic idea is encapsulated here:
http://jsfiddle.net/5mvKE/
Some bugs:
You missed to position the div absolutely. Otherwise it will not
work.
I think you need to ad 'px' to the numbers.
The map is made of strings
Right in your jQuery css setup:
myDiv.css({
'position' : 'absolute',
'top' : finalDivPositionTop + 'px',
'left' : finalDivPositionLeft + 'px'
});
I changed an existant code by this one for our website, you can see it on tweefox.nc
<script>
function draw() {
$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
con.clearRect(0,0,WIDTH,HEIGHT);
for(var i = 0; i < pxs.length; i++) {
pxs[i].fade();
pxs[i].move();
pxs[i].draw();
}
}
function Circle() {
this.s = {ttl:8000, xmax:10, ymax:4, rmax:10, rt:1, xdef:950, ydef:425, xdrift:4, ydrift: 4, random:true, blink:true};
this.reset = function() {
this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
this.r = ((this.s.rmax-1)*Math.random()) + 1;
this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
this.rt = Math.random()*this.hl;
this.s.rt = Math.random()+1;
this.stop = Math.random()*.2+.4;
this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
}
this.fade = function() {
this.rt += this.s.rt;
}
this.draw = function() {
if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) {
this.s.rt = this.s.rt*-1;
this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
} else if(this.rt >= this.hl) this.reset();
var newo = 1-(this.rt/this.hl);
con.beginPath();
con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
con.closePath();
var cr = this.r*newo;
g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
g.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
g.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.2)+')');
g.addColorStop(1.0, 'rgba(255,255,255,0)');
con.fillStyle = g;
con.fill();
}
this.move = function() {
this.x += (this.rt/this.hl)*this.dx;
this.y += (this.rt/this.hl)*this.dy;
if(this.x > WIDTH || this.x < 0) this.dx *= -1;
if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
}
this.getX = function() { return this.x; }
this.getY = function() { return this.y; }
}
$(document).ready(function(){
// if( /Android|AppleWebKit|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// } else {
if(document.getElementById('pixie')) {
WIDTH = $(window).width();
HEIGHT = $(window).height();
canvas = document.getElementById('pixie');
$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
con = canvas.getContext('2d');
pxs = new Array();
rint = 60;
for(var i = 0; i < 50; i++) {
pxs[i] = new Circle();
pxs[i].reset();
}
setInterval(draw,rint);
}
// }
});
</script>