BearPanther.com

Horizontal scrolling of a dijit.layout.ContentPane

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014

Blog

Horizontal scrolling of a dijit.layout.ContentPane

Posted on .

Welcome to part four of a five part series on bearpanther’s instamap. On the agenda today: horizontal scrolling of content in a dijit content pane. “WTF?”, you might be saying to yourself. Well, to put it another way, this post will talk about the ins and outs that make up the horizontally scrolling footer that displays photos in instamap.

First, a little background. Because building layouts in websites can be painful, especially when you want to run in multiple browsers, those geniuses behind Dojo created a set of widgets to make things easier. If you’re curious, there’s a good tutorial over on dojotoolkit.org that talks about how to use the various dijit layout widgets.

The foundation for the layout used in instamap consists of a dijit border container and a couple of dijit content panes. The focus of this post, the horizontally scrolling footer, is a single content page. I like to think of content pane as a convenient way to specify hard boundaries for content.

When the app first loads, the markup for the footer looks like this:

<div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
  <div id="instructions">
    Click the map...some photos from instagram might show up.
  </div>
</div>

I’m using dojotype, which works until Dojo 2.0, but should probably be using data-dojo-type. Something to tweak for a future version…

Anyway, the content pane is a single div and inside is another div. Not much to see there. The good stuff happens when someone does a search (which happens when the map is clicked, a location is entered or a tag is entered).

Once a search returns results, the existing footer is blown away via the content pane’s destroy method and a new one is built and inserted into the page. Here’s the code that does that:

dijit.byId("footer").destroy();

insta_width = resp.data.length * 220;
insta_content = dojo.create("div", {
  "id": "insta_content",
  "style": "width: " + insta_width + "px; height: 230px;"
});
dojo.connect(insta_content, "onclick", app.show_popup_from_photo_id);

dojo.forEach(app.photo_markup, function(p) {
  dojo.place(p, insta_content);
});

content_pane_node = dojo.create("div", { "id": "footer" });
content_pane = new dijit.layout.ContentPane({
  "content": "",
  "region": "bottom",
  "style": "height: 240px; overflow-x: scroll; padding: 0;"
}, content_pane_node);
dojo.place(insta_content, content_pane_node);
dijit.byId("main-window").addChild(content_pane);

Like I said, first thing to do is nuke the existing footer. After that, the width of horizontally scrolling div is calculated by multiplying the number of photos returned by 220. That way, when the div that holds the photos is created, the width attribute can be specified in pixels. Once there’s a div to hold the photos, each photo is added by looping through an array called photo_markup. Each element in photo_markup is a div created via the generate_markup function. Feel free to explore the source for the nuts and bolts of that one (lots of dojo.create and dojo.place).

With a div containing markup for all the photos, it’s time to create the new content pane. First, a div is created and then turned into a content pane. The important thing to note when creating the content pane is that overflow-x is specified as “scroll”. That way, when the div holding all of the photos from instagram is inserted, the content pane is set up to scroll. Finally, the content pane is inserted by calling addChild on the page’s border container. Since it was created with “region” specified as “bottom”, it automatically shows up as a footer.

The last thing to tie it all together is a little CSS for each photo:

.photo {
  display: inline-block;
  text-align: center;
  width: 220px;
  font-size: 0.8em;
  padding: 5px 0 0 0;
}

And that’s it!

Previous posts in this series:
Using dojo classes
Building a simple basemap switcher
Using JSONP APIs

Comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (1) ...