Backbone Resizeable View

Developer
Jon Beebe
Size
2,513 Kb
Views
4,048
  1. Backbone Resizeable View Previews
  2. Backbone Resizeable View HTML Codes
  3. Backbone Resizeable View CSS Codes
  4. Backbone Resizeable View JS Codes

How do I make an backbone resizeable view?

A view class that responds to the window resizing.. What is a backbone resizeable view? How do you make a backbone resizeable view? This script and codes were developed by Jon Beebe on 23 January 2023, Monday.

Backbone Resizeable View Previews
IQ Test

Backbone Resizeable View - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Backbone Resizeable View</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body > div { background: #eee; position: absolute; padding: 24px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script type="text/html" id="view-tpl"> <h1>Resizeable!</h1> <p>When you resize the window this view will automatically adjust its dimensions to fit.</p>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.5.1-bundled/backbone.marionette.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Backbone Resizeable View - Script Codes CSS Codes

body > div { background: #eee; position: absolute; padding: 24px;
}

Backbone Resizeable View - Script Codes JS Codes

var ResizeView = Backbone.View.extend({ template: '#view-tpl', initialize: function() { $(window).on('resize.resizeview', this.onResize.bind(this)); }, remove: function() { $(window).off('resize.resizeview'); Backbone.View.prototype.remove.call(this); }, render: function () { var $tmpl = $(this.template); var tmpl = _.template($tmpl.html()); this.$el.append(tmpl()); this.onResize(); return this; }, onResize: function () { var w = $(window).width() , h = $(window).height(); console.log('resize', w, h); this.resize(w, h); }, resize: function (w, h) { this.$el.css({ 'width': w, 'height': h }); }
});
var view = new ResizeView();
$('body').append(view.render().$el);
Backbone Resizeable View - Script Codes
Backbone Resizeable View - Script Codes
Home Page Home
Developer Jon Beebe
Username somethingkindawierd
Uploaded January 23, 2023
Rating 3
Size 2,513 Kb
Views 4,048
Do you need developer help for Backbone Resizeable View?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Beebe (somethingkindawierd) Script Codes
Name
Turning off Marionette wrapper div
MarionetteJS Cubed Layout
MarionetteJS Stack View Controller
Emberjs Boilerplate
React Powered Radial Progress with SVG
MarionetteJS Module Router 2
AngularJS Mobile App Scaffolding
Emberjs Simple Calendar Component
Radial Progress with SVG
Leaflet.js - Mark Radius
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!