Annulleret

Bug Fixes and Optimization Request for Tile Project

Hello Albert!

I hope that your holiday is going very well! I have decided upon a different transition for my tiles, because Isotope proved to be too hard for me to get to work perfectly smooth. I animate the transition of the sorting of the tiles in and out of the screen now. You can see the new transition here (use "Sort One", "Sort Two", and "Sort Three" buttons below tiles):

[url removed, login to view]

***** Request One: Bug Fixes *****

At first page load my tiles all work how I want them to work, with them having a fluid design... the tiles, the text, and the icons all scale larger or smaller depending on the browser window size. No problem before the sort with the links or the scaling. However, I have a few bugs that occur AFTER a sorting ("Sort One", "Sort Two", or "Sort Three") is used. Here are the bugs that happen after a sort:

1) The links stop working

2) The gradient loses its position at small browser window size

3) The tile name loses its position at small browser window size

4) The tile icon loses its position at small browser window size

All of these bugs can be fixed if I manually RESET the "position: absolute;" declaration in the CSS using Developer Tools... so I do not think that my code is wrong, but I do not know how to command the tiles to reset their absolute position with jQuery or CSS after a sort, so that I do not have to do it manually. I made a video demonstrating what I describe, and it is located here:

[url removed, login to view]

Can you figure out how to make these position bugs go away?

***** Request Two: Optimization *****

Also, is there a better way to code the timing of the jQuery timing transition of the tiles disappearing and reappearing? Currently, I am using two setTimeout commands to control the timing of the animation. However, this isn't very good because if the timing of the animation tiles disappearing and reappearing changes... then I have to change the setTimeout commands to delay the animation properly.

I do not know how to code custom event triggering, so that one function starts when an animation ends, etc. Maybe with a jQuery callback? Or maybe with JQuery Deferred? This is an example of the code, located in "[url removed, login to view]", which uses animation from the file "[url removed, login to view]":

// Sort: Morningstar Definitions

$('#sort-bar #[url removed, login to view]').click(function() {

$.each(tilesCount, function(i) {

var tilesSort=$(this).find('div').first();

setTimeout(function() {

[url removed, login to view]('magictime holeOut');

}, i * 50);

});

setTimeout(function() {

for (var r = 0, limit = 8; r < limit; r++) {

$("#tile-" + (r + 1)).find('div').first().hide();

$("#tile-" + (r + 1)).find('div').first().removeClass('magictime holeOut');

};

$("#tile-1").append($('[url removed, login to view]'));

$("#tile-2").append($('[url removed, login to view]'));

$("#tile-3").append($('[url removed, login to view]'));

$("#tile-4").append($('[url removed, login to view]'));

$("#tile-5").append($('[url removed, login to view]'));

$("#tile-6").append($('[url removed, login to view]'));

$("#tile-7").append($('div.tile-container-responsive.my-files'));

$("#tile-8").append($('[url removed, login to view]'));

$.each(tilesCount, function(i) {

var tilesSort=$(this).find('div').first();

setTimeout(function() {

[url removed, login to view]();

[url removed, login to view]('magictime holeIn');

}, i * 50);

});

setTimeout(function() {

for (var p = 0, limit = 8; p < limit; p++) {

$("#tile-" + (p + 1)).find('div').first().removeClass('magictime holeIn');

};

}, 1000);

}, 1000);

});

Thank you very much for reviewing this, and I hope that it is something that you can work on for me. The files are located here:

[url removed, login to view]

Have a great day!

Art

Færdigheder: CSS, HMLT5, jQuery / Prototype

Se mere: work from home request, video fixes, three.js developer, scale definitions, request icon design, request funds, request for work from home, problem fixes, make your art icon, make a holiday video, js make icons, icons of magic for design, how to make icon design, how to make animation video, how to make animation in video, how to make animation from video, how to make an animation video, how to find art, how to find a research problem, how to find a problem in a design, how to find animation, how to find a developer for your project, how to animate video, how to animate a video, how do you animate a video

Om arbejdsgiveren:
( 10 bedømmelser ) Chicago, United States

Projekt-ID: #6013078

1 freelancer is bidding on average $20 for this job

Appel

Hired by the Employer

$20 USD på 1 dag
(2 bedømmelser)
1.6