Skip to content

Commit

Permalink
style
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamland
jamland committed Mar 30, 2012
1 parent 7ee724f commit 77a54ab
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 13 deletions.
Binary file modified images/ajax-loader.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ajax-loader.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 46 additions & 10 deletions index.php
View file
Expand Up @@ -116,7 +116,9 @@
<img src="images/arrow-left.png" alt="">
</div>

<div id="gears">
<img id="send-spinner" src="images/ajax-loader.png" class="spinner">

<!-- <div id="gears">
<div class="gear-small shadow">
<object data="images/gear-small-shadow.svg" type="image/svg+xml" ></object>
</div>
Expand All @@ -129,11 +131,27 @@
<div class="gear-big">
<object data="images/gear-big.svg" type="image/svg+xml" ></object>
</div>
</div>
</div> -->
</div>

<div id="step-3" class="transform-step">
<img src="images/ajax-loader.gif" class="spinner">

<div id="gears">
<div class="gear-small shadow">
<object data="images/gear-small-shadow.svg" type="image/svg+xml" ></object>
</div>
<div class="gear-small">
<object data="images/gear-small.svg" type="image/svg+xml" ></object>
</div>
<div class="gear-big shadow">
<object data="images/gear-big-shadow.svg" type="image/svg+xml" ></object>
</div>
<div class="gear-big">
<object data="images/gear-big.svg" type="image/svg+xml" ></object>
</div>
</div>

<!-- <img src="images/ajax-loader.gif" class="spinner"> -->

<h2>And See <b>IronWorker</b> Magick</h2>
<div id="output_queue">
Expand Down Expand Up @@ -219,6 +237,11 @@ function urlExists(testUrl) {
}, 100);
});;

$('a.smooth-scroll').live('click', function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $( $(e.target).attr('href') ).offset().top}, 'slow');
});

setInterval(function () {
$.get('/mq/getMessage.php?queue_name=<?php echo $input_queue_id;?>', null, function (data) {
if (data) {
Expand All @@ -241,13 +264,18 @@ function urlExists(testUrl) {

$.get('/mq/getMessage.php?queue_name=<?php echo $output_queue_id;?>', null, function (data) {
if (data) {
$('#gears').addClass('moving');
$('#step-3 .spinner').fadeOut(400);

$('#step-3').css('background-image', 'url(images/step-3-bg.png)');
$('#gears').fadeOut(100).removeClass('moving');

$('#send-spinner').attr('src', "images/ajax-loader.gif");
// $('#step-3 .spinner').fadeOut(400);
$('#step-3').animate({'background-position-y': '40%'}, 500);
$('#processed-image').animate({left: '40%', opacity: '1'}, 1500, function(){
$(this).animate({left: '-10%', opacity: '0'}, 1500, function(){
$(this).css('left', '100%');
$('#gears').delay(800).removeClass('moving');
$('#send-spinner').attr('src', "images/ajax-loader.png");
$('#flashes').html("Check processed images below. Here is the code we are executing on the image on <a href='https://github.com/rkononov/php_example' target='_blank' title='Check App Sources on Github'>Github</a>");
});
});
Expand All @@ -259,9 +287,11 @@ function urlExists(testUrl) {

$('#output_queue').html('');

$('#output_queue').append('<img src="'+parsed["thumbnail"]+'" >'+
'<img src="'+parsed["rotated"]+'" >'+
'<img src="'+parsed["grayscale"]+'" >');
// $('#output_queue').append('<img src="'+parsed["thumbnail"]+'" >'+
// '<img src="'+parsed["rotated"]+'" >'+
// '<img src="'+parsed["grayscale"]+'" >');

$('#output_queue').html('Completed! <a href="#result-flow" class="smooth-scroll" title="">Check the results &darr;</a>');

$('#output_queue').fadeIn(1000);

Expand Down Expand Up @@ -320,11 +350,17 @@ function (data) {
$('#step-1').animate({'margin-right': '0%'}, 1000, 'linear', function(){
$('#step-3').animate({opacity: 1}, 500);

$('#gears').delay(800).addClass('moving');
// $('#gears').delay(800).addClass('moving');
$('#send-spinner').attr('src', "images/ajax-loader.gif");
$('#process-image').delay(1200).animate({left: '40%', opacity: '1'}, 1500, function(){
$(this).animate({left: '95%', opacity: '0'}, 1500, function(){
$(this).css('left', '-10%');
$('#gears').delay(400).removeClass('moving');
//$('#gears').delay(400).removeClass('moving');
$('#step-3').css('background-image', 'none');
$('#gears').fadeIn(300).addClass('moving');
$('#output_queue').html('');

$('#send-spinner').attr('src', "images/ajax-loader.png");
$('#flashes').html('and worker has been started process images...');
});
});
Expand Down
17 changes: 14 additions & 3 deletions style.css
View file
Expand Up @@ -385,9 +385,19 @@ code {

#output_queue {
position: absolute;
bottom: 30px;
bottom: 80px;
left: 50px;
display: none;
text-align: center;
width: 300px;
font-size: 20px;
font-family: Conv_gillsans, sans-serif;
}

#send-spinner {
position: absolute;
top: 200px;
left: 130px;
}

#output_queue img {
Expand Down Expand Up @@ -510,8 +520,9 @@ code {
width: 180px;
height: 180px;
position: absolute;
top: 120px;
left: 90px;
bottom: 90px;
left: 110px;
display: none;
}

#gears.moving .gear-small {
Expand Down

0 comments on commit 77a54ab

Please sign in to comment.