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 home request, video fixes, scale definitions, request icon design, request funds, request work home, problem fixes, make art icon, make holiday video, icons magic design, make icon design, find research problem, design tools icon, home screen icon design, hard find art, get custom art design, find animate, custom animation video, clouds video, make icon file, tile, tile design, responsive fixes, find developer code, find jquery developer

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

Projekt-ID: #6013078

1 freelancer byder i gennemsnit $20 for dette job

Appel

Hired by the Employer

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