Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fade in new frame on top of old then remove old

  • Loading branch information...
commit b30e11900778f7f63c41d9b4d09b330494162a38 1 parent 7e3c001
@devth authored
View
9 css/screen.css
@@ -1,4 +1,7 @@
-body { margin: 0; padding: 0; overflow: hidden; }
+html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
-#content .split { float: left; width: 50%; overflow: hidden; }
-iframe { width: 100%; height: 100%; border: 0px solid white; overflow: auto }
+#content .split { float: left; width: 50%; height: 100%; position: relative; }
+#content .iframe_container { position: absolute; width: 100%; height: 100%; top: 0; }
+iframe { width: 100%; height: 100%; border: 0px solid white; overflow: hidden; }
+
+.clear { clear: both; }
View
2  index.html
@@ -17,8 +17,10 @@
</script>
<div id="content">
<div class="left split">
+ &nbsp;
</div>
<div class="right split">
+ &nbsp;
</div>
</div>
</body>
View
19 js/app.js
@@ -24,12 +24,16 @@
return this.template = $("#frame").html();
};
Frame.prototype.render = function() {
- var $html;
- $html = $(_.template(this.template, this.model.attributes)).css("visibility", "none");
- this.el.html($html);
- return setTimeout((function() {
- return $html.fadeIn();
- }), 200);
+ var $existingFrames, $html;
+ $html = $(_.template(this.template, this.model.attributes)).hide();
+ $existingFrames = this.$(".iframe_container");
+ this.el.append($html);
+ return setTimeout((__bind(function() {
+ return $html.fadeIn('slow', __bind(function() {
+ $existingFrames.remove();
+ return console.log($existingFrames);
+ }, this));
+ }, this)), 1000);
};
Frame.prototype.setModel = function(model) {
this.model = model;
@@ -59,7 +63,7 @@
this.currentUrlIndex = 2;
this.cycleInterval = setInterval((__bind(function() {
return this.showNext();
- }, this)), 10000);
+ }, this)), 8000);
}
if (this.model.size() > 1) {
this.right.setModel(this.model.at(1));
@@ -104,7 +108,6 @@
url: url
};
});
- console.log("route", urls);
return this.urls.refresh(urls);
};
return ApplicationController;
View
1  src/app/controllers/application_controller.coffee
@@ -6,5 +6,4 @@ class ApplicationController extends Backbone.Controller
"*urls": "handleRoute"
handleRoute: (hash) ->
urls = hash.split(",").map (url) -> { url: url }
- console.log("route", urls)
@urls.refresh(urls)
View
2  src/app/views/application_view.coffee
@@ -14,7 +14,7 @@ class ApplicationView extends Backbone.View
if @model.size() > 2
# cycle - starting on the 2nd url
@currentUrlIndex = 2
- @cycleInterval = setInterval (=> @showNext()), 10000
+ @cycleInterval = setInterval (=> @showNext()), 8000
# init with the first 2 urls
if @model.size() > 1
View
7 src/app/views/frame.coffee
@@ -2,9 +2,10 @@ class Frame extends Backbone.View
initialize: ->
@template = $("#frame").html()
render: ->
- $html = $(_.template(@template, @model.attributes)).css("visibility", "none")
- @el.html($html)
- setTimeout (-> $html.fadeIn()), 200
+ $html = $(_.template(@template, @model.attributes)).hide()
+ $existingFrames = @$(".iframe_container")
+ @el.append($html)
+ setTimeout (=> $html.fadeIn('slow', => $existingFrames.remove(); console.log($existingFrames) )), 1000
setModel: (model) ->
@model = model
@render()
Please sign in to comment.
Something went wrong with that request. Please try again.