JavaScript Plugin Help - ContentFlow - javascript

I recently downloaded a JavaScript plugin (found here: http://www.jacksasylum.eu/ContentFlow/download.php) and I'm trying to change it up a bit. So far, all the edits that I've made to the code have been done by reading the walkthroughs under the documentation tab on that site. I've searched and searched and I can only find one piece of code that I THINK could be what I need to change. I just don't have enough JavaScript knowledge to do it.
If you have downloaded that plugin before, or you read some of the documentations tab, here's the picture of what's going on.
The icons are spread out way too far. (Ignore the icons, I just used the Facebook and Twitter because they were easy.) I need them to be closer. (They are spreading out over a 960px wide div!)
I found this code that may be what I'm looking for. It's called the StepWidth. I have no clue if that's what I need or not. Can anyone fill me in?
calcStepWidth: function(diff) {
var vI = this.conf.visibleItems;
var items = this.items.length;
items = items == 0 ? 1 : items;
if (Math.abs(diff) > vI) {
if (diff > 0) {
var stepwidth = diff - vI;
} else {
var stepwidth = diff + vI;
}
} else if (vI >= this.items.length) {
var stepwidth = diff / items;
} else {
var stepwidth = diff * ( vI / items);
//var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length);
//var stepwidth = this.flowSpeedFactor * diff / this.visibleItems;
//var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length)
//var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed
}
return stepwidth;
This might be easier if you have the plugin, but any knowledge will help.

First, this is not a JQuery plugin. Your issue is both with size of your images and the width of your contentFlow container. The small icons spread out to fill the 960px container. You need to increase the size of your images and/or reduce the width of your the containing div for the contentflow. You can use px or %. As an example, on the contentflow site, you can see that the gallery on the right on the main page has a div width:70%;.

First Install ContentFlowAddOn_DEFAULT.js, then search on " calcCoordinates: function (item) " you will find:
calcCoordinates: function (item) {
var rP = item.relativePosition;
//var rPN = item.relativePositionNormed;
var vI = this.conf.visibleItems;
var f = 1 - 1/Math.exp( Math.abs(rP)*0.75);
var x = item.side * vI/(vI+1)* f;
var y = 1;
return {x: x, y: y};
},
try to minimize the value 0.75 (i.e 0.3) or less till you reach the proper distance you are looking for

Related

JS randomly distribute child elements in their parent without overlap

I am trying to make something where a bunch of circles (divs with border-radius) can be dynamically generated and laid out in their container without overlapping.
Here is my progress so far - https://jsbin.com/domogivuse/2/edit?html,css,js,output
var sizes = [200, 120, 500, 80, 145];
var max = sizes.reduce(function(a, b) {
return Math.max(a, b);
});
var min = sizes.reduce(function(a, b) {
return Math.min(a, b);
});
var percentages = sizes.map(function(x) {
return ((x - min) * 100) / (max - min);
});
percentages.sort(function(a, b) {
return b-a;
})
var container = document.getElementById('container');
var width = container.clientWidth;
var height = container.clientHeight;
var area = width * height;
var maxCircleArea = (area / sizes.length);
var pi = Math.PI;
var maxRadius = Math.sqrt(maxCircleArea / pi);
var minRadius = maxRadius * 0.50;
var range = maxRadius - minRadius;
var radii = percentages.map(function(x) {
return ((x / 100) * range) + minRadius;
});
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var coords = [];
radii.forEach(function(e, i) {
var circle = document.createElement('div');
var randomTop = getRandomArbitrary(0, height);
var randomLeft = getRandomArbitrary(0, width);
var top = randomTop + (e * 2) < height ?
randomTop :
randomTop - (e * 2) >= 0 ?
randomTop - (e * 2) :
randomTop - e;
var left = randomLeft + (e * 2) < width ?
randomLeft :
randomLeft - (e * 2) >= 0 ?
randomLeft - (e * 2) :
randomLeft - e;
var x = left + e;
var y = top + e;
coords.push({x: x, y: y, radius: e});
circle.className = 'bubble';
circle.style.width = e * 2 + 'px';
circle.style.height = e * 2 + 'px';
circle.style.top = top + 'px';
circle.style.left = left + 'px';
circle.innerText = i
container.appendChild(circle);
});
I have got them being added to the parent container but as you can see they overlap and I don't really know how to solve this. I tried implementing a formula like (x1 - x2)^2 + (y1 - y2)^2 < (radius1 + radius2)^2 but I have no idea about this.
Any help appreciated.
What you're trying to do is called "Packing" and is actually a pretty hard problem. There are a couple potential approaches you can take here.
First, you can randomly distribute them (like you are currently doing), but including a "retry" test, in which if a circle overlaps another, you try a new location. Since it's possible to end up in an impossible situation, you would also want a retry limit at which point it gives up, goes back to the beginning, and tries randomly placing them again. This method is relatively easy, but has the down-side that you can't pack them very densely, because the chances of overlap become very very high. If maybe 1/3 of the total area is covered by circle, this could work.
Second, you can adjust the position of previously placed circles as you add more. This is more equivalent to how this would be accomplished physically -- as you add more you start having to shove the nearby ones out of the way in order to fit the new one. This will require not just finding the things that your current circle hits, but also the ones that would be hit if that one was to move. I would suggest something akin to a "springy" algorithm, where you randomly place all the circles (without thinking about if they fit), and then have a loop where you calculate overlap, and then exert a force on each circle based on that overlap (They push each other apart). This will push the circles away from each other until they stop overlapping. It will also support one circle pushing a second one into a third, and so on. This will be more complex to write, but will support much more dense configurations (since they can end up touching in the end). You still probably need a "this is impossible" check though, to keep it from getting stuck and looping forever.

Resize a group of variably sized images both horizontally & vertically - need help optimising

WARNING CODE CRASHES IN EVERYTHING EXCEPT GOOGLE CHROME
I'm trying to create a feature on our website that takes 8 random images and places them in two rows and dynamically resizes the images to take up the full width of the page.
I've created a jsbin for this to try and demonstrate the issue.
https://jsbin.com/yijemazovi/edit?html,css,js,output
The comments in the code should give you an good idea of what I'm doing. What seems to be happening for everything but Google Chrome is that the while condition is never satisfied so it goes on infinitely and crashes the browser.
Perhaps it is something as simple as I am doing the do/while loop incorrectly or I should just be using a while loop???
Any help is appreciated!
/*****
* Get the overall width of the container that we want to match
**********/
var ContainerWidth = $('.feature-inim-collage .col.span_1_of_1').width();
/*****
* Increase the height of the images until the total sum of the width
* if the 4 images + the gutters is larger than ContainerWidth - then
* stop
**********/
/*****
* Increment in jumps of 10px until we get within 80% of the width of
* the ContainerWidth and then go to a more precise increment of 1px.
* We can increase the px from 10 to 20 or 30 so there are less loops
* but this can cause issues when we look at mobile and there is less
* overall width in the containers and jumping by 30px will be too much
**********/
var i = 0;
do {
$('.feature-inims-top-row .growable-container').css('height', i);
var RowWidth1 = CalculateTotalWidth(1);
if(RowWidth1 < (ContainerWidth*0.8)){
i = i+10;
}else{
i++;
}
}
while (RowWidth1 < (ContainerWidth - 3));
/*****
* Repeat above for the 2nd row
**********/
var i = 0;
do {
$('.feature-inims-bottom-row .growable-container').css('height', i);
var RowWidth2 = CalculateTotalWidth(2);
if(RowWidth2 < (ContainerWidth*0.8)){
i = i+10;
}else{
i++;
}
}
while (RowWidth2 < (ContainerWidth - 3));
/*********
* Calculate the combined width of the images + the gutters
****/
function CalculateTotalWidth(Row) {
var Image1Width = $('.growable-container-1').width();
var Image2Width = $('.growable-container-2').width();
var Image3Width = $('.growable-container-3').width();
var Image4Width = $('.growable-container-4').width();
var Image5Width = $('.growable-container-5').width();
var Image6Width = $('.growable-container-6').width();
var Image7Width = $('.growable-container-7').width();
var Image8Width = $('.growable-container-8').width();
var GutterSize = 24; // (3 gutters # 8px each)
if(Row == 1){
var RowWidth = GutterSize + Image1Width + Image2Width + Image3Width + Image4Width;
}else{
var RowWidth = GutterSize + Image5Width + Image6Width + Image7Width + Image8Width;
}
return RowWidth
}
It turns out the issue with this was that in the CalculateTotalWidth() function I was checking the width of the container the image was in rather than the image itself. As soon as I changed this it worked perfectly.
var Image1Width = $('.growable-container-1 img').width();
instead of
var Image1Width = $('.growable-container-1').width();

Javascript onclick event on newly created elements

I've got several functions all linked so it will ...
create new elements and set their properties and stuff
once elements are in place they should trigger function.
And they do! Kind of...
More like they trigger half of a function that's attached to them upon creation. The part where they onclick trigger a function that starts a loading on my progress bar (which is their purpose) is alright. But the much simpler part, where they hide after click, doesn't.
As the code is quite complex I'll place here larger part of it, so don't panic. Problem might be somewhere else then I expect. Here it is...
// defines function for checkpoint
function checkpointed() {
this.style.display = 'none'; // !here dwells the douch part!
if (toLoad < 100) {
toLoad += 100/$(this).attr('numButs');
var sim = setInterval(progressSim, 50);
}
// defining creation of checkpoints
function checkpoints(num) {
var angle = 4.72,
step = (2 * Math.PI) / num;
for (i = 1; i < num + 1; i++) {
var x = $('#progressBar').width()/2 + radius * Math.cos(angle) ;
var y = $('#progressBar').height()/2 + radius * Math.sin(angle);
angle += step;
var newContent = document.createElement('IMG');
var newCheckpoint = document.createElement('SPAN');
var numButs = document.createAttribute('numButs');
numButs.value = num;
var Class = document.createAttribute('class');
Class.value = 'checkpoint';
var img = document.createAttribute('src');
img.value = 'img/lock.png';
newContent.setAttributeNode(img);
newCheckpoint.setAttributeNode(numButs);
newCheckpoint.setAttributeNode(Class);
$(newCheckpoint).append(newContent);
$('.projectBar').append(newCheckpoint);
x -= 24;
y -= 24;
$(newCheckpoint).offset({top:y, left: x});
newCheckpoint.onclick = checkpointed;
};
};
// creates checkpoints upon clicking on create button
document.getElementById('create').onclick = function(){
checkpoints(document.getElementById('numCheckpoint').value);
$(this).hide();
$('#numCheckpoint').hide();
};
I should probably sum up what is this all about.
I have circular progressBar that measures progression of users project. User says "Hey, my project has like 5 steps (or 20 idc)" and "create" button will make 5 checkpoints placed on the progressBar evenly. By clicking on checkpoints you load the progress bar by 20% per clicked checkpoint.
Don't worry though, I've already figured out the code for loading and the geometrics.
However I'm bit stuck here... on simple onclick functions. Please if you have an idea try achieve it with plain JavaScript or jQuery (trying to do this without other frameworks, libraries or plugins).
EDIT: Just found out that checkpoint are set alright, as they really hide after clicking. Problem is in creation of checkpoints as the loop creates about 15 more checkpoints stacked one on another. So you have to click each of them to hide them all... So problem is in the loop.
EDIT2: Figured it out. The loop for (i = 1; i < num + 1; i++) had the numparameter as a String coming from input field. So simple parseInt() did the trick.
The mixed Jquery and plain Javascript is messing with my head... Any way how about when you create a new element, give it some sort of class. Instead of giving setting onclick, use jQuery's on selector to bind click events to those dynamic elements. Try The Following:
$(document).on("click", ".Checkpoint", function(event) {
$(event.target).hide();
if (toLoad < 100) {
toLoad += 100 / $(this).attr('numButs');
var sim = setInterval(progressSim, 50);
}
});
// defining creation of checkpoints
function checkpoints(num) {
var angle = 4.72,
step = (2 * Math.PI) / num;
for (i = 1; i < num + 1; i++) {
var x = $('#progressBar').width() / 2 + radius * Math.cos(angle);
var y = $('#progressBar').height() / 2 + radius * Math.sin(angle);
angle += step;
var newContent = $('<img></img>');
var newCheckpoint = $('<span></span>');
$("body").append(newCheckpoint);
newContent.attr("numButs", num);
newContent.attr("src", 'img/lock.png');
newContent.addClass("Checkpoint");
$(newCheckpoint).append(newContent);
$('.projectBar').append(newCheckpoint);
x -= 24;
y -= 24;
$(newCheckpoint).offset({
top: y,
left: x
});
}
}
// creates checkpoints upon clicking on create button
$(document).on("click","#create",function(e) {
checkpoints($('#numCheckpoint').val());
$(e.target).hide();
$('#numCheckpoint').hide();
});
Changed stuff to work more in jQuery, hope you don't mind...

Gridify Images like Pinterest Layout on Canvas

I am using pixi.js to create an interactive app. I need to place images in different containers on the screen in the form of pinterest like layout or gridify them so that they look organize and nice. As Im working on canvas so plugins like gridify.js do not suport canvas and Im unable to find any plugin or code to get this working on canvas. Also, the images need to be clickable so I cannot use plugins like html to canvas conversion as they only generate the image.
I have found a solution for this by examining the gridify.js logic. Here is my code:
var items = options.items;
var width = options.containerWidth,
item_margin = parseInt(options.margin || 0),
item_width = parseInt(options.max_width || options.width || 220),
column_count = Math.max(Math.floor(width / (item_width + item_margin)), 1),
left = column_count == 1 ? item_margin / 2 : (width % (item_width + item_margin)) / 2,
lastHeight = 0;
if (options.max_width) {
column_count = Math.ceil(width / (item_width + item_margin));
item_width = (width - column_count * item_margin - item_margin) / column_count;
left = item_margin / 2;
}
for (var i = 0, length = items.length; i < length; i++) {
var ratio = item_width / items[i].width;
items[i].width = item_width;
items[i].height = items[i].height * ratio;
items[i].position.y = lastHeight + item_margin / 2;
items[i].position.x = 0;
lastHeight += items[i].height + (item_margin * 2);
}
Iterate all the containers and pass the parameters to above function. It will gridify the images/contents in a container. I have used single column per container but you can use multiple columns by using the original code from the gridify.js

how to compute Facebook graph api cover offset_y to pixel?

I can retrieve facebook cover source and offset_y from graph api for example -
https://graph.facebook.com/Inna
I get this -
"cover": {
"cover_id": "10151356812150381",
"source": "http://sphotos.xx.fbcdn.net/hphotos-snc7/s720x720/419277_10151356812150381_302056140380_23114100_97822830_n.jpg",
"offset_y": 54
}
But when i look at the actual facebook page for this, i see the top offset is -135px.
How is that calculated from 54?
I want to display someones cover photo on my website, with the same offset as facebook. So I am basically doing -
<div class="ed-cover">
<img src=""/>
</div>
CSS -
.ed .ed-cover
{
height:315px;
overflow:hidden;
position:relative;
}
.ed .ed-cover img
{
width:100%;
position:absolute;
}
JS -
FB.api(artist, function (data) {
$('.ed-cover img').attr('src', data.cover.source).css("top", -1 * data.cover.offset_y);
});
But the CSS offset here for the "top" property is incorrect as i get back 54 and the real offset is -135px;
Does that really work for you? I have tested it with many images (landscape and portrait) and if you use %, the position is always slightly different. This here works good for me:
$.fn.positionate_cover = function (offset_y) {
var cover_w = 850;
var cover_h = 315;
var img_w = $(this).width ();
var img_h = $(this).height ();
var real_img_h = (cover_w * img_h / img_w) - cover_h;
$(this).css ({ top: parseInt (real_img_h * offset_y / 100 * -1) + "px" });
};
$(".ed-cover img")
.attr ("src", data.cover.source)
.positionate_cover (data.cover.offset_y)
;
Yes i actually found the answer myself. The offset that facebook sends is in percentage!
The following worked perfectly -
FB.api(artist, function (data) {
$('.ed-cover img').attr('src', data.cover.source)
.css("top", (-1 * data.cover.offset_y) + '%');
});
I found this jquery plugin in the net. The plugin get the picture correctly with the right offset
here is the link http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/
Its look like it’s using the offset as percentage
MoXplod, are you sure about it?
From my experience the offset is a % of the invisible part of the image (aka the part that doesn't fit in the window).
For example:
offset = 51
facebook cover photo size (web) = 851X315
scaled image size = 851X1135
top= -420px.
So top = 51% * (1135-315).
I have tried it with many diffrent cover photos of different sizes.
If you only set the negative percentage offset returned by Facebook API, it may work in 80% cases. However the only way to get 100% correct position is to use Claudios solution.
some solution on php i'm using PhpThumb_Factory:
private $_cropX = 850;
private $_cropY = 315;
private $_origignalHeight;
private $_origignalWidth;
$scale = $this->caclScale($cover->cover->source);
$thumb = \PhpThumb_Factory::create($imagePath);
$real_img_y = ($this->_cropX * $this->_origignalHeight / $this->_origignalWidth) - $this->_cropY;
$real_img_x = ($this->_cropY * $this->_origignalWidth / $this->_origignalHeight) - $this->_cropX;
$offset = $this->_authSession->offset;
$offset_x=($real_img_x * $offset['x'] / 100);
$offset_y=($real_img_y * $offset['y'] / 100);
$thumb->crop($offset_x, $offset_y, $this->_cropX, $this->_cropY);
$thumb->save($imagePath);
private function caclScale($url) {
$originalFileSizeParams = #exif_read_data($url);
// //$originalFileSize = $originalFileSizeParams['FileSize'];
// Zend_Debug::dump($originalFileSizeParams);
// die();
$this->_origignalHeight = $originalFileSizeParams['COMPUTED']['Height'];
$this->_origignalWidth = $originalFileSizeParams['COMPUTED']['Width'];
if ($this->_origignalWidth < $this->_cropX) {
$scale = ($this->_cropX * 100) / $this->_origignalWidth;
} else {
$scale = 100;
}
return $scale;
}

Categories